rnvp snack

app.js

import React, { Component } from 'react';
import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Video } from 'expo';

const btnPlay = require('./btn-play.png');
const btnPause = require('./btn-pause.png');
const demoVideo =
  'firebasestorage.googleapis.com/v0/b/bn-wvid.appspot.com/o/TheBunnyMovie.mp4';
const demoToken =
  '?alt=media&token=ac6c7062-076f-49eb-a747-acd232767daa';
const demoSrc = 'https://' + demoVideo + demoToken;

export default class VideoPlayer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mediaState: 'LOADING',
      playButtonImg: btnPlay
    };
  }

  handleOnLoad = () => {
    this.setState({ mediaState: 'LOADED', playButtonImg: btnPause });
    setTimeout(() => {
      this.setState({ mediaState: 'PAUSED', playButtonImg: btnPlay });
    }, 2000);
  };

  pressPlay = () => {
    if (this.state.mediaState === 'PAUSED') {
      this.vid.playAsync();
      this.setState({ mediaState: 'PLAYING', playButtonImg: btnPause });
    } else {
      this.vid.pauseAsync();
      this.setState({ mediaState: 'PAUSED', playButtonImg: btnPlay });
    }
  };

  render() {
    return (
          <View style={styles.container}>
          <Text style={styles.fileName}>{_fname(demoSrc, 1)}</Text>
            <Video
            resizeMode="contain"
            onLoad={this.handleOnLoad}
            ref={r => (this.vid = r)}
            shouldPlay={false}
            source={{ uri: demoSrc }}
            rate={1.0}
            volume={1.0}
            muted={false}
            style={{
              width: videoDisplayWidth,
              height: videoDisplayHeight,
              alignItems: 'center',
              justifyContent: 'center'
            }}
          />
          <TouchableOpacity onPress={this.pressPlay}>
            <Image style={styles.button} source={this.state.playButtonImg} />
          </TouchableOpacity>
        </View>
    );
  }
}

const videoDisplayWidth = Dimensions.get('window').width;
const videoDisplayHeight = videoDisplayWidth*0.6;

const _fname = (a, b) => {
  let c;
  if (b) {
    let d = a.split(/[?]/);
    d.pop(), (c = d[d.length - 1].split('/'));
  } else c = a.split('/');
  return (c = c[c.length - 1].split('\\')), c[c.length - 1];
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2A7FAD'
  },
  button: {
    width: 64,
    height: 48
  },
  fileName: {
    color: '#FFFF87',
    fontWeight: '400',
    fontSize: 18,
    textAlign: 'center'
  }
});