Is it possible to have prop slider visiblity.

Based on the issue #25, it's clear that some unit tests would be helpful to avoid breaking this library in the future.

"react-native-slider": "^0.11.0",
"version": "2.0.3", "name": "react-native-media-controls",

Please let me know what I need to do

Sorry to chase but..
I dont believe this custom styles is working

#33

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.

`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.

• What went wrong:
  Execution failed for task ':app:bundleReleaseJsAndAssets'.

Process 'command 'cmd'' finished with non-zero exit value 1`

Hi Charlie,

Tried fullscreen in android and ios, not working for both, could you provide some solution

Tried testing on Android and ios both

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.

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

• "react": "18.0.0"
• "react-native": "0.69.5"

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.

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 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?

};

@charliesbot

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.

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%' }}

how can i changes the borderRadius of play Button

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 ?

react-native-slider became @react-native-community/slider

Or is another library used?

Hi, i'm new to react native and tried to use your component to manipulate media in my app (audio only).
So i added the code (without the Video component) but when i run the app i get this issue:
Undefined is not a function (evaluating 'this.renderToobar()')
thanks for your help

Hi everyone,

I would like to hide the "full screen icon".

Someone can help me ?

Thanks in advance

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"}

I need onSeeking to update duration on real-time.
onSeek just firing after finish seeking.

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>
);

}
`

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?

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)

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

},

How does one customise the styling of the elements,

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

Every style props are required in typescript.
This causes type error.

I can't see play button after updating Ios14
react-native-image library needs patch facebook/react-native#29279

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,

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.

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?

Hi,

I'm really liking this project, but for some reason, the icons are not being displayed. Is there something else I need to do to set this up correctly?

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, 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

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.

Is it possible to show only slider. Play/pause or replay button invisble always

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