I'm developing an app as a workout with the function of synchronizing selected youtube videos, by users, for this, I'm using ReactJs, Socket.io, and React-player, however when I get to the synchronization part I have a question.
I intend to do the following: the video's progress time is stored in a useState, if the user is the owner of the room and this constant updates every 1s with the progress, then, when starting the video, a handleStartVideo function is triggered which will cause this user receives the currentTime from the owner of the room that will be found at the time of his video, however, my question is: how could I inform that the currenTime to be used is in a constant that is only defined by the owner of the room and for the average user has no defined value? could send by socket.io?
const [videoCurrentTime, setVideoCurrentTime] = useState<[]>([]);
const reactRef = useRef(null);
function handleNumberProgress(numberProgress:number) {
if(userName === ownerRoom) {
setVideoCurrentTime(numberProgress);
}
}
function handleStartVideo() {
if(userName === ownerRoom) {
console.log("Você é o dono da sala");
} else {
reactRef.current?.seekTo(videoCurrentTime);
}
}
<ReactPlayer
url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
ref={reactRef}
onStart={handleStartVideo}
progressInterval={1000}
onProgress={(e) => {handleNumberProgress(e.playedSeconds)}}
config={{
youtube: {
playerVars: {
showinfo: 1,
autoplay: 1,
}
},
}}
/>