@100mslive/roomkit-react 0.2.8-alpha.4 → 0.2.8-alpha.6

package/dist/{HLSView-UIPDGADR.js → HLSView-53PDKIS2.js}

@@ -11,6 +11,7 @@ import {
   Flex,
   IconButton,
   IconButton_default,
+  LeaveRoom,
   Loading,
   Logo,
   SIDE_PANE_OPTIONS,
@@ -32,12 +33,12 @@ import {
   useRoomLayoutConferencingScreen,
   useSidepaneToggle,
   useTheme
-} from "./chunk-J4NOQ2YL.js";
+} from "./chunk-2ZFAT7KY.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
-import React13, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
-import { useFullscreen, useMedia as useMedia2, usePrevious, useToggle } from "react-use";
+import React14, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState5 } 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";
 import {
@@ -52,7 +53,7 @@ import {
   useHMSStore as useHMSStore2,
   useHMSVanillaStore
 } from "@100mslive/react-sdk";
-import { ColoredHandIcon, GoLiveIcon, PauseIcon as PauseIcon2, PlayIcon as PlayIcon2 } from "@100mslive/react-icons";
+import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, GoLiveIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/HlsStatsOverlay.jsx
 init_define_process_env();
@@ -163,8 +164,11 @@ var RightControls = styled(Flex, {
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
 init_define_process_env();
 import React2, { forwardRef } from "react";
+import { useMedia } from "react-use";
 var HMSVideo = forwardRef((_a, videoRef) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const isLandscape = useIsLandscape();
+  const isMobile = useMedia(config.media.md);
   return /* @__PURE__ */ React2.createElement(
     Flex,
     __spreadValues({
@@ -200,7 +204,9 @@ var HMSVideo = forwardRef((_a, videoRef) => {
           margin: "0 auto",
           minHeight: "0",
           objectFit: "contain",
-          width: "inherit"
+          width: "inherit",
+          height: isLandscape || isMobile ? "100%" : "",
+          position: isLandscape || isMobile ? "absolute" : ""
         },
         ref: videoRef,
         playsInline: true
@@ -210,7 +216,7 @@ var HMSVideo = forwardRef((_a, videoRef) => {
   );
 });
 
-// src/Prebuilt/components/HMSVideo/PlayButton.tsx
+// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
 init_define_process_env();
 import React4 from "react";
 import { PauseIcon, PlayIcon } from "@100mslive/react-icons";
@@ -226,8 +232,8 @@ var useHMSPlayerContext = () => {
   return context;
 };
 
-// src/Prebuilt/components/HMSVideo/PlayButton.tsx
-var PlayButton = ({
+// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
+var PlayPauseButton = ({
   isPaused,
   width = 20,
   height = 20
@@ -240,9 +246,21 @@ var PlayButton = ({
   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 })));
 };
 
+// src/Prebuilt/components/HMSVideo/SeekControls.tsx
+init_define_process_env();
+import React5 from "react";
+var SeekControls = ({
+  title,
+  onClick,
+  children,
+  css
+}) => {
+  return /* @__PURE__ */ React5.createElement(Tooltip, { title, side: "top" }, /* @__PURE__ */ React5.createElement(IconButton, { onClick, "data-testid": "backward_forward_arrow_btn", css }, children));
+};
+
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
 init_define_process_env();
-import React5, { useEffect, useState } from "react";
+import React6, { useEffect, useState } from "react";
 
 // src/Prebuilt/components/HMSVideo/utils.ts
 init_define_process_env();
@@ -273,7 +291,7 @@ function getTime(timeInMilles) {
 }
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
-var VideoProgress = () => {
+var VideoProgress = ({ isDvr = true }) => {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState(0);
   const [bufferProgress, setBufferProgress] = useState(0);
@@ -314,7 +332,7 @@ var VideoProgress = () => {
   if (!videoEl) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch", pointerEvents: isDvr ? "" : "none" } }, /* @__PURE__ */ React6.createElement(
     Slider,
     {
       id: "video-actual-rest",
@@ -322,7 +340,8 @@ var VideoProgress = () => {
         cursor: "pointer",
         h: "$2",
         zIndex: 1,
-        transition: `all .2s ease .5s`
+        transition: `all .2s ease .5s`,
+        pointerEvents: isDvr ? "" : "none"
       },
       min: 0,
       max: 100,
@@ -330,9 +349,9 @@ var VideoProgress = () => {
       value: [videoProgress],
       showTooltip: false,
       onValueChange: onProgress,
-      thumbStyles: { w: "$6", h: "$6" }
+      thumbStyles: { w: "$6", h: "$6", display: isDvr ? "" : "none" }
     }
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     Box,
     {
       id: "video-buffer",
@@ -350,7 +369,7 @@ var VideoProgress = () => {
 
 // src/Prebuilt/components/HMSVideo/VideoTime.tsx
 init_define_process_env();
-import React6, { useEffect as useEffect2, useState as useState2 } from "react";
+import React7, { useEffect as useEffect2, useState as useState2 } from "react";
 import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
 var VideoTime = () => {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
@@ -371,7 +390,7 @@ var VideoTime = () => {
       hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
   }, [hlsPlayer2]);
-  return hlsPlayer2 ? /* @__PURE__ */ React6.createElement(
+  return hlsPlayer2 ? /* @__PURE__ */ React7.createElement(
     Text,
     {
       variant: "body1",
@@ -390,13 +409,14 @@ var VideoTime = () => {
 
 // src/Prebuilt/components/HMSVideo/VolumeControl.tsx
 init_define_process_env();
-import React7, { useState as useState3 } from "react";
+import React8, { 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 == null ? void 0 : hlsPlayer2.volume) || 0);
+  const [volume, setVolume] = useState3((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
   const [showSlider, setShowSlider] = useState3(false);
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Flex,
     {
       align: "center",
@@ -410,7 +430,7 @@ var VolumeControl = () => {
         setShowSlider(false);
       }
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       VolumeIcon,
       {
         volume,
@@ -425,7 +445,7 @@ var VolumeControl = () => {
         }
       }
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(
       Slider,
       {
         css: {
@@ -453,15 +473,15 @@ var VolumeControl = () => {
 };
 var VolumeIcon = ({ volume, onClick }) => {
   if (volume === 0) {
-    return /* @__PURE__ */ React7.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+    return /* @__PURE__ */ React8.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
   }
-  return volume < 50 ? /* @__PURE__ */ React7.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React7.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+  return volume < 50 ? /* @__PURE__ */ React8.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React8.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
 };
 
 // src/Prebuilt/components/HMSVideo/index.ts
 var HMSVideoPlayer = {
   Root: HMSVideo,
-  PlayButton,
+  PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -469,25 +489,59 @@ var HMSVideoPlayer = {
     Root: VideoControls,
     Left: LeftControls,
     Right: RightControls
-  }
+  },
+  Seeker: SeekControls
 };
 
 // src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
 init_define_process_env();
-import React8 from "react";
+import React9 from "react";
 import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
 var FullScreenButton = ({ isFullScreen, onToggle }) => {
-  return /* @__PURE__ */ React8.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React8.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React8.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React8.createElement(ShrinkIcon, null) : /* @__PURE__ */ React8.createElement(ExpandIcon, null))));
+  return /* @__PURE__ */ React9.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React9.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React9.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React9.createElement(ShrinkIcon, null) : /* @__PURE__ */ React9.createElement(ExpandIcon, null))));
 };
 
 // src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
 init_define_process_env();
-import React9 from "react";
+import React10 from "react";
+import { useMedia as useMedia2 } from "react-use";
+import { VolumeTwoIcon as VolumeTwoIcon2 } from "@100mslive/react-icons";
 function HLSAutoplayBlockedPrompt({
   open,
   unblockAutoPlay
 }) {
-  return /* @__PURE__ */ React9.createElement(
+  const isLandscape = useIsLandscape();
+  const isMobile = useMedia2(config.media.md);
+  if ((isMobile || isLandscape) && open) {
+    return /* @__PURE__ */ React10.createElement(
+      IconButton,
+      {
+        css: {
+          border: "1px solid white",
+          bg: "white",
+          color: "#000",
+          r: "$2"
+        },
+        onClick: () => __async(this, null, function* () {
+          return yield unblockAutoPlay();
+        })
+      },
+      /* @__PURE__ */ React10.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
+      /* @__PURE__ */ React10.createElement(
+        Text,
+        {
+          variant: "body1",
+          css: {
+            fontWeight: "$semiBold",
+            px: "$2",
+            color: "#000"
+          }
+        },
+        "Tap To Unmute"
+      )
+    );
+  }
+  return /* @__PURE__ */ React10.createElement(
     Dialog.Root,
     {
       open,
@@ -497,7 +551,7 @@ function HLSAutoplayBlockedPrompt({
         }
       })
     },
-    /* @__PURE__ */ React9.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React9.createElement(DialogRow, null, /* @__PURE__ */ React9.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React9.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React10.createElement(DialogRow, null, /* @__PURE__ */ React10.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React10.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React10.createElement(
       Button,
       {
         variant: "primary",
@@ -512,17 +566,17 @@ function HLSAutoplayBlockedPrompt({
 
 // src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
 init_define_process_env();
-import React10 from "react";
+import React11 from "react";
 import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
 function HLSCaptionSelector({ isEnabled }) {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  return /* @__PURE__ */ React10.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React10.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React10.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React10.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
+  return /* @__PURE__ */ React11.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React11.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React11.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React11.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
 }
 
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
 init_define_process_env();
-import React11 from "react";
-import { useMedia } from "react-use";
+import React12 from "react";
+import { useMedia as useMedia3 } from "react-use";
 import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
 function HLSQualitySelector({
   open,
@@ -532,10 +586,10 @@ function HLSQualitySelector({
   selection,
   isAuto
 }) {
-  const isMobile = useMedia(config.media.md);
+  const isMobile = useMedia3(config.media.md);
   const isLandscape = useIsLandscape();
   if (isMobile || isLandscape) {
-    return /* @__PURE__ */ React11.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React11.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React12.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React12.createElement(
       Flex,
       {
         css: {
@@ -545,8 +599,8 @@ function HLSQualitySelector({
           p: "$2"
         }
       },
-      /* @__PURE__ */ React11.createElement(SettingsIcon, null)
-    )), layers.length > 0 && /* @__PURE__ */ React11.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React12.createElement(SettingsIcon, null)
+    )), layers.length > 0 && /* @__PURE__ */ React12.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(
       Sheet.Title,
       {
         css: {
@@ -563,9 +617,9 @@ function HLSQualitySelector({
         }
       },
       "Quality",
-      /* @__PURE__ */ React11.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React11.createElement(CrossIcon2, null))
+      /* @__PURE__ */ React12.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(CrossIcon2, null))
     ), layers.map((layer) => {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         Flex,
         {
           align: "center",
@@ -583,11 +637,11 @@ function HLSQualitySelector({
           key: layer.width,
           onClick: () => onQualityChange(layer)
         },
-        /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ React11.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__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ React12.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__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
       );
-    }), /* @__PURE__ */ React11.createElement(
+    }), /* @__PURE__ */ React12.createElement(
       Flex,
       {
         align: "center",
@@ -605,11 +659,11 @@ function HLSQualitySelector({
         key: "auto",
         onClick: () => onQualityChange({ height: "auto" })
       },
-      /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
     )));
   }
-  return /* @__PURE__ */ React11.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ React11.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ React12.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React12.createElement(
     Flex,
     {
       css: {
@@ -619,7 +673,7 @@ function HLSQualitySelector({
         p: "$2"
       }
     },
-    /* @__PURE__ */ React11.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React11.createElement(Flex, { align: "center" }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React12.createElement(Flex, { align: "center" }, /* @__PURE__ */ React12.createElement(
       Box,
       {
         css: {
@@ -630,8 +684,8 @@ function HLSQualitySelector({
           c: "$on_surface_high"
         }
       },
-      /* @__PURE__ */ React11.createElement(SettingsIcon, null)
-    ), /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React12.createElement(SettingsIcon, null)
+    ), /* @__PURE__ */ React12.createElement(
       Text,
       {
         variant: {
@@ -641,7 +695,7 @@ function HLSQualitySelector({
         },
         css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
-      isAuto && /* @__PURE__ */ React11.createElement(React11.Fragment, null, "Auto", /* @__PURE__ */ React11.createElement(
+      isAuto && /* @__PURE__ */ React12.createElement(React12.Fragment, null, "Auto", /* @__PURE__ */ React12.createElement(
         Box,
         {
           css: {
@@ -656,7 +710,7 @@ function HLSQualitySelector({
       selection && Math.min(selection.width || 0, selection.height || 0),
       "p"
     )))
-  )), layers.length > 0 && /* @__PURE__ */ React11.createElement(
+  )), layers.length > 0 && /* @__PURE__ */ React12.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -672,7 +726,7 @@ function HLSQualitySelector({
       }
     },
     layers.map((layer) => {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         Dropdown.Item,
         {
           onClick: () => onQualityChange(layer),
@@ -687,12 +741,12 @@ function HLSQualitySelector({
             gap: "$2"
           }
         },
-        /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ React11.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__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ React12.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__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
       );
     }),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       Dropdown.Item,
       {
         onClick: () => onQualityChange({ height: "auto" }),
@@ -707,8 +761,8 @@ function HLSQualitySelector({
           gap: "$2"
         }
       },
-      /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
     )
   ));
 }
@@ -717,7 +771,7 @@ var getBitrateText = (layer) => `(${(Number(layer.bitrate / 1e3) / 1e3).toFixed(
 
 // src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
 init_define_process_env();
-import React12, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import React13, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
 import { selectHLSState, selectPeerCount, useHMSStore } from "@100mslive/react-sdk";
 var HLSViewTitle = () => {
   const peerCount = useHMSStore(selectPeerCount);
@@ -752,7 +806,7 @@ var HLSViewTitle = () => {
       }
     };
   }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType, startTimer]);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Flex,
     {
       gap: "4",
@@ -766,8 +820,8 @@ var HLSViewTitle = () => {
         backgroundColor: "$surface_dim"
       }
     },
-    /* @__PURE__ */ React12.createElement(Logo, null),
-    /* @__PURE__ */ React12.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React12.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ React12.createElement(Flex, { gap: "1" }, /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(Logo, null),
+    /* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ React13.createElement(Flex, { gap: "1" }, /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ React13.createElement(
       Flex,
       {
         direction: "column",
@@ -779,7 +833,7 @@ var HLSViewTitle = () => {
           alignSelf: "center"
         }
       }
-    ), /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
+    ), /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
   );
 };
 
@@ -787,7 +841,7 @@ var HLSViewTitle = () => {
 var hlsPlayer;
 var toastMap = {};
 var HLSView = () => {
-  var _a, _b, _c;
+  var _a, _b;
   const videoRef = useRef2(null);
   const hlsViewRef = useRef2(null);
   const hlsState = useHMSStore2(selectHLSState2);
@@ -805,6 +859,7 @@ var HLSView = () => {
   const [hasCaptions, setHasCaptions] = useState5(false);
   const [currentSelectedQuality, setCurrentSelectedQuality] = useState5(null);
   const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState5(false);
+  const [isSeekEnabled, setIsSeekEnabled] = useState5(false);
   const [isPaused, setIsPaused] = useState5(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
@@ -819,7 +874,7 @@ var HLSView = () => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const isFullScreenSupported = screenfull.isEnabled;
-  const isMobile = useMedia2(config.media.md);
+  const isMobile = useMedia4(config.media.md);
   const isLandscape = useIsLandscape();
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
@@ -905,7 +960,7 @@ var HLSView = () => {
         const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || "Participant";
         const toastID = ToastManager.addToast({
           title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-          action: /* @__PURE__ */ React13.createElement(
+          action: /* @__PURE__ */ React14.createElement(
             Button,
             {
               onClick: () => togglePollView(pollId),
@@ -1000,41 +1055,56 @@ var HLSView = () => {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
       }
-      controlsTimerRef.current = setTimeout(() => {
-        setControlsVisible(false);
-      }, 5e3);
     }
     if (!isFullScreen && controlsTimerRef.current) {
       clearTimeout(controlsTimerRef.current);
     }
+    controlsTimerRef.current = setTimeout(() => {
+      setControlsVisible(false);
+    }, 5e3);
     return () => {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
       }
     };
   }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
-  const onTouchHandler = useCallback2(
+  const onSeekTo = useCallback2((seek) => {
+    var _a2;
+    hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
+  }, []);
+  const onDoubleClickHandler = useCallback2(
     (event) => {
-      event.preventDefault();
-      if (event.type === "ontouchstart" && controlsVisible) {
-        setControlsVisible(false);
-        return;
-      }
-      if (event.type === "ontouchstart" || qualityDropDownOpen) {
-        setControlsVisible(true);
+      if (!(isMobile || isLandscape)) {
         return;
       }
-      if (isFullScreen && !controlsVisible && event.type === "touchmove") {
-        setControlsVisible(true);
-        if (controlsTimerRef.current) {
-          clearTimeout(controlsTimerRef.current);
-        }
+      const sidePercentage = event.screenX * 100 / event.target.clientWidth;
+      setIsSeekEnabled(true);
+      if (sidePercentage < 45) {
+        onSeekTo(-10);
+      } else {
+        onSeekTo(10);
       }
+      setTimeout(() => {
+        setIsSeekEnabled(false);
+      }, 200);
     },
-    [controlsVisible, isFullScreen, qualityDropDownOpen]
+    [isLandscape, isMobile, onSeekTo]
   );
+  const onClickHandler = useCallback2(() => {
+    if (!(isMobile || isLandscape)) {
+      return;
+    }
+    setControlsVisible((value) => !value);
+    if (controlsTimerRef.current) {
+      clearTimeout(controlsTimerRef.current);
+    }
+  }, [isLandscape, isMobile]);
   const onHoverHandler = useCallback2(
     (event) => {
+      event.preventDefault();
+      if (isMobile || isLandscape) {
+        return;
+      }
       if (event.type === "mouseenter" || qualityDropDownOpen) {
         setControlsVisible(true);
         return;
@@ -1048,9 +1118,9 @@ var HLSView = () => {
         }
       }
     },
-    [controlsVisible, isFullScreen, qualityDropDownOpen]
+    [controlsVisible, isFullScreen, isLandscape, isMobile, qualityDropDownOpen]
   );
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Flex,
     {
       key: "hls-viewer",
@@ -1058,11 +1128,12 @@ var HLSView = () => {
       ref: hlsViewRef,
       direction: isMobile || isLandscape ? "column" : "row",
       css: {
-        w: sidepane !== "" && isLandscape ? "55%" : "100%",
-        h: sidepane !== "" && isMobile ? "36%" : "100%"
+        w: sidepane !== "" && isLandscape ? "" : "100%",
+        h: sidepane !== "" && isMobile ? "36%" : "100%",
+        flex: "1 1 0"
       }
     },
-    hlsUrl && !streamEnded ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React13.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React13.createElement(
+    hlsUrl && !streamEnded ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React14.createElement(
       Flex,
       {
         id: "hls-player-container",
@@ -1073,8 +1144,8 @@ var HLSView = () => {
           margin: "0 auto"
         }
       },
-      /* @__PURE__ */ React13.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-      showLoader && /* @__PURE__ */ React13.createElement(
+      !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+      showLoader && /* @__PURE__ */ React14.createElement(
         Flex,
         {
           align: "center",
@@ -1083,56 +1154,68 @@ var HLSView = () => {
             position: "absolute"
           }
         },
-        /* @__PURE__ */ React13.createElement(Loading, { width: 72, height: 72 })
+        /* @__PURE__ */ React14.createElement(Loading, { width: 72, height: 72 })
       ),
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement(
         HMSVideoPlayer.Root,
         {
           ref: videoRef,
           onMouseEnter: onHoverHandler,
           onMouseMove: onHoverHandler,
           onMouseLeave: onHoverHandler,
-          onTouchStart: onTouchHandler,
-          onTouchMove: onTouchHandler
+          onClick: onClickHandler,
+          onDoubleClick: (e) => {
+            onDoubleClickHandler(e);
+          }
         },
-        /* @__PURE__ */ React13.createElement(React13.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, !showLoader && /* @__PURE__ */ React13.createElement(
-          Box,
+        /* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, !showLoader && /* @__PURE__ */ React14.createElement(
+          Flex,
           {
+            align: "center",
+            justify: "center",
             css: {
-              position: "absolute",
-              top: "40%",
-              left: "50%",
-              transform: "translateY(-40%) translateX(-50%)",
-              padding: "$4",
+              bg: "#00000066",
               display: "inline-flex",
-              r: "$round",
-              gap: "$1",
-              bg: "rgba(0, 0, 0, 0.6)",
+              gap: "$2",
               zIndex: 1,
+              size: "100%",
               visibility: controlsVisible ? `` : `hidden`,
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          isPaused ? /* @__PURE__ */ React13.createElement(
-            IconButton,
+          /* @__PURE__ */ React14.createElement(
+            HMSVideoPlayer.Seeker,
             {
-              onClick: () => __async(void 0, null, function* () {
-                yield hlsPlayer == null ? void 0 : hlsPlayer.play();
-              }),
-              "data-testid": "play_btn"
+              title: "backward",
+              css: {
+                visibility: isSeekEnabled ? `` : `hidden`,
+                opacity: isSeekEnabled ? `1` : "0"
+              }
             },
-            /* @__PURE__ */ React13.createElement(PlayIcon2, { width: "48px", height: "48px" })
-          ) : /* @__PURE__ */ React13.createElement(
-            IconButton,
+            /* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 32, height: 32 })
+          ),
+          /* @__PURE__ */ React14.createElement(
+            Box,
             {
-              onClick: () => __async(void 0, null, function* () {
-                yield hlsPlayer == null ? void 0 : hlsPlayer.pause();
-              }),
-              "data-testid": "pause_btn"
+              css: {
+                bg: "rgba(0, 0, 0, 0.6)",
+                r: "$round"
+              }
+            },
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused, width: 48, height: 48 })
+          ),
+          /* @__PURE__ */ React14.createElement(
+            HMSVideoPlayer.Seeker,
+            {
+              title: "forward",
+              css: {
+                visibility: isSeekEnabled ? `` : `hidden`,
+                opacity: isSeekEnabled ? `1` : "0"
+              }
             },
-            /* @__PURE__ */ React13.createElement(PauseIcon2, { width: "48px", height: "48px" })
+            /* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 32, height: 32 })
           )
-        ), /* @__PURE__ */ React13.createElement(
+        ), /* @__PURE__ */ React14.createElement(
           Flex,
           {
             ref: controlsRef,
@@ -1145,18 +1228,20 @@ var HLSView = () => {
               left: "0",
               width: "100%",
               flexShrink: 0,
+              zIndex: 1,
               visibility: controlsVisible ? `` : `hidden`,
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          /* @__PURE__ */ React13.createElement(
+          /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Controls.Root,
             {
               css: {
                 p: "$4 $8"
               }
             },
-            /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React13.createElement(ChatToggle, null), hasCaptions && /* @__PURE__ */ React13.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 ? /* @__PURE__ */ React13.createElement(
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType })),
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React14.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React14.createElement(
               HLSQualitySelector,
               {
                 layers: availableLayers,
@@ -1166,19 +1251,20 @@ var HLSView = () => {
                 onQualityChange: handleQuality,
                 isAuto: isUserSelectedAuto
               }
-            ) : null)
+            ) : null, /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
           )
-        )) : null, /* @__PURE__ */ React13.createElement(
+        )) : null, /* @__PURE__ */ React14.createElement(
           Flex,
           {
             ref: controlsRef,
-            direction: "column",
+            direction: isMobile ? "columnReverse" : "column",
             justify: "end",
             align: "start",
             css: {
               position: "absolute",
               bottom: "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%);`,
               width: "100%",
               pt: "$8",
@@ -1188,23 +1274,33 @@ var HLSView = () => {
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          !(isMobile || isLandscape) && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Progress, null),
-          /* @__PURE__ */ React13.createElement(
+          /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { isDvr: ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR }),
+          /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Controls.Root,
             {
               css: {
                 p: "$4 $8"
               }
             },
-            /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
-              HMSVideoPlayer.PlayButton,
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+              HMSVideoPlayer.Seeker,
               {
-                onClick: () => __async(void 0, null, function* () {
-                  isPaused ? yield hlsPlayer == null ? void 0 : hlsPlayer.play() : hlsPlayer == null ? void 0 : hlsPlayer.pause();
-                }),
-                isPaused
-              }
-            ), !isVideoLive ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React13.createElement(
+                onClick: () => {
+                  onSeekTo(-10);
+                },
+                title: "backward"
+              },
+              /* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 20, height: 20 })
+            ), /* @__PURE__ */ React14.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused }), /* @__PURE__ */ React14.createElement(
+              HMSVideoPlayer.Seeker,
+              {
+                onClick: () => {
+                  onSeekTo(10);
+                },
+                title: "forward"
+              },
+              /* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 20, height: 20 })
+            ), !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React14.createElement(
               IconButton,
               {
                 css: { px: "$2" },
@@ -1215,7 +1311,7 @@ var HLSView = () => {
                 key: "jump-to-live_btn",
                 "data-testid": "jump-to-live_btn"
               },
-              /* @__PURE__ */ React13.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React13.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React13.createElement(
+              /* @__PURE__ */ React14.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React14.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React14.createElement(
                 Box,
                 {
                   css: {
@@ -1225,7 +1321,7 @@ var HLSView = () => {
                     r: "$1"
                   }
                 }
-              ), /* @__PURE__ */ React13.createElement(
+              ), /* @__PURE__ */ React14.createElement(
                 Text,
                 {
                   variant: "$body1",
@@ -1236,8 +1332,8 @@ var HLSView = () => {
                 },
                 isVideoLive ? "LIVE" : "GO LIVE"
               )))
-            ), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Duration, null) : null),
-            /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React13.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React13.createElement(
+            ), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null),
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(
               HLSQualitySelector,
               {
                 layers: availableLayers,
@@ -1247,16 +1343,15 @@ var HLSView = () => {
                 onQualityChange: handleQuality,
                 isAuto: isUserSelectedAuto
               }
-            ) : null, isFullScreenSupported ? /* @__PURE__ */ React13.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
-          ),
-          (isMobile || isLandscape) && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Progress, null) : null
+            ) : null, isFullScreenSupported ? /* @__PURE__ */ React14.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
+          )
         ))
       )
-    )), isMobile && !isFullScreen && /* @__PURE__ */ React13.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React13.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React13.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React13.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React13.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React13.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React13.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
+    )), isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType })), /* @__PURE__ */ React14.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React14.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React14.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React14.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React14.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
   );
 };
 var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-UIPDGADR.js.map
+//# sourceMappingURL=HLSView-53PDKIS2.js.map