diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml index 8f3dc7f..d0c22a3 100644 --- a/backend/.idea/workspace.xml +++ b/backend/.idea/workspace.xml @@ -5,10 +5,9 @@ - - + @@ -101,4 +100,15 @@ true + + + + + file://$PROJECT_DIR$/internal/ws/handlers.go + 61 + + + + \ No newline at end of file diff --git a/backend/internal/ws/handlers.go b/backend/internal/ws/handlers.go index d018a8d..d17e9a4 100644 --- a/backend/internal/ws/handlers.go +++ b/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 diff --git a/backend/internal/ws/state.go b/backend/internal/ws/state.go index 8e97abe..ee50984 100644 --- a/backend/internal/ws/state.go +++ b/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 diff --git a/frontend/src/components/Player.tsx b/frontend/src/components/Player.tsx index ebd43d2..52ef0ed 100644 --- a/frontend/src/components/Player.tsx +++ b/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 = (props) => { @@ -21,10 +23,20 @@ const Player: FC = (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 = (props) => { ); }; const onPause = () => { + if (!props.identity.admin) return; setPaused(true); socket?.send( MessageUtil.encode( @@ -57,6 +70,7 @@ const Player: FC = (props) => { ); }; const onPlay = () => { + if (!props.identity.admin) return; setPaused(false); socket?.send( MessageUtil.encode( @@ -74,11 +88,12 @@ const Player: FC = (props) => { width="100%" height="100%" config={config} - controls + controls={props.identity.admin} onPlay={onPlay} onPause={onPause} onSeek={onSeek} ref={playerRef} + playing={!paused} {...props} /> diff --git a/frontend/src/interfaces/Identity.ts b/frontend/src/interfaces/Identity.ts index 2867307..1e5b0f2 100644 --- a/frontend/src/interfaces/Identity.ts +++ b/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; } diff --git a/frontend/src/interfaces/SocketEvents.ts b/frontend/src/interfaces/SocketEvents.ts index 9b25b0a..408d0a9 100644 --- a/frontend/src/interfaces/SocketEvents.ts +++ b/frontend/src/interfaces/SocketEvents.ts @@ -1,5 +1,6 @@ enum SocketEvents { Identify = "Identify", + SetPlayhead = "SetPlayhead", GetPlayhead = "GetPlayhead", } diff --git a/frontend/src/pages/player.tsx b/frontend/src/pages/player.tsx index 608fb27..a71eade 100644 --- a/frontend/src/pages/player.tsx +++ b/frontend/src/pages/player.tsx @@ -28,6 +28,7 @@ const PlayerPage: NextPage = ({ user }) => { setID(e.playlist); setIdentity(e); }); + console.log(identity); } return ( <> @@ -35,7 +36,7 @@ const PlayerPage: NextPage = ({ user }) => { Watch Together - + );