This is to provide a HTML5-like poster attribute for react-native-video component. (#400)

* offered html5-like poster attribute

* prevent unnecessary setState
This commit is contained in:
Linmic 2016-12-06 05:57:35 +08:00 committed by Matt Apperson
parent 0d48d1a56d
commit 5c2940f73d

View File

@ -1,5 +1,5 @@
import React, {Component, PropTypes} from 'react'; import React, {Component, PropTypes} from 'react';
import {StyleSheet, requireNativeComponent, NativeModules, View} from 'react-native'; import {StyleSheet, requireNativeComponent, NativeModules, View, Image} from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
import VideoResizeMode from './VideoResizeMode.js'; import VideoResizeMode from './VideoResizeMode.js';
@ -11,6 +11,14 @@ const styles = StyleSheet.create({
export default class Video extends Component { export default class Video extends Component {
constructor(props) {
super(props);
this.state = {
showPoster: true,
};
}
setNativeProps(nativeProps) { setNativeProps(nativeProps) {
this._root.setNativeProps(nativeProps); this._root.setNativeProps(nativeProps);
} }
@ -50,12 +58,20 @@ export default class Video extends Component {
}; };
_onProgress = (event) => { _onProgress = (event) => {
if (this.state.showPoster) {
this.setState({showPoster: false});
}
if (this.props.onProgress) { if (this.props.onProgress) {
this.props.onProgress(event.nativeEvent); this.props.onProgress(event.nativeEvent);
} }
}; };
_onSeek = (event) => { _onSeek = (event) => {
if (this.state.showPoster) {
this.setState({showPoster: false});
}
if (this.props.onSeek) { if (this.props.onSeek) {
this.props.onSeek(event.nativeEvent); this.props.onSeek(event.nativeEvent);
} }
@ -166,6 +182,30 @@ export default class Video extends Component {
onPlaybackRateChange: this._onPlaybackRateChange, onPlaybackRateChange: this._onPlaybackRateChange,
}); });
if (this.props.poster && this.state.showPoster) {
const posterStyle = {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
resizeMode: 'contain',
};
return (
<View style={nativeProps.style}>
<RCTVideo
ref={this._assignRoot}
{...nativeProps}
/>
<Image
style={posterStyle}
source={{uri: this.props.poster}}
/>
</View>
);
}
return ( return (
<RCTVideo <RCTVideo
ref={this._assignRoot} ref={this._assignRoot}
@ -190,6 +230,7 @@ Video.propTypes = {
PropTypes.number PropTypes.number
]), ]),
resizeMode: PropTypes.string, resizeMode: PropTypes.string,
poster: PropTypes.string,
repeat: PropTypes.bool, repeat: PropTypes.bool,
paused: PropTypes.bool, paused: PropTypes.bool,
muted: PropTypes.bool, muted: PropTypes.bool,