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:
		
							
								
								
									
										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, | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user