railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved handling of poster, fading it out on load

Browse Source
This commit is contained in:
Jens Andersson 2019-06-19 12:00:57 +01:00
parent 6d3936de0b
commit cc7db91490
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
Video.js
View File

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle} from 'react-native'; import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle,Animated} from 'react-native';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
import TextTrackType from './TextTrackType'; import TextTrackType from './TextTrackType';
import FilterType from './FilterType'; import FilterType from './FilterType';
@ -20,7 +20,8 @@ export default class Video extends Component {
super(props); super(props);
this.state = { this.state = {
showPoster: true, showPoster: !!props.poster,
posterFadeAnim: new Animated.Value(1),
}; };
} }
@ -86,6 +87,18 @@ export default class Video extends Component {
this._root = component; this._root = component;
}; };
_hidePoster = () => {
Animated.timing(
this.state.posterFadeAnim,
{
toValue: 0,
delay: 200, // Not ideal but need to wait for the first frame to be rendered
duration: 100,
useNativeDriver: true
}
).start(() => this.setState({showPoster: false}));
}
_onLoadStart = (event) => { _onLoadStart = (event) => {
if (this.props.onLoadStart) { if (this.props.onLoadStart) {
this.props.onLoadStart(event.nativeEvent); this.props.onLoadStart(event.nativeEvent);
@ -93,6 +106,9 @@ export default class Video extends Component {
}; };
_onLoad = (event) => { _onLoad = (event) => {
if (this.state.showPoster) {
this._hidePoster();
}
if (this.props.onLoad) { if (this.props.onLoad) {
this.props.onLoad(event.nativeEvent); this.props.onLoad(event.nativeEvent);
} }
@ -117,10 +133,6 @@ export default class Video extends Component {
}; };
_onSeek = (event) => { _onSeek = (event) => {
if (this.state.showPoster && !this.props.audioOnly) {
this.setState({showPoster: false});
}
if (this.props.onSeek) { if (this.props.onSeek) {
this.props.onSeek(event.nativeEvent); this.props.onSeek(event.nativeEvent);
} }
@ -181,10 +193,6 @@ export default class Video extends Component {
}; };
_onPlaybackRateChange = (event) => { _onPlaybackRateChange = (event) => {
if (this.state.showPoster && event.nativeEvent.playbackRate !== 0 && !this.props.audioOnly) {
this.setState({showPoster: false});
}
if (this.props.onPlaybackRateChange) { if (this.props.onPlaybackRateChange) {
this.props.onPlaybackRateChange(event.nativeEvent); this.props.onPlaybackRateChange(event.nativeEvent);
} }
@ -314,8 +322,8 @@ export default class Video extends Component {
{...nativeProps} {...nativeProps}
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
/> />
{this.props.poster && this.state.showPoster && ( {this.state.showPoster && (
<Image style={posterStyle} source={{ uri: this.props.poster }} /> <Animated.Image style={[posterStyle, {opacity: this.state.posterFadeAnim}]} source={{ uri: this.props.poster }} />
)} )}
</View> </View>
); );