From 7ba50976cfd16dd0a286c4a0432e9a867e865b4b Mon Sep 17 00:00:00 2001
From: Riley Smith <riley@rileysmith.me>
Date: Wed, 26 Jan 2022 23:45:57 -0800
Subject: [PATCH] even more websocket changes

---
 .vscode/settings.json            |  3 +-
 backend/.idea/workspace.xml      | 11 ++-----
 backend/internal/ws/handlers.go  |  2 +-
 frontend/package.json            |  2 ++
 frontend/src/hooks/useWS.ts      | 10 +++++--
 frontend/src/pages/player.tsx    | 49 +++++++++-----------------------
 frontend/src/util/MessageUtil.ts |  4 +--
 frontend/src/util/isBrowser.ts   |  3 ++
 frontend/tsconfig.json           |  2 +-
 frontend/yarn.lock               |  7 ++++-
 10 files changed, 40 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/util/isBrowser.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 65a1965..fd79ad2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.tabSize": 2
 }
diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index b1a3086..dd904f3 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -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" />
diff --git a/backend/internal/ws/handlers.go b/backend/internal/ws/handlers.go
index 43d2a0f..b142571 100644
--- a/backend/internal/ws/handlers.go
+++ b/backend/internal/ws/handlers.go
@@ -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"],
 			},
diff --git a/frontend/package.json b/frontend/package.json
index 4e19664..de9d723 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
diff --git a/frontend/src/hooks/useWS.ts b/frontend/src/hooks/useWS.ts
index ac3926a..2a4c80c 100644
--- a/frontend/src/hooks/useWS.ts
+++ b/frontend/src/hooks/useWS.ts
@@ -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;
 };
 
diff --git a/frontend/src/pages/player.tsx b/frontend/src/pages/player.tsx
index c3b1d03..ed313e5 100644
--- a/frontend/src/pages/player.tsx
+++ b/frontend/src/pages/player.tsx
@@ -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>
     </>
   );
diff --git a/frontend/src/util/MessageUtil.ts b/frontend/src/util/MessageUtil.ts
index 40d93e3..8351360 100644
--- a/frontend/src/util/MessageUtil.ts
+++ b/frontend/src/util/MessageUtil.ts
@@ -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);
   }
 }
diff --git a/frontend/src/util/isBrowser.ts b/frontend/src/util/isBrowser.ts
new file mode 100644
index 0000000..cc6ba88
--- /dev/null
+++ b/frontend/src/util/isBrowser.ts
@@ -0,0 +1,3 @@
+export default function isBrowser() {
+  return typeof window !== "undefined";
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index cf80077..067e4e5 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -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"]
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3d6d306..6aa2155 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -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==