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

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

@@ -23,10 +23,6 @@ import {
   Text,
   ToastManager,
   Tooltip,
-  __async,
-  __objRest,
-  __spreadProps,
-  __spreadValues,
   config,
   init_define_process_env,
   styled,
@@ -38,7 +34,7 @@ import {
   useRoomLayoutHeader,
   useSidepaneToggle,
   useTheme
-} from "./chunk-6EGSZGLA.js";
+} from "./chunk-3KJZ5DTM.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
@@ -66,7 +62,6 @@ 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,
     {
@@ -86,18 +81,18 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
       "a",
       {
         style: { cursor: "pointer", textDecoration: "underline" },
-        href: hlsStatsState == null ? void 0 : hlsStatsState.url,
+        href: hlsStatsState?.url,
         target: "_blank",
         rel: "noreferrer"
       },
       "Stream url"
     ))),
-    /* @__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: "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: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState?.droppedFrames)
   );
 }
 function getDurationFromSeconds(timeInSeconds) {
@@ -170,11 +165,10 @@ var RightControls = styled(Flex, {
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
 init_define_process_env();
 import React2, { forwardRef } from "react";
-var HMSVideo = forwardRef((_a, videoRef) => {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+var HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
   return /* @__PURE__ */ React2.createElement(
     Flex,
-    __spreadValues({
+    {
       "data-testid": "hms-video",
       css: {
         size: "100%",
@@ -188,7 +182,8 @@ var HMSVideo = forwardRef((_a, videoRef) => {
           }
         },
         "& video::cue": {
-          color: "white",
+          // default for on-surface-high
+          color: "#EFF0FA",
           whiteSpace: "pre-line",
           fontSize: "$sm",
           fontStyle: "normal",
@@ -204,8 +199,9 @@ var HMSVideo = forwardRef((_a, videoRef) => {
           fontSize: "$space$10 !important"
         }
       },
-      direction: "column"
-    }, props),
+      direction: "column",
+      ...props
+    },
     /* @__PURE__ */ React2.createElement(
       "video",
       {
@@ -254,10 +250,10 @@ var PlayPauseButton = ({
   height = 20
 }) => {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  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();
-  });
+  const onClick = async (event) => {
+    event?.stopPropagation();
+    isPaused ? await hlsPlayer2?.play() : 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 })));
 };
 
@@ -435,17 +431,16 @@ var VideoProgress = ({
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState(0);
   const [bufferProgress, setBufferProgress] = useState(0);
-  const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
+  const videoEl = hlsPlayer2?.getVideoElement();
   const setProgress = useCallback(() => {
-    var _a, _b;
     if (!videoEl) {
       return;
     }
-    const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
     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(videoEl.buffered?.end(0), duration));
     }
     if (!isNaN(videoProgress2)) {
       setVideoProgress(videoProgress2);
@@ -466,19 +461,18 @@ var VideoProgress = ({
     }
     videoEl.addEventListener("timeupdate", timeupdateHandler);
     return function cleanup() {
-      videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
+      videoEl?.removeEventListener("timeupdate", timeupdateHandler);
     };
   }, [setProgress, timeupdateHandler, videoEl]);
   const onProgress = (progress) => {
-    var _a;
     const progress1 = Math.floor(getPercentage(progress[0], 100));
-    const videoEl2 = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
+    const videoEl2 = hlsPlayer2?.getVideoElement();
     if (!videoEl2) {
       return;
     }
-    const duration = isFinite(videoEl2.duration) ? videoEl2.duration : ((_a = videoEl2.seekable) == null ? void 0 : _a.end(0)) || 0;
+    const duration = isFinite(videoEl2.duration) ? videoEl2.duration : videoEl2.seekable?.end(0) || 0;
     const currentTime = progress1 * duration / 100;
-    hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(currentTime);
+    hlsPlayer2?.seekTo(currentTime);
     setProgress();
   };
   if (!videoEl) {
@@ -529,7 +523,7 @@ var VideoTime = () => {
   const [videoTime, setVideoTime] = useState2("");
   useEffect2(() => {
     const timeupdateHandler = (currentTime) => {
-      const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
+      const videoEl = hlsPlayer2?.getVideoElement();
       if (videoEl) {
         const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
         setVideoTime(getDurationFromSeconds2(duration - currentTime));
@@ -541,7 +535,7 @@ var VideoTime = () => {
       hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     }
     return function cleanup() {
-      hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+      hlsPlayer2?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
   }, [hlsPlayer2]);
   return hlsPlayer2 ? /* @__PURE__ */ React8.createElement(
@@ -566,9 +560,8 @@ 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((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
+  const [volume, setVolume] = useState3(hlsPlayer2?.volume ?? 100);
   const [showSlider, setShowSlider] = useState3(false);
   return /* @__PURE__ */ React9.createElement(
     Flex,
@@ -591,10 +584,10 @@ var VolumeControl = () => {
         onClick: () => {
           if (volume > 0) {
             setVolume(0);
-            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(0);
+            hlsPlayer2?.setVolume(0);
           } else {
             setVolume(100);
-            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(100);
+            hlsPlayer2?.setVolume(100);
           }
         }
       }
@@ -617,7 +610,7 @@ var VolumeControl = () => {
         step: 1,
         value: [volume],
         onValueChange: (volume2) => {
-          hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(volume2[0]);
+          hlsPlayer2?.setVolume(volume2[0]);
           setVolume(volume2[0]);
         },
         thumbStyles: { w: "$6", h: "$6" }
@@ -678,9 +671,7 @@ function HLSAutoplayBlockedPrompt({
           color: "#000",
           r: "$2"
         },
-        onClick: () => __async(this, null, function* () {
-          return yield unblockAutoPlay();
-        })
+        onClick: async () => await unblockAutoPlay()
       },
       /* @__PURE__ */ React11.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
       /* @__PURE__ */ React11.createElement(
@@ -701,19 +692,19 @@ function HLSAutoplayBlockedPrompt({
     Dialog.Root,
     {
       open,
-      onOpenChange: (value) => __async(this, null, function* () {
+      onOpenChange: async (value) => {
         if (!value) {
-          yield unblockAutoPlay();
+          await 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(this, null, function* () {
-          yield unblockAutoPlay();
-        })
+        onClick: async () => {
+          await unblockAutoPlay();
+        }
       },
       "Play stream"
     )))
@@ -726,7 +717,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 == null ? void 0 : 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?.toggleCaption() }, isEnabled ? /* @__PURE__ */ React12.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React12.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
 }
 
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
@@ -807,7 +798,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 == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
+          !isAuto && layer.width === selection?.width && layer.height === selection?.height && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
         );
       }),
       /* @__PURE__ */ React13.createElement(
@@ -902,7 +893,7 @@ function HLSQualitySelector({
           onClick: () => onQualityChange(layer),
           key: layer.width,
           css: {
-            bg: !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) ? "$surface_default" : "$surface_bright",
+            bg: !isAuto && layer.width === selection?.width && layer.height === selection?.height ? "$surface_default" : "$surface_bright",
             "&:hover": {
               bg: "$surface_brighter"
             },
@@ -913,7 +904,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 == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
+        !isAuto && layer.width === selection?.width && layer.height === selection?.height && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
       );
     }),
     /* @__PURE__ */ React13.createElement(
@@ -1004,7 +995,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 == null ? void 0 : elements.chat);
+  const showChat = !!elements?.chat;
   const isMobile = useMedia4(config.media.md);
   const hmsActions = useHMSActions();
   useEffect3(() => {
@@ -1020,7 +1011,6 @@ 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();
@@ -1031,7 +1021,7 @@ var HLSView = () => {
   const { themeType } = useTheme();
   const [streamEnded, setStreamEnded] = useState4(false);
   let [hlsStatsState, setHlsStatsState] = useState4(null);
-  const hlsUrl = (_a = hlsState.variants[0]) == null ? void 0 : _a.url;
+  const hlsUrl = hlsState.variants[0]?.url;
   const [availableLayers, setAvailableLayers] = useState4([]);
   const [isVideoLive, setIsVideoLive] = useState4(true);
   const [isCaptionEnabled, setIsCaptionEnabled] = useState4(true);
@@ -1055,7 +1045,7 @@ var HLSView = () => {
   const [seekProgress, setSeekProgress] = useState4(false);
   const isFullScreenSupported = screenfull.isEnabled;
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const showChat = !!(elements == null ? void 0 : elements.chat);
+  const showChat = !!elements?.chat;
   const isMobile = useMedia4(config.media.md);
   const isLandscape = useIsLandscape();
   const isFullScreen = useFullscreen(hlsViewRef, show, {
@@ -1066,11 +1056,11 @@ var HLSView = () => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
     const hideLoader = () => setShowLoader(false);
-    videoEl == null ? void 0 : videoEl.addEventListener("playing", hideLoader);
-    videoEl == null ? void 0 : videoEl.addEventListener("waiting", showLoader2);
+    videoEl?.addEventListener("playing", hideLoader);
+    videoEl?.addEventListener("waiting", showLoader2);
     return () => {
-      videoEl == null ? void 0 : videoEl.removeEventListener("playing", hideLoader);
-      videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
+      videoEl?.removeEventListener("playing", hideLoader);
+      videoEl?.removeEventListener("waiting", showLoader2);
     };
   }, []);
   useEffect3(() => {
@@ -1081,7 +1071,7 @@ var HLSView = () => {
   useEffect3(() => {
     if (!notification)
       return;
-    const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
+    const toastID = toastMap?.[notification.data.id];
     if (toastID) {
       ToastManager.removeToast(toastMap[notification.data.id]);
       delete toastMap[notification.data.id];
@@ -1091,19 +1081,18 @@ var HLSView = () => {
     const videoElem = videoRef.current;
     const setStreamEndedCallback = () => {
       setStreamEnded(true);
-      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
+      videoElem?.removeEventListener("ended", setStreamEndedCallback);
     };
-    videoElem == null ? void 0 : videoElem.addEventListener("ended", setStreamEndedCallback);
+    videoElem?.addEventListener("ended", setStreamEndedCallback);
     return () => {
-      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
+      videoElem?.removeEventListener("ended", setStreamEndedCallback);
     };
   }, [hlsUrl]);
   const handleQuality = useCallback2(
     (quality) => {
-      var _a2;
       if (hlsPlayer) {
-        setIsUserSelectedAuto(((_a2 = quality.height) == null ? void 0 : _a2.toString().toLowerCase()) === "auto");
-        hlsPlayer == null ? void 0 : hlsPlayer.setLayer(quality);
+        setIsUserSelectedAuto(quality.height?.toString().toLowerCase() === "auto");
+        hlsPlayer?.setLayer(quality);
       }
     },
     [availableLayers]
@@ -1113,14 +1102,12 @@ var HLSView = () => {
     let videoEl = videoRef.current;
     const manifestLoadedHandler = ({ layers }) => {
       setAvailableLayers(layers);
-      setHasCaptions(hlsPlayer == null ? void 0 : hlsPlayer.hasCaptions());
+      setHasCaptions(hlsPlayer?.hasCaptions());
     };
     const layerUpdatedHandler = ({ layer }) => {
       setCurrentSelectedQuality(layer);
     };
-    const metadataLoadedHandler = (_a2) => {
-      var _b2 = _a2, { payload } = _b2, rest = __objRest(_b2, ["payload"]);
-      var _a3;
+    const metadataLoadedHandler = ({ payload, ...rest }) => {
       const parsePayload = (str) => {
         try {
           return JSON.parse(str);
@@ -1165,7 +1152,7 @@ var HLSView = () => {
       }
       switch (parsedPayload.type) {
         case EMOJI_REACTION_TYPE:
-          (_a3 = window.showFlyingEmoji) == null ? void 0 : _a3.call(window, { emojiId: parsedPayload == null ? void 0 : parsedPayload.emojiId, senderId: parsedPayload == null ? void 0 : parsedPayload.senderId });
+          window.showFlyingEmoji?.({ emojiId: parsedPayload?.emojiId, senderId: parsedPayload?.senderId });
           break;
         default: {
           const toast = {
@@ -1186,13 +1173,15 @@ var HLSView = () => {
     };
     const playbackEventHandler = (data) => {
       setIsPaused(data.state === HLSPlaybackState.paused);
-      setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+      setHoverControlsVisible({
+        ...hoverControlsVisible,
         pausePlay: true
-      }));
+      });
       setTimeout(() => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
           pausePlay: false
-        }));
+        });
       }, 2e3);
     };
     const captionEnabledEventHandler = (isCaptionEnabled2) => {
@@ -1225,22 +1214,22 @@ var HLSView = () => {
   useEffect3(() => {
     const onHLSStats = (state) => setHlsStatsState(state);
     if (enablHlsStats) {
-      hlsPlayer == null ? void 0 : hlsPlayer.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
+      hlsPlayer?.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
     } else {
-      hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
+      hlsPlayer?.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
     }
     return () => {
-      hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
+      hlsPlayer?.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
     };
   }, [enablHlsStats]);
-  const unblockAutoPlay = () => __async(void 0, null, function* () {
+  const unblockAutoPlay = async () => {
     try {
-      yield hlsPlayer.play();
+      await hlsPlayer.play();
       setIsHlsAutoplayBlocked(false);
     } catch (error) {
       console.error("Tried to unblock Autoplay failed with", error.message);
     }
-  });
+  };
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
@@ -1266,62 +1255,64 @@ var HLSView = () => {
   }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
   const onSeekTo = useCallback2(
     (seek) => {
-      var _a2;
       match({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekBackward: true }));
+        setHoverControlsVisible({ ...hoverControlsVisible, seekBackward: true });
         setTimeout(() => {
-          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+          setHoverControlsVisible({
+            ...hoverControlsVisible,
             seekBackward: false
-          }));
+          });
         }, 1e3);
       }).with({ seek: 10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekForward: true }));
+        setHoverControlsVisible({ ...hoverControlsVisible, seekForward: true });
         setTimeout(() => {
-          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+          setHoverControlsVisible({
+            ...hoverControlsVisible,
             seekForward: false
-          }));
+          });
         }, 1e3);
       }).otherwise(() => null);
-      hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
+      hlsPlayer?.seekTo(videoRef.current?.currentTime + seek);
     },
     [hoverControlsVisible, isLandscape, isMobile]
   );
   const onDoubleClickHandler = useCallback2(
     (event) => {
-      var _a2;
-      if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
+      if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) {
         return;
       }
       const sidePercentage = event.screenX * 100 / event.target.clientWidth;
       if (sidePercentage < 45) {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
           seekBackward: true
-        }));
+        });
         onSeekTo(-10);
       } else {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
           seekForward: true
-        }));
+        });
         onSeekTo(10);
       }
       setTimeout(() => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
+        setHoverControlsVisible({
+          ...hoverControlsVisible,
           seekForward: false,
           seekBackward: false
-        }));
+        });
       }, 1e3);
     },
-    [hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
+    [hlsState?.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
   );
-  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* () {
+  const onClickHandler = useCallback2(async () => {
+    match({ isMobile, isLandscape, playlist_type: hlsState?.variants[0]?.playlist_type }).with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, async () => {
       if (isPaused) {
-        yield hlsPlayer == null ? void 0 : hlsPlayer.play();
+        await hlsPlayer?.play();
       } else {
-        hlsPlayer == null ? void 0 : hlsPlayer.pause();
+        hlsPlayer?.pause();
       }
-    })).when(
+    }).when(
       ({ isMobile: isMobile2, isLandscape: isLandscape2 }) => isMobile2 || isLandscape2,
       () => {
         setControlsVisible((value) => !value);
@@ -1330,7 +1321,7 @@ var HLSView = () => {
         }
       }
     ).otherwise(() => null);
-  }), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
+  }, [hlsState?.variants, isLandscape, isMobile, isPaused]);
   const onHoverHandler = useCallback2(
     (event) => {
       event.preventDefault();
@@ -1388,7 +1379,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 == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React15.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React15.createElement(
       Flex,
       {
         id: "hls-player-container",
@@ -1402,12 +1393,11 @@ var HLSView = () => {
           },
           outline: "none"
         },
-        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);
+        onKeyDown: async (event) => {
+          if (hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR) {
+            await keyHandler(event);
           }
-        }),
+        },
         tabIndex: "0"
       },
       !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
@@ -1448,7 +1438,7 @@ var HLSView = () => {
               size: "100%"
             }
           },
-          !showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
+          !showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
             HMSVideoPlayer.PlayPauseSeekControls.Overlay,
             {
               isPaused,
@@ -1456,7 +1446,7 @@ var HLSView = () => {
               hoverControlsVisible
             }
           )
-        ), 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(
+        ), isMobile || isLandscape ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, !showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
           HMSVideoPlayer.PlayPauseSeekControls.Overlay,
           {
             isPaused,
@@ -1523,7 +1513,7 @@ var HLSView = () => {
             align: "start",
             css: {
               position: "absolute",
-              bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? "$8" : "0",
+              bottom: isFullScreen && hlsState?.variants[0]?.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%);`,
@@ -1533,7 +1523,7 @@ var HLSView = () => {
               transition: "visibility 0s 0.5s, opacity 0.5s linear"
             }
           },
-          ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
+          hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
           /* @__PURE__ */ React15.createElement(
             HMSVideoPlayer.Controls.Root,
             {
@@ -1542,15 +1532,15 @@ var HLSView = () => {
               },
               onClick: (e) => e.stopPropagation()
             },
-            /* @__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(
+            /* @__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(
               IconButton,
               {
                 css: { px: "$2" },
-                onClick: (e) => __async(void 0, null, function* () {
+                onClick: async (e) => {
                   e.stopPropagation();
-                  yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
+                  await hlsPlayer?.seekToLivePosition();
                   setIsVideoLive(true);
-                }),
+                },
                 key: "jump-to-live_btn",
                 "data-testid": "jump-to-live_btn"
               },
@@ -1575,7 +1565,7 @@ var HLSView = () => {
                 },
                 isVideoLive ? "LIVE" : "GO LIVE"
               )))
-            ), (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),
+            ), (isMobile || isLandscape) && !isVideoLive && hlsState?.variants[0]?.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,
               {
@@ -1599,4 +1589,4 @@ var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-K5AMEE25.js.map
+//# sourceMappingURL=HLSView-4GYBPDV3.js.map