Fix HLS change

src/containers/Client.tsx

@@ -19,7 +19,7 @@ import { DeviceInfo, StreamingSettingsCard } from "./StreamingSettingsCard";
 import { checkJSON } from "./StreamingSettingsPanel";
 import { atomFamily, atomWithStorage } from "jotai/utils";
 import { useSetAtom } from "jotai";
-import { ComponentOptionsHLSSubscribeModeEnum } from "../server-sdk";
+import { ComponentHLS } from "../server-sdk";
 
 type ClientProps = {
   roomId: string;
@@ -30,7 +30,7 @@ type ClientProps = {
   remove: (roomId: string) => void;
   setToken: (token: string) => void;
   removeToken: () => void;
-  hlsMode?: ComponentOptionsHLSSubscribeModeEnum;
+  hlsComponent?: ComponentHLS;
 };
 
 export const createDefaultTrackMetadata = (type: string) =>
@@ -65,9 +65,9 @@ export const trackMetadataAtomFamily = atomFamily((clientId) =>
   atomWithStorage<Record<TrackId, unknown> | null>(`track-metadata-${clientId}`, null),
 );
 
-const prepareHlsButtonMessage = (hlsMode?: ComponentOptionsHLSSubscribeModeEnum): string | null => {
-  if (hlsMode === undefined) return "There is no HLS component in this room";
-  if (hlsMode === "auto") return "HLS is in automatic subscription mode";
+const prepareHlsButtonMessage = (hlsComponent?: ComponentHLS): string | null => {
+  if (hlsComponent === undefined) return "There is no HLS component in this room";
+  if (hlsComponent.properties.subscribeMode === "auto") return "HLS is in automatic subscription mode";
   else return null;
 };
 
@@ -80,7 +80,7 @@ export const Client = ({
   remove,
   removeToken,
   setToken,
-  hlsMode,
+  hlsComponent,
 }: ClientProps) => {
   const { state, dispatch } = useStore();
   const client = state.rooms[roomId].peers[peerId].client;
@@ -98,7 +98,7 @@ export const Client = ({
 
   const api = client.useSelector((snapshot) => snapshot.connectivity.api);
   const jellyfishClient = client.useSelector((snapshot) => snapshot.connectivity.client);
-  const { signalingHost, signalingPath, signalingURISchema, hlsApi } = useServerSdk();
+  const { signalingHost, signalingPath, signalingURISchema, roomApi } = useServerSdk();
   const [showClientState, setShowClientState] = useLocalStorageState(`show-client-state-json-${peerId}`);
   const [attachClientMetadata, setAttachClientMetadata] = useLocalStorageState(`attach-client-metadata-${peerId}`);
   const [showMetadataEditor, setShowMetadataEditor] = useLocalStorageState(`show-metadata-editor-${peerId}`);
@@ -268,7 +268,7 @@ export const Client = ({
     if (!trackId) throw Error("Adding track error!");
   };
 
-  const hlsMessage = prepareHlsButtonMessage(hlsMode);
+  const hlsMessage = prepareHlsButtonMessage(hlsComponent);
 
   return (
     <div className="flex flex-col gap-1 mx-1">
@@ -427,10 +427,11 @@ export const Client = ({
             <div className="tooltip tooltip-info z-10" data-tip={hlsMessage}>
               <button
                 className="btn btn-sm btn-warning"
-                disabled={hlsMode !== "manual"}
+                disabled={hlsComponent?.properties.subscribeMode !== "manual"}
                 onClick={() => {
-                  hlsApi
-                    ?.subscribeHlsTo(roomId, {
+                  if (!hlsComponent) return;
+                  roomApi
+                    ?.subscribeTo(roomId, hlsComponent.id, {
                       origins: [peerId],
                     })
                     .then(() => {

src/containers/Room.tsx

@@ -4,7 +4,7 @@ import { REFETCH_ON_SUCCESS } from "./JellyfishInstance";
 import { JsonComponent } from "../components/JsonComponent";
 import { Client } from "./Client";
 import { CopyToClipboardButton } from "../components/CopyButton";
-import { ComponentHLS, ComponentOptionsHLSSubscribeModeEnum, Room as RoomAPI } from "../server-sdk";
+import { ComponentHLS, Room as RoomAPI } from "../server-sdk";
 import { useServerSdk } from "../components/ServerSdkContext";
 import { getBooleanValue, loadObject, saveObject } from "../utils/localStorageUtils";
 import AddFileComponent from "../components/AddFileComponent";
@@ -127,12 +127,8 @@ export const Room = ({ roomId, refetchIfNeeded, refetchRequested }: RoomProps) =
     return clientId1 - clientId2;
   };
 
-  const hlsMode: ComponentOptionsHLSSubscribeModeEnum | undefined = useMemo(() => {
-    const hlsEndpoint = roomState?.components?.find((component) => component.type === "hls") as
-      | ComponentHLS
-      | undefined;
-
-    return hlsEndpoint?.properties?.subscribeMode;
+  const hlsComponent: ComponentHLS | undefined = useMemo(() => {
+    return roomState?.components?.find((component) => component.type === "hls") as ComponentHLS | undefined;
   }, [roomState]);
 
   return (
@@ -248,7 +244,7 @@ export const Room = ({ roomId, refetchIfNeeded, refetchRequested }: RoomProps) =
                 setToken={(token: string) => {
                   addToken(id, token);
                 }}
-                hlsMode={hlsMode}
+                hlsComponent={hlsComponent}
               />
             );
           })}