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

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

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