@100mslive/roomkit-react 0.3.7-alpha.5 → 0.3.8-alpha.0

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-JAZO4PHJ.js";
+} from "./chunk-NDLMRKFR.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 331221,
+      "bytes": 331528,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -7622,7 +7622,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx": {
-      "bytes": 2042,
+      "bytes": 2121,
       "imports": [
         {
           "path": "react",
@@ -9403,7 +9403,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 6751,
+      "bytes": 6739,
       "imports": [
         {
           "path": "react",
@@ -11118,7 +11118,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/HMSVideo/utils.ts": {
-      "bytes": 977,
+      "bytes": 1203,
       "imports": [
         {
           "path": "<define:process.env>",
@@ -11129,7 +11129,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/HMSVideo/VideoProgress.tsx": {
-      "bytes": 2967,
+      "bytes": 2942,
       "imports": [
         {
           "path": "react",
@@ -11160,7 +11160,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/HMSVideo/VideoTime.tsx": {
-      "bytes": 1309,
+      "bytes": 1531,
       "imports": [
         {
           "path": "react",
@@ -13775,7 +13775,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3304627
+      "bytes": 3305923
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -16719,7 +16719,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18287
+          "bytesInOutput": 18306
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -17199,7 +17199,7 @@
           "bytesInOutput": 16122
         },
         "../../node_modules/sdp-transform/lib/parser.js": {
-          "bytesInOutput": 3497
+          "bytesInOutput": 3492
         },
         "../../node_modules/sdp-transform/lib/writer.js": {
           "bytesInOutput": 3070
@@ -17400,7 +17400,7 @@
           "bytesInOutput": 1003
         },
         "src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx": {
-          "bytesInOutput": 2558
+          "bytesInOutput": 2637
         },
         "src/Prebuilt/components/Chat/MwebChatOption.tsx": {
           "bytesInOutput": 688
@@ -17499,7 +17499,7 @@
           "bytesInOutput": 8756
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 7958
+          "bytesInOutput": 7946
         },
         "src/Prebuilt/components/Chip.tsx": {
           "bytesInOutput": 1118
@@ -17604,13 +17604,13 @@
           "bytesInOutput": 5741
         },
         "src/Prebuilt/components/HMSVideo/utils.ts": {
-          "bytesInOutput": 833
+          "bytesInOutput": 1025
         },
         "src/Prebuilt/components/HMSVideo/VideoProgress.tsx": {
-          "bytesInOutput": 3785
+          "bytesInOutput": 3714
         },
         "src/Prebuilt/components/HMSVideo/VideoTime.tsx": {
-          "bytesInOutput": 1748
+          "bytesInOutput": 2019
         },
         "src/Prebuilt/components/HMSVideo/VolumeControl.tsx": {
           "bytesInOutput": 2951
@@ -17772,7 +17772,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1572364
+      "bytes": 1572837
     }
   }
 }

package/dist/meta.esbuild.json

@@ -4691,7 +4691,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 331221,
+      "bytes": 331528,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -7622,7 +7622,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx": {
-      "bytes": 2042,
+      "bytes": 2121,
       "imports": [
         {
           "path": "react",
@@ -9403,7 +9403,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 6751,
+      "bytes": 6739,
       "imports": [
         {
           "path": "react",
@@ -11118,7 +11118,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/HMSVideo/utils.ts": {
-      "bytes": 977,
+      "bytes": 1203,
       "imports": [
         {
           "path": "<define:process.env>",
@@ -11129,7 +11129,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/HMSVideo/VideoProgress.tsx": {
-      "bytes": 2967,
+      "bytes": 2942,
       "imports": [
         {
           "path": "react",
@@ -11160,7 +11160,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/HMSVideo/VideoTime.tsx": {
-      "bytes": 1309,
+      "bytes": 1531,
       "imports": [
         {
           "path": "react",
@@ -13780,7 +13780,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-JAZO4PHJ.js",
+          "path": "dist/chunk-NDLMRKFR.js",
           "kind": "import-statement"
         }
       ],
@@ -13853,16 +13853,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-JXKL2OA3.js.map": {
+    "dist/HLSView-CTZXD762.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 99966
+      "bytes": 100708
     },
-    "dist/HLSView-JXKL2OA3.js": {
+    "dist/HLSView-CTZXD762.js": {
       "imports": [
         {
-          "path": "dist/chunk-JAZO4PHJ.js",
+          "path": "dist/chunk-NDLMRKFR.js",
           "kind": "import-statement"
         },
         {
@@ -14069,13 +14069,13 @@
           "bytesInOutput": 328
         },
         "src/Prebuilt/components/HMSVideo/VideoProgress.tsx": {
-          "bytesInOutput": 3058
+          "bytesInOutput": 2986
         },
         "src/Prebuilt/components/HMSVideo/utils.ts": {
-          "bytesInOutput": 725
+          "bytesInOutput": 917
         },
         "src/Prebuilt/components/HMSVideo/VideoTime.tsx": {
-          "bytesInOutput": 1316
+          "bytesInOutput": 1564
         },
         "src/Prebuilt/components/HMSVideo/VolumeControl.tsx": {
           "bytesInOutput": 2284
@@ -14096,15 +14096,15 @@
           "bytesInOutput": 2101
         }
       },
-      "bytes": 61571
+      "bytes": 61939
     },
-    "dist/chunk-JAZO4PHJ.js.map": {
+    "dist/chunk-NDLMRKFR.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3200472
+      "bytes": 3201090
     },
-    "dist/chunk-JAZO4PHJ.js": {
+    "dist/chunk-NDLMRKFR.js": {
       "imports": [
         {
           "path": "react",
@@ -16487,7 +16487,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-JXKL2OA3.js",
+          "path": "dist/HLSView-CTZXD762.js",
           "kind": "dynamic-import"
         },
         {
@@ -16968,7 +16968,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18287
+          "bytesInOutput": 18306
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224310
@@ -16986,7 +16986,7 @@
           "bytesInOutput": 16120
         },
         "../../node_modules/sdp-transform/lib/parser.js": {
-          "bytesInOutput": 3497
+          "bytesInOutput": 3492
         },
         "../../node_modules/sdp-transform/lib/writer.js": {
           "bytesInOutput": 3068
@@ -17547,7 +17547,7 @@
           "bytesInOutput": 9625
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 6448
+          "bytesInOutput": 6436
         },
         "src/Prebuilt/components/Polls/Polls.tsx": {
           "bytesInOutput": 735
@@ -17622,7 +17622,7 @@
           "bytesInOutput": 1727
         },
         "src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx": {
-          "bytesInOutput": 1835
+          "bytesInOutput": 1914
         },
         "src/Prebuilt/components/Header/HeaderComponents.jsx": {
           "bytesInOutput": 1626
@@ -17928,7 +17928,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1310446
+      "bytes": 1310527
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.7-alpha.5",
+  "version": "0.3.8-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.7-alpha.5",
+    "@100mslive/hls-player": "0.3.8-alpha.0",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.7-alpha.5",
-    "@100mslive/react-icons": "0.10.7-alpha.5",
-    "@100mslive/react-sdk": "0.10.7-alpha.5",
+    "@100mslive/hms-virtual-background": "1.13.8-alpha.0",
+    "@100mslive/react-icons": "0.10.8-alpha.0",
+    "@100mslive/react-sdk": "0.10.8-alpha.0",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "3dd4ad3ad8988f0550edafae26b500b11925936e"
+  "gitHead": "01f2b5f23cc814beb7f077b46b6736f1e00ceaad"
 }

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
-import { getPercentage } from './utils';
+import { getDuration, getPercentage } from './utils';
 
 export const VideoProgress = ({
   seekProgress,
@@ -19,7 +19,7 @@ export const VideoProgress = ({
     if (!videoEl) {
       return;
     }
-    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const duration = getDuration(videoEl);
     const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration));
     let bufferProgress = 0;
     if (videoEl.buffered.length > 0) {
@@ -42,6 +42,7 @@ export const VideoProgress = ({
     if (!videoEl) {
       return;
     }
+    setProgress();
     videoEl.addEventListener('timeupdate', timeupdateHandler);
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);

package/src/Prebuilt/components/HMSVideo/VideoTime.tsx

@@ -1,30 +1,39 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { HMSHLSPlayerEvents } from '@100mslive/hls-player';
 import { Text } from '../../../Text';
 import { useHMSPlayerContext } from './PlayerContext';
-import { getDurationFromSeconds } from './utils';
+import { getDuration, getDurationFromSeconds } from './utils';
 
 export const VideoTime = () => {
   const { hlsPlayer } = useHMSPlayerContext();
-  const [videoTime, setVideoTime] = useState('');
 
-  useEffect(() => {
-    const timeupdateHandler = (currentTime: number) => {
+  const [videoTime, setVideoTime] = useState(getDurationFromSeconds(0));
+
+  const updateTime = useCallback(
+    (currentTime: number) => {
       const videoEl = hlsPlayer?.getVideoElement();
       if (videoEl) {
-        const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
+        const duration = getDuration(videoEl);
         setVideoTime(getDurationFromSeconds(duration - currentTime));
       } else {
         setVideoTime(getDurationFromSeconds(currentTime));
       }
+    },
+    [hlsPlayer],
+  );
+  useEffect(() => {
+    const timeupdateHandler = (currentTime: number) => {
+      updateTime(currentTime);
     };
     if (hlsPlayer) {
       hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+      const videoEl = hlsPlayer?.getVideoElement();
+      updateTime(videoEl.currentTime);
     }
     return function cleanup() {
       hlsPlayer?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
-  }, [hlsPlayer]);
+  }, [hlsPlayer, updateTime]);
 
   return hlsPlayer ? (
     <Text

package/src/Prebuilt/components/HMSVideo/utils.ts

@@ -25,3 +25,13 @@ export function getDurationFromSeconds(timeInSeconds: number) {
   }
   return videoTimeStr;
 }
+
+export function getDuration(videoEl: HTMLVideoElement): number {
+  if (isFinite(videoEl.duration)) {
+    return videoEl.duration;
+  }
+  if (videoEl.seekable.length > 0) {
+    return videoEl.seekable.end(0);
+  }
+  return 0;
+}

package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -15,7 +15,7 @@ export const RoomDetailsPane = () => {
   const { description } = useRoomLayoutHeader();
   const isMwebHLSStream = useMobileHLSStream();
   return (
-    <Box css={{ flex: '1 1 0' }}>
+    <Box css={{ flex: '1 1 0', position: 'relative' }}>
       {isMwebHLSStream ? (
         <Flex direction="row" align="center" gap="2">
           <Logo />
@@ -41,7 +41,7 @@ const ShowRoomDetailHeader = () => {
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const isMwebHLSStream = useMobileHLSStream();
   return (
-    <Flex direction="column">
+    <Flex direction="column" css={{ position: 'sticky', top: 0, bg: '$surface_dim' }}>
       <Flex justify="between" align="center" css={{ w: '100%' }}>
         <Text variant="h6">{title}</Text>
         {!isMwebHLSStream && (

package/src/Prebuilt/layouts/SidePane.tsx

@@ -162,7 +162,7 @@ const SidePane = ({
     mobileStream: isMobileHLSStream,
     hideControls,
     overlayChat: !!elements?.chat?.is_overlay,
-    roomDescription: isMobile && sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS,
+    roomDescription: sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS,
     virtualBackground: sidepane === SIDE_PANE_OPTIONS.VB,
   };