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:
parent
0d48d1a56d
commit
5c2940f73d
43
Video.js
43
Video.js
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user