finally fixed player

backend/.idea/workspace.xml

@@ -6,7 +6,6 @@
   <component name="ChangeListManager">
     <list default="true" id="8a64704d-5500-41a6-aa4c-e275933fc58c" name="Changes" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../frontend/src/components/Player.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/components/Player.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../frontend/src/pages/player.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/pages/player.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />

frontend/src/components/Player.tsx

@@ -73,9 +73,7 @@ const Player = forwardRef<ReactPlayer, ReactPlayerProps>((props, ref) => {
         width="100%"
         height="100%"
         config={config}
-        controls
         ref={ref}
-        playing={false}
         {...props}
       />
     </Box>

frontend/src/hooks/useWS.ts

@@ -14,6 +14,9 @@ const useWS = ({ user }: useWSProps): PlayerSocket | null => {
   // todo checkout usecallback
   const [socket, setSocket] = useState<PlayerSocket>(null);
   useEffect(() => {
+    if (socket !== null) {
+      return;
+    }
     let internalSocket = new PlayerSocket(user);
     setSocket(internalSocket);
     return () => {

frontend/src/interfaces/Identity.ts

@@ -2,7 +2,7 @@ import IUser from "./IUser";
 
 interface IdentityData {
   admin?: boolean;
-  controller?: boolean;
+  hasController?: boolean;
   clientID?: string;
   playlist?: string;
   playhead?: number;

frontend/src/pages/player.tsx

@@ -8,10 +8,12 @@ import { Container } from "../components/Container";
 import Player from "../components/Player";
 import useWS from "../hooks/useWS";
 import IdentityData from "../interfaces/Identity";
+import { MessageTypes } from "../interfaces/IMessage";
 import SetPlayheadEvent from "../interfaces/Playhead";
 import SocketEvents from "../interfaces/SocketEvents";
 import { isBrowser } from "../util";
-import PlayerSocket from "../ws/websocket";
+import Message from "../util/Message";
+import MessageUtil from "../util/MessageUtil";
 
 interface PlayerPageProps {
   user: User;
@@ -23,25 +25,74 @@ const PlayerPage: NextPage<PlayerPageProps> = ({ user }) => {
   const playerRef = useRef<ReactPlayer>();
   const [id, setID] = useState<string>("");
   const [identity, setIdentity] = useState<IdentityData>();
+  const [paused, setPaused] = useState<boolean>(true);
+
   useEffect(() => {
     if (isBrowser() && typeof socket !== "undefined") {
       socket?.emitter.once(SocketEvents.Identify, (e: IdentityData) => {
         setID(e.playlist);
         setIdentity(e);
+        playerRef?.current.seekTo(e.playhead);
+        setPaused(e.paused);
       });
       socket?.emitter.on(SocketEvents.SetPlayhead, (e: SetPlayheadEvent) => {
-        console.log(e);
+        console.log(e.paused);
+        setPaused(e.paused);
+        playerRef.current.seekTo(e.playhead);
       });
     }
   }, [socket]);
-  const onSeek = () => {};
+  const onPlay = () => {
+    if (!identity.admin) return;
+    setPaused(false);
+    socket?.send(
+      MessageUtil.encode(
+        new Message(MessageTypes.SetPlayhead, {
+          playhead: playerRef.current.getCurrentTime(),
+          paused: false,
+        })
+      )
+    );
+  };
+  const onSeek = (playedSeconds: number) => {
+    if (!identity.admin) return;
+    socket.send(
+      MessageUtil.encode(
+        new Message(MessageTypes.SetPlayhead, {
+          playhead: playedSeconds,
+          paused: paused,
+        })
+      )
+    );
+  };
+  const onPause = () => {
+    console.log("running now");
+    if (!identity.admin) return;
+    setPaused(true);
+    socket?.send(
+      MessageUtil.encode(
+        new Message(MessageTypes.SetPlayhead, {
+          playhead: playerRef.current.getCurrentTime(),
+          paused: true,
+        })
+      )
+    );
+  };
   return (
     <>
       <Head>
         <title>Watch Together</title>
       </Head>
       <Container height="100vh" background={"#000"}>
-        <Player ref={playerRef} />
+        <Player
+          url={id}
+          onPlay={onPlay}
+          onPause={onPause}
+          onSeek={onSeek}
+          controls={identity?.hasController}
+          playing={!paused}
+          ref={playerRef}
+        />
       </Container>
     </>
   );