Update protos (#75)

Author: kamil-stasiak

protos

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { JsonComponent } from "./JsonComponent";
 import { useServerSdk } from "./ServerSdkContext";
 import { ServerMessage } from "../protos/jellyfish/server_notifications";
+
 export const ServerEvents = ({ displayed }: { displayed: boolean }) => {
   const [serverMessages, setServerMessages] = useState<ServerMessage[]>([]);
   const { serverWebsocket } = useServerSdk();
@@ -21,6 +22,10 @@ export const ServerEvents = ({ displayed }: { displayed: boolean }) => {
 
   useEffect(() => {
     serverWebsocket?.addEventListener("message", handler);
+
+    return () => {
+      serverWebsocket?.removeEventListener("message", handler);
+    };
   }, [serverWebsocket]);
 
   return (

src/components/ServerEvents.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { HlsApi, RoomApi } from "../server-sdk";
 import axios from "axios";
 import { ServerMessage } from "../protos/jellyfish/server_notifications";
@@ -57,18 +57,32 @@ export const ServerSDKProvider = ({
     [serverToken],
   );
   const httpServerUrl = signalingProtocol + "://" + signalingHost + signalingPath.replace("peer", "server");
-  const serverWebsocket = useMemo(() => (httpServerUrl ? createWS(httpServerUrl) : null), [httpServerUrl]);
-  if (serverWebsocket) {
-    serverWebsocket.binaryType = "arraybuffer";
+
+  const [serverWebsocket, setServerWebsocket] = useState<WebSocket | null>(null);
+
+  useEffect(() => {
+    const websocket = createWS(httpServerUrl);
+
+    if (!websocket) return () => {};
+
+    websocket.binaryType = "arraybuffer";
     // create a new writer
     const auth = ServerMessage.encode({ authRequest: { token: serverToken } }).finish();
     const subscr = ServerMessage.encode({ subscribeRequest: { eventType: 1 } }).finish();
 
-    serverWebsocket?.addEventListener("open", () => {
-      serverWebsocket.send(auth);
-      serverWebsocket.send(subscr);
+    websocket?.addEventListener("open", () => {
+      websocket.send(auth);
+      websocket.send(subscr);
     });
-  }
+
+    setServerWebsocket(websocket);
+
+    return () => {
+      websocket.close();
+      setServerWebsocket(null);
+    };
+  }, [httpServerUrl, serverToken]);
+
   const roomApi = useMemo(() => (httpApiUrl ? new RoomApi(undefined, httpApiUrl, client) : null), [client, httpApiUrl]);
   const hlsApi = useMemo(() => (httpApiUrl ? new HlsApi(undefined, httpApiUrl, client) : null), [client, httpApiUrl]);
 

src/components/ServerSdkContext.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { JsonComponent } from "../components/JsonComponent";
 import { getArrayValue, getStringValue, useLocalStorageState } from "../components/LogSelector";
 import { CloseButton } from "../components/CloseButton";
@@ -122,6 +122,25 @@ export const Client = ({
     (getArrayValue("current-encodings") as TrackEncoding[]) || ["h", "m", "l"],
   );
 
+  const connectionErrorTimeoutId = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!jellyfishClient) return;
+
+    const cb = () => {
+      if (connectionErrorTimeoutId.current) {
+        clearInterval(connectionErrorTimeoutId.current);
+      }
+      connectionErrorTimeoutId.current = null;
+    };
+
+    jellyfishClient.on("joined", cb);
+
+    return () => {
+      jellyfishClient?.removeListener("joined", cb);
+    };
+  }, [jellyfishClient]);
+
   const changeEncodingReceived = (trackId: string, encoding: TrackEncoding) => {
     if (!fullState) return;
     api?.setTargetTrackEncoding(trackId, encoding);
@@ -328,7 +347,7 @@ export const Client = ({
                   setTimeout(() => {
                     refetchIfNeeded();
                   }, 500);
-                  setTimeout(() => {
+                  connectionErrorTimeoutId.current = setTimeout(() => {
                     if (statusRef.current === "joined") return;
                     disconnect();
                     showToastError("Unable to connect, try again");