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

package/dist/{HLSView-J76FQQDB.js → HLSView-CTZXD762.js}

@@ -38,11 +38,11 @@ import {
   useRoomLayoutHeader,
   useSidepaneToggle,
   useTheme
-} from "./chunk-VKO5HF7B.js";
+} from "./chunk-NDLMRKFR.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
-import React15, { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import React15, { useCallback as useCallback3, useEffect as useEffect3, useRef, useState as useState4 } from "react";
 import { useFullscreen, useMedia as useMedia4, usePrevious, useToggle } from "react-use";
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
 import screenfull from "screenfull";
@@ -427,6 +427,15 @@ function getDurationFromSeconds2(timeInSeconds) {
   }
   return videoTimeStr;
 }
+function getDuration(videoEl) {
+  if (isFinite(videoEl.duration)) {
+    return videoEl.duration;
+  }
+  if (videoEl.seekable.length > 0) {
+    return videoEl.seekable.end(0);
+  }
+  return 0;
+}
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
 var VideoProgress = ({
@@ -438,15 +447,15 @@ var VideoProgress = ({
   const [bufferProgress, setBufferProgress] = useState(0);
   const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
   const setProgress = useCallback(() => {
-    var _a, _b;
+    var _a;
     if (!videoEl) {
       return;
     }
-    const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
+    const duration = getDuration(videoEl);
     const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
     let bufferProgress2 = 0;
     if (videoEl.buffered.length > 0) {
-      bufferProgress2 = Math.floor(getPercentage((_b = videoEl.buffered) == null ? void 0 : _b.end(0), duration));
+      bufferProgress2 = Math.floor(getPercentage((_a = videoEl.buffered) == null ? void 0 : _a.end(0), duration));
     }
     if (!isNaN(videoProgress2)) {
       setVideoProgress(videoProgress2);
@@ -465,6 +474,7 @@ var VideoProgress = ({
     if (!videoEl) {
       return;
     }
+    setProgress();
     videoEl.addEventListener("timeupdate", timeupdateHandler);
     return function cleanup() {
       videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
@@ -523,28 +533,36 @@ var VideoProgress = ({
 
 // src/Prebuilt/components/HMSVideo/VideoTime.tsx
 init_define_process_env();
-import React8, { useEffect as useEffect2, useState as useState2 } from "react";
+import React8, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
 var VideoTime = () => {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const [videoTime, setVideoTime] = useState2("");
-  useEffect2(() => {
-    const timeupdateHandler = (currentTime) => {
+  const [videoTime, setVideoTime] = useState2(getDurationFromSeconds2(0));
+  const updateTime = useCallback2(
+    (currentTime) => {
       const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
       if (videoEl) {
-        const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
+        const duration = getDuration(videoEl);
         setVideoTime(getDurationFromSeconds2(duration - currentTime));
       } else {
         setVideoTime(getDurationFromSeconds2(currentTime));
       }
+    },
+    [hlsPlayer2]
+  );
+  useEffect2(() => {
+    const timeupdateHandler = (currentTime) => {
+      updateTime(currentTime);
     };
     if (hlsPlayer2) {
       hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+      const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
+      updateTime(videoEl.currentTime);
     }
     return function cleanup() {
       hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
-  }, [hlsPlayer2]);
+  }, [hlsPlayer2, updateTime]);
   return hlsPlayer2 ? /* @__PURE__ */ React8.createElement(
     Text,
     {
@@ -1099,7 +1117,7 @@ var HLSView = () => {
       videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
     };
   }, [hlsUrl]);
-  const handleQuality = useCallback2(
+  const handleQuality = useCallback3(
     (quality) => {
       var _a2;
       if (hlsPlayer) {
@@ -1265,7 +1283,7 @@ var HLSView = () => {
       }
     };
   }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
-  const onSeekTo = useCallback2(
+  const onSeekTo = useCallback3(
     (seek) => {
       var _a2;
       match({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
@@ -1287,7 +1305,7 @@ var HLSView = () => {
     },
     [hoverControlsVisible, isLandscape, isMobile]
   );
-  const onDoubleClickHandler = useCallback2(
+  const onDoubleClickHandler = useCallback3(
     (event) => {
       var _a2;
       if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
@@ -1314,7 +1332,7 @@ var HLSView = () => {
     },
     [hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
   );
-  const onClickHandler = useCallback2(() => __async(void 0, null, function* () {
+  const onClickHandler = useCallback3(() => __async(void 0, null, function* () {
     var _a2;
     match({ isMobile, isLandscape, playlist_type: (_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type }).with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, () => __async(void 0, null, function* () {
       if (isPaused) {
@@ -1332,7 +1350,7 @@ var HLSView = () => {
       }
     ).otherwise(() => null);
   }), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
-  const onHoverHandler = useCallback2(
+  const onHoverHandler = useCallback3(
     (event) => {
       event.preventDefault();
       if (isMobile || isLandscape) {
@@ -1600,4 +1618,4 @@ var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-J76FQQDB.js.map
+//# sourceMappingURL=HLSView-CTZXD762.js.map