Hi @LunatiqueCoder , issue I noticed is -

Expected - onEnterFullscreen and onExitFullscreen both should be executed only when user clicks on "Full screen ICON" on bottom right corner.
Issue - In addition to "Full screen ICON" click , onEnterFullscreen and onExitFullscreen both are also being executed on first render of this component.

I don't know if this is the issue or is it correct ? May be am I missing anything ?

Also this may seem as a dumb question. I wanted to go over code and create PR for this issue. But I forked the project, I don't see Android and IOS folders to get started with. How can I run this on the react native android/ios app and start debugging?

Hello!

I wanted to add a suggestion to be able to seek using the slider bar with tvOS and remote. I didn't see it in the latest releases.
Could this be added in the future?

*Also - can you tell me how to grab this project and how to PR? I would like to try and do the seekbar thing, not sure if I can figure it out, but I can try!

Thank you!

Hello, I am very happy to be able to use such a great component, but I encountered a problem on the Android side.
When I touch the video to show and hide the controls, the delay reaches more than 10s.
I read the source code, but I don’t know what happened What.

import React from 'react';
import {
 View,
 StyleSheet,
 Image,

} from 'react-native';
import {AssetItem} from '@/services/api';
import {isEmpty, get} from 'lodash-es';
import VideoPlayer from 'react-native-media-console';
import pxToDp from 'utils/pxToDp';

interface ItemProps {
 item: AssetItem;
}

function RenderItem({item}: ItemProps) {
 const isStartsWithHttp = (str: string) => str.startsWith('http');
 if (isEmpty(item)) return null;

 if ((get(item?.t?.split('/'), '[0]', '') as string) == 'video')
   return (
     <View style={{width: pxToDp(300), height: pxToDp(250)}}>
       <VideoPlayer
         disableBack
         repeat
         showOnStart
         source={{uri: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}}
       />
     </View>
   );

 if ((get(item?.t?.split('/'), '[0]', '') as string) == 'image') {
   if (isStartsWithHttp(item?.b)) {
     return (
       <Image
         onError={e => console.log(e.nativeEvent.error)}
         style={CSS.itemBox}
         source={{uri: item?.b}}
       />
     );
   }
   return (
     <Image
       style={CSS.itemBox}
       onError={e => console.log(e.nativeEvent.error)}
       source={{uri: 'data:image/png;base64,' + item?.b}}
     />
   );
 }
}

const CSS = StyleSheet.create({
 itemBox: {
   width: pxToDp(200),
   height: pxToDp(150),
   marginTop: pxToDp(40),
 },
});

export default RenderItem;

it`s my code pls help me - -

The showDuration prop works perfectly.

When I add the showHours prop, it shows this:

If you are seeking and sliding around time in video and control timer expires the controls go away. I would assume the timer should be respecting touch action.

Currently I have timer set to 3000 and if i seek in the bar of a video and am scrolling through and the timer of 3000 hits the controls go away and I can still keep scrolling.

I would expect the timer to be paused or reset on interaction with the controls.

What is props.navigator ?
I use react-navigation.
Could you please provide additional info on how (and what) to pass the navigator?
Should it be props.navigation in react-navigation case ?

onBack is not triggered on iOS but Android.
Did not pass navigation prop.

Anyone encounter this? please help

• The icons should be perhaps extracted in another npm package so users can choose if they want to use the default icons or their custom ones.
• The user should be able to pass props to the control or to the icon (image).

Hello!

I have a thing going on when I play a live video it is saying "Video Unavailable" even though the video is playing behind it.

Live Video Image:

This is only on a live video though. I tested it on an archived video and it does not do it. I suspect something with the video object or maybe the time it takes to load the video?

Archived Video Image:

Hello
I have tried to install react-natve-media-console@next and tested in my tv app. but controls not working in my tv app.
here is installed version in my app
"react-native-media-console": "^2.0.2-0",
please help

Hi,

I am wondering if this could be done with youtube videos as well? I am using an api that doesn't have any storage for mp4 videos, but only youtube video ids. Please let me know if this can work with it. Thank you!

Video continuously playing when we navigate to other screen

this issue is on IOS

Okay I am just trying to set up just a simple Video project to test on and tinker on stuff. I am getting a few different errors and could very well be something I am doing, but I have been googling and I can't quite figure it out.

TypeError: Cannot read property 'resizeMode' of undefined, js engine: hermes

This one I looked in the "types.ts" and I didn't notice resizeMode in there. I tried to add it and then ran yarn, but I still get the error. How I tried to add it:

  /**
   * Set the resize mode to value.
   * 
   * @default "contain"
   */
  resizeMode?: string;

I then get several repeating errors :

ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Invariant Violation: Failed to call into JavaScript module method RCTEventEmitter.receiveTouches(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.
A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

This is probably something I didn't set up correctly. I did the react-native-video instructions. Here is my App.js with my video object.

import React, { useRef, useState } from 'react';

import {
  View,
  Dimensions, 
  StyleSheet,
  Text
} from 'react-native';

import VideoPlayer from 'react-native-media-console';
import { onProgressData, onSeekData } from 'react-native-video';

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

const App = (props) => {

  const videoRef = useRef();
  const [paused, setPaused] = useState(false);
  const [currentTime, setCurrentTime] = useState(0.0);
  const [isVideoReady, setIsVideoReady] = useState(false);

  const onLoad = () => setIsVideoReady(true);
  const onProgress = (data: OnProgressData) => setCurrentTime(data.currentTime);
  const onSeek = (data: OnSeekData) => setCurrentTime(data.seekTime);
  const onEnd = () => setPaused(true);
  
  return (
    <View style={{ flex: 1, height: HEIGHT, width: WIDTH }}>
      <VideoPlayer
        videoRef={videoRef}
        source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
        navigator={props.navigator}
        onLoad={onLoad}
        onProgress={onProgress}
        onSeek={onSeek}
        onEnd={onEnd}
        showDuration
        showHours
        resizeMode={"contain"}
        controlTimeoutDelay={5000}
        isFullScreen
        style={{
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          position: "absolute",
          width: "100%",
        }}
      />;
    </View>
  );

};

const styles = StyleSheet.create({
  
});

export default App;

Thank you!

Hello, I'm trying to prevent the video player to show controls by default when video start but setting the prop showOnStart: false (default state by the way) isn't working and, also trying to disable each controls individually doesn't prevent the controls' animation effect (overlay effect) to show up. I'm currently reporting while working and testing with an android device (v13 installed).
Could anyone help me to solve this issue? Thanks in advance.

like in video

If I install the package and do whatever mentioned in the npm documents , then I got error undefined Unable to resolve module @react-native-media-console/reanimated and if I remove the line- import {useAnimations} from '@react-native-media-console/reanimated'; got error -TypeError: Cannot read property 'CONTAIN' of undefined. What could fix this issue , any idea?

Hello and thank you for this great library.

I couldn't exactly figure out why, but typescript complains at me for using the source prop.

Here is the line that causes the issue for me, in case it helps:
https://github.com/dklymenk/warcrime/blob/f1ead22ec05eb2d48f3419c4095bdc136196d7ed/app/screens/report/report-screen.tsx#L112

Prepare an example repository which will also help for development

I've tried the below approach. On iOS, a modal is expanded when press on full screen button. But after exiting the full screen with running video, the video got paused but the button is showing pause button (the play/pause btn isn't in sync). And I couldn't find a way to play/resume the video programatically (unless i manually tap on the play/pause btn twice).

As for Android, not a major concern just that the full screen button remain in expand icon in both fullscreen and non fullscreen state.

const renderPlayer = () => {
    return (
      <VideoPlayer
        fullscreen={isFullScreen}
        allowsExternalPlayback={false}
        disableBack={true}
        paused={isPause}
        source={{ uri: dummyVideoUrl }}
        onEnterFullscreen={() => setFullScreen(true)}
        onExitFullscreen={() => {
          setFullScreen(false);
          setTimeout(()=>setPause(false), 1000); //tried using paused props but no avail
        }}
        onPause={() => setPause(true)}
        onPlay={() => setPause(false)}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          borderWidth: 1,
          borderColor: 'red',
        }}
      />
    );
  };

Thank you for this great package.
i'm not trying to rush you, don't get me wrong but there are some open issues and pull requests preventing me from migrating to this package.
is there any specific time when these will be resolved?

I did everything necessary...but the player can't be seen....and the audio can still be heard

Discussed in #95

I got the media controls to appear on my video and when I use the Android TV emulator, it has the seekbar. When I load it onto an Android phone, the seekbar sits below the time/duration and I think it is off of the screen.

Is there a way to control the size/height of the media controls layout so the seekbar shows up on the screen?

Here you can see the time but no seekbar below it.

Here you can see the Android TV Emulator has a seek bar below the time which is why I think it is there on the phone, but just off the screen.

Also, if I add the prop "showHours", it will add a little "a" in the current time running.

Hello, thank you for this great package!

However the seek bar dragging does not work well when RTL is enabled.

similar issue here with react-native-slider callstack/react-native-slider#39
a invertedSeeker prop would be good solution

I tried adding transform: [{rotate: '180deg'}] to SeekBar.style.container, and that seems to fix it!

note: the problem is in Android

Would be nice if users can choose react-native-reanimated for their animations. Would be even better if they can pass custom animations (for both animated and reanimated api).

Problem

When embedding the VideoPlayer component within a horizontally scrolling FlatList, there is a gesture conflict that arises. Specifically, when attempting to seek in the video (or volume) by dragging the seeker control left or right, the FlatList interprets this gesture as a horizontal scroll, leading to an unintended navigation away from the current video item instead of seeking within the video.

Expected Behavior

The expected behavior is that when interacting with the video player's seeking controls, the FlatList scrolling should be temporarily disabled or the gesture should be captured exclusively by the video player, allowing for a smooth seeking experience without triggering a scroll in the FlatList.

Current Workaround

Still trying to figure this out 😅

Example Snippet

Here is a simplified code snippet demonstrating the setup:

<FlatList
  data={videos}
  horizontal
  renderItem={({ item }) => (
    <View>
      <VideoPlayer
        source={{ uri: item.url }}
        // Other necessary props
      />
    </View>
  )}
/>

I am making a RN app for android TV and I have this problem when I reproduce a video in fullscreen with 'react-native-media-console': when I press any arrow(except the center one) the video player will exit from fullscreen.

I would like to prevent that behaviour, and I'd like to use directional arrow to directly navigate among the controls.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Issue ( the notch is not taken into account for the progress bar )

fixed

Here is the diff that solved my problem:

index 6d4dce3..e31f0b6 100644
--- a/node_modules/react-native-media-console/src/components/BottomControls.tsx
+++ b/node_modules/react-native-media-console/src/components/BottomControls.tsx
@@ -2,10 +2,11 @@ import React, {Dispatch, SetStateAction} from 'react';
 import {
   Animated,
   ImageBackground,
-  SafeAreaView,
   StyleSheet,
   GestureResponderHandlers,
+  View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import {Timer} from './Timer';
 import {Title} from './Title';
 import {NullControl} from './NullControl';
@@ -114,12 +115,12 @@ export const BottomControls = ({
         source={require('../assets/img/bottom-vignette.png')}
         style={[styles.column]}
         imageStyle={[styles.vignette]}>
-        <SafeAreaView style={[styles.row, _styles.bottomControlGroup]}>
+        <View style={[styles.row, _styles.bottomControlGroup]}>
           {timerControl}
           <Title title={title} />
           {fullscreenControl}
-        </SafeAreaView>
-        <SafeAreaView style={styles.seekBarContainer}>
+        </View>
+        <SafeAreaView style={styles.seekBarContainer} edges={['bottom']}>
           {seekbarControl}
         </SafeAreaView>
       </ImageBackground>
@@ -139,6 +140,5 @@ const _styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginLeft: 12,
     marginRight: 12,
-    marginBottom: 0,
   },
 });

Also adding this peer dependency in package.json

"react-native-safe-area-context": ">=3.0.0"

This issue body was partially generated by patch-package.

TItle sums it up. I have an example here but thought I'd open an issue to get feedback before opening a PR. I added it as a separate prop from disablePlayPause for backwards compatibility (instead of changing that prop to only operate on the play/pause button)

Controls does not work on android. Can't stop or play video. Also faced problem when a lot of videos it has autoplay mode. I can't find how to disable it from props.

I would like to write a test in jest and I need to add the testID on the play button, how do I do it?

Hello there,

First of all thanks for you effort on that library and its really useful.

Is there any chance to add zoom in and zoom out feature on video because its will be useful for us?

Thank you.

I was working on this and everything else works exept the fullscreen button

https://github.com/criszz77/react-native-media-console/blob/master/src/types.ts#L133-L144

- videoStyle?: ViewStyle;
+ videoStyle?: StyleProp<ViewStyle>;
- containerStyle?: ViewStyle;
+ containerStyle?: StyleProp<ViewStyle>;

@esegebart I've got good news!

I managed to play around with the source code and the tvOS here: https://github.com/criszz77/tvOSWithTypeScript

What I'm still fighting with? Seekbar and volume bar don't seem to work. But other than that, everything seems good so far.

Right now the loader is only displayed at the start. The loader should be displayed when the video buffers

Hello,

Thanks for your job. I tried it and I had a questions about customize UI.

For example, now the 'Title' display not at the top of the screen to the right of the "Back" icon (although for me this position is more familiar). Next, 'time remaining' also like to place the time on the right.

Perhaps you need to think about support templates for UI, because the default template may not suit everyone (even though he looks good).

This package doesnt support full screen on android. ? 😞

Please can you add full screen support for android.

Hey, I think I just found a bug.

For example, if the current duration is 2:50, the video duration is 3:00, and the rewind time is 15 seconds, when you rewind forward at 2:50, the video should end, right? Because it has reached the limit, but it's not. Somehow, it just plays back to 0:00 and doesn't trigger the onEnd callback