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,
srcListId: 0,
loop: false,
showRNVControls: false,
};
seekerWidth = 0
@ -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 })
@ -558,22 +562,38 @@ 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 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><View style={styles.rightControls}>
<View style={styles.resizeModeControl}>{this.renderRightControl()}</View>
</View>
<View style={styles.bottomControls}>
</View><View style={styles.bottomControls}>
<View style={styles.generalControls}>
<View style={styles.generalControls}>
<View style={styles.resizeModeControl}>{this.renderInfoControl()}</View>
@ -620,13 +640,13 @@ class VideoPlayer extends Component {
style={styles.picker}
selectedValue={this.state.selectedAudioTrack?.value}
onValueChange={(itemValue, itemIndex) => {
console.log('on audio value change ' + itemValue)
console.log('on audio value change ' + itemValue);
this.setState({
selectedAudioTrack: {
type: 'language',
value: itemValue,
},
})
});
}}
>
{this.state.audioTracks.map((track) => {
@ -634,9 +654,8 @@ class VideoPlayer extends Component {
<Picker.Item
label={track.language}
value={track.language}
key={track.language}
/>
)
key={track.language} />
);
})}
</Picker>
)}
@ -648,13 +667,13 @@ class VideoPlayer extends Component {
style={styles.picker}
selectedValue={this.state.selectedTextTrack?.value}
onValueChange={(itemValue, itemIndex) => {
console.log('on value change ' + itemValue)
console.log('on value change ' + itemValue);
this.setState({
selectedTextTrack: {
type: 'language',
value: itemValue,
},
})
});
}}
>
<Picker.Item label={'none'} value={'none'} key={'none'} />
@ -663,13 +682,14 @@ class VideoPlayer extends Component {
<Picker.Item
label={track.language}
value={track.language}
key={track.language}
/>
key={track.language} />
))}
</Picker>
)}
</View>
</View>
</View></>
) : null
}
</>
)
}
@ -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}