'use strict';
import React, {
Component
} from 'react';
import {
AlertIOS,
AppRegistry,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import Video,{FilterType} from 'react-native-video';
const adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/"
+ "ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp"
+ "&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite"
+ "%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=";
const filterTypes = [
FilterType.NONE,
FilterType.INVERT,
FilterType.MONOCHROME,
FilterType.POSTERIZE,
FilterType.FALSE,
FilterType.MAXIMUMCOMPONENT,
FilterType.MINIMUMCOMPONENT,
FilterType.CHROME,
FilterType.FADE,
FilterType.INSTANT,
FilterType.MONO,
FilterType.NOIR,
FilterType.PROCESS,
FilterType.TONAL,
FilterType.TRANSFER,
FilterType.SEPIA
];
class VideoPlayer extends Component {
constructor(props) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
this.onBuffer = this.onBuffer.bind(this);
}
state = {
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
controls: false,
paused: true,
skin: 'custom',
ignoreSilentSwitch: null,
isBuffering: false,
filter: FilterType.NONE,
filterEnabled: true
};
onLoad(data) {
console.log('On load fired!');
this.setState({duration: data.duration});
}
onProgress(data) {
this.setState({currentTime: data.currentTime});
}
onBuffer({ isBuffering }: { isBuffering: boolean }) {
this.setState({ isBuffering });
}
getCurrentTimePercentage() {
if (this.state.currentTime > 0) {
return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
} else {
return 0;
}
}
setFilter(step) {
let index = filterTypes.indexOf(this.state.filter) + step;
if (index === filterTypes.length) {
index = 0;
} else if (index === -1) {
index = filterTypes.length - 1;
}
this.setState({
filter: filterTypes[index]
})
}
renderSkinControl(skin) {
const isSelected = this.state.skin == skin;
const selectControls = skin == 'native' || skin == 'embed';
return (
{ this.setState({
controls: selectControls,
skin: skin
}) }}>
{skin}
);
}
renderRateControl(rate) {
const isSelected = (this.state.rate == rate);
return (
{ this.setState({rate: rate}) }}>
{rate}x
)
}
renderResizeModeControl(resizeMode) {
const isSelected = (this.state.resizeMode == resizeMode);
return (
{ this.setState({resizeMode: resizeMode}) }}>
{resizeMode}
)
}
renderVolumeControl(volume) {
const isSelected = (this.state.volume == volume);
return (
{ this.setState({volume: volume}) }}>
{volume * 100}%
)
}
renderIgnoreSilentSwitchControl(ignoreSilentSwitch) {
const isSelected = (this.state.ignoreSilentSwitch == ignoreSilentSwitch);
return (
{ this.setState({ignoreSilentSwitch: ignoreSilentSwitch}) }}>
{ignoreSilentSwitch}
)
}
renderCustomSkin() {
const flexCompleted = this.getCurrentTimePercentage() * 100;
const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;
return (
{this.setState({paused: !this.state.paused})}}>
{this.renderSkinControl('custom')}
{this.renderSkinControl('native')}
{this.renderSkinControl('embed')}
{
(this.state.filterEnabled) ?
{
this.setFilter(-1)
}}>
Previous Filter
{
this.setFilter(1)
}}>
Next Filter
: null
}
{this.renderRateControl(0.5)}
{this.renderRateControl(1.0)}
{this.renderRateControl(2.0)}
{this.renderVolumeControl(0.5)}
{this.renderVolumeControl(1)}
{this.renderVolumeControl(1.5)}
{this.renderResizeModeControl('cover')}
{this.renderResizeModeControl('contain')}
{this.renderResizeModeControl('stretch')}
{
(Platform.OS === 'ios') ?
{this.renderIgnoreSilentSwitchControl('ignore')}
{this.renderIgnoreSilentSwitchControl('obey')}
: null
}
);
}
renderNativeSkin() {
const videoStyle = this.state.skin == 'embed' ? styles.nativeVideoControls : styles.fullScreen;
return (
{this.renderSkinControl('custom')}
{this.renderSkinControl('native')}
{this.renderSkinControl('embed')}
{
(this.state.filterEnabled) ?
{
this.setFilter(-1)
}}>
Previous Filter
{
this.setFilter(1)
}}>
Next Filter
: null
}
{this.renderRateControl(0.5)}
{this.renderRateControl(1.0)}
{this.renderRateControl(2.0)}
{this.renderVolumeControl(0.5)}
{this.renderVolumeControl(1)}
{this.renderVolumeControl(1.5)}
{this.renderResizeModeControl('cover')}
{this.renderResizeModeControl('contain')}
{this.renderResizeModeControl('stretch')}
{
(Platform.OS === 'ios') ?
{this.renderIgnoreSilentSwitchControl('ignore')}
{this.renderIgnoreSilentSwitchControl('obey')}
: null
}
);
}
render() {
return this.state.controls ? this.renderNativeSkin() : this.renderCustomSkin();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
fullScreen: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
controls: {
backgroundColor: "transparent",
borderRadius: 5,
position: 'absolute',
bottom: 44,
left: 4,
right: 4,
},
progress: {
flex: 1,
flexDirection: 'row',
borderRadius: 3,
overflow: 'hidden',
},
innerProgressCompleted: {
height: 20,
backgroundColor: '#cccccc',
},
innerProgressRemaining: {
height: 20,
backgroundColor: '#2C2C2C',
},
generalControls: {
flex: 1,
flexDirection: 'row',
overflow: 'hidden',
paddingBottom: 10,
},
skinControl: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
rateControl: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
volumeControl: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
resizeModeControl: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
ignoreSilentSwitchControl: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
controlOption: {
alignSelf: 'center',
fontSize: 11,
color: "white",
paddingLeft: 2,
paddingRight: 2,
lineHeight: 12,
},
nativeVideoControls: {
top: 184,
height: 300
}
});
AppRegistry.registerComponent('VideoPlayer', () => VideoPlayer);