railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sample): add an option to make controls testable in basic sample

Browse Source
This commit is contained in:
olivier bouillet 2022-09-11 17:01:53 +02:00
parent c8b54f3bbe
commit 568e1806a2
1 changed files with 124 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
examples/basic/src/VideoPlayer.android.tsx
View File

@ -43,6 +43,7 @@ class VideoPlayer extends Component {
selectedTextTrack: undefined, selectedTextTrack: undefined,
srcListId: 0, srcListId: 0,
loop: false, loop: false,
showRNVControls: false,
}; };
seekerWidth = 0 seekerWidth = 0
@ -258,6 +259,9 @@ class VideoPlayer extends Component {
toggleFullscreen() { toggleFullscreen() {
this.setState({ fullscreen: !this.state.fullscreen }) this.setState({ fullscreen: !this.state.fullscreen })
} }
toggleControls() {
this.setState({ showRNVControls: !this.state.showRNVControls })
}
toggleDecoration() { toggleDecoration() {
this.setState({ decoration: !this.state.decoration }) this.setState({ decoration: !this.state.decoration })
@ -558,22 +562,38 @@ class VideoPlayer extends Component {
else return <View /> 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() { renderOverlay() {
return ( return (
<> <>
{this.IndicatorLoadingView()} {this.IndicatorLoadingView()}
<View style={styles.topControls}> <View style={styles.topControls}>
<Text style={[styles.controlOption]}> <View style={styles.resizeModeControl}>{this.renderTopControl()}</View>
{this.srcList[this.state.srcListId]?.description || 'local file'}
</Text>
</View> </View>
{!this.state.showRNVControls ? (
<>
<View style={styles.leftControls}> <View style={styles.leftControls}>
<View style={styles.resizeModeControl}>{this.renderLeftControl()}</View> <View style={styles.resizeModeControl}>{this.renderLeftControl()}</View>
</View> </View><View style={styles.rightControls}>
<View style={styles.rightControls}>
<View style={styles.resizeModeControl}>{this.renderRightControl()}</View> <View style={styles.resizeModeControl}>{this.renderRightControl()}</View>
</View> </View><View style={styles.bottomControls}>
<View style={styles.bottomControls}>
<View style={styles.generalControls}> <View style={styles.generalControls}>
<View style={styles.generalControls}> <View style={styles.generalControls}>
<View style={styles.resizeModeControl}>{this.renderInfoControl()}</View> <View style={styles.resizeModeControl}>{this.renderInfoControl()}</View>
@ -620,13 +640,13 @@ class VideoPlayer extends Component {
style={styles.picker} style={styles.picker}
selectedValue={this.state.selectedAudioTrack?.value} selectedValue={this.state.selectedAudioTrack?.value}
onValueChange={(itemValue, itemIndex) => { onValueChange={(itemValue, itemIndex) => {
console.log('on audio value change ' + itemValue) console.log('on audio value change ' + itemValue);
this.setState({ this.setState({
selectedAudioTrack: { selectedAudioTrack: {
type: 'language', type: 'language',
value: itemValue, value: itemValue,
}, },
}) });
}} }}
> >
{this.state.audioTracks.map((track) => { {this.state.audioTracks.map((track) => {
@ -634,9 +654,8 @@ class VideoPlayer extends Component {
<Picker.Item <Picker.Item
label={track.language} label={track.language}
value={track.language} value={track.language}
key={track.language} key={track.language} />
/> );
)
})} })}
</Picker> </Picker>
)} )}
@ -648,13 +667,13 @@ class VideoPlayer extends Component {
style={styles.picker} style={styles.picker}
selectedValue={this.state.selectedTextTrack?.value} selectedValue={this.state.selectedTextTrack?.value}
onValueChange={(itemValue, itemIndex) => { onValueChange={(itemValue, itemIndex) => {
console.log('on value change ' + itemValue) console.log('on value change ' + itemValue);
this.setState({ this.setState({
selectedTextTrack: { selectedTextTrack: {
type: 'language', type: 'language',
value: itemValue, value: itemValue,
}, },
}) });
}} }}
> >
<Picker.Item label={'none'} value={'none'} key={'none'} /> <Picker.Item label={'none'} value={'none'} key={'none'} />
@ -663,13 +682,14 @@ class VideoPlayer extends Component {
<Picker.Item <Picker.Item
label={track.language} label={track.language}
value={track.language} value={track.language}
key={track.language} key={track.language} />
/>
))} ))}
</Picker> </Picker>
)} )}
</View> </View>
</View> </View></>
) : null
}
</> </>
) )
} }
@ -689,6 +709,7 @@ class VideoPlayer extends Component {
paused={this.state.paused} paused={this.state.paused}
volume={this.state.volume} volume={this.state.volume}
muted={this.state.muted} muted={this.state.muted}
controls={this.state.showRNVControls}
resizeMode={this.state.resizeMode} resizeMode={this.state.resizeMode}
onLoad={this.onLoad} onLoad={this.onLoad}
onProgress={this.onProgress} onProgress={this.onProgress}