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>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="8a64704d-5500-41a6-aa4c-e275933fc58c" name="Changes" comment=""> <list default="true" id="8a64704d-5500-41a6-aa4c-e275933fc58c" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/Caddyfile" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../.vscode/settings.json" beforeDir="false" afterPath="$PROJECT_DIR$/../.vscode/settings.json" afterDir="false" />
<change afterPath="$PROJECT_DIR$/docker-compose.yml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/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/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/hooks/useWS.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/hooks/useWS.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/pages/player.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/pages/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" />
<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/src/ws/websocket.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/ws/websocket.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/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/yarn.lock" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../frontend/yarn.lock" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/yarn.lock" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />

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

@ -17,7 +17,7 @@ func handleIdentifyEvent(message *Message) {
Type: Identify, Type: Identify,
Data: map[string]interface{}{ Data: map[string]interface{}{
"admin": true, "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, "playhead": 0,
"user": d["user"], "user": d["user"],
}, },

2
frontend/package.json
View File

@ -16,6 +16,7 @@
"@emotion/react": "11.1.5", "@emotion/react": "11.1.5",
"@emotion/styled": "11.1.5", "@emotion/styled": "11.1.5",
"consola": "^2.15.3", "consola": "^2.15.3",
"events": "^3.3.0",
"framer-motion": "^4.0.3", "framer-motion": "^4.0.3",
"next": "latest", "next": "latest",
"next-auth": "^4.1.2", "next-auth": "^4.1.2",
@ -27,6 +28,7 @@
}, },
"devDependencies": { "devDependencies": {
"@next/bundle-analyzer": "^12.0.8", "@next/bundle-analyzer": "^12.0.8",
"@types/events": "^3.0.0",
"@types/node": "^14.6.0", "@types/node": "^14.6.0",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"@types/react-dom": "^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 // todo write websocket reconnector
const useWS = ({ user }: useWSProps) => { const useWS = ({ user }: useWSProps) => {
if (typeof window === "undefined") {
return;
}
// todo checkout usecallback // todo checkout usecallback
const [socket, setSocket] = useState<PlayerSocket>(); const [socket, setSocket] = useState<PlayerSocket>();
useEffect(() => { useEffect(() => {
let socket = new PlayerSocket(user); let internalSocket = new PlayerSocket(user);
setSocket(socket); setSocket(internalSocket);
return () => { return () => {
return socket.close(); return internalSocket.close();
}; };
}, []); }, []);
return socket; 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 { getSession } from "next-auth/react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
import React, { useRef } from "react"; import React, { useRef, useState } from "react";
import ReactPlayer from "react-player"; import ReactPlayer from "react-player";
import { Container } from "../components/Container"; import { Container } from "../components/Container";
import useWS from "../hooks/useWS"; 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 }); const Player = dynamic(() => import("../components/Player"), { ssr: false });
@ -18,47 +21,21 @@ interface PlayerPageProps {
const PlayerPage: NextPage<PlayerPageProps> = ({ URI, user }) => { const PlayerPage: NextPage<PlayerPageProps> = ({ URI, user }) => {
const playerRef = useRef<ReactPlayer>(); const playerRef = useRef<ReactPlayer>();
const socket = useWS({ user }); const socket = useWS({ user });
// useEffect(() => { const [id, setID] = useState<string>("");
// if (typeof window === "undefined") return; if (isBrowser() && typeof socket !== "undefined") {
// const ws = new WebSocket(URI); socket.emitter.on("Identify", (e: IdentityData) => {
// ws.onopen = () => { console.log(e);
// ws.send( setID(e.playlist);
// 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();
// };
// }, []);
return ( return (
<> <>
<Head> <Head>
<title>Watch Together</title> <title>Watch Together</title>
</Head> </Head>
<Container height="100vh"> <Container height="100vh">
<Player id="" ref={playerRef} /> <Player id={id} ref={playerRef} />
</Container> </Container>
</> </>
); );

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

@ -8,9 +8,9 @@ export default class MessageUtil {
} }
static decode(message: string): Message | null { static decode(message: string): Message | null {
const parsed = JSON.parse(message); const parsed = JSON.parse(message);
if (typeof parsed.t !== "number") { if (typeof parsed.type !== "number") {
return null; 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", "jsx": "preserve",
"typeRoots": ["types/"] "typeRoots": ["types/"]
}, },
"include": ["types/*.d.ts", "**/*.ts", "**/*.tsx"], "include": ["types/*.d.ts", "**/*.ts", "**/*.tsx", "next-seo.config.js"],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }

7
frontend/yarn.lock
View File

@ -954,6 +954,11 @@
prop-types "^15.7.2" prop-types "^15.7.2"
tslib "^2.1.0" 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": "@types/lodash.mergewith@4.6.6":
version "4.6.6" version "4.6.6"
resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10" 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" resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
events@3.3.0: events@3.3.0, events@^3.3.0:
version "3.3.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400" resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q== integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==