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

Hide poster at the right time ie in onReadyForDisplay

Browse Source
This commit is contained in:
Jens Andersson 2019-06-19 14:19:06 +01:00
parent 420332e078
commit b193baa802
1 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
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,Animated} from 'react-native'; import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle} 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,8 +20,7 @@ export default class Video extends Component {
super(props); super(props);
this.state = { this.state = {
showPoster: !!props.poster, showPoster: !!props.poster
posterFadeAnim: new Animated.Value(1),
}; };
} }
@ -88,15 +87,7 @@ export default class Video extends Component {
}; };
_hidePoster = () => { _hidePoster = () => {
Animated.timing( this.setState({showPoster: false});
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) => {
@ -106,9 +97,6 @@ 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);
} }
@ -175,6 +163,9 @@ export default class Video extends Component {
}; };
_onReadyForDisplay = (event) => { _onReadyForDisplay = (event) => {
if (this.state.showPoster) {
this._hidePoster();
}
if (this.props.onReadyForDisplay) { if (this.props.onReadyForDisplay) {
this.props.onReadyForDisplay(event.nativeEvent); this.props.onReadyForDisplay(event.nativeEvent);
} }
@ -323,7 +314,7 @@ export default class Video extends Component {
style={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill}
/> />
{this.state.showPoster && ( {this.state.showPoster && (
<Animated.Image style={[posterStyle, {opacity: this.state.posterFadeAnim}]} source={{ uri: this.props.poster }} /> <Image style={posterStyle} source={{ uri: this.props.poster }} />
)} )}
</View> </View>
); );