From c8f19f4e06e163be153378e7271495459e55e849 Mon Sep 17 00:00:00 2001
From: OKrawi <Krawi.ossama@gmail.com>
Date: Sat, 3 Jun 2023 09:27:37 +0300
Subject: [PATCH 1/2] Added the ability to place a custom thumbnail while
 loading instead of the spinning loader

Users can now pass two new properties to the `VideoPlayer` component.
The new props are:
1. `thumbnailUri` which accepts a URI string that points to an image.
2. `thumbnailStyle` which accepts a `StyleSheet` object to style the thumbnail.
These two properties are used to display a thumbnail while the video is loading instead of the current spinning loader.
---
 VideoPlayer.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/VideoPlayer.js b/VideoPlayer.js
index 3ee8323e..f8c4b4eb 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 (
+          <View style={styles.loader.container}>
+          <Image
+              source={{uri: this.state.thumbnailUri}}
+              style={[this.styles.thumbnailStyle]}
+          />
+          </View>
+        )
+      }
       return (
         <View style={styles.loader.container}>
           <Animated.Image

From 218ad84e504038dbf80c568374c9c7e170e04bc6 Mon Sep 17 00:00:00 2001
From: OKrawi <Krawi.ossama@gmail.com>
Date: Sat, 3 Jun 2023 09:32:03 +0300
Subject: [PATCH 2/2] Updated ReadMe file

---
 README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e43d8f64..f088149d 100644
--- a/README.md
+++ b/README.md
@@ -68,12 +68,13 @@ In addition, the `<VideoPlayer />` 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 `<View>`                                                                                   |
 | 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.
-`<View>`
 
-| showHours                    | Boolean      | false   | If true, convert time to hours in the Player
-`<View>`
 
 ### Events