Open rndevzaki opened 4 years ago
`import React, {Component} from 'react'; import { StyleSheet, View, Dimensions, TouchableNativeFeedback, Text, Slider
} from 'react-native'; import Video from 'react-native-video'; import VlcPlayer from 'react-native-vlc-player'; import Icon from 'react-native-vector-icons';
const {width}= Dimensions.get('window'); const samplevideo = require('./sample.mp4');
export default class App extends React.Component{ constructor(p){ super (p); this.state = { currentTime:0, duration:0.1, paused:false, overlay:false,
} lasttap = null; handleDoubletap = (doubleTapCallback,singleTapCallback)=>{ const now = Date.now(); const DoubleTapDelay=300; if(this.lasttap&& (now - this.lasttap)< DoubleTapDelay){ clearTimeout(this.timer); doubleTapCallback();
}else this.lasttap=now; this.timer=setTimeout(()=>{ singleTapCallback }, DoubleTapDelay )
}
}
getTime=t=>{
const digit = n => n<10? 0${n}
:${n}
;
const sec = digit(Math.floor(t % 60));
const min = digit(Math.floor((t/60) % 60));
const hr = digit(Math.floor((t/3600 )% 60));
return hr+':'+min+':'+sec
}
load=({duration})=>this.setState({duration})
load=({progress})=>this.setState({progress})
backward=()=>{
this.video.seek(this.state.currentTime - 5)
clearTimeout(this.overlayTimer);
this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)
}
forward=()=>{
this.video.seek(this.state.currentTime + 5)
clearTimeout(this.overlayTimer);
this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)
}
onslide= slide =>{
this.video.seek(duration * this.state.duration)
clearTimeout(this.overlayTimer);
this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)
}
seekleft =()=>{
const {currentTime} =this.state
this.handleDoubletap(()=>{this.video.seek(currentTime-5);
}, ()=>{
clearTimeout(this.overlayTimer);
this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)
}) } } seekright =()=>{ const {currentTime} =this.state this.handleDoubletap(()=>{this.video.seek(currentTime+5); }, ()=>{ clearTimeout(this.overlayTimer); this.overlayTimer= setTimeout(()=>this.setState({overlay:false}),3000)
})
render = () =>{ const {currentTime,duration,overlay,paused}=this.state return (
<View style={styles.overlay}>
{! overlay ? <View style={{backgroundColor:'#0006',...style.overlayset}} >
<Icon name ='backward' style={styles.ico} onPress={this.backward}/>
<Icon name ={paused ? 'play' :'pause'} style={styles.ico} onPress={()=> this.setState({ paused: !paused})}/>
<Icon name ='forward' style={styles.ico} onPress={this.forward}/>
<View style={styles.slidercon}>
<View style={styles.timer}>
<Text style={{color:'white'}}>{this.getTime(currentTime)}</Text>
<Text style={{color:'white'}}>{this.getTime(duration)}</Text>
</View>
<Slider
maximumTrackTintColor='white'
minimumTrackTintColor='white'
thumbTintColor='white'
value={currentTime/duration}
onValueChange={this.onslide}
/>
</View>
<TouchableNativeFeedback onPress={this.seekleft}/><View style={{flex:1,}}></View>
<TouchableNativeFeedback onPress={this.seekright}/><View style={{flex:1,}}></View>
</View>}
</View>
</View>
);
} };
const styles = StyleSheet.create({ container:{ flex: 1,
}, overlay:{ ...StyleSheet.absoluteFillObject
}, overlayset:{ flex:1, flexDirection: 'row', }, ico:{ color: 'white', flex:1, textAlign:'center', textAlignVertical:'center', fontSize:25
},
slidercon:{
position : 'absolute',
left :0,
right:0,
bottom: 0,
}, timer :{ flexDirection:'row', justifyContent:'center', paddingHorizontal:5
} });`
render is not a function().instance.render is undefined