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 (