From b45c9577f0d64cb30bb3f71be71b91741c95beed Mon Sep 17 00:00:00 2001 From: Baris Sencan Date: Thu, 29 Oct 2015 17:26:28 -0700 Subject: [PATCH] [Video] Tidy up component code - Newer syntax. - Removed lodash dependency. - Removed hard-coded ref. - Seek using state. --- Video.ios.js | 109 -------------------------------------- Video.js | 145 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 10 ++-- 3 files changed, 151 insertions(+), 113 deletions(-) delete mode 100644 Video.ios.js create mode 100644 Video.js diff --git a/Video.ios.js b/Video.ios.js deleted file mode 100644 index 4e716931..00000000 --- a/Video.ios.js +++ /dev/null @@ -1,109 +0,0 @@ -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 ; - }, -}); - -var RCTVideo = requireNativeComponent('RCTVideo', Video); - -var styles = StyleSheet.create({ - base: { - overflow: 'hidden', - }, -}); - -module.exports = Video; diff --git a/Video.js b/Video.js new file mode 100644 index 00000000..35910a78 --- /dev/null +++ b/Video.js @@ -0,0 +1,145 @@ +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 ; + } + + _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; diff --git a/package.json b/package.json index d62bfcbc..0d51e623 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-native-video", "version": "0.6.1", "description": "A