velvox
/
watchtogether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

player is super broken

This commit is contained in:
vel 2022-01-31 11:21:04 -08:00
parent 9350346b4c
commit f52b9a9c53
Signed by: velvox
GPG Key ID: 1C8200C1D689CEF5
7 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
backend/.idea/workspace.xml
View File

@ -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>

7
backend/internal/ws/handlers.go
View File

@ -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

12
backend/internal/ws/state.go
View File

@ -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

21
frontend/src/components/Player.tsx
View File

@ -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>

3
frontend/src/interfaces/Identity.ts
View File

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

1
frontend/src/interfaces/SocketEvents.ts
View File

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

3
frontend/src/pages/player.tsx
View File

@ -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>
</>
);