Skip to content

Commit eb55db4

Browse files
author
Ryota Mannari
authored
Merge pull request #7 from manse/feat/new-events
New Callbacks
2 parents 8d8770d + 20204c5 commit eb55db4

9 files changed

+283
-80
lines changed

‎README.md

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ react-native link react-native-brightcove-player
1414
### iOS
1515

1616
- Make `Podfile` like below and `pod install`
17+
1718
```rb
1819
source 'https://github.com/brightcove/BrightcoveSpecs.git'
1920

@@ -28,6 +29,7 @@ end
2829
### Android
2930

3031
- Add following lines in `android/app/build.gradle`
32+
3133
```gradle
3234
repositories {
3335
maven {
@@ -42,18 +44,18 @@ repositories {
4244
import { BrightcovePlayer } from 'react-native-brightcove-player';
4345

4446
export default class App extends Component {
45-
render() {
46-
return (
47-
<View style={styles.container}>
48-
<BrightcovePlayer
49-
style={styles.player}
50-
accountId="3636334163001"
51-
videoId="3666678807001"
52-
policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
53-
/>
54-
</View>
55-
);
56-
}
47+
render() {
48+
return (
49+
<View style={styles.container}>
50+
<BrightcovePlayer
51+
style={styles.player}
52+
accountId="3636334163001"
53+
videoId="3666678807001"
54+
policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
55+
/>
56+
</View>
57+
);
58+
}
5759
}
5860
```
5961

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

65-
| Prop | Type | Required | Note |
66-
| ---- | ---- | -------- | ---- |
67-
| accountId | string | y | Brightcove AccountId |
68-
| policyKey | string | y | Brightcove PolicyKey |
69-
| videoId | string | y* | Brightcove VideoId. *Either videoId or referenceId is required |
70-
| referenceId | string | y* | Brightcove ReferenceId. *Either videoId or referenceId is required |
71-
| autoPlay | boolean | n | Whether to play automatically when video loaded |
72-
| play | boolean | n | Control playback and pause |
73-
| onReady | Function | n | Indicates the video can be played back |
74-
| onPlay | Function | n | Indicates the video playback starts |
75-
| onPause | Function | n | Indicates the video is paused |
76-
| onEnd | Function | n | Indicates the video is played to the end |
77-
| onProgress | Function | n | Indicates the playback head of the video advances. The playback info is passed as the first argument; `{ currentTime: number }` |
78-
79-
| Method | Note |
80-
| ------ | ---- |
67+
| Prop | Type | Description | Event Object |
68+
| ---------------------- | -------- | ------------------------------------------------------------------------------- | ---------------------------- |
69+
| accountId | string | Brightcove AccountId | |
70+
| policyKey | string | Brightcove PolicyKey | |
71+
| videoId | string | Brightcove VideoId. \*Either videoId or referenceId is required | |
72+
| referenceId | string | Brightcove ReferenceId. \*Either videoId or referenceId is required | |
73+
| autoPlay | boolean | Whether to play automatically when video loaded | |
74+
| play | boolean | Control playback and pause | |
75+
| fullscreen | boolean | Control full screen state | |
76+
| disableDefaultControl | boolean | Disable default player control. Set true if you implement own video controller. | |
77+
| onReady | Function | Indicates the video can be played back | |
78+
| onPlay | Function | Indicates the video playback starts | |
79+
| onPause | Function | Indicates the video is paused | |
80+
| onEnd | Function | Indicates the video is played to the end | |
81+
| onProgress | Function | Indicates the playback head of the video advances. | `{ currentTime: number }` |
82+
| onChangeDuration | Function | Indicates the video length is changed | `{ duration: number }` |
83+
| onUpdateBufferProgress | Function | Indicates the video loading buffer is updated | `{ bufferProgress: number }` |
84+
| onEnterFullscreen | Function | Indicates the player enters full screen | |
85+
| onExitFullscreen | Function | Indicates the player exit full screen | |
86+
87+
| Method | Description |
88+
| ------------------------------------- | --------------------------------- |
8189
| seekTo(timeInSeconds: number) => void | Change playhead to arbitrary time |
82-

‎android/src/main/java/jp/manse/BrightcovePlayerManager.java

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import com.facebook.react.uimanager.ThemedReactContext;
1010
import com.facebook.react.uimanager.annotations.ReactProp;
1111

12+
import java.util.HashMap;
1213
import java.util.Map;
1314

1415

@@ -20,7 +21,9 @@ public class BrightcovePlayerManager extends SimpleViewManager<BrightcovePlayerV
2021
public static final String EVENT_PAUSE = "pause";
2122
public static final String EVENT_END = "end";
2223
public static final String EVENT_PROGRESS = "progress";
23-
public static final String EVENT_FULLSCREEN = "fullscreen";
24+
public static final String EVENT_TOGGLE_ANDROID_FULLSCREEN = "toggle_android_fullscreen";
25+
public static final String EVENT_CHANGE_DURATION = "change_duration";
26+
public static final String EVENT_UPDATE_BUFFER_PROGRESS = "update_buffer_progress";
2427

2528
private static ThemedReactContext context;
2629

@@ -57,15 +60,25 @@ public void setReferenceId(BrightcovePlayerView view, String referenceId) {
5760
}
5861

5962
@ReactProp(name = "autoPlay")
60-
public void setAutoPlay(BrightcovePlayerView view, Boolean autoPlay) {
63+
public void setAutoPlay(BrightcovePlayerView view, boolean autoPlay) {
6164
view.setAutoPlay(autoPlay);
6265
}
6366

6467
@ReactProp(name = "play")
65-
public void setPlay(BrightcovePlayerView view, Boolean play) {
68+
public void setPlay(BrightcovePlayerView view, boolean play) {
6669
view.setPlay(play);
6770
}
6871

72+
@ReactProp(name = "disableDefaultControl")
73+
public void setDefaultControlDisabled(BrightcovePlayerView view, boolean disableDefaultControl) {
74+
view.setDefaultControlDisabled(disableDefaultControl);
75+
}
76+
77+
@ReactProp(name = "fullscreen")
78+
public void setFullscreen(BrightcovePlayerView view, boolean fullscreen) {
79+
view.setFullscreen(fullscreen);
80+
}
81+
6982
@Override
7083
public Map<String, Integer> getCommandsMap() {
7184
return MapBuilder.of(
@@ -88,19 +101,15 @@ public void receiveCommand(BrightcovePlayerView view, int commandType, @Nullable
88101

89102
@Override
90103
public @Nullable Map <String,Object> getExportedCustomDirectEventTypeConstants() {
91-
return MapBuilder.of(
92-
EVENT_READY,
93-
(Object) MapBuilder.of("registrationName", "onReady"),
94-
EVENT_PLAY,
95-
(Object) MapBuilder.of("registrationName", "onPlay"),
96-
EVENT_PAUSE,
97-
(Object) MapBuilder.of("registrationName", "onPause"),
98-
EVENT_END,
99-
(Object) MapBuilder.of("registrationName", "onEnd"),
100-
EVENT_PROGRESS,
101-
(Object) MapBuilder.of("registrationName", "onProgress"),
102-
EVENT_FULLSCREEN,
103-
(Object) MapBuilder.of("registrationName", "onFullscreen")
104-
);
104+
Map<String, Object> map = new HashMap<>();
105+
map.put(EVENT_READY, (Object) MapBuilder.of("registrationName", "onReady"));
106+
map.put(EVENT_PLAY, (Object) MapBuilder.of("registrationName", "onPlay"));
107+
map.put(EVENT_PAUSE, (Object) MapBuilder.of("registrationName", "onPause"));
108+
map.put(EVENT_END, (Object) MapBuilder.of("registrationName", "onEnd"));
109+
map.put(EVENT_PROGRESS, (Object) MapBuilder.of("registrationName", "onProgress"));
110+
map.put(EVENT_CHANGE_DURATION, (Object) MapBuilder.of("registrationName", "onChangeDuration"));
111+
map.put(EVENT_UPDATE_BUFFER_PROGRESS, (Object) MapBuilder.of("registrationName", "onUpdateBufferProgress"));
112+
map.put(EVENT_TOGGLE_ANDROID_FULLSCREEN, (Object) MapBuilder.of("registrationName", "onToggleAndroidFullscreen"));
113+
return map;
105114
}
106115
}

‎android/src/main/java/jp/manse/BrightcovePlayerView.java

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
package jp.manse;
22

33
import android.graphics.Color;
4+
import android.os.Handler;
45
import android.support.v4.view.ViewCompat;
56
import android.util.AttributeSet;
67
import android.util.Log;
78
import android.view.SurfaceView;
8-
import android.view.ViewGroup;
9-
import android.widget.FrameLayout;
9+
import android.view.View;
1010
import android.widget.RelativeLayout;
1111

1212
import com.brightcove.player.edge.Catalog;
@@ -25,28 +25,37 @@
2525
import com.facebook.react.uimanager.ThemedReactContext;
2626
import com.facebook.react.uimanager.events.RCTEventEmitter;
2727

28+
import java.util.Map;
29+
2830
public class BrightcovePlayerView extends RelativeLayout {
31+
private ThemedReactContext context;
2932
private BrightcoveExoPlayerVideoView playerVideoView;
33+
private BrightcoveMediaController mediaController;
3034
private String policyKey;
3135
private String accountId;
3236
private String videoId;
3337
private String referenceId;
3438
private Catalog catalog;
35-
private Boolean autoPlay = true;
36-
private Boolean playing = false;
39+
private boolean autoPlay = true;
40+
private boolean playing = false;
41+
private boolean fullscreen = false;
3742

3843
public BrightcovePlayerView(ThemedReactContext context) {
3944
this(context, null);
4045
}
4146

4247
public BrightcovePlayerView(ThemedReactContext context, AttributeSet attrs) {
4348
super(context, attrs);
49+
this.context = context;
4450
this.setBackgroundColor(Color.BLACK);
45-
this.playerVideoView = new BrightcoveExoPlayerVideoView(context);
51+
52+
this.playerVideoView = new BrightcoveExoPlayerVideoView(this.context);
4653
this.addView(this.playerVideoView);
4754
this.playerVideoView.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
4855
this.playerVideoView.finishInitialization();
49-
this.playerVideoView.setMediaController(new BrightcoveMediaController(this.playerVideoView));
56+
this.mediaController = new BrightcoveMediaController(this.playerVideoView);
57+
this.playerVideoView.setMediaController(this.mediaController);
58+
this.requestLayout();
5059
ViewCompat.setTranslationZ(this, 9999);
5160

5261
EventEmitter eventEmitter = this.playerVideoView.getEventEmitter();
@@ -103,17 +112,39 @@ public void processEvent(Event e) {
103112
eventEmitter.on(EventType.ENTER_FULL_SCREEN, new EventListener() {
104113
@Override
105114
public void processEvent(Event e) {
115+
mediaController.show();
106116
WritableMap event = Arguments.createMap();
107117
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
108-
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_FULLSCREEN, event);
118+
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_TOGGLE_ANDROID_FULLSCREEN, event);
109119
}
110120
});
111121
eventEmitter.on(EventType.EXIT_FULL_SCREEN, new EventListener() {
112122
@Override
113123
public void processEvent(Event e) {
124+
mediaController.show();
114125
WritableMap event = Arguments.createMap();
115126
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
116-
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_FULLSCREEN, event);
127+
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_TOGGLE_ANDROID_FULLSCREEN, event);
128+
}
129+
});
130+
eventEmitter.on(EventType.VIDEO_DURATION_CHANGED, new EventListener() {
131+
@Override
132+
public void processEvent(Event e) {
133+
Integer duration = (Integer)e.properties.get(Event.VIDEO_DURATION);
134+
WritableMap event = Arguments.createMap();
135+
event.putDouble("duration", duration / 1000d);
136+
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
137+
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_CHANGE_DURATION, event);
138+
}
139+
});
140+
eventEmitter.on(EventType.BUFFERED_UPDATE, new EventListener() {
141+
@Override
142+
public void processEvent(Event e) {
143+
Integer percentComplete = (Integer)e.properties.get(Event.PERCENT_COMPLETE);
144+
WritableMap event = Arguments.createMap();
145+
event.putDouble("bufferProgress", percentComplete / 100d);
146+
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
147+
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_UPDATE_BUFFER_PROGRESS, event);
117148
}
118149
});
119150
}
@@ -144,11 +175,11 @@ public void setReferenceId(String referenceId) {
144175
this.loadMovie();
145176
}
146177

147-
public void setAutoPlay(Boolean autoPlay) {
178+
public void setAutoPlay(boolean autoPlay) {
148179
this.autoPlay = autoPlay;
149180
}
150181

151-
public void setPlay(Boolean play) {
182+
public void setPlay(boolean play) {
152183
if (this.playing == play) return;
153184
if (play) {
154185
this.playerVideoView.start();
@@ -157,6 +188,19 @@ public void setPlay(Boolean play) {
157188
}
158189
}
159190

191+
public void setDefaultControlDisabled(boolean disabled) {
192+
this.mediaController.hide();
193+
this.mediaController.setShowHideTimeout(disabled ? 1 : 4000);
194+
}
195+
196+
public void setFullscreen(boolean fullscreen) {
197+
this.mediaController.show();
198+
WritableMap event = Arguments.createMap();
199+
event.putBoolean("fullscreen", fullscreen);
200+
ReactContext reactContext = (ReactContext) BrightcovePlayerView.this.getContext();
201+
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(BrightcovePlayerView.this.getId(), BrightcovePlayerManager.EVENT_TOGGLE_ANDROID_FULLSCREEN, event);
202+
}
203+
160204
public void seekTo(int time) {
161205
this.playerVideoView.seekTo(time);
162206
}
@@ -197,4 +241,11 @@ private void fixVideoLayout() {
197241
int topOffset = (viewHeight - surfaceHeight) / 2;
198242
surfaceView.layout(leftOffset, topOffset, leftOffset + surfaceWidth, topOffset + surfaceHeight);
199243
}
244+
245+
private void printKeys(Map<String, Object> map) {
246+
Log.d("debug", "-----------");
247+
for(Map.Entry<String, Object> entry : map.entrySet()) {
248+
Log.d("debug", entry.getKey());
249+
}
250+
}
200251
}

0 commit comments

Comments
 (0)