'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);