Есть приложение на React, в котором 2 страницы. Первая страница запускает видео файл на весь экран. Вторая страница должна управлять первой (менять видео).
На второй странице создаю:
<input type="file">
получаю с помощью FileReader и передаю видео из input в родительский компонент (App.jsx) сохраняя в setCurrentVideo. После этого currentVideo отправляю из App.jsx на первую страницу... В App.jsx файл приходит, console.log(currentVideo) показывает, что файл на месте, НО на первой странице не меняется видео.
Подскажите, что я делаю не так?
Нужно чтобы после добавления видео в input на второй странице, первая страница автоматически запускала новое видео (без звука).
function App() {
const [currentVideo, setCurrentVideo] = useState();
console.log(currentVideo) // показывает, что файл на месте...
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<VideoPage currentVideo={currentVideo}/>}/>
<Route path='/admin' element={<AdminPage setCurrentVideo={setCurrentVideo}/>} />
</Routes>
</BrowserRouter>
);
}
export default App;
function VideoPage({ currentVideo }) {
return(
<div className="video-box">
<video className='video' src={currentVideo} autoPlay loop preload="auto" muted></video>
</div>
)
}
export default VideoPage;
