Removed warnings

.prettierrc

@@ -4,4 +4,4 @@
   "printWidth": 120,
   "singleQuote": false,
   "trailingComma": "all"
-}
+}

src/components/CanvasTile.tsx

@@ -1,14 +1,13 @@
 import VideoPlayer from "./VideoPlayer";
 import { StreamInfo } from "./StreamingDeviceSelector";
-import { DeviceInfo } from "../containers/StreamingSettingsPanel";
 
 type Props = {
   label: string;
   selected: boolean;
   streamInfo: StreamInfo;
 };
 
-export const CanvasTile = ({ label, selected, streamInfo }: Props) => (
+export const CanvasTile = ({ selected, streamInfo }: Props) => (
   <div className="card-body  rounded-md p-4">
     <div className="flex flex-col w-20   indicator">
       {selected && <span className="indicator-item badge badge-success badge-lg"></span>}

src/components/ServerSdkContext.tsx

@@ -37,7 +37,7 @@ export const ServerSDKProvider = ({ children }: Props) => {
   const [protocol, setProtocol] = useLocalStorageStateString(LOCAL_STORAGE_PROTOCOL_KEY, "ws");
   const [path, setPath] = useLocalStorageStateString(LOCAL_STORAGE_PATH_KEY, "/socket/peer/websocket");
 
-  const [serverMessagesWebsocket, setServerMessagesWebsocket] = useState<string | null>(null);
+  const [serverMessagesWebsocket] = useState<string | null>(null);
   const [httpApiUrl, setHttpApiUrl] = useState<string | null>(null);
 
   const [serverToken, setServerToken] = useLocalStorageStateString("serverToken", "development");

src/components/StreamingDeviceSelector.tsx

@@ -95,7 +95,7 @@ export const StreamingDeviceSelector = ({
 
         {enumerateDevicesState?.audio.type === "OK" &&
           enumerateDevicesState.audio.devices
-            .filter(({ deviceId, label }) => !label.startsWith("Default"))
+            .filter(({ label }) => !label.startsWith("Default"))
             .map(({ deviceId, label }) => (
               <div
                 key={deviceId}

src/containers/App.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { LogSelector, PersistentInput, useLocalStorageState } from "../components/LogSelector";
 import { Room } from "./Room";
 import { JsonComponent } from "../components/JsonComponent";
 import { ThemeSelector } from "../components/ThemeSelector";
-import type { DeviceIdToStream, StreamInfo } from "../components/StreamingDeviceSelector";
+import type { StreamInfo } from "../components/StreamingDeviceSelector";
 import { Room as RoomAPI } from "../server-sdk";
 import { useSettings } from "../components/ServerSdkContext";
 import { showToastError } from "../components/Toasts";
@@ -21,8 +21,7 @@ export const App = () => {
   const [showDeviceSelector, setShowDeviceSelector] = useLocalStorageState("showDeviceSelector");
   const [showServerEvents, setShowServerEvents] = useLocalStorageState("showServerEvents");
   const [serverEventsState, setServerEventsState] = useState<"connected" | "disconnected">("disconnected");
-  const [selectedVideoStream, setSelectedVideoStream] = useState<StreamInfo | null>(null);
-  const [activeVideoStreams, setActiveVideoStreams] = useState<DeviceIdToStream | null>(null);
+  const [selectedVideoStream] = useState<StreamInfo | null>(null);
 
   const {
     setSignalingProtocol,

src/containers/App2.tsx

@@ -12,13 +12,13 @@ export const REFETCH_ON_MOUNT = "refetch on mount";
 
 export const App = () => {
   const { state, dispatch } = useStore();
-  const [selectedVideoStream, setSelectedVideoStream] = useState<StreamInfo | null>(null);
+  const [selectedVideoStream] = useState<StreamInfo | null>(null);
 
   const { roomApi } = useSettings();
 
-  const [serverMessages, setServerMessages] = useState<{ data: unknown; id: string }[]>([]);
+  // const [serverMessages, setServerMessages] = useState<{ data: unknown; id: string }[]>([]);
 
-  const { refetchRooms, refetchRoomsIfNeeded } = useApi();
+  const { refetchRoomsIfNeeded } = useApi();
 
   return (
     <div className="flex flex-col w-full-no-scrollbar h-full box-border pt-4">

src/containers/Client.tsx

@@ -63,7 +63,7 @@ export const Client = ({
   removeToken,
   setToken,
 }: ClientProps) => {
-  const { state, dispatch } = useStore();
+  const { state } = useStore();
   const client = state.rooms[roomId].peers[peerId].client;
 
   const connect = client.useConnect();
@@ -319,7 +319,10 @@ export const Client = ({
                   .get(trackId)
                   ?.getTracks()
                   .forEach((track) => track.stop());
-                activeOutgoingStreams.delete(trackId);
+                setActiveOutgoingStreams((prev) => {
+                  prev.delete(trackId);
+                  return prev;
+                });
               }}
               changeEncoding={changeEncoding}
               simulcastTransfer={trackId.audioPerks.enabled ? false : simulcastTransfer}

src/containers/Drawer.tsx

@@ -1,21 +1,10 @@
 import App2, { REFETCH_ON_MOUNT, REFETCH_ON_SUCCESS } from "./App2";
-import { PersistentInput, useLocalStorageState } from "../components/LogSelector";
-import React, { useState } from "react";
-import { DeviceIdToStream, StreamInfo } from "../components/StreamingDeviceSelector";
+import { PersistentInput } from "../components/LogSelector";
 import { useSettings } from "../components/ServerSdkContext";
 import { useApi } from "./Api";
 import { ThemeSelector } from "../components/ThemeSelector";
 
 export const Drawer = () => {
-  // const [showServerState, setShow] = useLocalStorageState(`show-json-fullstate`);
-  // const [showLogSelector, setShowLogSelector] = useLocalStorageState("showServerState-log-selector");
-  // const [showVideoroom, setShowVideoroom] = useLocalStorageState("showVideoroom-log-selector");
-  const [showDeviceSelector, setShowDeviceSelector] = useLocalStorageState("showDeviceSelector");
-  // const [showServerEvents, setShowServerEvents] = useLocalStorageState("showServerEvents");
-  // const [serverEventsState, setServerEventsState] = useState<"connected" | "disconnected">("disconnected");
-  const [selectedVideoStream, setSelectedVideoStream] = useState<StreamInfo | null>(null);
-  const [activeVideoStreams, setActiveVideoStreams] = useState<DeviceIdToStream | null>(null);
-
   const {
     setSignalingProtocol,
     signalingProtocol,
@@ -27,9 +16,7 @@ export const Drawer = () => {
     setServerToken,
   } = useSettings();
 
-  const [serverMessages, setServerMessages] = useState<{ data: unknown; id: string }[]>([]);
-
-  const { refetchRoomsIfNeeded, refetchRooms } = useApi();
+  const { refetchRooms } = useApi();
 
   return (
     <div className="drawer drawer-open">
@@ -56,43 +43,6 @@ export const Drawer = () => {
             >
               Get all
             </button>
-            {/*<button*/}
-            {/*  className={`btn btn-sm m-1 ${showLogSelector ? "btn-ghost" : ""}`}*/}
-            {/*  onClick={() => {*/}
-            {/*    setShowLogSelector(!showLogSelector);*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  {showLogSelector ? "Hide log selector" : "Show log selector"}*/}
-            {/*</button>*/}
-            {/**/}
-            {/*<button*/}
-            {/*  className={`btn btn-sm m-1 ${showServerEvents ? "btn-ghost" : ""}`}*/}
-            {/*  onClick={() => {*/}
-            {/*    setShowServerEvents(!showServerEvents);*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  {showServerEvents ? "Hide server events" : "Show server events"}*/}
-            {/*</button>*/}
-            {/**/}
-            {/**/}
-            {/*<button*/}
-            {/*  className={`btn btn-sm m-1 ${showServerState ? "btn-ghost" : ""}`}*/}
-            {/*  onClick={() => {*/}
-            {/*    setShow(!showServerState);*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  {showServerState ? "Hide server rooms" : "Show server rooms"}*/}
-            {/*</button>*/}
-            {/**/}
-            {/*<button*/}
-            {/*  className={`btn btn-sm m-1 ${showVideoroom ? "btn-ghost" : ""}`}*/}
-            {/*  onClick={() => {*/}
-            {/*    setShowVideoroom(!showVideoroom);*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  {showVideoroom ? "Hide videoroom" : "Show videoroom"}*/}
-            {/*</button>*/}
-            {/**/}
             <div className="form-control m-1 flex flex-row items-center">
               <input
                 type="text"

src/containers/Room.tsx

@@ -28,7 +28,7 @@ type RoomProps = {
   selectedVideoStream: StreamInfo | null;
 };
 
-export const Room = ({ roomId, initial, refetchIfNeeded, selectedVideoStream }: RoomProps) => {
+export const Room = ({ roomId, refetchIfNeeded }: RoomProps) => {
   const { state, dispatch } = useStore();
 
   const [show, setShow] = useLocalStorageState(`show-json-${roomId}`);

src/containers/StreamedTrackCard.tsx

@@ -33,7 +33,7 @@ export const StreamedTrackCard = ({
     trackInfo.videoPerks.encodings?.includes("m") || false,
     trackInfo.videoPerks.encodings?.includes("h") || false,
   ]);
-  const [simulcast, setSimulcast] = useState<boolean>(simulcastTransfer);
+  const simulcast = useState<boolean>(simulcastTransfer);
   const [expandedTrackId, setExpandedTrackId] = useState<boolean>(false);
   return (
     <div key={trackInfo?.id} className="card w-150 bg-base-100 shadow-xl p-2 m-2 indicator">

src/containers/StreamingSettingsPanel.tsx

@@ -79,29 +79,17 @@ export const StreamingSettingsPanel = ({
   currentEncodings,
   setCurrentEncodings,
 }: PanelProps) => {
-  const [storageMaxBandwidth, setStorageMaxBandwidth] = useLocalStorageStateString("max-bandwidth", "0");
-  const [storageSimulcast, setStorageSimulcast] = useLocalStorageState("simulcast");
-  const [storageTrackMetadata, setStorageTrackMetadata] = useLocalStorageStateString("track-metadata", "");
-  const [storageAttachMetadata, setStorageAttachMetadata] = useLocalStorageState("attach-metadata");
-  const [storageCurrentEncodings, setStorageCurrentEncodings] = useLocalStorageStateArray("current-encodings", [
-    "h",
-    "m",
-    "l",
-  ]);
-  const [storageSelectedDeviceId, setStorageSelectedDeviceId] = useLocalStorageStateString(
-    "selected-device-stream",
-    "",
-  );
-  const [storageSelectedDeviceType, setStorageSelectedDeviceType] = useLocalStorageStateString(
-    "selected-device-type",
-    "",
-  );
-  const [activeTab, setActiveTab] = useState<"Image" | "Settings" | "Metadata">("Image");
+  const [, setStorageMaxBandwidth] = useLocalStorageStateString("max-bandwidth", "0");
+  const [, setStorageSimulcast] = useLocalStorageState("simulcast");
+  const [, setStorageTrackMetadata] = useLocalStorageStateString("track-metadata", "");
+  const [, setStorageAttachMetadata] = useLocalStorageState("attach-metadata");
+  const [, setStorageCurrentEncodings] = useLocalStorageStateArray("current-encodings", ["h", "m", "l"]);
+  const [, setStorageSelectedDeviceId] = useLocalStorageStateString("selected-device-stream", "");
+  const [, setStorageSelectedDeviceType] = useLocalStorageStateString("selected-device-type", "");
   const [encodingLow, setEncodingLow] = useState<boolean>(currentEncodings.includes("l"));
   const [encodingMedium, setEncodingMedium] = useState<boolean>(currentEncodings.includes("m"));
   const [encodingHigh, setEncodingHigh] = useState<boolean>(currentEncodings.includes("h"));
   const [correctJSON, setCorrectJSON] = useState<boolean>(true);
-  const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
   const handleEncodingChange = (encoding: TrackEncoding) => {
     if (encoding === "l") {

src/main.tsx

@@ -17,5 +17,5 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         </ApiProvider>
       </RoomsContextProvider>
     </ServerSDKProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );