charliesbot / react-native-media-controls

A sweet UI component to manipulate your media. Strongly typed.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Shows Range error: Invalid Date

jitendrahpatwa opened this issue · comments

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

}
`

Any solution for this error?

I'm using android + react native video. Is that library that you are using sending the time in milliseconds?

image

does anyone know the solution to this?

@HassanKhan96 how are you sending the time values to this library?

If the values are not sent in millisecond, it will fail