Added errorMessage and catchError props

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.9.1 (27-03-2023)
+
+Added `errorMessage` prop to customize error message shown in Video Player UI
+
+Added `catchError` prop to handle `react-native-video` lib error while also using error handling mechanism provided by `react-native-video-controls` lib
+
 ## 2.5.1 (17-05-2020)
 
 [#177](https://github.com/itsnubix/react-native-video-controls/pull/177)

README.md

@@ -68,12 +68,9 @@ 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.
-`<View>`
-
-| showHours                    | Boolean      | false   | If true, convert time to hours in the Player
-`<View>`
+| showTimeRemaining            | Boolean      | true    | If true, show the time remaining, else show the current time in the Player `<View>`                                                        |
+| showHours                    | Boolean      | false   | If true, convert time to hours in the Player `<View>`                                                        |
+| errorMessage                 | String       | 'Video unavailable'   | Error message to show in Video Player UI when error occurs                                                   |
 
 ### Events
 
@@ -85,7 +82,8 @@ These are various events that you can hook into and fire functions on in the com
 | onExitFullscreen  | Fired when the video exits fullscreen after the fullscreen button is pressed    |
 | onHideControls    | Fired when the controls disappear                                               |
 | onShowControls    | Fired when the controls appear                                                  |
-| onError           | Fired when an error is encountered when loading the video                       |
+| onError           | Fired when an error is encountered when loading the video. This prop overrides error handling mechanism provided by this library                       |
+| catchError        | Fired when an error is encountered when loading the video                       |
 | onPause           | Fired when the video is paused after the play/pause button is pressed           |
 | onPlay            | Fired when the video begins playing after the play/pause button is pressed      |
 | onBack            | Function fired when back button is pressed, override if using custom navigation |

VideoPlayer.d.ts

@@ -29,6 +29,8 @@ interface VideoPlayerProperties extends VideoProperties {
   style?: StyleProp<ViewStyle>;
   /** If true, single tapping anywhere on the video (other than a control) toggles between playing and paused. */
   tapAnywhereToPause?: boolean;
+  /** Custom error message to show in Video Player UI */
+  errorMessage?: string;
   /** Fired when the video enters fullscreen after the fullscreen button is pressed */
   onEnterFullscreen?: () => void;
   /** Fired when the video exits fullscreen after the fullscreen button is pressed */
@@ -37,8 +39,10 @@ interface VideoPlayerProperties extends VideoProperties {
   onHideControls?: () => void;
   /** Fired when the controls appear */
   onShowControls?: () => void;
-  /** Fired when an error is encountered when loading the video */
+  /** Fired when an error is encountered when loading the video. This overrides error handling mechanism provided by react-native-video-controls lib */
   onError?: (error: LoadError) => void;
+  /** Fired when an error is encountered when loading the video. This does not overrides error handling mechanism provided by react-native-video-controls lib  */
+  catchError?: (error: LoadError) => void;
   /** Fired when the video is paused after the play/pause button is pressed */
   onPause?: () => void;
   /** Fired when the video begins playing after the play/pause button is pressed */

VideoPlayer.js

@@ -285,6 +285,10 @@ export default class VideoPlayer extends Component {
     state.loading = false;
 
     this.setState(state);
+
+    if (typeof this.props.catchError === "function") {
+      this.props.catchError(err);
+    }
   }
 
   /**
@@ -1199,7 +1203,7 @@ export default class VideoPlayer extends Component {
             source={require('./assets/img/error-icon.png')}
             style={styles.error.icon}
           />
-          <Text style={styles.error.text}>Video unavailable</Text>
+          <Text style={styles.error.text}>{this.props.errorMessage || 'Video unavailable'}</Text>
         </View>
       );
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-controls",
-  "version": "2.8.1",
+  "version": "2.9.1",
   "description": "A set of GUI controls for the react-native-video component",
   "license": "MIT",
   "main": "VideoPlayer.js",