@100mslive/roomkit-react 0.4.3-alpha.1 → 0.4.3-alpha.2

package/dist/meta.cjs.json

@@ -2369,7 +2369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppContext.tsx": {
-      "bytes": 881,
+      "bytes": 909,
       "imports": [
         {
           "path": "react",
@@ -11311,7 +11311,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a432/tldraw.css": {
+    "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f743b3/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11361,7 +11361,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a2c1/index.css": {
+    "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11370,7 +11370,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a432/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f743b3/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11445,7 +11445,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a2c1/index.css",
+          "path": "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12168,7 +12168,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 28662,
+      "bytes": 30184,
       "imports": [
         {
           "path": "react",
@@ -12295,6 +12295,11 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
+        {
+          "path": "src/Prebuilt/AppContext.tsx",
+          "kind": "import-statement",
+          "original": "../AppContext"
+        },
         {
           "path": "src/Prebuilt/layouts/WaitingView.tsx",
           "kind": "import-statement",
@@ -14591,7 +14596,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10920,
+      "bytes": 11117,
       "imports": [
         {
           "path": "react",
@@ -15709,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3695422
+      "bytes": 3698218
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -19042,7 +19047,7 @@
       "cssBundle": "dist/index.cjs.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 21632
+          "bytesInOutput": 21789
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 225096
@@ -19321,7 +19326,7 @@
           "bytesInOutput": 925
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8536
+          "bytesInOutput": 8704
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6918
@@ -19920,7 +19925,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 3051
         },
-        "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a2c1/index.css": {
+        "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19930,7 +19935,7 @@
           "bytesInOutput": 2922
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 30000
+          "bytesInOutput": 31534
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3395
@@ -20155,7 +20160,7 @@
           "bytesInOutput": 2777
         }
       },
-      "bytes": 1522919
+      "bytes": 1524778
     },
     "dist/index.cjs.css.map": {
       "imports": [],
@@ -20217,10 +20222,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a432/tldraw.css": {
+        "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f743b3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-3256-91rHJjrpAnZ1/19c65666a2c1/index.css": {
+        "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css": {
           "bytesInOutput": 401
         }
       },

package/dist/meta.esbuild.json

@@ -2369,7 +2369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppContext.tsx": {
-      "bytes": 881,
+      "bytes": 909,
       "imports": [
         {
           "path": "react",
@@ -11311,7 +11311,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c65666a433/tldraw.css": {
+    "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f743b2/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11361,7 +11361,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c656669e90/index.css": {
+    "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11370,7 +11370,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c65666a433/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f743b2/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11445,7 +11445,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c656669e90/index.css",
+          "path": "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12168,7 +12168,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 28662,
+      "bytes": 30184,
       "imports": [
         {
           "path": "react",
@@ -12295,6 +12295,11 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
+        {
+          "path": "src/Prebuilt/AppContext.tsx",
+          "kind": "import-statement",
+          "original": "../AppContext"
+        },
         {
           "path": "src/Prebuilt/layouts/WaitingView.tsx",
           "kind": "import-statement",
@@ -14591,7 +14596,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10920,
+      "bytes": 11117,
       "imports": [
         {
           "path": "react",
@@ -15709,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3735392
+      "bytes": 3738197
     },
     "dist/index.js": {
       "imports": [
@@ -19108,7 +19113,7 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 21632
+          "bytesInOutput": 21789
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 225091
@@ -19387,7 +19392,7 @@
           "bytesInOutput": 887
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8036
+          "bytesInOutput": 8204
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6633
@@ -19986,7 +19991,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c656669e90/index.css": {
+        "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19996,7 +20001,7 @@
           "bytesInOutput": 2787
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 28045
+          "bytesInOutput": 29541
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3171
@@ -20221,7 +20226,7 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1468045
+      "bytes": 1469866
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20283,10 +20288,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c65666a433/tldraw.css": {
+        "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f743b2/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-3256-icI8h5g2cNm3/19c656669e90/index.css": {
+        "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.4.3-alpha.1",
+  "version": "0.4.3-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -63,12 +63,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.4.3-alpha.1",
+    "@100mslive/hls-player": "0.4.3-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.2",
-    "@100mslive/hms-virtual-background": "1.14.3-alpha.1",
-    "@100mslive/hms-whiteboard": "0.1.3-alpha.1",
-    "@100mslive/react-icons": "0.11.3-alpha.1",
-    "@100mslive/react-sdk": "0.11.3-alpha.1",
+    "@100mslive/hms-virtual-background": "1.14.3-alpha.2",
+    "@100mslive/hms-whiteboard": "0.1.3-alpha.2",
+    "@100mslive/react-icons": "0.11.3-alpha.2",
+    "@100mslive/react-sdk": "0.11.3-alpha.2",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -105,5 +105,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5d1b47f6f2515d6e11e2179c14c3b388403df1ac"
+  "gitHead": "b2be1a31b8d79a33a3e2f4f2475a483d68fdffbb"
 }

package/src/Prebuilt/App.tsx

@@ -57,6 +57,7 @@ export type HMSPrebuiltOptions = {
   userId?: string;
   endpoints?: object;
   effectsSDKKey?: string;
+  managementToken?: string;
 };
 
 export type HMSPrebuiltProps = {
@@ -93,7 +94,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       logo,
       typography,
       themes,
-      options: { userName = '', userId = '', endpoints } = {},
+      options: { userName = '', userId = '', endpoints, managementToken } = {},
       screens,
       leaveOnUnload = true,
       onLeave,
@@ -141,12 +142,14 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
           tokenByRoomCode: string;
           roomLayout: string;
           event: string;
+          passport: string;
         }
       | undefined;
     const tokenByRoomCodeEndpoint = endpointsObj?.tokenByRoomCode;
     const initEndpoint = endpointsObj?.init;
     const eventEndpoint = endpointsObj?.event;
     const roomLayoutEndpoint = endpointsObj?.roomLayout;
+    const passportEndpoint = endpointsObj?.passport;
 
     const overrideLayout: Partial<Layout> = {
       logo,
@@ -180,11 +183,13 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             onJoin,
             userName,
             userId,
+            managementToken,
             endpoints: {
               tokenByRoomCode: tokenByRoomCodeEndpoint,
               init: initEndpoint,
               roomLayout: roomLayoutEndpoint,
               event: eventEndpoint,
+              passport: passportEndpoint,
             },
           }}
         >

package/src/Prebuilt/AppContext.tsx

@@ -8,6 +8,7 @@ type HMSPrebuiltContextType = {
   userId?: string;
   containerSelector: string;
   endpoints?: Record<string, string | undefined>;
+  managementToken?: string;
   onLeave?: () => void;
   onJoin?: () => void;
 };

package/src/Prebuilt/layouts/HLSView.jsx

@@ -34,6 +34,7 @@ import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
+import { useHMSPrebuiltContext } from '../AppContext';
 import { WaitingView } from './WaitingView';
 import { useSidepaneToggle } from '../components/AppData/useSidepane';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -79,6 +80,8 @@ const HLSView = () => {
   const [streamEnded, setStreamEnded] = useState(false);
   let [hlsStatsState, setHlsStatsState] = useState(null);
   const hlsUrl = hlsState.variants[0]?.url;
+  const { endpoints, managementToken } = useHMSPrebuiltContext();
+  const [resolvedHlsUrl, setResolvedHlsUrl] = useState(null);
   const [availableLayers, setAvailableLayers] = useState([]);
   const [isVideoLive, setIsVideoLive] = useState(true);
   const [isCaptionEnabled, setIsCaptionEnabled] = useState(true);
@@ -92,7 +95,7 @@ const HLSView = () => {
   });
   const [isPaused, setIsPaused] = useState(false);
   const [show, toggle] = useToggle(false);
-  const lastHlsUrl = usePrevious(hlsUrl);
+  const lastHlsUrl = usePrevious(resolvedHlsUrl);
   const vanillaStore = useHMSVanillaStore();
   const [controlsVisible, setControlsVisible] = useState(true);
   const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);
@@ -133,6 +136,50 @@ const HLSView = () => {
     }
   }, [hlsUrl, streamEnded, lastHlsUrl]);
 
+  // Fetch signed URL from passport-api for authenticated CDN streams
+  useEffect(() => {
+    if (!hlsUrl) {
+      setResolvedHlsUrl(null);
+      return;
+    }
+    if (!hlsUrl.includes('/s/')) {
+      setResolvedHlsUrl(hlsUrl);
+      return;
+    }
+    const passportEndpoint = endpoints?.passport;
+    if (!passportEndpoint || !managementToken) {
+      setResolvedHlsUrl(hlsUrl);
+      return;
+    }
+    let cancelled = false;
+    const fetchSignedUrl = async () => {
+      try {
+        const resp = await fetch(`${passportEndpoint}/token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${managementToken}`,
+          },
+          body: JSON.stringify({ url: hlsUrl }),
+        });
+        if (!resp.ok) throw new Error(`passport-api returned ${resp.status}`);
+        const data = await resp.json();
+        if (!cancelled) {
+          setResolvedHlsUrl(data.tokenized_url || hlsUrl);
+        }
+      } catch (err) {
+        console.error('[HLSView] Failed to fetch signed URL from passport-api:', err);
+        if (!cancelled) {
+          setResolvedHlsUrl(hlsUrl);
+        }
+      }
+    };
+    fetchSignedUrl();
+    return () => {
+      cancelled = true;
+    };
+  }, [hlsUrl, endpoints?.passport, managementToken]);
+
   useEffect(() => {
     if (!notification) return;
     const toastID = toastMap?.[notification.data.id];
@@ -261,8 +308,8 @@ const HLSView = () => {
     };
 
     const handleAutoplayBlock = data => setIsHlsAutoplayBlocked(!!data);
-    if (videoEl && hlsUrl) {
-      hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);
+    if (videoEl && resolvedHlsUrl) {
+      hlsPlayer = new HMSHLSPlayer(resolvedHlsUrl, videoEl);
       hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
       hlsPlayer.on(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);
       hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);
@@ -286,7 +333,7 @@ const HLSView = () => {
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hlsUrl, vanillaStore, hmsActions]);
+  }, [resolvedHlsUrl, vanillaStore, hmsActions]);
 
   /**
    * initialize and subscribe to hlsState