0
I’m trying to do the react-native-media-controls control my video of the av expo and in no way works, below I will leave the code of the component complete
import React, { useState, useRef } from 'react';
import { StyleSheet, View, Text, Platform } from 'react-native';
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
import { Video } from 'expo-av';
export default function VideoPlayer() {
const video = require('../video.mp4');
const videoPlayer = useRef(null);
const [duration, setDuration] = useState(0);
const [paused, setPaused] = useState(true);
const [currentTime, setCurrentTime] = useState(0);
const [playerState, setPlayerState] = useState(PLAYER_STATES.PAUSED);
const [isLoading, setIsLoading] = useState(true);
const onSeek = (seek) => {
videoPlayer?.current.seek(seek);
};
const onSeeking = (currentVideoTime) => setCurrentTime(currentVideoTime);
const onPaused = (newState) => {
setPaused(!paused);
setPlayerState(newState);
};
const onReplay = () => {
videoPlayer?.current.seek(0);
setCurrentTime(0);
if (Platform.OS === 'android') {
setPlayerState(PLAYER_STATES.PAUSED);
setPaused(true);
} else {
setPlayerState(PLAYER_STATES.PLAYING);
setPaused(false);
}
};
const onProgress = (data) => {
if (!isLoading) {
setCurrentTime(data.currentTime);
}
};
const onLoad = (data) => {
setDuration(Math.round(data.duration));
setIsLoading(false);
};
const onLoadStart = () => setIsLoading(true);
const onEnd = () => {
setPlayerState(PLAYER_STATES.ENDED);
setCurrentTime(duration);
};
return (
<View>
<Video
source={video}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
style={{ width: 400, height: 250 }}
ref={(ref) => (videoPlayer.current = ref)}
onEnd={onEnd}
onLoad={onLoad}
onLoadStart={onLoadStart}
posterResizeMode={'cover'}
onProgress={onProgress}
paused={paused}
/>
<MediaControls
isFullScreen={false}
duration={duration}
isLoading={isLoading}
progress={currentTime}
onPaused={onPaused}
onReplay={onReplay}
onSeek={onSeek}
onSeeking={onSeeking}
mainColor={"black"}
playerState={playerState}
sliderStyle={{ containerStyle: {}, thumbStyle: {}, trackStyle: {} }}
/>
</View>
);
};
When I try to load the application shows this error
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: %s, Slider
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
at [native code]:null in callFunctionReturnFlushedQueue
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: %s, Slider
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication
at [native code]:null in callFunctionReturnFlushedQueue
RangeError: Invalid Date
This error is located at:
in Slider (created by MediaControls)
in RCTView (at View.js:34)
in View (created by MediaControls)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (created by MediaControls)
in TouchableWithoutFeedback (created by MediaControls)
in MediaControls (at videoPlayer.js:84)
in RCTView (at View.js:34)
in View (at videoPlayer.js:62)
in VideoPlayer (at App.js:9)
in RCTView (at View.js:34)
in View (at App.js:8)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in callFunctionReturnFlushedQueue
RangeError: Invalid Date
This error is located at:
in Slider (created by MediaControls)
in RCTView (at View.js:34)
in View (created by MediaControls)
in RCTView (at View.js:34)
in View (at createAnimatedComponent.js:165)
in AnimatedComponent (at createAnimatedComponent.js:215)
in ForwardRef(AnimatedComponentWrapper) (created by MediaControls)
in TouchableWithoutFeedback (created by MediaControls)
in MediaControls (at videoPlayer.js:84)
in RCTView (at View.js:34)
in View (at videoPlayer.js:62)
in VideoPlayer (at App.js:9)
in RCTView (at View.js:34)
in View (at App.js:8)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue