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

package/dist/{HLSView-4GYBPDV3.js → HLSView-QKPBZFZP.js}

@@ -23,6 +23,10 @@ import {
   Text,
   ToastManager,
   Tooltip,
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
   config,
   init_define_process_env,
   styled,
@@ -34,7 +38,7 @@ import {
   useRoomLayoutHeader,
   useSidepaneToggle,
   useTheme
-} from "./chunk-3KJZ5DTM.js";
+} from "./chunk-LVXGI4HW.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
@@ -62,6 +66,7 @@ init_define_process_env();
 import React, { memo } from "react";
 import { CrossIcon } from "@100mslive/react-icons";
 function HlsStatsOverlay({ hlsStatsState, onClose }) {
+  var _a, _b, _c;
   return /* @__PURE__ */ React.createElement(
     Flex,
     {
@@ -81,18 +86,18 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
       "a",
       {
         style: { cursor: "pointer", textDecoration: "underline" },
-        href: hlsStatsState?.url,
+        href: hlsStatsState == null ? void 0 : hlsStatsState.url,
         target: "_blank",
         rel: "noreferrer"
       },
       "Stream url"
     ))),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Video size" }, ` ${hlsStatsState?.videoSize?.width}x${hlsStatsState?.videoSize?.height}`),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Buffer duration" }, hlsStatsState?.bufferedDuration?.toFixed(2), " "),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Connection speed" }, `${(hlsStatsState?.bandwidthEstimate / (1e3 * 1e3)).toFixed(2)} Mbps`),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Bitrate" }, `${(hlsStatsState?.bitrate / (1e3 * 1e3)).toFixed(2)} Mbps`),
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Video size" }, ` ${(_a = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _a.width}x${(_b = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _b.height}`),
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Buffer duration" }, (_c = hlsStatsState == null ? void 0 : hlsStatsState.bufferedDuration) == null ? void 0 : _c.toFixed(2), " "),
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Connection speed" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bandwidthEstimate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Bitrate" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bitrate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
     /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState?.droppedFrames)
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
   );
 }
 function getDurationFromSeconds(timeInSeconds) {
@@ -165,10 +170,11 @@ var RightControls = styled(Flex, {
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
 init_define_process_env();
 import React2, { forwardRef } from "react";
-var HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
+var HMSVideo = forwardRef((_a, videoRef) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React2.createElement(
     Flex,
-    {
+    __spreadValues({
       "data-testid": "hms-video",
       css: {
         size: "100%",
@@ -199,9 +205,8 @@ var HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
           fontSize: "$space$10 !important"
         }
       },
-      direction: "column",
-      ...props
-    },
+      direction: "column"
+    }, props),
     /* @__PURE__ */ React2.createElement(
       "video",
       {
@@ -250,10 +255,10 @@ var PlayPauseButton = ({
   height = 20
 }) => {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const onClick = async (event) => {
-    event?.stopPropagation();
-    isPaused ? await hlsPlayer2?.play() : hlsPlayer2?.pause();
-  };
+  const onClick = (event) => __async(void 0, null, function* () {
+    event == null ? void 0 : event.stopPropagation();
+    isPaused ? yield hlsPlayer2 == null ? void 0 : hlsPlayer2.play() : hlsPlayer2 == null ? void 0 : hlsPlayer2.pause();
+  });
   return /* @__PURE__ */ React4.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ React4.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ React4.createElement(PlayIcon, { width, height }) : /* @__PURE__ */ React4.createElement(PauseIcon, { width, height })));
 };
 
@@ -431,16 +436,17 @@ var VideoProgress = ({
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState(0);
   const [bufferProgress, setBufferProgress] = useState(0);
-  const videoEl = hlsPlayer2?.getVideoElement();
+  const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
   const setProgress = useCallback(() => {
+    var _a, _b;
     if (!videoEl) {
       return;
     }
-    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
     const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
     let bufferProgress2 = 0;
     if (videoEl.buffered.length > 0) {
-      bufferProgress2 = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
+      bufferProgress2 = Math.floor(getPercentage((_b = videoEl.buffered) == null ? void 0 : _b.end(0), duration));
     }
     if (!isNaN(videoProgress2)) {
       setVideoProgress(videoProgress2);
@@ -461,18 +467,19 @@ var VideoProgress = ({
     }
     videoEl.addEventListener("timeupdate", timeupdateHandler);
     return function cleanup() {
-      videoEl?.removeEventListener("timeupdate", timeupdateHandler);
+      videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
     };
   }, [setProgress, timeupdateHandler, videoEl]);
   const onProgress = (progress) => {
+    var _a;
     const progress1 = Math.floor(getPercentage(progress[0], 100));
-    const videoEl2 = hlsPlayer2?.getVideoElement();
+    const videoEl2 = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
     if (!videoEl2) {
       return;
     }
-    const duration = isFinite(videoEl2.duration) ? videoEl2.duration : videoEl2.seekable?.end(0) || 0;
+    const duration = isFinite(videoEl2.duration) ? videoEl2.duration : ((_a = videoEl2.seekable) == null ? void 0 : _a.end(0)) || 0;
     const currentTime = progress1 * duration / 100;
-    hlsPlayer2?.seekTo(currentTime);
+    hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(currentTime);
     setProgress();
   };
   if (!videoEl) {
@@ -523,7 +530,7 @@ var VideoTime = () => {
   const [videoTime, setVideoTime] = useState2("");
   useEffect2(() => {
     const timeupdateHandler = (currentTime) => {
-      const videoEl = hlsPlayer2?.getVideoElement();
+      const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
       if (videoEl) {
         const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
         setVideoTime(getDurationFromSeconds2(duration - currentTime));
@@ -535,7 +542,7 @@ var VideoTime = () => {
       hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     }
     return function cleanup() {
-      hlsPlayer2?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+      hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
   }, [hlsPlayer2]);
   return hlsPlayer2 ? /* @__PURE__ */ React8.createElement(
@@ -560,8 +567,9 @@ init_define_process_env();
 import React9, { useState as useState3 } from "react";
 import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from "@100mslive/react-icons";
 var VolumeControl = () => {
+  var _a;
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const [volume, setVolume] = useState3(hlsPlayer2?.volume ?? 100);
+  const [volume, setVolume] = useState3((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
   const [showSlider, setShowSlider] = useState3(false);
   return /* @__PURE__ */ React9.createElement(
     Flex,
@@ -584,10 +592,10 @@ var VolumeControl = () => {
         onClick: () => {
           if (volume > 0) {
             setVolume(0);
-            hlsPlayer2?.setVolume(0);
+            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(0);
           } else {
             setVolume(100);
-            hlsPlayer2?.setVolume(100);
+            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(100);
           }
         }
       }
@@ -610,7 +618,7 @@ var VolumeControl = () => {
         step: 1,
         value: [volume],
         onValueChange: (volume2) => {
-          hlsPlayer2?.setVolume(volume2[0]);
+          hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(volume2[0]);
           setVolume(volume2[0]);
         },
         thumbStyles: { w: "$6", h: "$6" }
@@ -671,7 +679,9 @@ function HLSAutoplayBlockedPrompt({
           color: "#000",
           r: "$2"
         },
-        onClick: async () => await unblockAutoPlay()
+        onClick: () => __async(this, null, function* () {
+          return yield unblockAutoPlay();
+        })
       },
       /* @__PURE__ */ React11.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
       /* @__PURE__ */ React11.createElement(
@@ -692,19 +702,19 @@ function HLSAutoplayBlockedPrompt({
     Dialog.Root,
     {
       open,
-      onOpenChange: async (value) => {
+      onOpenChange: (value) => __async(this, null, function* () {
         if (!value) {
-          await unblockAutoPlay();
+          yield unblockAutoPlay();
         }
-      }
+      })
     },
     /* @__PURE__ */ React11.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React11.createElement(DialogRow, null, /* @__PURE__ */ React11.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React11.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React11.createElement(
       Button,
       {
         variant: "primary",
-        onClick: async () => {
-          await unblockAutoPlay();
-        }
+        onClick: () => __async(this, null, function* () {
+          yield unblockAutoPlay();
+        })
       },
       "Play stream"
     )))
@@ -717,7 +727,7 @@ import React12 from "react";
 import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
 function HLSCaptionSelector({ isEnabled }) {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  return /* @__PURE__ */ React12.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React12.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2?.toggleCaption() }, isEnabled ? /* @__PURE__ */ React12.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React12.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
+  return /* @__PURE__ */ React12.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React12.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React12.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React12.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
 }
 
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
@@ -798,7 +808,7 @@ function HLSQualitySelector({
           },
           /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
           /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-          !isAuto && layer.width === selection?.width && layer.height === selection?.height && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
+          !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
         );
       }),
       /* @__PURE__ */ React13.createElement(
@@ -893,7 +903,7 @@ function HLSQualitySelector({
           onClick: () => onQualityChange(layer),
           key: layer.width,
           css: {
-            bg: !isAuto && layer.width === selection?.width && layer.height === selection?.height ? "$surface_default" : "$surface_bright",
+            bg: !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) ? "$surface_default" : "$surface_bright",
             "&:hover": {
               bg: "$surface_brighter"
             },
@@ -904,7 +914,7 @@ function HLSQualitySelector({
         },
         /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
         /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-        !isAuto && layer.width === selection?.width && layer.height === selection?.height && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
+        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
       );
     }),
     /* @__PURE__ */ React13.createElement(
@@ -995,7 +1005,7 @@ var ToggleChat = ({ isFullScreen = false }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const showChat = !!elements?.chat;
+  const showChat = !!(elements == null ? void 0 : elements.chat);
   const isMobile = useMedia4(config.media.md);
   const hmsActions = useHMSActions();
   useEffect3(() => {
@@ -1011,6 +1021,7 @@ var ToggleChat = ({ isFullScreen = false }) => {
   return null;
 };
 var HLSView = () => {
+  var _a, _b, _c, _d, _e, _f, _g;
   const videoRef = useRef(null);
   const hlsViewRef = useRef();
   const { elements } = useRoomLayoutConferencingScreen();
@@ -1021,7 +1032,7 @@ var HLSView = () => {
   const { themeType } = useTheme();
   const [streamEnded, setStreamEnded] = useState4(false);
   let [hlsStatsState, setHlsStatsState] = useState4(null);
-  const hlsUrl = hlsState.variants[0]?.url;
+  const hlsUrl = (_a = hlsState.variants[0]) == null ? void 0 : _a.url;
   const [availableLayers, setAvailableLayers] = useState4([]);
   const [isVideoLive, setIsVideoLive] = useState4(true);
   const [isCaptionEnabled, setIsCaptionEnabled] = useState4(true);
@@ -1045,7 +1056,7 @@ var HLSView = () => {
   const [seekProgress, setSeekProgress] = useState4(false);
   const isFullScreenSupported = screenfull.isEnabled;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const showChat = !!elements?.chat;
+  const showChat = !!(elements == null ? void 0 : elements.chat);
   const isMobile = useMedia4(config.media.md);
   const isLandscape = useIsLandscape();
   const isFullScreen = useFullscreen(hlsViewRef, show, {
@@ -1056,11 +1067,11 @@ var HLSView = () => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
     const hideLoader = () => setShowLoader(false);
-    videoEl?.addEventListener("playing", hideLoader);
-    videoEl?.addEventListener("waiting", showLoader2);
+    videoEl == null ? void 0 : videoEl.addEventListener("playing", hideLoader);
+    videoEl == null ? void 0 : videoEl.addEventListener("waiting", showLoader2);
     return () => {
-      videoEl?.removeEventListener("playing", hideLoader);
-      videoEl?.removeEventListener("waiting", showLoader2);
+      videoEl == null ? void 0 : videoEl.removeEventListener("playing", hideLoader);
+      videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
     };
   }, []);
   useEffect3(() => {
@@ -1071,7 +1082,7 @@ var HLSView = () => {
   useEffect3(() => {
     if (!notification)
       return;
-    const toastID = toastMap?.[notification.data.id];
+    const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
     if (toastID) {
       ToastManager.removeToast(toastMap[notification.data.id]);
       delete toastMap[notification.data.id];
@@ -1081,18 +1092,19 @@ var HLSView = () => {
     const videoElem = videoRef.current;
     const setStreamEndedCallback = () => {
       setStreamEnded(true);
-      videoElem?.removeEventListener("ended", setStreamEndedCallback);
+      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
     };
-    videoElem?.addEventListener("ended", setStreamEndedCallback);
+    videoElem == null ? void 0 : videoElem.addEventListener("ended", setStreamEndedCallback);
     return () => {
-      videoElem?.removeEventListener("ended", setStreamEndedCallback);
+      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
     };
   }, [hlsUrl]);
   const handleQuality = useCallback2(
     (quality) => {
+      var _a2;
       if (hlsPlayer) {
-        setIsUserSelectedAuto(quality.height?.toString().toLowerCase() === "auto");
-        hlsPlayer?.setLayer(quality);
+        setIsUserSelectedAuto(((_a2 = quality.height) == null ? void 0 : _a2.toString().toLowerCase()) === "auto");
+        hlsPlayer == null ? void 0 : hlsPlayer.setLayer(quality);
       }
     },
     [availableLayers]
@@ -1102,12 +1114,14 @@ var HLSView = () => {
     let videoEl = videoRef.current;
     const manifestLoadedHandler = ({ layers }) => {
       setAvailableLayers(layers);
-      setHasCaptions(hlsPlayer?.hasCaptions());
+      setHasCaptions(hlsPlayer == null ? void 0 : hlsPlayer.hasCaptions());
     };
     const layerUpdatedHandler = ({ layer }) => {
       setCurrentSelectedQuality(layer);
     };
-    const metadataLoadedHandler = ({ payload, ...rest }) => {
+    const metadataLoadedHandler = (_a2) => {
+      var _b2 = _a2, { payload } = _b2, rest = __objRest(_b2, ["payload"]);
+      var _a3;
       const parsePayload = (str) => {
         try {
           return JSON.parse(str);
@@ -1152,7 +1166,7 @@ var HLSView = () => {
       }
       switch (parsedPayload.type) {
         case EMOJI_REACTION_TYPE:
-          window.showFlyingEmoji?.({ emojiId: parsedPayload?.emojiId, senderId: parsedPayload?.senderId });
+          (_a3 = window.showFlyingEmoji) == null ? void 0 : _a3.call(window, { emojiId: parsedPayload == null ? void 0 : parsedPayload.emojiId, senderId: parsedPayload == null ? void 0 : parsedPayload.senderId });
           break;
         default: {
           const toast = {
@@ -1173,15 +1187,13 @@ var HLSView = () => {
     };
     const playbackEventHandler = (data) => {
       setIsPaused(data.state === HLSPlaybackState.paused);
-      setHoverControlsVisible({
-        ...hoverControlsVisible,
+      setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
         pausePlay: true
-      });
+      }));
       setTimeout(() => {
-        setHoverControlsVisible({
-          ...hoverControlsVisible,
+        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
           pausePlay: false
-        });
+        }));
       }, 2e3);
     };
     const captionEnabledEventHandler = (isCaptionEnabled2) => {
@@ -1214,22 +1226,22 @@ var HLSView = () => {
   useEffect3(() => {
     const onHLSStats = (state) => setHlsStatsState(state);
     if (enablHlsStats) {
-      hlsPlayer?.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
+      hlsPlayer == null ? void 0 : hlsPlayer.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
     } else {
-      hlsPlayer?.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
+      hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
     }
     return () => {
-      hlsPlayer?.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
+      hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
     };
   }, [enablHlsStats]);
-  const unblockAutoPlay = async () => {
+  const unblockAutoPlay = () => __async(void 0, null, function* () {
     try {
-      await hlsPlayer.play();
+      yield hlsPlayer.play();
       setIsHlsAutoplayBlocked(false);
     } catch (error) {
       console.error("Tried to unblock Autoplay failed with", error.message);
     }
-  };
+  });
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
@@ -1255,64 +1267,62 @@ var HLSView = () => {
   }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
   const onSeekTo = useCallback2(
     (seek) => {
+      var _a2;
       match({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible({ ...hoverControlsVisible, seekBackward: true });
+        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekBackward: true }));
         setTimeout(() => {
-          setHoverControlsVisible({
-            ...hoverControlsVisible,
+          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
             seekBackward: false
-          });
+          }));
         }, 1e3);
       }).with({ seek: 10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible({ ...hoverControlsVisible, seekForward: true });
+        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekForward: true }));
         setTimeout(() => {
-          setHoverControlsVisible({
-            ...hoverControlsVisible,
+          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
             seekForward: false
-          });
+          }));
         }, 1e3);
       }).otherwise(() => null);
-      hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
+      hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
     },
     [hoverControlsVisible, isLandscape, isMobile]
   );
   const onDoubleClickHandler = useCallback2(
     (event) => {
-      if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) {
+      var _a2;
+      if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
         return;
       }
       const sidePercentage = event.screenX * 100 / event.target.clientWidth;
       if (sidePercentage < 45) {
-        setHoverControlsVisible({
-          ...hoverControlsVisible,
+        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
           seekBackward: true
-        });
+        }));
         onSeekTo(-10);
       } else {
-        setHoverControlsVisible({
-          ...hoverControlsVisible,
+        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
           seekForward: true
-        });
+        }));
         onSeekTo(10);
       }
       setTimeout(() => {
-        setHoverControlsVisible({
-          ...hoverControlsVisible,
+        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
           seekForward: false,
           seekBackward: false
-        });
+        }));
       }, 1e3);
     },
-    [hlsState?.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
+    [hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
   );
-  const onClickHandler = useCallback2(async () => {
-    match({ isMobile, isLandscape, playlist_type: hlsState?.variants[0]?.playlist_type }).with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, async () => {
+  const onClickHandler = useCallback2(() => __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) {
-        await hlsPlayer?.play();
+        yield hlsPlayer == null ? void 0 : hlsPlayer.play();
       } else {
-        hlsPlayer?.pause();
+        hlsPlayer == null ? void 0 : hlsPlayer.pause();
       }
-    }).when(
+    })).when(
       ({ isMobile: isMobile2, isLandscape: isLandscape2 }) => isMobile2 || isLandscape2,
       () => {
         setControlsVisible((value) => !value);
@@ -1321,7 +1331,7 @@ var HLSView = () => {
         }
       }
     ).otherwise(() => null);
-  }, [hlsState?.variants, isLandscape, isMobile, isPaused]);
+  }), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
   const onHoverHandler = useCallback2(
     (event) => {
       event.preventDefault();
@@ -1379,7 +1389,7 @@ var HLSView = () => {
       }
     },
     hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React15.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
-    /* @__PURE__ */ React15.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React15.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React15.createElement(
       Flex,
       {
         id: "hls-player-container",
@@ -1393,11 +1403,12 @@ var HLSView = () => {
           },
           outline: "none"
         },
-        onKeyDown: async (event) => {
-          if (hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR) {
-            await keyHandler(event);
+        onKeyDown: (event) => __async(void 0, null, function* () {
+          var _a2;
+          if (((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) === HLSPlaylistType.DVR) {
+            yield keyHandler(event);
           }
-        },
+        }),
         tabIndex: "0"
       },
       !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
@@ -1438,7 +1449,7 @@ var HLSView = () => {
               size: "100%"
             }
           },
-          !showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
+          !showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
             HMSVideoPlayer.PlayPauseSeekControls.Overlay,
             {
               isPaused,
@@ -1446,7 +1457,7 @@ var HLSView = () => {
               hoverControlsVisible
             }
           )
-        ), isMobile || isLandscape ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, !showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
+        ), isMobile || isLandscape ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, !showLoader && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
           HMSVideoPlayer.PlayPauseSeekControls.Overlay,
           {
             isPaused,
@@ -1513,7 +1524,7 @@ var HLSView = () => {
             align: "start",
             css: {
               position: "absolute",
-              bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? "$8" : "0",
+              bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? "$8" : "0",
               left: "0",
               zIndex: 1,
               background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
@@ -1523,7 +1534,7 @@ var HLSView = () => {
               transition: "visibility 0s 0.5s, opacity 0.5s linear"
             }
           },
-          hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
+          ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
           /* @__PURE__ */ React15.createElement(
             HMSVideoPlayer.Controls.Root,
             {
@@ -1532,15 +1543,15 @@ var HLSView = () => {
               },
               onClick: (e) => e.stopPropagation()
             },
-            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(React15.Fragment, null, hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.PlayPauseSeekControls.Button, { isPaused, onSeekTo }), !isVideoLive ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React15.createElement(
+            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(React15.Fragment, null, ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.PlayPauseSeekControls.Button, { isPaused, onSeekTo }), !isVideoLive ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React15.createElement(
               IconButton,
               {
                 css: { px: "$2" },
-                onClick: async (e) => {
+                onClick: (e) => __async(void 0, null, function* () {
                   e.stopPropagation();
-                  await hlsPlayer?.seekToLivePosition();
+                  yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
                   setIsVideoLive(true);
-                },
+                }),
                 key: "jump-to-live_btn",
                 "data-testid": "jump-to-live_btn"
               },
@@ -1565,7 +1576,7 @@ var HLSView = () => {
                 },
                 isVideoLive ? "LIVE" : "GO LIVE"
               )))
-            ), (isMobile || isLandscape) && !isVideoLive && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null),
+            ), (isMobile || isLandscape) && !isVideoLive && ((_g = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _g.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null),
             /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(
               HLSQualitySelector,
               {
@@ -1589,4 +1600,4 @@ var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-4GYBPDV3.js.map
+//# sourceMappingURL=HLSView-QKPBZFZP.js.map