Add synced play/pause

hsujeremy · Mar 22, 2021 · 02e3f76 · 02e3f76
1 parent e743de0
commit 02e3f76
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 32 deletions.
diff --git a/react-client/src/App.js b/react-client/src/App.js
@@ -1,51 +1,77 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import YouTube from 'react-youtube';
 import './index.css';
 import socketClient from 'socket.io-client';
 
 
-let cElement = null;
+let event = null;
 function Video(props) {
     const opts = {
         playerVars: {
             autoplay: 1
         }
     };
 
-    useEffect(() => {
-        if (cElement) {
-            if (props.isPaused) {
-                cElement.target.pauseVideo();
-            } else {
-                cElement.target.playVideo();
-            }
+    React.useEffect(() => {
+        if (event) {
+            // if (props.isPaused) {
+            //     event.target.pauseVideo();
+            // } else {
+            //     event.target.playVideo();
+            // }
+            console.log(event.target.getPlayerState());
+            const payload = {
+                'action': 'playpause',
+                'state': event.target.getPlayerState()
+            };
+            props.socket.emit('message', payload);
         }
-    }, [props.socket, props.isPaused]);
+    }, [props.playPauseCounter]);
 
-    useEffect(() => {
-        // Effect only used when the prop value is changed
-        if (cElement) {
+    React.useEffect(() => {
+        if (event) {
+            event.target.pauseVideo();
             const payload = {
                 'action': 'sync',
-                'timestamp': cElement.target.getCurrentTime()
+                'timestamp': event.target.getCurrentTime()
             };
             props.socket.emit('message', payload);
         }
-    }, [props.socket, props.syncCounter]);
+    }, [props.syncCounter]);
+
+    React.useEffect(() => {
+        console.log('called effect')
+        if (event) {
+            event.target.playVideo();
+        }
+    }, [props.playCounter]);
+
+    React.useEffect(() => {
+        if (event) {
+            event.target.pauseVideo();
+        }
+    }, [props.pauseCounter]);
 
     props.socket.on('message', (message) => {
-        console.log('from the video class' + message);
-        if (message.action === 'sync' && cElement) {
-            cElement.target.seekTo(message.timestamp);
+        if (message.action === 'sync' && event) {
+            event.target.seekTo(message.timestamp);
+            event.target.pauseVideo();
+            event.target.playVideo();
+        } else if (message.action === 'playpause' && event) {
+            if (message.state === 1) {
+                event.target.pauseVideo();
+            } else {
+                event.target.playVideo();
+            }
         }
-    })
+    });
 
     const _onReady = (e) => {
-        cElement = e;
+        event = e;
     };
 
     const _onStateChange = (e) => {
-        cElement = e;
+        event = e;
     };
 
     return (
@@ -61,17 +87,30 @@ function Video(props) {
 function Content() {
     const [videoUrl, setVideoUrl] = React.useState('');
 
-    const [isPaused, setIsPaused] = useState(false);
-    const [syncCounter, incrementSyncCounter] = useState(0);
+    const [isPaused, setIsPaused] = React.useState(false);
+    const [playPauseCounter, incrementPlayPauseCounter] = React.useState(0);
+    const [syncCounter, incrementSyncCounter] = React.useState(0);
+
+    const [playCounter, incrementPlayCounter] = React.useState(0);
+    const [pauseCounter, incrementPauseCounter] = React.useState(0);
 
     const togglePause = () => {
         socket.emit('message', 'From togglePause in client')
         setIsPaused(!isPaused);
+        incrementPlayPauseCounter(playPauseCounter + 1);
     };
 
     const sync = () => {
         socket.emit('message', 'Sync!');
-        incrementSyncCounter(syncCounter+1);
+        incrementSyncCounter(syncCounter + 1);
+    };
+
+    const playVideo = () => {
+        incrementPlayCounter(playCounter + 1);
+    };
+
+    const pauseVideo = () => {
+        incrementPauseCounter(pauseCounter + 1);
     };
 
     const socket = socketClient('http://127.0.0.1:8080');
@@ -81,10 +120,6 @@ function Content() {
         videoCode = videoUrl.split('v=')[1].split('&')[0];
     }
 
-    socket.on('message', (message) => {
-        console.log(message);
-    });
-
     return (
         <div>
             <div>
@@ -94,8 +129,8 @@ function Content() {
             <div>
                 <input value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} />
 
-                <Video socket={socket} isPaused={isPaused} syncCounter={syncCounter} />
-                <button onClick={togglePause}>Local Pause</button>
+                <Video socket={socket} isPaused={isPaused} playPauseCounter={playPauseCounter} syncCounter={syncCounter} playCounter={playCounter} pauseCounter={pauseCounter} />
+                <button onClick={togglePause}>Play/Pause</button>
 
                 <button onClick={sync}>Sync</button>
             </div>

diff --git a/server/index.js b/server/index.js
@@ -8,8 +8,6 @@ io.on('connection', (socket) => {
     console.log('User connected');
 
     socket.on('message', (message) => {
-        console.log('From the server');
-        console.log(message);
         io.emit('message', message);
     });
 });