Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(sample): make controls testable in sample #2852

Merged
merged 6 commits into from
Sep 28, 2022
Merged

feat(sample): make controls testable in sample #2852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
568e180
feat(sample): add an option to make controls testable in basic sample
Sep 11, 2022
747665b
chore: update yarn.lock
Sep 11, 2022
4c10195
doc: fix changelog
Sep 11, 2022
bc814c6
Merge branch 'master' into feat/make_controls_testable_in_sample
freeboub Sep 14, 2022
541deec
Merge branch 'master' into feat/make_controls_testable_in_sample
freeboub Sep 28, 2022
78a57e1
Update CHANGELOG.md
freeboub Sep 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
## Changelog
### Version 6.0.0-alpha4

### Version 6.0.0-alpha.4
- Sample: Add react-native-video controls support [#2852](https://github.com/react-native-video/react-native-video/pull/2852)
- Android: Switch Google's maven repository to default `google()` [#2860](https://github.com/react-native-video/react-native-video/pull/2860)
- Android: Implement focusable prop so the video view can toggle whether it is focusable for non-touch devices [#2819](https://github.com/react-native-video/react-native-video/issues/2819)

### Version 6.0.0-alpha3
### Version 6.0.0-alpha.3
- fix ios build [#2854](https://gthub.com/react-native-video/react-native-video/pull/2854)

### Version 6.0.0-alpha.2

- Upgrade ExoPlayer to 2.18.1 [#2846](https://github.com/react-native-video/react-native-video/pull/2846)
- Feature add new APIs to query supported features of device decoder (widevine level & codec capabilities) on android [#2740](https://github.com/react-native-video/react-native-video/pull/2740)
- Feature add support of subtitle styling on android [#2759](https://github.com/react-native-video/react-native-video/pull/2759)
Expand Down
233 changes: 127 additions & 106 deletions examples/basic/src/VideoPlayer.android.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ class VideoPlayer extends Component {
selectedTextTrack: undefined,
srcListId: 0,
loop: false,
showRNVControls: false,
};

seekerWidth = 0
Expand Down Expand Up @@ -258,6 +259,9 @@ class VideoPlayer extends Component {
toggleFullscreen() {
this.setState({ fullscreen: !this.state.fullscreen })
}
toggleControls() {
this.setState({ showRNVControls: !this.state.showRNVControls })
}

toggleDecoration() {
this.setState({ decoration: !this.state.decoration })
Expand Down Expand Up @@ -558,118 +562,134 @@ class VideoPlayer extends Component {
else return <View />
}

renderTopControl() {
return (<>
<Text style={[styles.controlOption]}>
{this.srcList[this.state.srcListId]?.description || 'local file'}
</Text>
<View >
<TouchableOpacity
onPress={() => {
this.toggleControls()
}}
>
<Text style={[styles.leftRightControlOption]}>{this.state.showRNVControls ? 'Hide controls' : 'Show controls'}</Text>
</TouchableOpacity>
</View>
</>)
}


renderOverlay() {
return (
<>
{this.IndicatorLoadingView()}
<View style={styles.topControls}>
<Text style={[styles.controlOption]}>
{this.srcList[this.state.srcListId]?.description || 'local file'}
</Text>
</View>
<View style={styles.leftControls}>
<View style={styles.resizeModeControl}>{this.renderLeftControl()}</View>
</View>
<View style={styles.rightControls}>
<View style={styles.resizeModeControl}>{this.renderRightControl()}</View>
</View>
<View style={styles.bottomControls}>
<View style={styles.generalControls}>
<View style={styles.generalControls}>
<View style={styles.resizeModeControl}>{this.renderInfoControl()}</View>
</View>
<View style={styles.resizeModeControl}>{this.renderPause()}</View>
<View style={styles.resizeModeControl}>
{this.renderRepeatModeControl()}
</View>
<View style={styles.resizeModeControl}>
{this.renderFullScreenControl()}
</View>
<View style={styles.resizeModeControl}>
{this.renderDecorationsControl()}
</View>
</View>
<View style={styles.generalControls}>
<View style={styles.rateControl}>
{this.renderRateControl(0.25)}
{this.renderRateControl(0.5)}
{this.renderRateControl(1.0)}
{this.renderRateControl(1.5)}
{this.renderRateControl(2.0)}
</View>

<View style={styles.volumeControl}>
{this.renderVolumeControl(0.5)}
{this.renderVolumeControl(1)}
{this.renderVolumeControl(1.5)}
</View>

<View style={styles.resizeModeControl}>
{this.renderResizeModeControl('cover')}
{this.renderResizeModeControl('contain')}
{this.renderResizeModeControl('stretch')}
</View>
</View>
{this.renderSeekBar()}
<View style={styles.generalControls}>
<Text style={styles.controlOption}>AudioTrack</Text>
{this.state.audioTracks?.length <= 0 ? (
<Text style={styles.controlOption}>empty</Text>
) : (
<Picker
style={styles.picker}
selectedValue={this.state.selectedAudioTrack?.value}
onValueChange={(itemValue, itemIndex) => {
console.log('on audio value change ' + itemValue)
this.setState({
selectedAudioTrack: {
type: 'language',
value: itemValue,
},
})
}}
>
{this.state.audioTracks.map((track) => {
return (
<Picker.Item
label={track.language}
value={track.language}
key={track.language}
/>
)
})}
</Picker>
)}
<Text style={styles.controlOption}>TextTrack</Text>
{this.state.textTracks?.length <= 0 ? (
<Text style={styles.controlOption}>empty</Text>
) : (
<Picker
style={styles.picker}
selectedValue={this.state.selectedTextTrack?.value}
onValueChange={(itemValue, itemIndex) => {
console.log('on value change ' + itemValue)
this.setState({
selectedTextTrack: {
type: 'language',
value: itemValue,
},
})
}}
>
<Picker.Item label={'none'} value={'none'} key={'none'} />

{this.state.textTracks.map((track) => (
<Picker.Item
label={track.language}
value={track.language}
key={track.language}
/>
))}
</Picker>
)}
</View>
<View style={styles.resizeModeControl}>{this.renderTopControl()}</View>
</View>
{!this.state.showRNVControls ? (
<>
<View style={styles.leftControls}>
<View style={styles.resizeModeControl}>{this.renderLeftControl()}</View>
</View><View style={styles.rightControls}>
<View style={styles.resizeModeControl}>{this.renderRightControl()}</View>
</View><View style={styles.bottomControls}>
<View style={styles.generalControls}>
<View style={styles.generalControls}>
<View style={styles.resizeModeControl}>{this.renderInfoControl()}</View>
</View>
<View style={styles.resizeModeControl}>{this.renderPause()}</View>
<View style={styles.resizeModeControl}>
{this.renderRepeatModeControl()}
</View>
<View style={styles.resizeModeControl}>
{this.renderFullScreenControl()}
</View>
<View style={styles.resizeModeControl}>
{this.renderDecorationsControl()}
</View>
</View>
<View style={styles.generalControls}>
<View style={styles.rateControl}>
{this.renderRateControl(0.25)}
{this.renderRateControl(0.5)}
{this.renderRateControl(1.0)}
{this.renderRateControl(1.5)}
{this.renderRateControl(2.0)}
</View>

<View style={styles.volumeControl}>
{this.renderVolumeControl(0.5)}
{this.renderVolumeControl(1)}
{this.renderVolumeControl(1.5)}
</View>

<View style={styles.resizeModeControl}>
{this.renderResizeModeControl('cover')}
{this.renderResizeModeControl('contain')}
{this.renderResizeModeControl('stretch')}
</View>
</View>
{this.renderSeekBar()}
<View style={styles.generalControls}>
<Text style={styles.controlOption}>AudioTrack</Text>
{this.state.audioTracks?.length <= 0 ? (
<Text style={styles.controlOption}>empty</Text>
) : (
<Picker
style={styles.picker}
selectedValue={this.state.selectedAudioTrack?.value}
onValueChange={(itemValue, itemIndex) => {
console.log('on audio value change ' + itemValue);
this.setState({
selectedAudioTrack: {
type: 'language',
value: itemValue,
},
});
}}
>
{this.state.audioTracks.map((track) => {
return (
<Picker.Item
label={track.language}
value={track.language}
key={track.language} />
);
})}
</Picker>
)}
<Text style={styles.controlOption}>TextTrack</Text>
{this.state.textTracks?.length <= 0 ? (
<Text style={styles.controlOption}>empty</Text>
) : (
<Picker
style={styles.picker}
selectedValue={this.state.selectedTextTrack?.value}
onValueChange={(itemValue, itemIndex) => {
console.log('on value change ' + itemValue);
this.setState({
selectedTextTrack: {
type: 'language',
value: itemValue,
},
});
}}
>
<Picker.Item label={'none'} value={'none'} key={'none'} />

{this.state.textTracks.map((track) => (
<Picker.Item
label={track.language}
value={track.language}
key={track.language} />
))}
</Picker>
)}
</View>
</View></>
) : null
}
</>
)
}
Expand All @@ -689,6 +709,7 @@ class VideoPlayer extends Component {
paused={this.state.paused}
volume={this.state.volume}
muted={this.state.muted}
controls={this.state.showRNVControls}
resizeMode={this.state.resizeMode}
onLoad={this.onLoad}
onProgress={this.onProgress}
Expand Down
17 changes: 2 additions & 15 deletions examples/basic/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2573,11 +2573,6 @@ electron-to-chromium@^1.4.17:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.59.tgz#657f2588c048fb95975779f8fea101fad854de89"
integrity sha512-AOJ3cAE0TWxz4fQ9zkND5hWrQg16nsZKVz9INOot1oV//u4wWu5xrj9CQMmPTYskkZRunSRc9sAnr4EkexXokg==

eme-encryption-scheme-polyfill@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.4.tgz#7d818302af3f3b19d5974255dcc92dc087413845"
integrity sha512-MHYJX1v145Pjj2YJTrVVuJOYyXrxGVy8LWf6kV5M4jrV/GyoeuJKyTuD+GaD+VAiE8Ip+MptiH4dXk6ZVmMNow==

emitter-listener@^1.0.1, emitter-listener@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/emitter-listener/-/emitter-listener-1.1.2.tgz#56b140e8f6992375b3d7cb2cab1cc7432d9632e8"
Expand Down Expand Up @@ -5774,13 +5769,12 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.8.4, react-is@^16.8.6:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

react-native-video@../..:
version "6.0.0-alpha1"
react-native-video@../../:
version "6.0.0-alpha.1"
dependencies:
deprecated-react-native-prop-types "^2.2.0"
keymirror "^0.1.1"
prop-types "^15.7.2"
shaka-player "^3.3.2"

react-native-windows@0.63.41:
version "0.63.41"
Expand Down Expand Up @@ -6309,13 +6303,6 @@ setprototypeof@1.2.0:
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==

shaka-player@^3.3.2:
version "3.3.4"
resolved "https://registry.yarnpkg.com/shaka-player/-/shaka-player-3.3.4.tgz#7d137a18fc0f55c50852a4348c8319495b5fa546"
integrity sha512-8PrUBA8aOABGvhQVa59XMoPo5myAoQF4ptx6gvZWPOBtdsyVaamqQKELY77ikZJ1ejup7BmHf42MXGFmxQfcaA==
dependencies:
eme-encryption-scheme-polyfill "^2.0.3"

shallow-clone@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
Expand Down