charliesbot / react-native-media-controls Goto Github PK
View Code? Open in Web Editor NEWA sweet UI component to manipulate your media. Strongly typed.
License: MIT License
A sweet UI component to manipulate your media. Strongly typed.
License: MIT License
I have an issue with my custom button that plays the next video, if I remove the marginTop from its style it works fine but if I allign it with the play/pause button using marginTop then touchableopacity onpress stop working in IOS only it worka fine in Android.
React native version: 0.63
IOS version: 14.5
iPhone 11
check the screenshot there are two custom buttons one is previous button and one is next button, next button onpress is working fine(because it is not aligned in same line with pause/play button) but previous button onpress is not working.
style for next button
`nextButtonMain: {
marginTop: 50,
marginLeft: 220,
alignItems: 'center',
width: 100,
zIndex: 200
},`
previousButtonMain: {
position: 'absolute',
marginTop: 100,
marginLeft: 50,
alignItems: 'center',
width: 100
},
Is there a way we can have que points or milestone on video player progress bar.
Ex:
Video is total of 5 mins and i need to mark a yellow color on 3rd and 5th min regarding a que point where user need to pause the video and do other tasks.
Is there any possible way to achive this
slider flickering while playing with the slider, anyone faced this issue earlier
I am looking to fix it, but I'm sort of in a rush
If anyone has solution to this, please drop comment here.
Thank You.
Hi, when I load a video file I got wrong video start and end time.
When I load the example bunny video I got this in the UI:
start 35:00 - end 44:56
Should be:
start 00:00 end 09:56
It's like a wrong offset added. Why this happend?
Android
react-native": "0.62.2
react-native-video": "^4.4.5
react-native-video-controls": "^2.4.0
How does one customise the styling of the elements,
hi everyone I want to help, I want to make fullscreen mode. who has the idea to make fullscreen mode?
my code :
<Video
onEnd={onEnd}
onLoad={onLoad}
onLoadStart={onLoadStart}
posterResizeMode={'cover'}
onProgress={onProgress}
paused={paused}
ref={ref => (videoPlayer.current = ref)}
resizeMode={'cover'}
source={Test}
style={styles.backgroundVideo}
/>
<MediaControls
isFullScreen={true}
duration={duration}
isLoading={isLoading}
progress={currentTime}
onPaused={onPaused}
onReplay={onReplay}
onSeek={onSeek}
onSeeking={onSeeking}
mainColor={'red'}
onFullScreen={onFullScreen}
playerState={playerState}
sliderStyle={{containerStyle: {}, thumbStyle: {}, trackStyle: {}}}
/>
const onFullScreen = () => {
// What should I put in it?
};
I have an issue with my custom button that plays the 10sec forward and 10 sec backward video, if I remove the marginTop from its style it works fine but if I align it with the play/pause button using marginTop then Touchableopacity onPress stop working in IOS only it working fine in Android.
React native version: 0.63
IOS version: 15
iPhone 11
check the screenshot there are two custom buttons one is 10sec forward button and one is 10sec backward button
style={{ flexDirection: 'row',
paddingHorizontal: 5,
justifyContent: 'space-evenly',
alignItems: 'center',
alignContent: 'center',
marginTop: '28%' }}
`TransformError: C:..........\node_modules\react-native-media-controls\lib\index.js: Couldn't find preset "flow" relative to directory "C:..........\node_modules\react-native-media-controls"
:app:bundleReleaseJsAndAssets FAILED
FAILURE: Build failed with an exception.
Process 'command 'cmd'' finished with non-zero exit value 1`
Thaks for solve the timing issue!
I got another bug:
When the video end, the replay button appears.
If I click on this button the video doesn't replay. Instead a pause button appears.
To get the video replay, I have to click the button twice.
Android 9
react-native": "0.62.2
react-native-video": "^4.4.5
react-native-video-controls": "^2.4.0
Sorry to chase but..
I dont believe this custom styles is working
I have used
react-native-media-controls": ^2.1.0
with :
react-native-video: ^5.1.0-alpha8,
The media controls should automatically fade out once the video starts loading but that's not what's happening. If I don't tap the screen the controls continue to be visible even after the fadeOutDelay time has elapsed. once I tap on the screen, controls fade out and it starts functioning normally as expected.
Please suggest how to resolve this
Thanks.
Is it possible to make clear background of media control container , even when play and slider is visible.
Requirement no need to show band(opacity) always should be clear background of media controls container.
Hi,
I'd like to be able to allow the user to take certain actions when the dialog is open.
Is there a variable or some callback variable i can use, like onOpen or onClose?
I need onSeeking to update duration on real-time.
onSeek just firing after finish seeking.
I can't see play button after updating Ios14
react-native-image library needs patch facebook/react-native#29279
I am trying to play audio URL with this library but, Nothing happening.
<Audio
onEnd={onEnd}
onLoad={onLoad}
onLoadStart={onLoadStart}
onProgress={onProgress}
paused={paused}
ref={(ref) => { this.videoPlayer = ref; }}
source={{ uri: item.url }}
style={styles.mediaPlayer}
volume={0.0}
poster={res.images.podcast}
audioOnly
playInBackground
/>
<MediaControls
duration={duration}
isLoading={isLoading}
mainColor="red"
onFullScreen={false}
onPaused={this.onPaused}
onReplay={this.onReplay}
onSeek={this.onSeek}
playerState={playerState}
progress={currentTime}
/>
Even Player also not showing, After click on that area, It is showing UI and disappearing, Can you guide me, How to play audio url with this library?
Hello!
Currently I have issue:
when rotate parent View (Video & MediaControls) use transform: [{ rotate: '90deg' }]
Slider working incorrect...
please help me fix this problem!
====================
<View style={isFullScreen ? styles.video_player : {}}>
<Video
onEnd={onEnd}
onLoad={onLoad}
onLoadStart={onLoadStart}
onProgress={onProgress}
paused={paused}
ref={ref => (videoRef.current = ref)}
resizeMode="contain"
onFullScreen={isFullScreen}
source={{ uri: mainUrl }}
repeat={true}
style={isFullScreen ? styles.video_land : styles.video_poirt}
/>
<MediaControls
isFullScreen={isFullScreen}
duration={duration}
isLoading={isLoading}
mainColor="black"
onFullScreen={noop}
onPaused={onPaused}
onReplay={onReplay}
onSeek={onSeek}
onSeeking={onSeeking}
playerState={playerState}
progress={currentTime}
>
</MediaControls>
</View>
==========================
const styles = {
video_player: { width: heightDevice - 2 * HEIGHT_STATUSBAR, height: widthDevice, transform: [{ rotate: '-90deg' }] },
video_poirt: { width: widthDevice - 6, height: (isTab ? 360 : 280) },
video_land: { width: heightDevice - 2 * HEIGHT_STATUSBAR, height: widthDevice }
}
Hi,
I was really interested about this project that seemed to be working as I wanted.
Since I installed it I encountered some issues that make it unusable for my app.
If the video is under 5 seconds, the player wont start, plus, if it's a recorded video, it crashes. I suspect this comes from the fade that is not really well made, too long, and not configurable.
The fullscreen icon, is not working, because no implementation exist yet, so this icon is just for the style but it's not suitable for app that requires to be perfect visually speaking.
Is this project still maintained ? If not could you update your readme to warn people that this product is delivered as user's own risk because no further debug or fix will be done.
"react-native-slider": "^0.11.0",
"version": "2.0.3", "name": "react-native-media-controls",
Please let me know what I need to do
Please fix the issue at below line
https://github.com/charliesbot/react-native-media-controls/blob/main/src/Controls.tsx#L26
Current Code:
accessibilityLabel={PLAYER_STATES.PAUSED ? "Tap to Play" : "Tap to Pause"}
Suggested Fix:
accessibilityLabel={PLAYER_STATES.PAUSED === playerState ? "Tap to Play" : "Tap to Pause"}
Hi mate,
I had to fork this to fix two issues, one was that start and end time (which i think you fixed in the latest). fixed by adding date.setMinutes(0); date.setHours(0);
But also the style where the controls had some align issue.
I had to manually increase a marginBottom: -150 to the mediacontrols.style.ts
But i much prefer not to fork and have a custom git (as it causes issues to my yarn).
Wonder if we can fix it here and have the styles in the ?
how can i changes the borderRadius of play Button
I got error after installing the package in my application.
ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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. ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). 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.
I'm not using ViewPropTypes anywhere in my application. this error only show after installing the yarn add react-native-media-controls react-native-slider
command
Used this plugin for video control but the same in running in android device shows "range error: Invalid Date" on MediaControls element. Please suggest what is the issue.
Here is the full code
`
import { Video } from 'expo-av';
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
export default function PlayVideoScreen({ navigation, routes, props }) {
const videoPlayer = React.useRef(null);
const [currentTime, setCurrentTime] = React.useState(0);
const [duration, setDuration] = React.useState(0);
const [isFullScreen, setIsFullScreen] = React.useState(false);
const [isLoading, setIsLoading] = React.useState(true);
const [paused, setPaused] = React.useState(false);
const [playerState, setPlayerState] = React.useState(PLAYER_STATES.PLAYING);
const noop = () => {};
const onSeek = (seek) => {
videoPlayer?.current.seek(seek);
};
const onPaused = (playerState) => {
setPaused(!paused);
setPlayerState(playerState);
};
const onReplay = () => {
setPlayerState(PLAYER_STATES.PLAYING);
videoPlayer?.current.seek(0);
};
const onProgress = (data) => {
// Video Player will continue progress even if the video already ended
// progress
if (!isLoading) {
setCurrentTime(data?.currentTime ? data?.currentTime : 0);
// setCurrentTime(0);
}
};
const onLoad = (data) => {
setDuration(data.duration);
setIsLoading(false);
};
const onLoadStart = () => setIsLoading(true);
const onEnd = () => {
// Uncomment this line if you choose repeat=false in the video player
// setPlayerState(PLAYER_STATES.ENDED);
};
const onSeeking = (currentTime) => setCurrentTime(currentTime);
return (
<View
style={styles.container}>
<Video
source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
rate={1.0}
volume={0.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
ref={(ref) => (videoPlayer.current = ref)}
style={{ width: '100%', height: 300, marginTop: 50 }}
paused={paused}
onLoad={onLoad}
onLoadStart={onLoadStart}
onEnd={onEnd}
onProgress={onProgress}
repeat
/>
<MediaControls
isFullScreen={isFullScreen}
duration={duration}
isLoading={isLoading}
mainColor={Colors.appColor}
onFullScreen={noop}
onPaused={onPaused}
onReplay={onReplay}
onSeek={onSeek}
onSeeking={onSeeking}
playerState={playerState}
progress={currentTime}
>
<MediaControls.Toolbar>
<View style={styles.toolbar}>
<Text>I'm a custom toolbar. </Text>
</View>
</MediaControls.Toolbar>
</MediaControls>
</View>
);
}
`
Every style props are required in typescript.
This causes type error.
Hi Charlie,
Tried fullscreen in android and ios, not working for both, could you provide some solution
Tried testing on Android and ios both
Based on the issue #25, it's clear that some unit tests would be helpful to avoid breaking this library in the future.
Hello @charliesbot,
Since you do not actively maintain this library, I forked it and solve some issues as you can see with this PR: #17.
I'm going to keep this library actively maintain with my own fork. Thank you for this awesome library :)
I hope you will come back soon to this community.
react-native-slider became @react-native-community/slider
Or is another library used?
After testing, it can only play web videos. I tried to play the video in android_assets, but it could not be played. Expo video can be played.
Hi i believe i need a way where the controls can be moved higher. Can you enable a props for that please? Right now its too low and clashing on a text overlay i have
Originally posted by @enigmablue in #27 (comment)
Hi everyone,
I would like to hide the "full screen icon".
Someone can help me ?
Thanks in advance
Great work on the controls component. Quick feature suggestion:
As a user I would like to set the show and fade in/out duration of the media controls.
When using the controls (especially) on short video clips, it would be great to be able to shorten the time the controls are shown before fading out so that you see more of the video.
Thanks!
Hi,
Thanks for making this awesome control.
One of the crucial dependency (react-native-slider) seems not maintain anymore.
I keep getting a warning about it.
Is it possible to switch to other package?
Is it possible to show only slider. Play/pause or replay button invisble always
Is it possible to have prop slider visiblity.
Thanks for sharing this project! We'd love to use it as part of the Mattermost open source project (https://www.mattermost.org/) in our React Native mobile app (which users an Apache 2.0 license).
Would you consider adding either an MIT or an Apache 2.0 license?
To do so, in GitHub you can hit "Create new file" and name a file LICENSE.txt
This will prompt GitHub to offer a license template:
If you use either an MIT license or an Apache 2.0 license it would make it easy to add your work to other open source projects, and we'd love to include your work in ours.
Thanks kindly for your consideration.
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.