@100mslive/roomkit-react 0.3.3-alpha.3 → 0.3.3-alpha.4

package/dist/{HLSView-BCIIVR2T.js → HLSView-VUANLYLS.js}

@@ -25,7 +25,6 @@ import {
   Tooltip,
   __async,
   __objRest,
-  __spreadProps,
   __spreadValues,
   config,
   init_define_process_env,
@@ -38,12 +37,12 @@ import {
   useRoomLayoutHeader,
   useSidepaneToggle,
   useTheme
-} from "./chunk-W47ZJGSD.js";
+} from "./chunk-5WTUTVRO.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
-import React15, { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
-import { useFullscreen, useMedia as useMedia4, usePrevious, useToggle } from "react-use";
+import React14, { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { useFullscreen, useMedia as useMedia3, usePrevious, useToggle } from "react-use";
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
 import screenfull from "screenfull";
 import { match, P } from "ts-pattern";
@@ -59,7 +58,7 @@ import {
   useHMSStore,
   useHMSVanillaStore
 } from "@100mslive/react-sdk";
-import { ColoredHandIcon, GoLiveIcon } from "@100mslive/react-icons";
+import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, GoLiveIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/HlsStatsOverlay.jsx
 init_define_process_env();
@@ -180,7 +179,6 @@ var HMSVideo = forwardRef((_a, videoRef) => {
         size: "100%",
         position: "relative",
         justifyContent: "center",
-        transition: "all 0.3s ease-in-out",
         "@md": {
           height: "auto",
           "& video": {
@@ -226,12 +224,6 @@ var HMSVideo = forwardRef((_a, videoRef) => {
   );
 });
 
-// src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
-init_define_process_env();
-import React6 from "react";
-import { useMedia } from "react-use";
-import { BackwardArrowIcon, ForwardArrowIcon } from "@100mslive/react-icons";
-
 // src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
 init_define_process_env();
 import React4 from "react";
@@ -262,10 +254,10 @@ var PlayPauseButton = ({
   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/SeekControl.tsx
+// src/Prebuilt/components/HMSVideo/SeekControls.tsx
 init_define_process_env();
 import React5 from "react";
-var SeekControl = ({
+var SeekControls = ({
   title,
   onClick,
   children,
@@ -274,138 +266,9 @@ var SeekControl = ({
   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/PlayPauseSeekControls.tsx
-var PlayPauseSeekControls = ({
-  isPaused,
-  onSeekTo
-}) => {
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
-    SeekControl,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onSeekTo(-10);
-      },
-      title: "backward"
-    },
-    /* @__PURE__ */ React6.createElement(BackwardArrowIcon, { width: 20, height: 20 })
-  ), /* @__PURE__ */ React6.createElement(PlayPauseButton, { isPaused }), /* @__PURE__ */ React6.createElement(
-    SeekControl,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onSeekTo(10);
-      },
-      title: "forward"
-    },
-    /* @__PURE__ */ React6.createElement(ForwardArrowIcon, { width: 20, height: 20 })
-  ));
-};
-var PlayPauseSeekOverlayControls = ({
-  isPaused,
-  showControls,
-  hoverControlsVisible
-}) => {
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useIsLandscape();
-  if (!isMobile && !isLandscape) {
-    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
-      Flex,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round",
-          size: "$24",
-          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekBackward ? `1` : "0"
-        },
-        direction: "column",
-        align: "center"
-      },
-      /* @__PURE__ */ React6.createElement(SeekControl, { title: "backward" }, /* @__PURE__ */ React6.createElement(BackwardArrowIcon, { width: 52, height: 52 })),
-      /* @__PURE__ */ React6.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
-    ), /* @__PURE__ */ React6.createElement(
-      Box,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round",
-          visibility: hoverControlsVisible.pausePlay ? `` : `hidden`,
-          opacity: hoverControlsVisible.pausePlay ? `1` : "0"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
-    ), /* @__PURE__ */ React6.createElement(
-      Flex,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round",
-          size: "$24",
-          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekForward ? `1` : "0"
-        },
-        direction: "column",
-        align: "center"
-      },
-      /* @__PURE__ */ React6.createElement(SeekControl, { title: "forward" }, /* @__PURE__ */ React6.createElement(ForwardArrowIcon, { width: 52, height: 52 })),
-      /* @__PURE__ */ React6.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
-    ));
-  }
-  return /* @__PURE__ */ React6.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "center",
-      css: {
-        position: "absolute",
-        bg: "#00000066",
-        display: "inline-flex",
-        gap: "$2",
-        zIndex: 1,
-        size: "100%",
-        visibility: showControls ? `` : `hidden`,
-        opacity: showControls ? `1` : "0"
-      }
-    },
-    /* @__PURE__ */ React6.createElement(
-      SeekControl,
-      {
-        title: "backward",
-        css: {
-          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekBackward ? `1` : "0"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(BackwardArrowIcon, { width: 32, height: 32 })
-    ),
-    /* @__PURE__ */ React6.createElement(
-      Box,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
-    ),
-    /* @__PURE__ */ React6.createElement(
-      SeekControl,
-      {
-        title: "forward",
-        css: {
-          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekForward ? `1` : "0"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(ForwardArrowIcon, { width: 32, height: 32 })
-    )
-  );
-};
-
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
 init_define_process_env();
-import React7, { useCallback, useEffect, useState } from "react";
+import React6, { useCallback, useEffect, useState } from "react";
 
 // src/Prebuilt/components/HMSVideo/utils.ts
 init_define_process_env();
@@ -448,12 +311,8 @@ var VideoProgress = ({
     if (videoEl.buffered.length > 0) {
       bufferProgress2 = Math.floor(getPercentage((_b = videoEl.buffered) == null ? void 0 : _b.end(0), duration));
     }
-    if (!isNaN(videoProgress2)) {
-      setVideoProgress(videoProgress2);
-    }
-    if (!isNaN(bufferProgress2)) {
-      setBufferProgress(bufferProgress2);
-    }
+    setVideoProgress(isNaN(videoProgress2) ? 0 : videoProgress2);
+    setBufferProgress(isNaN(bufferProgress2) ? 0 : bufferProgress2);
   }, [videoEl]);
   const timeupdateHandler = useCallback(() => {
     if (!videoEl || seekProgress) {
@@ -469,7 +328,7 @@ var VideoProgress = ({
     return function cleanup() {
       videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
     };
-  }, [setProgress, timeupdateHandler, videoEl]);
+  }, [timeupdateHandler, videoEl]);
   const onProgress = (progress) => {
     var _a;
     const progress1 = Math.floor(getPercentage(progress[0], 100));
@@ -485,7 +344,7 @@ var VideoProgress = ({
   if (!videoEl) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React6.createElement(
     Slider,
     {
       id: "video-actual-rest",
@@ -505,7 +364,7 @@ var VideoProgress = ({
       onPointerUp: () => setSeekProgress(false),
       thumbStyles: { w: "$6", h: "$6" }
     }
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     Box,
     {
       id: "video-buffer",
@@ -523,7 +382,7 @@ var VideoProgress = ({
 
 // src/Prebuilt/components/HMSVideo/VideoTime.tsx
 init_define_process_env();
-import React8, { 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();
@@ -545,7 +404,7 @@ var VideoTime = () => {
       hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
   }, [hlsPlayer2]);
-  return hlsPlayer2 ? /* @__PURE__ */ React8.createElement(
+  return hlsPlayer2 ? /* @__PURE__ */ React7.createElement(
     Text,
     {
       variant: "body1",
@@ -564,14 +423,14 @@ var VideoTime = () => {
 
 // src/Prebuilt/components/HMSVideo/VolumeControl.tsx
 init_define_process_env();
-import React9, { 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((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
   const [showSlider, setShowSlider] = useState3(false);
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Flex,
     {
       align: "center",
@@ -585,7 +444,7 @@ var VolumeControl = () => {
         setShowSlider(false);
       }
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React8.createElement(
       VolumeIcon,
       {
         volume,
@@ -600,7 +459,7 @@ var VolumeControl = () => {
         }
       }
     ),
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React8.createElement(
       Slider,
       {
         css: {
@@ -628,14 +487,15 @@ var VolumeControl = () => {
 };
 var VolumeIcon = ({ volume, onClick }) => {
   if (volume === 0) {
-    return /* @__PURE__ */ React9.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__ */ React9.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React9.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,
+  PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -644,33 +504,30 @@ var HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls
   },
-  PlayPauseSeekControls: {
-    Overlay: PlayPauseSeekOverlayControls,
-    Button: PlayPauseSeekControls
-  }
+  Seeker: SeekControls
 };
 
 // src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
 init_define_process_env();
-import React10 from "react";
+import React9 from "react";
 import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
 var FullScreenButton = ({ isFullScreen, onToggle }) => {
-  return /* @__PURE__ */ React10.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React10.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React10.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React10.createElement(ShrinkIcon, null) : /* @__PURE__ */ React10.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 React11 from "react";
-import { useMedia as useMedia2 } from "react-use";
+import React10 from "react";
+import { useMedia } from "react-use";
 import { VolumeTwoIcon as VolumeTwoIcon2 } from "@100mslive/react-icons";
 function HLSAutoplayBlockedPrompt({
   open,
   unblockAutoPlay
 }) {
   const isLandscape = useIsLandscape();
-  const isMobile = useMedia2(config.media.md);
+  const isMobile = useMedia(config.media.md);
   if ((isMobile || isLandscape) && open) {
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React10.createElement(
       IconButton,
       {
         css: {
@@ -683,8 +540,8 @@ function HLSAutoplayBlockedPrompt({
           return yield unblockAutoPlay();
         })
       },
-      /* @__PURE__ */ React11.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React10.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
+      /* @__PURE__ */ React10.createElement(
         Text,
         {
           variant: "body1",
@@ -698,7 +555,7 @@ function HLSAutoplayBlockedPrompt({
       )
     );
   }
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Dialog.Root,
     {
       open,
@@ -708,7 +565,7 @@ function HLSAutoplayBlockedPrompt({
         }
       })
     },
-    /* @__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(
+    /* @__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",
@@ -723,17 +580,17 @@ function HLSAutoplayBlockedPrompt({
 
 // src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
 init_define_process_env();
-import React12 from "react";
+import React11 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__ */ 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 React13 from "react";
-import { useMedia as useMedia3 } from "react-use";
+import React12 from "react";
+import { useMedia as useMedia2 } from "react-use";
 import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
 function HLSQualitySelector({
   open,
@@ -744,13 +601,13 @@ function HLSQualitySelector({
   isAuto,
   containerRef
 }) {
-  const isMobile = useMedia3(config.media.md);
+  const isMobile = useMedia2(config.media.md);
   const isLandscape = useIsLandscape();
   if (layers.length === 0) {
     return null;
   }
   if (isMobile || isLandscape) {
-    return /* @__PURE__ */ React13.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React13.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: {
@@ -760,15 +617,15 @@ function HLSQualitySelector({
           p: "$2"
         }
       },
-      /* @__PURE__ */ React13.createElement(SettingsIcon, null)
-    )), /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React12.createElement(SettingsIcon, null)
+    )), /* @__PURE__ */ React12.createElement(
       Sheet.Content,
       {
         container: containerRef,
         css: { bg: "$surface_default", pb: "$1" },
         onClick: () => onOpenChange(false)
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React12.createElement(
         Sheet.Title,
         {
           css: {
@@ -785,10 +642,10 @@ function HLSQualitySelector({
           }
         },
         "Quality",
-        /* @__PURE__ */ React13.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React13.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__ */ React13.createElement(
+        return /* @__PURE__ */ React12.createElement(
           Flex,
           {
             align: "center",
@@ -806,12 +663,12 @@ function HLSQualitySelector({
             key: layer.width,
             onClick: () => onQualityChange(layer)
           },
-          /* @__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" })
+          /* @__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__ */ React13.createElement(
+      /* @__PURE__ */ React12.createElement(
         Flex,
         {
           align: "center",
@@ -829,12 +686,12 @@ function HLSQualitySelector({
           key: "auto",
           onClick: () => onQualityChange({ height: "auto" })
         },
-        /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-        isAuto && /* @__PURE__ */ React13.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__ */ React13.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value), modal: false }, /* @__PURE__ */ React13.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React12.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value), modal: false }, /* @__PURE__ */ React12.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React12.createElement(
     Flex,
     {
       css: {
@@ -844,7 +701,7 @@ function HLSQualitySelector({
         p: "$2"
       }
     },
-    /* @__PURE__ */ React13.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React13.createElement(Flex, { align: "center" }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React12.createElement(Flex, { align: "center" }, /* @__PURE__ */ React12.createElement(
       Box,
       {
         css: {
@@ -855,8 +712,8 @@ function HLSQualitySelector({
           c: "$on_surface_high"
         }
       },
-      /* @__PURE__ */ React13.createElement(SettingsIcon, null)
-    ), /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React12.createElement(SettingsIcon, null)
+    ), /* @__PURE__ */ React12.createElement(
       Text,
       {
         variant: {
@@ -866,7 +723,7 @@ function HLSQualitySelector({
         },
         css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
-      isAuto && /* @__PURE__ */ React13.createElement(React13.Fragment, null, "Auto", /* @__PURE__ */ React13.createElement(
+      isAuto && /* @__PURE__ */ React12.createElement(React12.Fragment, null, "Auto", /* @__PURE__ */ React12.createElement(
         Box,
         {
           css: {
@@ -881,7 +738,7 @@ function HLSQualitySelector({
       selection && Math.min(selection.width || 0, selection.height || 0),
       "p"
     )))
-  )), /* @__PURE__ */ React13.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ React13.createElement(
+  )), /* @__PURE__ */ React12.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ React12.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -897,7 +754,7 @@ function HLSQualitySelector({
       }
     },
     layers.map((layer) => {
-      return /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React12.createElement(
         Dropdown.Item,
         {
           onClick: () => onQualityChange(layer),
@@ -912,12 +769,12 @@ function HLSQualitySelector({
             gap: "$2"
           }
         },
-        /* @__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" })
+        /* @__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__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(
       Dropdown.Item,
       {
         onClick: () => onQualityChange({ height: "auto" }),
@@ -932,8 +789,8 @@ function HLSQualitySelector({
           gap: "$2"
         }
       },
-      /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ React13.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" })
     )
   )));
 }
@@ -942,14 +799,14 @@ var getBitrateText = (layer) => `(${(Number(layer.bitrate / 1e3) / 1e3).toFixed(
 
 // src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
 init_define_process_env();
-import React14 from "react";
+import React13 from "react";
 import { ChevronDownIcon } from "@100mslive/react-icons";
 var HLSViewTitle = () => {
   const { title, details, description } = useRoomLayoutHeader();
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   if (isDetailSidepaneOpen) {
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React13.createElement(
       Flex,
       {
         gap: "4",
@@ -964,8 +821,8 @@ var HLSViewTitle = () => {
           backgroundColor: "$surface_dim"
         }
       },
-      /* @__PURE__ */ React14.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
+      /* @__PURE__ */ React13.createElement(
         Flex,
         {
           onClick: toggleDetailsPane,
@@ -975,11 +832,11 @@ var HLSViewTitle = () => {
             "&:hover": { opacity: "0.8" }
           }
         },
-        /* @__PURE__ */ React14.createElement(ChevronDownIcon, null)
+        /* @__PURE__ */ React13.createElement(ChevronDownIcon, null)
       )
     );
   }
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Flex,
     {
       gap: "4",
@@ -993,38 +850,35 @@ var HLSViewTitle = () => {
         backgroundColor: "$surface_dim"
       }
     },
-    /* @__PURE__ */ React14.createElement(Logo, null),
-    /* @__PURE__ */ React14.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ React14.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ React14.createElement(Flex, null, /* @__PURE__ */ React14.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ React14.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
+    /* @__PURE__ */ React13.createElement(Logo, null),
+    /* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ React13.createElement(Flex, null, /* @__PURE__ */ React13.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
   );
 };
 
 // src/Prebuilt/layouts/HLSView.jsx
 var hlsPlayer;
 var toastMap = {};
-var ToggleChat = ({ isFullScreen = false }) => {
+var ToggleChat = () => {
   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 isMobile = useMedia4(config.media.md);
+  const isMobile = useMedia3(config.media.md);
   const hmsActions = useHMSActions();
   useEffect3(() => {
-    match({ sidepane, isMobile, showChat, isFullScreen }).with({ isFullScreen: true }, () => {
-      hmsActions.setAppData(APP_DATA.sidePane, "");
-    }).with({ isMobile: true, showChat: true, sidepane: P.when((value) => !value) }, () => {
+    match({ sidepane, isMobile, showChat }).with({ isMobile: true, showChat: true, sidepane: P.when((value) => !value) }, () => {
       toggleChat();
     }).with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
       hmsActions.setAppData(APP_DATA.sidePane, "");
     }).otherwise(() => {
     });
-  }, [sidepane, isMobile, toggleChat, showChat, hmsActions, isFullScreen]);
+  }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
   return null;
 };
 var HLSView = () => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const videoRef = useRef(null);
   const hlsViewRef = useRef();
-  const { elements } = useRoomLayoutConferencingScreen();
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
@@ -1039,11 +893,7 @@ var HLSView = () => {
   const [hasCaptions, setHasCaptions] = useState4(false);
   const [currentSelectedQuality, setCurrentSelectedQuality] = useState4(null);
   const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState4(false);
-  const [hoverControlsVisible, setHoverControlsVisible] = useState4({
-    seekForward: false,
-    pausePlay: false,
-    seekBackward: false
-  });
+  const [isSeekEnabled, setIsSeekEnabled] = useState4(false);
   const [isPaused, setIsPaused] = useState4(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
@@ -1055,9 +905,7 @@ var HLSView = () => {
   const controlsTimerRef = useRef();
   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 isMobile = useMedia4(config.media.md);
+  const isMobile = useMedia3(config.media.md);
   const isLandscape = useIsLandscape();
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
@@ -1138,7 +986,7 @@ var HLSView = () => {
         if (!toastMap[pollId]) {
           const toastID = ToastManager.addToast({
             title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-            action: /* @__PURE__ */ React15.createElement(
+            action: /* @__PURE__ */ React14.createElement(
               Button,
               {
                 onClick: () => {
@@ -1185,17 +1033,7 @@ var HLSView = () => {
     const handleNoLongerLive = ({ isLive }) => {
       setIsVideoLive(isLive);
     };
-    const playbackEventHandler = (data) => {
-      setIsPaused(data.state === HLSPlaybackState.paused);
-      setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-        pausePlay: true
-      }));
-      setTimeout(() => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          pausePlay: false
-        }));
-      }, 2e3);
-    };
+    const playbackEventHandler = (data) => setIsPaused(data.state === HLSPlaybackState.paused);
     const captionEnabledEventHandler = (isCaptionEnabled2) => {
       setIsCaptionEnabled(isCaptionEnabled2);
     };
@@ -1265,28 +1103,10 @@ 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 }));
-        setTimeout(() => {
-          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-            seekBackward: false
-          }));
-        }, 1e3);
-      }).with({ seek: 10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekForward: true }));
-        setTimeout(() => {
-          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-            seekForward: false
-          }));
-        }, 1e3);
-      }).otherwise(() => null);
-      hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
-    },
-    [hoverControlsVisible, isLandscape, isMobile]
-  );
+  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) => {
       var _a2;
@@ -1294,25 +1114,17 @@ var HLSView = () => {
         return;
       }
       const sidePercentage = event.screenX * 100 / event.target.clientWidth;
+      setIsSeekEnabled(true);
       if (sidePercentage < 45) {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          seekBackward: true
-        }));
         onSeekTo(-10);
       } else {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          seekForward: true
-        }));
         onSeekTo(10);
       }
       setTimeout(() => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          seekForward: false,
-          seekBackward: false
-        }));
-      }, 1e3);
+        setIsSeekEnabled(false);
+      }, 200);
     },
-    [hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
+    [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, onSeekTo]
   );
   const onClickHandler = useCallback2(() => __async(void 0, null, function* () {
     var _a2;
@@ -1355,7 +1167,7 @@ var HLSView = () => {
   );
   const keyHandler = useKeyboardHandler(isPaused, hlsPlayer);
   if (!hlsUrl || streamEnded) {
-    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ToggleChat, null), 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(
+    return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(ToggleChat, null), hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })), /* @__PURE__ */ React14.createElement(
       Flex,
       {
         key: "hls-viewer",
@@ -1367,10 +1179,10 @@ var HLSView = () => {
           flex: isLandscape ? "2 1 0" : "1 1 0"
         }
       },
-      /* @__PURE__ */ React15.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React15.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React15.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React15.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React15.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React15.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
+      /* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__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"))
     ));
   }
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Flex,
     {
       key: "hls-viewer",
@@ -1380,7 +1192,6 @@ var HLSView = () => {
       justify: "center",
       css: {
         flex: isLandscape ? "2 1 0" : "1 1 0",
-        transition: "all 0.3s ease-in-out",
         "&:fullscreen": {
           "& video": {
             height: "unset !important"
@@ -1388,8 +1199,8 @@ 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(
+    hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
+    /* @__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",
@@ -1411,8 +1222,8 @@ var HLSView = () => {
         }),
         tabIndex: "0"
       },
-      !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-      showLoader && /* @__PURE__ */ React15.createElement(
+      !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+      showLoader && /* @__PURE__ */ React14.createElement(
         Flex,
         {
           align: "center",
@@ -1421,9 +1232,9 @@ var HLSView = () => {
             position: "absolute"
           }
         },
-        /* @__PURE__ */ React15.createElement(Loading, { width: 72, height: 72 })
+        /* @__PURE__ */ React14.createElement(Loading, { width: 72, height: 72 })
       ),
-      /* @__PURE__ */ React15.createElement(
+      /* @__PURE__ */ React14.createElement(
         HMSVideoPlayer.Root,
         {
           ref: videoRef,
@@ -1435,36 +1246,53 @@ var HLSView = () => {
             onDoubleClickHandler(e);
           }
         },
-        /* @__PURE__ */ React15.createElement(React15.Fragment, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
           Flex,
           {
             align: "center",
-            justify: "between",
+            justify: "center",
             css: {
               position: "absolute",
               bg: "#00000066",
               display: "inline-flex",
               gap: "$2",
               zIndex: 1,
-              size: "100%"
+              size: "100%",
+              visibility: controlsVisible ? `` : `hidden`,
+              opacity: controlsVisible ? `1` : "0"
             }
           },
-          !showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
-            HMSVideoPlayer.PlayPauseSeekControls.Overlay,
+          !showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+            HMSVideoPlayer.Seeker,
             {
-              isPaused,
-              showControls: controlsVisible,
-              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(
-          HMSVideoPlayer.PlayPauseSeekControls.Overlay,
-          {
-            isPaused,
-            showControls: controlsVisible,
-            hoverControlsVisible
-          }
-        ), /* @__PURE__ */ React15.createElement(
+              title: "backward",
+              css: {
+                visibility: isSeekEnabled ? `` : `hidden`,
+                opacity: isSeekEnabled ? `1` : "0"
+              }
+            },
+            /* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 32, height: 32 })
+          ), /* @__PURE__ */ React14.createElement(
+            Box,
+            {
+              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__ */ React14.createElement(ForwardArrowIcon, { width: 32, height: 32 })
+          ))
+        ), /* @__PURE__ */ React14.createElement(
           Flex,
           {
             ref: controlsRef,
@@ -1482,24 +1310,14 @@ var HLSView = () => {
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          /* @__PURE__ */ React15.createElement(
+          /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Controls.Root,
             {
               css: {
                 p: "$4 $8"
               }
             },
-            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Right, null, (isLandscape || isMobile && isFullScreen) && showChat && /* @__PURE__ */ React15.createElement(
-              ChatToggle,
-              {
-                onClick: () => {
-                  if (isFullScreen) {
-                    toggle();
-                  }
-                  toggleChat();
-                }
-              }
-            ), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React15.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React15.createElement(
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React14.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React14.createElement(
               HLSQualitySelector,
               {
                 layers: availableLayers,
@@ -1510,9 +1328,9 @@ var HLSView = () => {
                 isAuto: isUserSelectedAuto,
                 containerRef: hlsViewRef.current
               }
-            ) : null, /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
+            ) : null, /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
           )
-        )) : null, controlsVisible && /* @__PURE__ */ React15.createElement(
+        )) : null, controlsVisible && /* @__PURE__ */ React14.createElement(
           Flex,
           {
             ref: controlsRef,
@@ -1521,7 +1339,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 && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.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%);`,
@@ -1531,27 +1349,44 @@ 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,
-          /* @__PURE__ */ React15.createElement(
+          ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
+          /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Controls.Root,
             {
               css: {
                 p: "$4 $8"
               }
             },
-            /* @__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__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(React14.Fragment, null, ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+              HMSVideoPlayer.Seeker,
+              {
+                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) : null, /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React14.createElement(
               IconButton,
               {
                 css: { px: "$2" },
-                onClick: (e) => __async(void 0, null, function* () {
-                  e.stopPropagation();
+                onClick: () => __async(void 0, null, function* () {
                   yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
                   setIsVideoLive(true);
                 }),
                 key: "jump-to-live_btn",
                 "data-testid": "jump-to-live_btn"
               },
-              /* @__PURE__ */ React15.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React15.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React15.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: {
@@ -1561,7 +1396,7 @@ var HLSView = () => {
                     r: "$1"
                   }
                 }
-              ), /* @__PURE__ */ React15.createElement(
+              ), /* @__PURE__ */ React14.createElement(
                 Text,
                 {
                   variant: "$body1",
@@ -1572,8 +1407,8 @@ 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),
-            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(
+            ), (isMobile || isLandscape) && !isVideoLive && ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === HLSPlaylistType.DVR ? /* @__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,
@@ -1583,17 +1418,17 @@ var HLSView = () => {
                 onQualityChange: handleQuality,
                 isAuto: isUserSelectedAuto
               }
-            ) : null, isFullScreenSupported ? /* @__PURE__ */ React15.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
+            ) : null, isFullScreenSupported ? /* @__PURE__ */ React14.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
           )
         ))
       )
     )),
-    /* @__PURE__ */ React15.createElement(ToggleChat, { isFullScreen }),
-    isMobile && !isFullScreen && /* @__PURE__ */ React15.createElement(HLSViewTitle, null)
+    /* @__PURE__ */ React14.createElement(ToggleChat, null),
+    isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)
   );
 };
 var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-BCIIVR2T.js.map
+//# sourceMappingURL=HLSView-VUANLYLS.js.map