player is super broken

backend/.idea/workspace.xml

@@ -5,10 +5,9 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="8a64704d-5500-41a6-aa4c-e275933fc58c" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/internal/ws/state.go" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/internal/ws/handlers.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/handlers.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/internal/ws/hub.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/hub.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/internal/ws/state.go" beforeDir="false" afterPath="$PROJECT_DIR$/internal/ws/state.go" 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>
@@ -101,4 +100,15 @@
   <component name="VgoProject">
     <integration-enabled>true</integration-enabled>
   </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" type="DlvLineBreakpoint">
+          <url>file://$PROJECT_DIR$/internal/ws/handlers.go</url>
+          <line>61</line>
+          <option name="timeStamp" value="7" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
+  </component>
 </project>

backend/internal/ws/handlers.go

@@ -15,7 +15,7 @@ func handleIdentifyEvent(message *Message) {
 	user := d["user"].(map[string]interface{})
 	userId := user["id"].(string)
 	playhead := message.hub.State.playhead
-
+	paused := message.hub.State.paused
 	m := Message{
 		MessageData: MessageData{
 			Type: Identify,
@@ -24,6 +24,7 @@ func handleIdentifyEvent(message *Message) {
 				"playlist":      "http://localhost:8081/BelleOpening.m3u8",
 				"hasController": message.hub.State.IsController(userId),
 				"playhead":      playhead,
+				"paused":        paused,
 				"user":          d["user"],
 			},
 		},
@@ -62,6 +63,10 @@ func handleSetPlayhead(message *Message) {
 	if err != nil {
 		log.Errorf("unable to set playhead. %s", err)
 	}
+	err = message.hub.State.setPaused(d["paused"].(bool))
+	if err != nil {
+		log.Errorf("unable to set paused. %s", err)
+	}
 	for client := range message.Client.hub.Clients {
 		if client == message.Client {
 			continue

backend/internal/ws/state.go

@@ -27,11 +27,19 @@ func (s *State) setPlayhead(playhead float64) error {
 		return errors.New("unable to find state")
 	}
 	s.Lock()
-	defer s.Lock()
+	defer s.Unlock()
 	s.playhead = playhead
 	return nil
 }
-
+func (s *State) setPaused(paused bool) error {
+	if s == nil {
+		return errors.New("unable to find state")
+	}
+	s.Lock()
+	defer s.Unlock()
+	s.paused = paused
+	return nil
+}
 func (s *State) IsController(userID string) bool {
 	if userID == s.controllerUserId {
 		return true

frontend/src/components/Player.tsx

@@ -1,6 +1,7 @@
 import { Box, css } from "@chakra-ui/react";
-import React, { FC, useRef, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import ReactPlayer, { Config, ReactPlayerProps } from "react-player";
+import IdentityData from "../interfaces/Identity";
 import { MessageTypes } from "../interfaces/IMessage";
 import SocketEvents from "../interfaces/SocketEvents";
 import Message from "../util/Message";
@@ -10,6 +11,7 @@ import PlayerSocket from "../ws/websocket";
 type PlayerProps = {
   id: string;
   socket: PlayerSocket;
+  identity?: IdentityData;
 } & ReactPlayerProps;
 
 const Player: FC<PlayerProps> = (props) => {
@@ -21,10 +23,20 @@ const Player: FC<PlayerProps> = (props) => {
       forceHLS: true,
     },
   };
-  socket.emitter.on(SocketEvents.GetPlayhead, (e) => {
+  useEffect(() => {
+    if (playerRef.current && typeof props.identity !== "undefined") {
+      console.log(props.identity.playhead);
+      playerRef.current.seekTo(props.identity.playhead);
+      setPaused(props.identity.paused);
+    }
+  }, []);
+  socket.emitter.once(SocketEvents.SetPlayhead, (e) => {
+    console.log(e);
     playerRef.current.seekTo(e.playhead);
+    setPaused(e.paused);
   });
   const onSeek = (playedSeconds: number) => {
+    if (!props.identity.admin) return;
     if (paused) {
       socket?.send(
         MessageUtil.encode(
@@ -46,6 +58,7 @@ const Player: FC<PlayerProps> = (props) => {
     );
   };
   const onPause = () => {
+    if (!props.identity.admin) return;
     setPaused(true);
     socket?.send(
       MessageUtil.encode(
@@ -57,6 +70,7 @@ const Player: FC<PlayerProps> = (props) => {
     );
   };
   const onPlay = () => {
+    if (!props.identity.admin) return;
     setPaused(false);
     socket?.send(
       MessageUtil.encode(
@@ -74,11 +88,12 @@ const Player: FC<PlayerProps> = (props) => {
         width="100%"
         height="100%"
         config={config}
-        controls
+        controls={props.identity.admin}
         onPlay={onPlay}
         onPause={onPause}
         onSeek={onSeek}
         ref={playerRef}
+        playing={!paused}
         {...props}
       />
     </Box>

frontend/src/interfaces/Identity.ts

@@ -5,7 +5,8 @@ interface IdentityData {
   controller?: boolean;
   clientID?: string;
   playlist?: string;
-  playHead?: number;
+  playhead?: number;
+  paused?: boolean;
   user: IUser;
 }
 

frontend/src/interfaces/SocketEvents.ts

@@ -1,5 +1,6 @@
 enum SocketEvents {
   Identify = "Identify",
+  SetPlayhead = "SetPlayhead",
   GetPlayhead = "GetPlayhead",
 }
 

frontend/src/pages/player.tsx

@@ -28,6 +28,7 @@ const PlayerPage: NextPage<PlayerPageProps> = ({ user }) => {
       setID(e.playlist);
       setIdentity(e);
     });
+    console.log(identity);
   }
   return (
     <>
@@ -35,7 +36,7 @@ const PlayerPage: NextPage<PlayerPageProps> = ({ user }) => {
         <title>Watch Together</title>
       </Head>
       <Container height="100vh" background={"#000"}>
-        <Player id={id} socket={socket} />
+        <Player id={id} socket={socket} identity={identity} />
       </Container>
     </>
   );