criszz77 / react-native-media-console Goto Github PK
View Code? Open in Web Editor NEWA React Native video player. Built with TypeScript ❤️
License: MIT License
A React Native video player. Built with TypeScript ❤️
License: MIT License
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 ?
I was working on this and everything else works exept the fullscreen button
Originally posted by dgocoder December 27, 2023
Would be nice to be able to show the mirror cast/chromecast button on the player.
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
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?
like in video
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.
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.
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'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',
}}
/>
);
};
Video continuously playing when we navigate to other screen
this issue is on IOS
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.
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.
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.
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).
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
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?
onBack is not triggered on iOS but Android.
Did not pass navigation prop.
Anyone encounter this? please help
This package doesnt support full screen on android. ? 😞
Please can you add full screen support for android.
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)
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
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.
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
.
Still trying to figure this out 😅
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>
)}
/>
@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
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).
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?
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,
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!
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!
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 )
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.
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 - -
I did everything necessary...but the player can't be seen....and the audio can still be heard
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.
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?
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!
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
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>;
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.
Prepare an example repository which will also help for development
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.