Fix auto added protocol (#73)

Author: kamil-stasiak

src/components/CreateRoom.tsx

@@ -30,7 +30,7 @@ const roomCounterAtom = atomWithStorage<number>("last-room-id", 0);
 const isRoomEnforceEncoding = (value: string): value is EnforceEncoding => value === "h264" || value === "vp8";
 
 export const CreateRoom: FC<Props> = ({ refetchIfNeeded, host }) => {
-  const { roomApi } = useServerSdk();
+  const { roomApi, currentURISchema } = useServerSdk();
   const [videoCodec, setEnforceEncodingInput] = useAtom(videoCodecAtomFamily(host));
   const [maxPeers, setMaxPeers] = useAtom(maxPeersAtom(host));
 
@@ -51,9 +51,10 @@ export const CreateRoom: FC<Props> = ({ refetchIfNeeded, host }) => {
   const path = useAtomValue(pathAtom);
   const serverToken = useAtomValue(serverTokenAtom);
 
-  const addServer = (host: string) => {
+  const addServer = (httpProtocol: string, host: string) => {
     setJellyfishServers((current) => {
-      const id = `${current.isHttps ? "https" : "http"}://${host}${path}`;
+      const id = `${httpProtocol}://${host}${path}`;
+
       return {
         ...current,
         [id]: {
@@ -183,8 +184,11 @@ export const CreateRoom: FC<Props> = ({ refetchIfNeeded, host }) => {
                 })
                 .then((response) => {
                   if (host !== response.data.data.jellyfish_address) {
-                    showToastInfo(`Room created on ${response.data.data.jellyfish_address}`);
-                    addServer(response.data.data.jellyfish_address);
+                    const protocol = currentURISchema ?? "http";
+
+                    showToastInfo(`Room created on ${protocol}://${response.data.data.jellyfish_address}`);
+
+                    addServer(protocol, response.data.data.jellyfish_address);
                   }
                   refetchIfNeeded();
                   setRoomOrder((prev) => {

src/components/HLSPlayback.tsx

@@ -9,12 +9,12 @@ const autoPlayHlsAtom = atomWithStorage("hls-auto-play", true);
 const showHlsPreviewAtom = atomWithStorage("show-hls-preveiew", true);
 
 export default function HlsPlayback({ roomId, isPlayable }: { roomId: string; isPlayable: boolean }) {
-  const { signalingHost, currentHttpProtocol } = useServerSdk();
+  const { signalingHost, currentURISchema } = useServerSdk();
   const [autoPlay, setAutoPlay] = useAtom(autoPlayHlsAtom);
   const [showHlsPreview, setShowHlsPreview] = useAtom(showHlsPreviewAtom);
   const hls = useRef<Hls | null>(null);
 
-  const hlsLink = `${currentHttpProtocol}://${signalingHost}/hls/${roomId}/index.m3u8`;
+  const hlsLink = `${currentURISchema}://${signalingHost}/hls/${roomId}/index.m3u8`;
 
   const loadUrl = useCallback(
     (media: HTMLVideoElement | null) => {

src/components/ServerSdkContext.tsx

@@ -6,9 +6,9 @@ import { showToastError } from "./Toasts";
 
 export type ServerSdkType = {
   signalingHost: string | null;
-  signalingProtocol: string | null;
+  signalingURISchema: string | null;
   signalingPath: string | null;
-  currentHttpProtocol: string | null;
+  currentURISchema: string | null;
   roomApi: RoomApi | null;
   hlsApi: HlsApi | null;
   httpApiUrl: string | null;
@@ -21,8 +21,8 @@ const ServerSdkContext = React.createContext<ServerSdkType | undefined>(undefine
 type Props = {
   children: React.ReactNode;
   signalingHost: string;
-  signalingProtocol: "wss" | "ws";
-  currentHttpProtocol: "https" | "http";
+  signalingURISchema: "wss" | "ws";
+  currentURISchema: "https" | "http";
   signalingPath: string;
   serverToken: string;
 };
@@ -41,11 +41,11 @@ export const ServerSDKProvider = ({
   children,
   signalingHost,
   signalingPath,
-  signalingProtocol,
+  signalingURISchema,
   serverToken,
-  currentHttpProtocol,
+  currentURISchema,
 }: Props) => {
-  const httpApiUrl = `${currentHttpProtocol}://${signalingHost}`;
+  const httpApiUrl = `${currentURISchema}://${signalingHost}`;
 
   const client = useMemo(
     () =>
@@ -56,7 +56,7 @@ export const ServerSDKProvider = ({
       }),
     [serverToken],
   );
-  const httpServerUrl = signalingProtocol + "://" + signalingHost + signalingPath.replace("peer", "server");
+  const httpServerUrl = signalingURISchema + "://" + signalingHost + signalingPath.replace("peer", "server");
 
   const [serverWebsocket, setServerWebsocket] = useState<WebSocket | null>(null);
 
@@ -94,10 +94,10 @@ export const ServerSDKProvider = ({
         hlsApi,
         serverWebsocket,
         serverToken,
-        signalingProtocol,
+        signalingURISchema,
         signalingHost,
         signalingPath,
-        currentHttpProtocol,
+        currentURISchema,
       }}
     >
       {children}

src/containers/Client.tsx

@@ -99,7 +99,7 @@ export const Client = ({
 
   const api = client.useSelector((snapshot) => snapshot.connectivity.api);
   const jellyfishClient = client.useSelector((snapshot) => snapshot.connectivity.client);
-  const { signalingHost, signalingPath, signalingProtocol, hlsApi } = useServerSdk();
+  const { signalingHost, signalingPath, signalingURISchema, hlsApi } = 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}`);
@@ -329,10 +329,10 @@ export const Client = ({
                     return;
                   }
                   const singling: SignalingUrl | undefined =
-                    signalingHost && signalingProtocol && signalingPath
+                    signalingHost && signalingURISchema && signalingPath
                       ? {
                           host: signalingHost,
-                          protocol: signalingProtocol,
+                          protocol: signalingURISchema,
                           path: signalingPath,
                         }
                       : undefined;

src/containers/JellyfishInstance.tsx

@@ -40,7 +40,7 @@ export const JellyfishInstance = ({
   const { state, dispatch } = useStore();
   const [refetchRequested] = useAtom(refetchAtom);
 
-  const { roomApi, signalingPath, signalingProtocol, serverToken } = useServerSdk();
+  const { roomApi, signalingPath, signalingURISchema, serverToken } = useServerSdk();
 
   const { refetchRoomsIfNeeded, refetchRooms, allRooms } = useApi();
 
@@ -111,7 +111,7 @@ export const JellyfishInstance = ({
                 {showEvents ? "Hide" : "Show"} server events
               </button>
               <Link
-                to={`./servers/${host}/internals?${urlParams(signalingProtocol, signalingPath, serverToken)}`}
+                to={`./servers/${host}/internals?${urlParams(signalingURISchema, signalingPath, serverToken)}`}
                 className="btn btn-sm mx-1 my-0"
                 target="_blank"
               >

src/containers/JellyfishServer.tsx

@@ -19,8 +19,8 @@ export const JellyfishServer = ({ host, isWss, path, serverToken, refetchDemand,
     <ServerSDKProvider
       signalingHost={host}
       signalingPath={path}
-      signalingProtocol={isWss ? "wss" : "ws"}
-      currentHttpProtocol={isHttps ? "https" : "http"}
+      signalingURISchema={isWss ? "wss" : "ws"}
+      currentURISchema={isHttps ? "https" : "http"}
       serverToken={serverToken}
     >
       <RoomsContextProvider>