react-native-media-controls
react-native-media-controls copied to clipboard
Shows Range error: Invalid Date
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?
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