2015-04-06 13:17:32 -06:00
|
|
|
var React = require('react-native');
|
2015-03-30 23:07:55 -06:00
|
|
|
var NativeModules = require('NativeModules');
|
|
|
|
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
|
|
|
|
var StyleSheet = require('StyleSheet');
|
|
|
|
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
|
|
|
|
var PropTypes = require('ReactPropTypes');
|
|
|
|
var StyleSheetPropType = require('StyleSheetPropType');
|
|
|
|
var VideoResizeMode = require('./VideoResizeMode');
|
|
|
|
var VideoStylePropTypes = require('./VideoStylePropTypes');
|
|
|
|
var NativeMethodsMixin = require('NativeMethodsMixin');
|
|
|
|
var flattenStyle = require('flattenStyle');
|
|
|
|
var merge = require('merge');
|
|
|
|
|
|
|
|
var Video = React.createClass({
|
|
|
|
propTypes: {
|
|
|
|
source: PropTypes.string,
|
|
|
|
style: StyleSheetPropType(VideoStylePropTypes),
|
2015-04-05 11:17:03 -06:00
|
|
|
resizeMode: PropTypes.string,
|
2015-03-31 00:29:15 -06:00
|
|
|
repeat: PropTypes.bool,
|
2015-04-05 11:17:03 -06:00
|
|
|
pause: PropTypes.bool,
|
2015-04-06 13:17:32 -06:00
|
|
|
onLoad: PropTypes.func,
|
2015-04-06 14:05:05 -06:00
|
|
|
onProgress: PropTypes.func,
|
2015-03-30 23:07:55 -06:00
|
|
|
},
|
|
|
|
|
|
|
|
mixins: [NativeMethodsMixin],
|
|
|
|
|
|
|
|
viewConfig: {
|
|
|
|
uiViewClassName: 'UIView',
|
|
|
|
validAttributes: ReactIOSViewAttributes.UIView
|
|
|
|
},
|
|
|
|
|
2015-04-06 13:17:32 -06:00
|
|
|
_onLoad(event) {
|
|
|
|
this.props.onLoad && this.props.onLoad(event.nativeEvent);
|
|
|
|
},
|
|
|
|
|
2015-04-06 14:05:05 -06:00
|
|
|
_onProgress(event) {
|
|
|
|
this.props.onProgress && this.props.onProgress(event.nativeEvent);
|
|
|
|
},
|
|
|
|
|
2015-04-06 13:17:32 -06:00
|
|
|
render() {
|
2015-03-30 23:07:55 -06:00
|
|
|
var style = flattenStyle([styles.base, this.props.style]);
|
|
|
|
var source = this.props.source;
|
|
|
|
|
|
|
|
var resizeMode;
|
2015-04-05 11:17:03 -06:00
|
|
|
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;
|
2015-03-30 23:07:55 -06:00
|
|
|
} else {
|
2015-04-05 11:17:03 -06:00
|
|
|
resizeMode = NativeModules.VideoManager.ScaleNone;
|
2015-03-30 23:07:55 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
var nativeProps = merge(this.props, {
|
|
|
|
style,
|
2015-04-05 11:17:03 -06:00
|
|
|
resizeMode: resizeMode,
|
2015-03-30 23:07:55 -06:00
|
|
|
src: source,
|
2015-04-06 13:17:32 -06:00
|
|
|
onLoad: this._onLoad,
|
2015-04-06 14:05:05 -06:00
|
|
|
onProgress: this._onProgress,
|
2015-03-30 23:07:55 -06:00
|
|
|
});
|
|
|
|
|
|
|
|
return <RCTVideo {... nativeProps} />
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
var RCTVideo = createReactIOSNativeComponentClass({
|
2015-04-05 11:17:03 -06:00
|
|
|
validAttributes: merge(ReactIOSViewAttributes.UIView,
|
2015-04-06 13:17:32 -06:00
|
|
|
{src: true, resizeMode: true, repeat: true, pause: true}),
|
2015-03-30 23:07:55 -06:00
|
|
|
uiViewClassName: 'RCTVideo',
|
|
|
|
});
|
|
|
|
|
|
|
|
var styles = StyleSheet.create({
|
|
|
|
base: {
|
|
|
|
overflow: 'hidden',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
module.exports = Video;
|