2 improvements : prop showOnEnd & Overlay

[leadmrn]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-media-console@2.0.1 for the project I'm working on.

Firstly I added showOnEnd prop to show controls when video is ended.
Secondly I added Overlay component under the controls to show them better when video background is near white color.

I can't make a pull request as I can't push a branch on the repository. Feel free to integrate this patch or tell me how to make pull request if you prefer.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-media-console/lib/typescript/types.d.ts b/node_modules/react-native-media-console/lib/typescript/types.d.ts
index 35580ce..0669f6e 100644
--- a/node_modules/react-native-media-console/lib/typescript/types.d.ts
+++ b/node_modules/react-native-media-console/lib/typescript/types.d.ts
@@ -52,6 +52,12 @@ export interface VideoPlayerProps extends VideoProperties {
      * @default false
      */
     showOnStart?: boolean;
+    /**
+     * Show or hide the controls on end
+     *
+     * @default false
+     */
+    showOnEnd?: boolean;
     /**
      * Title of the video
      */
diff --git a/node_modules/react-native-media-console/src/VideoPlayer.tsx b/node_modules/react-native-media-console/src/VideoPlayer.tsx
index 232490a..e766893 100644
--- a/node_modules/react-native-media-console/src/VideoPlayer.tsx
+++ b/node_modules/react-native-media-console/src/VideoPlayer.tsx
@@ -12,6 +12,7 @@ import {
   TopControls,
   BottomControls,
   PlayPause,
+  Overlay
 } from './components';
 import {PlatformSupport} from './OSSupport';
 import {_onBack} from './utils';
@@ -29,6 +30,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => {
     resizeMode = 'contain',
     isFullscreen = false,
     showOnStart = false,
+    showOnEnd = false,
     paused = false,
     muted = false,
     volume = 1,
@@ -125,6 +127,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => {
     if (currentTime < duration) {
       setCurrentTime(duration);
       setPaused(true);
+      if(showOnEnd) setShowControls(true)
     }
     if (typeof onEnd === 'function') {
       onEnd();
@@ -397,6 +400,7 @@ export const VideoPlayer = (props: VideoPlayerProps) => {
         ) : (
           <>
             <Error error={error} />
+            <Overlay animations={animations} />
             <TopControls
               panHandlers={volumePanResponder.panHandlers}
               animations={animations}
diff --git a/node_modules/react-native-media-console/src/components/Overlay.tsx b/node_modules/react-native-media-console/src/components/Overlay.tsx
new file mode 100644
index 0000000..f873798
--- /dev/null
+++ b/node_modules/react-native-media-console/src/components/Overlay.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Animated,
+  StyleSheet,
+} from 'react-native';
+import type {VideoAnimations} from '../types';
+
+export const Overlay = ({
+  animations,
+}: {animations: VideoAnimations;}) => {
+
+  return (
+    <Animated.View
+      style={[
+        _styles.overlay,
+        {
+          opacity: animations.controlsOpacity,
+          marginBottom: animations.bottomControl.marginBottom,
+        },
+      ]}>
+    </Animated.View>
+  );
+};
+
+const _styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    backgroundColor:'rgba(0,0,0,.3)',
+    opacity: 0
+  },
+});
diff --git a/node_modules/react-native-media-console/src/components/index.ts b/node_modules/react-native-media-console/src/components/index.ts
index 72d57dc..31d85e3 100644
--- a/node_modules/react-native-media-console/src/components/index.ts
+++ b/node_modules/react-native-media-console/src/components/index.ts
@@ -11,3 +11,4 @@ export * from './NullControl';
 export * from './BottomControls';
 export * from './TopControls';
 export * from './PlayPause';
+export * from './Overlay';
diff --git a/node_modules/react-native-media-console/src/types.ts b/node_modules/react-native-media-console/src/types.ts
index f746fb3..9b578fc 100644
--- a/node_modules/react-native-media-console/src/types.ts
+++ b/node_modules/react-native-media-console/src/types.ts
@@ -55,6 +55,13 @@ export interface VideoPlayerProps extends VideoProperties {
    */
   showOnStart?: boolean;
 
+  /**
+   * Show or hide the controls on end
+   *
+   * @default false
+   */
+  showOnEnd?: boolean;
+
   /**
    * Title of the video
    */

This issue body was partially generated by patch-package.

[LunatiqueCoder]

Hey!

Thank you very much! Really appreciate it. The changes look good, apparently some eslint issues but should be easy fix. I'll test them today as well and we'll definitely merge them. The showEnd functionality requires perhaps a little more attention but I think we're good overall.

[LunatiqueCoder]

Once again, thank you very much for the effort you put in! Working on a new release just now.

[leadmrn]

Glad I was able to improve your project!

[leadmrn]

Can we embed youtube, dailymotion [...] videos in your VideoPlayer component? Because I tried but I couldn't.

[LunatiqueCoder]

Unfortunately, I don't think that's possible. What I suggest is using a <WebView /> from react-native-webview:

  <SafeAreaView
    style={{
      flex: 1,
      opacity: 0.99, // Removing this line might crash the app: https://stackoverflow.com/a/74577941/14056591
    }}
  >
    <WebView
      javaScriptEnabled={true}
      source={{ uri: 'https://www.youtube.com/embed/DGQwd1_dpuc?rel=0&autoplay=0&showinfo=0&controls=0' }}
    />
  </SafeAreaView>

Sources:

• https://stackoverflow.com/questions/57413156/play-youtube-video-in-react-native-video
• https://stackoverflow.com/questions/65857963/is-there-a-way-to-play-a-youtube-video-on-a-react-native-app-and-display-just-th