Skip to content

Commit

Permalink
Merge pull request #7 from manse/feat/new-events
Browse files Browse the repository at this point in the history 
New Callbacks
  • Loading branch information
Ryota Mannari authored Jun 6, 2018
2 parents 8d8770d + 20204c5 commit eb55db4
Show file tree
Hide file tree
Showing 9 changed files with 283 additions and 80 deletions.
65 changes: 36 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ react-native link react-native-brightcove-player
### iOS

- Make `Podfile` like below and `pod install`

```rb
source 'https://github.com/brightcove/BrightcoveSpecs.git'

Expand All @@ -28,6 +29,7 @@ end
### Android

- Add following lines in `android/app/build.gradle`

```gradle
repositories {
maven {
Expand All @@ -42,18 +44,18 @@ repositories {
import { BrightcovePlayer } from 'react-native-brightcove-player';

export default class App extends Component {
render() {
return (
<View style={styles.container}>
<BrightcovePlayer
style={styles.player}
accountId="3636334163001"
videoId="3666678807001"
policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
/>
</View>
);
}
render() {
return (
<View style={styles.container}>
<BrightcovePlayer
style={styles.player}
accountId="3636334163001"
videoId="3666678807001"
policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
/>
</View>
);
}
}
```

Expand All @@ -62,21 +64,26 @@ export default class App extends Component {
- It may not work on Android simulator, in that case please run on device.
- For a more detailed example, please see [example/App.js](https://github.com/manse/react-native-brightcove-player/blob/master/example/App.js).

| Prop | Type | Required | Note |
| ---- | ---- | -------- | ---- |
| accountId | string | y | Brightcove AccountId |
| policyKey | string | y | Brightcove PolicyKey |
| videoId | string | y* | Brightcove VideoId. *Either videoId or referenceId is required |
| referenceId | string | y* | Brightcove ReferenceId. *Either videoId or referenceId is required |
| autoPlay | boolean | n | Whether to play automatically when video loaded |
| play | boolean | n | Control playback and pause |
| onReady | Function | n | Indicates the video can be played back |
| onPlay | Function | n | Indicates the video playback starts |
| onPause | Function | n | Indicates the video is paused |
| onEnd | Function | n | Indicates the video is played to the end |
| onProgress | Function | n | Indicates the playback head of the video advances. The playback info is passed as the first argument; `{ currentTime: number }` |

| Method | Note |
| ------ | ---- |
| Prop | Type | Description | Event Object |
| ---------------------- | -------- | ------------------------------------------------------------------------------- | ---------------------------- |
| accountId | string | Brightcove AccountId | |
| policyKey | string | Brightcove PolicyKey | |
| videoId | string | Brightcove VideoId. \*Either videoId or referenceId is required | |
| referenceId | string | Brightcove ReferenceId. \*Either videoId or referenceId is required | |
| autoPlay | boolean | Whether to play automatically when video loaded | |
| play | boolean | Control playback and pause | |
| fullscreen | boolean | Control full screen state | |
| disableDefaultControl | boolean | Disable default player control. Set true if you implement own video controller. | |
| onReady | Function | Indicates the video can be played back | |
| onPlay | Function | Indicates the video playback starts | |
| onPause | Function | Indicates the video is paused | |
| onEnd | Function | Indicates the video is played to the end | |
| onProgress | Function | Indicates the playback head of the video advances. | `{ currentTime: number }` |
| onChangeDuration | Function | Indicates the video length is changed | `{ duration: number }` |
| onUpdateBufferProgress | Function | Indicates the video loading buffer is updated | `{ bufferProgress: number }` |
| onEnterFullscreen | Function | Indicates the player enters full screen | |
| onExitFullscreen | Function | Indicates the player exit full screen | |

| Method | Description |
| ------------------------------------- | --------------------------------- |
| seekTo(timeInSeconds: number) => void | Change playhead to arbitrary time |

43 changes: 26 additions & 17 deletions android/src/main/java/jp/manse/BrightcovePlayerManager.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

import java.util.HashMap;
import java.util.Map;


Expand All @@ -20,7 +21,9 @@ public class BrightcovePlayerManager extends SimpleViewManager<BrightcovePlayerV
public static final String EVENT_PAUSE = "pause";
public static final String EVENT_END = "end";
public static final String EVENT_PROGRESS = "progress";
public static final String EVENT_FULLSCREEN = "fullscreen";
public static final String EVENT_TOGGLE_ANDROID_FULLSCREEN = "toggle_android_fullscreen";
public static final String EVENT_CHANGE_DURATION = "change_duration";
public static final String EVENT_UPDATE_BUFFER_PROGRESS = "update_buffer_progress";

private static ThemedReactContext context;

Expand Down Expand Up @@ -57,15 +60,25 @@ public void setReferenceId(BrightcovePlayerView view, String referenceId) {
}

@ReactProp(name = "autoPlay")
public void setAutoPlay(BrightcovePlayerView view, Boolean autoPlay) {
public void setAutoPlay(BrightcovePlayerView view, boolean autoPlay) {
view.setAutoPlay(autoPlay);
}

@ReactProp(name = "play")
public void setPlay(BrightcovePlayerView view, Boolean play) {
public void setPlay(BrightcovePlayerView view, boolean play) {
view.setPlay(play);
}

@ReactProp(name = "disableDefaultControl")
public void setDefaultControlDisabled(BrightcovePlayerView view, boolean disableDefaultControl) {
view.setDefaultControlDisabled(disableDefaultControl);
}

@ReactProp(name = "fullscreen")
public void setFullscreen(BrightcovePlayerView view, boolean fullscreen) {
view.setFullscreen(fullscreen);
}

@Override
public Map<String, Integer> getCommandsMap() {
return MapBuilder.of(
Expand All @@ -88,19 +101,15 @@ public void receiveCommand(BrightcovePlayerView view, int commandType, @Nullable

@Override
public @Nullable Map <String,Object> getExportedCustomDirectEventTypeConstants() {
return MapBuilder.of(
EVENT_READY,
(Object) MapBuilder.of("registrationName", "onReady"),
EVENT_PLAY,
(Object) MapBuilder.of("registrationName", "onPlay"),
EVENT_PAUSE,
(Object) MapBuilder.of("registrationName", "onPause"),
EVENT_END,
(Object) MapBuilder.of("registrationName", "onEnd"),
EVENT_PROGRESS,
(Object) MapBuilder.of("registrationName", "onProgress"),
EVENT_FULLSCREEN,
(Object) MapBuilder.of("registrationName", "onFullscreen")
);
Map<String, Object> map = new HashMap<>();
map.put(EVENT_READY, (Object) MapBuilder.of("registrationName", "onReady"));
map.put(EVENT_PLAY, (Object) MapBuilder.of("registrationName", "onPlay"));
map.put(EVENT_PAUSE, (Object) MapBuilder.of("registrationName", "onPause"));
map.put(EVENT_END, (Object) MapBuilder.of("registrationName", "onEnd"));
map.put(EVENT_PROGRESS, (Object) MapBuilder.of("registrationName", "onProgress"));
map.put(EVENT_CHANGE_DURATION, (Object) MapBuilder.of("registrationName", "onChangeDuration"));
map.put(EVENT_UPDATE_BUFFER_PROGRESS, (Object) MapBuilder.of("registrationName", "onUpdateBufferProgress"));
map.put(EVENT_TOGGLE_ANDROID_FULLSCREEN, (Object) MapBuilder.of("registrationName", "onToggleAndroidFullscreen"));
return map;
}
}
71 changes: 61 additions & 10 deletions android/src/main/java/jp/manse/BrightcovePlayerView.java
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
package jp.manse;

import android.graphics.Color;
import android.os.Handler;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceView;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.view.View;
import android.widget.RelativeLayout;

import com.brightcove.player.edge.Catalog;
Expand All @@ -25,28 +25,37 @@
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.events.RCTEventEmitter;

import java.util.Map;

public class BrightcovePlayerView extends RelativeLayout {
private ThemedReactContext context;
private BrightcoveExoPlayerVideoView playerVideoView;
private BrightcoveMediaController mediaController;
private String policyKey;
private String accountId;
private String videoId;
private String referenceId;
private Catalog catalog;
private Boolean autoPlay = true;
private Boolean playing = false;
private boolean autoPlay = true;
private boolean playing = false;
private boolean fullscreen = false;

public BrightcovePlayerView(ThemedReactContext context) {
this(context, null);
}

public BrightcovePlayerView(ThemedReactContext context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
this.setBackgroundColor(Color.BLACK);
this.playerVideoView = new BrightcoveExoPlayerVideoView(context);

this.playerVideoView = new BrightcoveExoPlayerVideoView(this.context);
this.addView(this.playerVideoView);
this.playerVideoView.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
this.playerVideoView.finishInitialization();
this.playerVideoView.setMediaController(new BrightcoveMediaController(this.playerVideoView));
this.mediaController = new BrightcoveMediaController(this.playerVideoView);
this.playerVideoView.setMediaController(this.mediaController);
this.requestLayout();
ViewCompat.setTranslationZ(this, 9999);

EventEmitter eventEmitter = this.playerVideoView.getEventEmitter();
Expand Down Expand Up @@ -103,17 +112,39 @@ public void processEvent(Event e) {
eventEmitter.on(EventType.ENTER_FULL_SCREEN, new EventListener() {
@Override
public void processEvent(Event e) {
mediaController.show();
WritableMap event = Arguments.createMap();
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_FULLSCREEN, event);
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_TOGGLE_ANDROID_FULLSCREEN, event);
}
});
eventEmitter.on(EventType.EXIT_FULL_SCREEN, new EventListener() {
@Override
public void processEvent(Event e) {
mediaController.show();
WritableMap event = Arguments.createMap();
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_FULLSCREEN, event);
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_TOGGLE_ANDROID_FULLSCREEN, event);
}
});
eventEmitter.on(EventType.VIDEO_DURATION_CHANGED, new EventListener() {
@Override
public void processEvent(Event e) {
Integer duration = (Integer)e.properties.get(Event.VIDEO_DURATION);
WritableMap event = Arguments.createMap();
event.putDouble("duration", duration / 1000d);
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_CHANGE_DURATION, event);
}
});
eventEmitter.on(EventType.BUFFERED_UPDATE, new EventListener() {
@Override
public void processEvent(Event e) {
Integer percentComplete = (Integer)e.properties.get(Event.PERCENT_COMPLETE);
WritableMap event = Arguments.createMap();
event.putDouble("bufferProgress", percentComplete / 100d);
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_UPDATE_BUFFER_PROGRESS, event);
}
});
}
Expand Down Expand Up @@ -144,11 +175,11 @@ public void setReferenceId(String referenceId) {
this.loadMovie();
}

public void setAutoPlay(Boolean autoPlay) {
public void setAutoPlay(boolean autoPlay) {
this.autoPlay = autoPlay;
}

public void setPlay(Boolean play) {
public void setPlay(boolean play) {
if (this.playing == play) return;
if (play) {
this.playerVideoView.start();
Expand All @@ -157,6 +188,19 @@ public void setPlay(Boolean play) {
}
}

public void setDefaultControlDisabled(boolean disabled) {
this.mediaController.hide();
this.mediaController.setShowHideTimeout(disabled ? 1 : 4000);
}

public void setFullscreen(boolean fullscreen) {
this.mediaController.show();
WritableMap event = Arguments.createMap();
event.putBoolean("fullscreen", fullscreen);
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_TOGGLE_ANDROID_FULLSCREEN, event);
}

public void seekTo(int time) {
this.playerVideoView.seekTo(time);
}
Expand Down Expand Up @@ -197,4 +241,11 @@ private void fixVideoLayout() {
int topOffset = (viewHeight - surfaceHeight) / 2;
surfaceView.layout(leftOffset, topOffset, leftOffset + surfaceWidth, topOffset + surfaceHeight);
}

private void printKeys(Map<String, Object> map) {
Log.d("debug", "-----------");
for(Map.Entry<String, Object> entry : map.entrySet()) {
Log.d("debug", entry.getKey());
}
}
}
Loading

0 comments on commit eb55db4

Please sign in to comment.