diff --git a/README.md b/README.md index e43d8f6..f088149 100644 --- a/README.md +++ b/README.md @@ -68,12 +68,13 @@ In addition, the `` also takes these props: | seekColor | String(#HEX) | '#FFF' | Fill/handle colour of the seekbar | | style | StyleSheet | null | React Native StyleSheet object that is appended to the video's parent `` | | tapAnywhereToPause | Boolean | false | If true, single tapping anywhere on the video (other than a control) toggles between playing and paused. | +| showTimeRemaining | Boolean | true | If true, show the time remaing, else show the current time in the Player. | +| showHours | Boolean | false | If true, convert time to hours in the Player. | +| thumbnailUri | Boolean | String | URI string pointing to an image to be displayed as a loader instead of the default spinning loader | +| thumbnailStyle | StyleSheet | null | React Native StyleSheet object that is appended to the loader thumbnail | + -| showTimeRemaining | Boolean | true | If true, show the time remaing, else show the current time in the Player. -`` -| showHours | Boolean | false | If true, convert time to hours in the Player -`` ### Events diff --git a/VideoPlayer.js b/VideoPlayer.js index 3ee8323..f8c4b4e 100644 --- a/VideoPlayer.js +++ b/VideoPlayer.js @@ -49,6 +49,9 @@ export default class VideoPlayer extends Component { muted: this.props.muted, volume: this.props.volume, rate: this.props.rate, + //thumbnail uri + thumbnailUri: this.props.thumbnailUri, + // Controls isFullscreen: @@ -158,6 +161,7 @@ export default class VideoPlayer extends Component { this.styles = { videoStyle: this.props.videoStyle || {}, containerStyle: this.props.style || {}, + thumbnailStyle: this.props.thumbnailStyle || {}, }; } @@ -184,11 +188,15 @@ export default class VideoPlayer extends Component { /** * When load starts we display a loading icon * and show the controls. + * If the user wants to display a thumbnail instead, + * the animation does not start. */ _onLoadStart() { let state = this.state; state.loading = true; - this.loadAnimation(); + if (!this.state.thumbnailUri){ + this.loadAnimation(); + } this.setState(state); if (typeof this.props.onLoadStart === 'function') { @@ -753,6 +761,10 @@ export default class VideoPlayer extends Component { if (this.styles.containerStyle !== nextProps.style) { this.styles.containerStyle = nextProps.style; } + + if (this.styles.thumbnailStyle !== nextProps.style) { + this.styles.thumbnailStyle = nextProps.style; + } } /** @@ -1163,10 +1175,20 @@ export default class VideoPlayer extends Component { } /** - * Show loading icon + * Show loading icon or thumbnail */ renderLoader() { if (this.state.loading) { + if (this.state.thumbnailUri) { + return ( + + + + ) + } return (