diff --git a/Video.js b/Video.js
index d7bd51f6..890d4ba2 100644
--- a/Video.js
+++ b/Video.js
@@ -1,6 +1,6 @@
import React, {Component} from 'react';
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 TextTrackType from './TextTrackType';
import FilterType from './FilterType';
@@ -20,7 +20,8 @@ export default class Video extends Component {
super(props);
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;
};
+ _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) => {
if (this.props.onLoadStart) {
this.props.onLoadStart(event.nativeEvent);
@@ -93,6 +106,9 @@ export default class Video extends Component {
};
_onLoad = (event) => {
+ if (this.state.showPoster) {
+ this._hidePoster();
+ }
if (this.props.onLoad) {
this.props.onLoad(event.nativeEvent);
}
@@ -117,10 +133,6 @@ export default class Video extends Component {
};
_onSeek = (event) => {
- if (this.state.showPoster && !this.props.audioOnly) {
- this.setState({showPoster: false});
- }
-
if (this.props.onSeek) {
this.props.onSeek(event.nativeEvent);
}
@@ -181,10 +193,6 @@ export default class Video extends Component {
};
_onPlaybackRateChange = (event) => {
- if (this.state.showPoster && event.nativeEvent.playbackRate !== 0 && !this.props.audioOnly) {
- this.setState({showPoster: false});
- }
-
if (this.props.onPlaybackRateChange) {
this.props.onPlaybackRateChange(event.nativeEvent);
}
@@ -314,8 +322,8 @@ export default class Video extends Component {
{...nativeProps}
style={StyleSheet.absoluteFill}
/>
- {this.props.poster && this.state.showPoster && (
-
+ {this.state.showPoster && (
+
)}
);