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

even more websocket changes

This commit is contained in:
vel 2022-01-26 23:45:57 -08:00
parent e8e5b7e409
commit 7ba50976cf
Signed by: velvox
GPG Key ID: 1C8200C1D689CEF5
10 changed files with 40 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -1,3 +1,4 @@
{
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}

11
backend/.idea/workspace.xml
View File

@ -5,18 +5,13 @@
</component>
<component name="ChangeListManager">
<list default="true" id="8a64704d-5500-41a6-aa4c-e275933fc58c" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/Caddyfile" afterDir="false" />
<change afterPath="$PROJECT_DIR$/docker-compose.yml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../.vscode/settings.json" beforeDir="false" afterPath="$PROJECT_DIR$/../.vscode/settings.json" 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$/../frontend/.env.example" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/.env.example" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/interfaces/IMessage.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/interfaces/IMessage.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/interfaces/Identity.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/interfaces/Identity.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/pages/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/pages/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/hooks/useWS.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/hooks/useWS.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/pages/player.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/pages/player.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/util/Message.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/util/Message.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/types/environment.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/types/environment.d.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/src/ws/websocket.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/ws/websocket.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../frontend/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/yarn.lock" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />

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

@ -17,7 +17,7 @@ func handleIdentifyEvent(message *Message) {
Type: Identify,
Data: map[string]interface{}{
"admin": true,
"playlist": "",
"playlist": "http://cdnapi.kaltura.com/p/1878761/sp/187876100/playManifest/entryId/1_usagz19w/flavorIds/1_5spqkazq,1_nslowvhp,1_boih5aji,1_qahc37ag/format/applehttp/protocol/http/a.m3u8",
"playhead": 0,
"user": d["user"],
},

2
frontend/package.json
View File

@ -16,6 +16,7 @@
"@emotion/react": "11.1.5",
"@emotion/styled": "11.1.5",
"consola": "^2.15.3",
"events": "^3.3.0",
"framer-motion": "^4.0.3",
"next": "latest",
"next-auth": "^4.1.2",
@ -27,6 +28,7 @@
},
"devDependencies": {
"@next/bundle-analyzer": "^12.0.8",
"@types/events": "^3.0.0",
"@types/node": "^14.6.0",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",

10
frontend/src/hooks/useWS.ts
View File

@ -8,15 +8,19 @@ interface useWSProps {
// todo write websocket reconnector
const useWS = ({ user }: useWSProps) => {
if (typeof window === "undefined") {
return;
}
// todo checkout usecallback
const [socket, setSocket] = useState<PlayerSocket>();
useEffect(() => {
let socket = new PlayerSocket(user);
setSocket(socket);
let internalSocket = new PlayerSocket(user);
setSocket(internalSocket);
return () => {
return socket.close();
return internalSocket.close();
};
}, []);
return socket;
};

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

@ -3,10 +3,13 @@ import { User } from "next-auth";
import { getSession } from "next-auth/react";
import dynamic from "next/dynamic";
import Head from "next/head";
import React, { useRef } from "react";
import React, { useRef, useState } from "react";
import ReactPlayer from "react-player";
import { Container } from "../components/Container";
import useWS from "../hooks/useWS";
import IdentityData from "../interfaces/Identity";
import { MessageTypes } from "../interfaces/IMessage";
import isBrowser from "../util/isBrowser";
const Player = dynamic(() => import("../components/Player"), { ssr: false });
@ -18,47 +21,21 @@ interface PlayerPageProps {
const PlayerPage: NextPage<PlayerPageProps> = ({ URI, user }) => {
const playerRef = useRef<ReactPlayer>();
const socket = useWS({ user });
// useEffect(() => {
// if (typeof window === "undefined") return;
// const ws = new WebSocket(URI);
// ws.onopen = () => {
// ws.send(
// MessageUtil.encode(
// new Message(MessageTypes.Identify, {
// clientID: process.env.CLIENT_ID,
// user: {
// ID: user.id,
// Name: user.name,
// },
// })
// )
// );
// pingEvent(ws);
// };
// ws.onmessage = (event) => {
// console.log(event);
// console.log(JSON.parse(event.data));
// };
// ws.onclose = () => {
// ws.close();
// };
// ws.onerror = (err) => {
// console.log(err);
// return () => {
// ws.close();
// };
// };
// return () => {
// ws.close();
// };
// }, []);
const [id, setID] = useState<string>("");
if (isBrowser() && typeof socket !== "undefined") {
socket.emitter.on("Identify", (e: IdentityData) => {
console.log(e);
setID(e.playlist);
});
}
return (
<>
<Head>
<title>Watch Together</title>
</Head>
<Container height="100vh">
<Player id="" ref={playerRef} />
<Player id={id} ref={playerRef} />
</Container>
</>
);

4
frontend/src/util/MessageUtil.ts
View File

@ -8,9 +8,9 @@ export default class MessageUtil {
}
static decode(message: string): Message | null {
const parsed = JSON.parse(message);
if (typeof parsed.t !== "number") {
if (typeof parsed.type !== "number") {
return null;
}
return new Message(parsed.t, parsed.d);
return new Message(parsed.type, parsed.data);
}
}

3
frontend/src/util/isBrowser.ts Normal file
View File

@ -0,0 +1,3 @@
export default function isBrowser() {
return typeof window !== "undefined";
}

2
frontend/tsconfig.json
View File

@ -15,6 +15,6 @@
"jsx": "preserve",
"typeRoots": ["types/"]
},
"include": ["types/*.d.ts", "**/*.ts", "**/*.tsx"],
"include": ["types/*.d.ts", "**/*.ts", "**/*.tsx", "next-seo.config.js"],
"exclude": ["node_modules"]
}

7
frontend/yarn.lock
View File

@ -954,6 +954,11 @@
prop-types "^15.7.2"
tslib "^2.1.0"
"@types/events@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
"@types/lodash.mergewith@4.6.6":
version "4.6.6"
resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
@ -1671,7 +1676,7 @@ etag@1.8.1:
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
events@3.3.0:
events@3.3.0, events@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==