Commit b45c9577 authored by Baris Sencan's avatar Baris Sencan
Browse files

[Video] Tidy up component code 

- Newer syntax.
- Removed lodash dependency.
- Removed hard-coded ref.
- Seek using state.
parent 3aa46875

Video.ios.js

deleted100644 → 0
+0 −109
Changes for Video.ios.js: 0 added lines, 109 removed lines.
Original line number Diff line number Diff line 
var React = require('react-native');

var { StyleSheet, requireNativeComponent, PropTypes, NativeModules, } = React;



var VideoResizeMode = require('./VideoResizeMode');

var { extend } = require('lodash');



var VIDEO_REF = 'video';



var Video = React.createClass({

  propTypes: {

    /* Native only */

    src: PropTypes.object,

    seek: PropTypes.number,



    /* Wrapper component */

    source: PropTypes.object,

    resizeMode: PropTypes.string,

    repeat: PropTypes.bool,

    paused: PropTypes.bool,

    muted: PropTypes.bool,

    volume: PropTypes.number,

    rate: PropTypes.number,

    onLoadStart: PropTypes.func,

    onLoad: PropTypes.func,

    onError: PropTypes.func,

    onProgress: PropTypes.func,

    onEnd: PropTypes.func,

  },



  setNativeProps(props) {

    this.refs[VIDEO_REF].setNativeProps(props);

  },



  _onLoadStart(event) {

    this.props.onLoadStart && this.props.onLoadStart(event.nativeEvent);

  },



  _onLoad(event) {

    this.props.onLoad && this.props.onLoad(event.nativeEvent);

  },



  _onError(event) {

    this.props.onError && this.props.onError(event.nativeEvent);

  },



  _onProgress(event) {

    this.props.onProgress && this.props.onProgress(event.nativeEvent);

  },



  _onSeek(event) {

    this.props.onSeek && this.props.onSeek(event.nativeEvent);

  },



  seek(time) {

    this.setNativeProps({seek: parseFloat(time)});

  },



  _onEnd(event) {

    this.props.onEnd && this.props.onEnd(event.nativeEvent);

  },



  render() {

    var style = [styles.base, this.props.style];

    var source = this.props.source;

    var uri = source.uri;

    if (uri && uri.match(/^\//)) {

      uri = 'file://' + uri;

    }

    var isNetwork = !!(uri && uri.match(/^https?:/));

    var isAsset = !!(uri && uri.match(/^(assets-library|file):/));



    var resizeMode;

    if (this.props.resizeMode === VideoResizeMode.stretch) {

      resizeMode = NativeModules.VideoManager.ScaleToFill;

    } else if (this.props.resizeMode === VideoResizeMode.contain) {

      resizeMode = NativeModules.VideoManager.ScaleAspectFit;

    } else if (this.props.resizeMode === VideoResizeMode.cover) {

      resizeMode = NativeModules.VideoManager.ScaleAspectFill;

    } else {

      resizeMode = NativeModules.VideoManager.ScaleNone;

    }



    var nativeProps = extend({}, this.props, {

      style,

      resizeMode: resizeMode,

      src: {

        uri: uri,

        isNetwork,

        isAsset,

        type: source.type || 'mp4'

      },

      onVideoLoad: this._onLoad,

      onVideoProgress: this._onProgress,

      onVideoEnd: this._onEnd,

    });



    return <RCTVideo ref={VIDEO_REF} {... nativeProps} />;

  },

});



var RCTVideo = requireNativeComponent('RCTVideo', Video);



var styles = StyleSheet.create({

  base: {

    overflow: 'hidden',

  },

});



module.exports = Video;

Video.js

0 → 100644
+145 −0
Changes for Video.js: 145 added lines, 0 removed lines.
Original line number Diff line number Diff line 
const React = require('react-native');

const {

  Component,

  StyleSheet,

  requireNativeComponent,

  PropTypes,

  NativeModules,

} = React;



const VideoResizeMode = require('./VideoResizeMode');



const styles = StyleSheet.create({

  base: {

    overflow: 'hidden',

  },

});



class Video extends Component {



  constructor(props, context) {

    super(props, context);



    this.state = { seekTime: 0 };



    this.seek = this.seek.bind(this);

    this._onLoadStart = this._onLoadStart.bind(this);

    this._onLoad = this._onLoad.bind(this);

    this._onError = this._onError.bind(this);

    this._onProgress = this._onProgress.bind(this);

    this._onSeek = this._onSeek.bind(this);

    this._onEnd = this._onEnd.bind(this);

  }



  seek(time) {

    this.setState({ seekTime: time });

  }



  render() {

    const { seekTime } = this.state;

    const {

      style,

      source,

      ref,

      resizeMode,

    } = this.props;



    let uri = source.uri;

    if (uri && uri.match(/^\//)) {

      uri = 'file://' + uri;

    }



    const isNetwork = !!(uri && uri.match(/^https?:/));

    const isAsset = !!(uri && uri.match(/^(assets-library|file):/));



    let nativeResizeMode;

    if (resizeMode === VideoResizeMode.stretch) {

      nativeResizeMode = NativeModules.VideoManager.ScaleToFill;

    } else if (resizeMode === VideoResizeMode.contain) {

      nativeResizeMode = NativeModules.VideoManager.ScaleAspectFit;

    } else if (resizeMode === VideoResizeMode.cover) {

      nativeResizeMode = NativeModules.VideoManager.ScaleAspectFill;

    } else {

      nativeResizeMode = NativeModules.VideoManager.ScaleNone;

    }



    let nativeProps = Object.assign({}, this.props);

    Object.assign(nativeProps, {

      style: [styles.base, style],

      resizeMode: nativeResizeMode,

      src: {

        uri: uri,

        isNetwork,

        isAsset,

        type: source.type || 'mp4'

      },

      seek: seekTime,

      onVideoLoad: this._onLoad,

      onVideoProgress: this._onProgress,

      onVideoEnd: this._onEnd,

    });



    return <RCTVideo ref={ref} {...nativeProps} />;

  }



  _onLoadStart(event) {

    this.props.onLoadStart && this.props.onLoadStart(event.nativeEvent);

  }



  _onLoad(event) {

    this.props.onLoad && this.props.onLoad(event.nativeEvent);

  }



  _onError(event) {

    this.props.onError && this.props.onError(event.nativeEvent);

  }



  _onProgress(event) {

    this.props.onProgress && this.props.onProgress(event.nativeEvent);

  }



  _onSeek(event) {

    this.props.onSeek && this.props.onSeek(event.nativeEvent);

  }



  _onEnd(event) {

    this.props.onEnd && this.props.onEnd(event.nativeEvent);

  }

}



Video.propTypes = {

  /* Native only */

  src: PropTypes.object,

  seek: PropTypes.number,



  /* Wrapper component */

  ref: PropTypes.string,

  source: PropTypes.object,

  resizeMode: PropTypes.string,

  repeat: PropTypes.bool,

  paused: PropTypes.bool,

  muted: PropTypes.bool,

  volume: PropTypes.number,

  rate: PropTypes.number,

  onLoadStart: PropTypes.func,

  onLoad: PropTypes.func,

  onError: PropTypes.func,

  onProgress: PropTypes.func,

  onEnd: PropTypes.func,



  /* Required by react-native */

  scaleX: React.PropTypes.number,

  scaleY: React.PropTypes.number,

  translateX: React.PropTypes.number,

  translateY: React.PropTypes.number,

  rotation: React.PropTypes.number,

};



var RCTVideo = requireNativeComponent('RCTVideo', Video, {

  nativeOnly: {

    src: true,

    seek: true,

  },

});



module.exports = Video;

package.json

+6 −4
Changes for package.json: 6 added lines, 4 removed lines.
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
  "name": "react-native-video",

  "version": "0.6.1",

  "description": "A <Video /> element for react-native",

  "main": "Video.ios.js",

  "main": "Video.js",

  "author": "Brent Vatne <brentvatne@gmail.com> (https://github.com/brentvatne)",

  "files": [

    "RCTVideo.xcodeproj",
@@ -11,8 +11,7 @@ 
    "RCTVideoManager.h",

    "RCTVideoManager.m",

    "README.md",

    "Video.android.js",

    "Video.ios.js",

    "Video.js",

    "VideoResizeMode.js",

    "VideoStylePropTypes.js"

  ],
@@ -20,6 +19,10 @@ 
    {

      "name": "Johannes Lumpe",

      "email": "johannes@lum.pe"

    },

    {

      "name": "Baris Sencan",

      "email": "baris.sncn@gmail.com"

    }

  ],

  "repository": {
@@ -31,6 +34,5 @@ 
  },

  "dependencies": {

    "keymirror": "^0.1.1",

    "lodash": "^3.10.1"

  }

}