@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/dist/{HLSView-P57IRMAR.js → HLSView-HNVYG5VE.js}

@@ -1,17 +1,17 @@
 import {
+  APP_DATA,
   Button,
   Dialog,
   DialogContent,
   DialogRow,
   Dropdown,
+  EMOJI_REACTION_TYPE,
   Slider,
   ToastManager,
   useTheme
-} from "./chunk-OSM4QEQG.js";
+} from "./chunk-LYSAET4G.js";
 import {
-  APP_DATA,
   Box,
-  EMOJI_REACTION_TYPE,
   Flex,
   IconButton,
   IconButton_default,
@@ -20,21 +20,20 @@ import {
   Tooltip,
   __async,
   __objRest,
-  init_define_process_env,
+  __spreadValues,
+  config,
   styled
-} from "./chunk-RVCZPPTL.js";
+} from "./chunk-POE7H4IE.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
-init_define_process_env();
-import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
-import { useFullscreen, useToggle } from "react-use";
+import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useFullscreen, useMedia, useToggle } from "react-use";
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
 import screenfull from "screenfull";
 import { selectAppData, selectHLSState, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
-import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
+import { ColoredHandIcon, ExpandIcon, RadioIcon, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/HlsStatsOverlay.jsx
-init_define_process_env();
 import React, { memo } from "react";
 import { CloseIcon } from "@100mslive/react-icons";
 function HlsStatsOverlay({ hlsStatsState, onClose }) {
@@ -114,14 +113,11 @@ var HlsStatsRow = memo(({ label, children }) => {
   ));
 });
 
-// src/Prebuilt/components/HMSVideo/index.js
-init_define_process_env();
-
 // src/Prebuilt/components/HMSVideo/Controls.jsx
-init_define_process_env();
 var VideoControls = styled(Flex, {
   justifyContent: "center",
   alignItems: "center",
+  alignSelf: "stretch",
   width: "100%",
   gap: "$2"
 });
@@ -129,36 +125,33 @@ var LeftControls = styled(Flex, {
   justifyContent: "flex-start",
   alignItems: "center",
   width: "100%",
-  gap: "$2"
+  gap: "$4"
 });
 var RightControls = styled(Flex, {
   justifyContent: "flex-end",
   alignItems: "center",
   width: "100%",
-  gap: "$2"
+  gap: "$4"
 });
 
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
-init_define_process_env();
 import React2, { forwardRef } from "react";
-var HMSVideo = forwardRef(({ children }, videoRef) => {
-  return /* @__PURE__ */ React2.createElement(Flex, { "data-testid": "hms-video", css: { size: "100%" }, direction: "column" }, /* @__PURE__ */ React2.createElement("video", { style: { flex: "1 1 0", margin: "0 auto", minHeight: "0" }, ref: videoRef, playsInline: true }), children);
+var HMSVideo = forwardRef((_a, videoRef) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React2.createElement(Flex, __spreadValues({ "data-testid": "hms-video", css: { size: "100%", position: "relative" }, direction: "column" }, props), /* @__PURE__ */ React2.createElement("video", { style: { flex: "1 1 0", margin: "0 auto", minHeight: "0" }, ref: videoRef, playsInline: true }), children);
 });
 
 // src/Prebuilt/components/HMSVideo/PlayButton.jsx
-init_define_process_env();
 import React3 from "react";
 import { PauseIcon, PlayIcon } from "@100mslive/react-icons";
 var PlayButton = ({ onClick, isPaused }) => {
-  return /* @__PURE__ */ React3.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ React3.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ React3.createElement(PlayIcon, { width: 32, height: 32 }) : /* @__PURE__ */ React3.createElement(PauseIcon, { width: 32, height: 32 })));
+  return /* @__PURE__ */ React3.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ React3.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ React3.createElement(PlayIcon, { width: 20, height: 20 }) : /* @__PURE__ */ React3.createElement(PauseIcon, { width: 20, height: 20 })));
 };
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.jsx
-init_define_process_env();
 import React4, { useEffect, useRef, useState } from "react";
 
 // src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js
-init_define_process_env();
 function getPercentage(a, b) {
   return a / b * 100;
 }
@@ -218,7 +211,7 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
     Flex,
     {
       ref: progressRootRef,
-      css: { paddingLeft: "$8", paddingRight: "$8", cursor: "pointer" },
+      css: { cursor: "pointer", h: "$4", alignSelf: "stretch" },
       onClick: onProgressChangeHandler
     },
     /* @__PURE__ */ React4.createElement(
@@ -228,8 +221,7 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
         css: {
           display: "inline",
           width: `${videoProgress}%`,
-          background: "$primary_default",
-          height: "0.3rem"
+          background: "$primary_default"
         }
       }
     ),
@@ -239,8 +231,8 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
         id: "video-buffer",
         css: {
           width: `${bufferProgress - videoProgress}%`,
-          background: "$primary_dim",
-          height: "0.3rem"
+          background: "$on_surface_high",
+          opacity: "25%"
         }
       }
     ),
@@ -250,8 +242,8 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
         id: "video-rest",
         css: {
           width: `${100 - bufferProgress}%`,
-          background: "$surface_brighter",
-          height: "0.3rem"
+          background: "$on_surface_high",
+          opacity: "10%"
         }
       }
     )
@@ -259,7 +251,6 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
 };
 
 // src/Prebuilt/components/HMSVideo/VideoTime.jsx
-init_define_process_env();
 import React5, { useEffect as useEffect2, useState as useState2 } from "react";
 import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
 var VideoTime = ({ hlsPlayer: hlsPlayer2 }) => {
@@ -279,10 +270,10 @@ var VideoTime = ({ hlsPlayer: hlsPlayer2 }) => {
     Text,
     {
       css: {
-        minWidth: "$16"
-      },
-      variant: {
-        "@sm": "xs"
+        minWidth: "$16",
+        c: "$on_surface_medium",
+        display: "flex",
+        justifyContent: "center"
       }
     },
     videoTime
@@ -290,44 +281,72 @@ var VideoTime = ({ hlsPlayer: hlsPlayer2 }) => {
 };
 
 // src/Prebuilt/components/HMSVideo/VolumeControl.jsx
-init_define_process_env();
 import React6, { useState as useState3 } from "react";
-import { SpeakerIcon } from "@100mslive/react-icons";
+import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from "@100mslive/react-icons";
 var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
   var _a;
   const [volume, setVolume] = useState3((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
-  return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { color: "$on_primary_high" } }, /* @__PURE__ */ React6.createElement(
-    SpeakerIcon,
+  const [showSlider, setShowSlider] = useState3(false);
+  return /* @__PURE__ */ React6.createElement(
+    Flex,
     {
-      style: { cursor: "pointer" },
-      onClick: () => {
-        setVolume(0);
-        if (hlsPlayer2) {
-          hlsPlayer2.setVolume(0);
+      align: "center",
+      css: { color: "$on_surface_high" },
+      onMouseOver: (event) => {
+        event.stopPropagation();
+        setShowSlider(true);
+      },
+      onMouseLeave: (event) => {
+        event.stopPropagation();
+        setShowSlider(false);
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      VolumeIcon,
+      {
+        volume,
+        onClick: () => {
+          if (volume > 0) {
+            setVolume(0);
+            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(0);
+          } else {
+            setVolume(100);
+            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(100);
+          }
         }
       }
-    }
-  ), /* @__PURE__ */ React6.createElement(
-    Slider,
-    {
-      css: {
-        mx: "$4",
-        w: "$20",
-        cursor: "pointer",
-        "@sm": { w: "$14" },
-        "@xs": { w: "$14" }
-      },
-      min: 0,
-      max: 100,
-      step: 1,
-      value: [volume],
-      onValueChange: (volume2) => {
-        hlsPlayer2.setVolume(volume2);
-        setVolume(volume2);
-      },
-      thumbStyles: { w: "$6", h: "$6" }
-    }
-  ));
+    ),
+    /* @__PURE__ */ React6.createElement(
+      Slider,
+      {
+        css: {
+          mx: "$4",
+          w: "$20",
+          cursor: "pointer",
+          "@sm": { w: "$14" },
+          "@xs": { w: "$14" },
+          opacity: showSlider ? "1" : "0",
+          display: showSlider ? "" : "none",
+          transition: `all .2s ease .5s`
+        },
+        min: 0,
+        max: 100,
+        step: 1,
+        value: [volume],
+        onValueChange: (volume2) => {
+          hlsPlayer2.setVolume(volume2[0]);
+          setVolume(volume2[0]);
+        },
+        thumbStyles: { w: "$6", h: "$6" }
+      }
+    )
+  );
+};
+var VolumeIcon = ({ volume, onClick }) => {
+  if (volume === 0) {
+    return /* @__PURE__ */ React6.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+  }
+  return volume < 50 ? /* @__PURE__ */ React6.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React6.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
 };
 
 // src/Prebuilt/components/HMSVideo/index.js
@@ -345,7 +364,6 @@ var HMSVideoPlayer = {
 };
 
 // src/Prebuilt/components/HMSVideo/FullscreenButton.jsx
-init_define_process_env();
 import React7 from "react";
 var FullScreenButton = ({ isFullScreen, icon, onToggle }) => {
   return /* @__PURE__ */ React7.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React7.createElement(
@@ -362,7 +380,6 @@ var FullScreenButton = ({ isFullScreen, icon, onToggle }) => {
 };
 
 // src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx
-init_define_process_env();
 import React8 from "react";
 function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
   return /* @__PURE__ */ React8.createElement(
@@ -389,12 +406,10 @@ function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
 }
 
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx
-init_define_process_env();
-import React9, { useState as useState4 } from "react";
-import { CheckCircleIcon, SettingsIcon } from "@100mslive/react-icons";
-function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
-  return /* @__PURE__ */ React9.createElement(Dropdown.Root, { open: qualityDropDownOpen, onOpenChange: (value) => setQualityDropDownOpen(value) }, /* @__PURE__ */ React9.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React9.createElement(
+import React9 from "react";
+import { CheckIcon, SettingsIcon } from "@100mslive/react-icons";
+function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
+  return /* @__PURE__ */ React9.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpen(value) }, /* @__PURE__ */ React9.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React9.createElement(
     Flex,
     {
       css: {
@@ -411,7 +426,8 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
           w: "$9",
           h: "$9",
           display: "inline-flex",
-          alignItems: "center"
+          alignItems: "center",
+          c: "$on_surface_high"
         }
       },
       /* @__PURE__ */ React9.createElement(SettingsIcon, null)
@@ -423,7 +439,7 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
           "@sm": "xs",
           "@xs": "tiny"
         },
-        css: { display: "flex", alignItems: "center", ml: "$2" }
+        css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
       isAuto && /* @__PURE__ */ React9.createElement(React9.Fragment, null, "Auto", /* @__PURE__ */ React9.createElement(
         Box,
@@ -432,7 +448,7 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
             mx: "$2",
             w: "$2",
             h: "$2",
-            background: "$on_primary_high",
+            background: "$on_surface_medium",
             r: "$1"
           }
         }
@@ -440,11 +456,64 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
       selection && Math.min(selection.width, selection.height),
       "p"
     )))
-  )), layers.length > 0 && /* @__PURE__ */ React9.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { height: "auto", maxHeight: "$96", w: "$64" } }, /* @__PURE__ */ React9.createElement(Dropdown.Item, { onClick: () => onQualityChange({ height: "auto" }), key: "auto" }, /* @__PURE__ */ React9.createElement(Text, { css: { flex: "1 1 0" } }, "Automatic"), isAuto && /* @__PURE__ */ React9.createElement(CheckCircleIcon, null)), layers.map((layer) => {
-    return /* @__PURE__ */ React9.createElement(Dropdown.Item, { onClick: () => onQualityChange(layer), key: layer.width }, /* @__PURE__ */ React9.createElement(Text, { css: { flex: "1 1 0" } }, getQualityText(layer)), !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React9.createElement(CheckCircleIcon, null));
-  })));
+  )), layers.length > 0 && /* @__PURE__ */ React9.createElement(
+    Dropdown.Content,
+    {
+      sideOffset: 5,
+      align: "end",
+      css: {
+        height: "auto",
+        maxHeight: "$52",
+        w: "$40",
+        bg: "$surface_bright",
+        py: "$4",
+        gap: "$4",
+        display: "grid"
+      }
+    },
+    layers.map((layer) => {
+      return /* @__PURE__ */ React9.createElement(
+        Dropdown.Item,
+        {
+          onClick: () => onQualityChange(layer),
+          key: layer.width,
+          css: {
+            bg: !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) ? "$surface_default" : "$surface_bright",
+            "&:hover": {
+              bg: "$surface_brighter"
+            },
+            p: "$2 $4 $2 $8",
+            h: "$12",
+            gap: "$2"
+          }
+        },
+        /* @__PURE__ */ React9.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ React9.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__ */ React9.createElement(CheckIcon, { width: "16px", height: "16px" })
+      );
+    }),
+    /* @__PURE__ */ React9.createElement(
+      Dropdown.Item,
+      {
+        onClick: () => onQualityChange({ height: "auto" }),
+        key: "auto",
+        css: {
+          bg: !isAuto ? "$surface_bright" : "$surface_default",
+          "&:hover": {
+            bg: "$surface_brighter"
+          },
+          p: "$2 $4 $2 $8",
+          h: "$12",
+          gap: "$2"
+        }
+      },
+      /* @__PURE__ */ React9.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ React9.createElement(CheckIcon, { width: "16px", height: "16px" })
+    )
+  ));
 }
-var getQualityText = (layer) => `${Math.min(layer.height, layer.width)}p (${(Number(layer.bitrate / 1e3) / 1e3).toFixed(2)} Mbps)`;
+var getQualityText = (layer) => `${Math.min(layer.height, layer.width)}p `;
+var getBitrateText = (layer) => `(${(Number(layer.bitrate / 1e3) / 1e3).toFixed(2)} Mbps)`;
 
 // src/Prebuilt/layouts/HLSView.jsx
 var hlsPlayer;
@@ -455,21 +524,27 @@ var HLSView = () => {
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const hmsActions = useHMSActions();
-  const { themeType } = useTheme();
-  let [hlsStatsState, setHlsStatsState] = useState5(null);
+  const { themeType, theme } = useTheme();
+  const [streamEnded, setStreamEnded] = useState4(false);
+  let [hlsStatsState, setHlsStatsState] = useState4(null);
   const hlsUrl = (_a = hlsState.variants[0]) == null ? void 0 : _a.url;
-  const [availableLayers, setAvailableLayers] = useState5([]);
-  const [isVideoLive, setIsVideoLive] = useState5(true);
-  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState5(true);
-  const [currentSelectedQuality, setCurrentSelectedQuality] = useState5(null);
-  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState5(false);
-  const [isPaused, setIsPaused] = useState5(false);
+  const [availableLayers, setAvailableLayers] = useState4([]);
+  const [isVideoLive, setIsVideoLive] = useState4(true);
+  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState4(true);
+  const [currentSelectedQuality, setCurrentSelectedQuality] = useState4(null);
+  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState4(false);
+  const [isPaused, setIsPaused] = useState4(false);
   const isFullScreenSupported = screenfull.isEnabled;
   const [show, toggle] = useToggle(false);
+  const [controlsVisible, setControlsVisible] = useState4(true);
+  const controlsRef = useRef2();
+  const controlsTimerRef = useRef2();
+  const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
+  const isMobile = useMedia(config.media.md);
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
   });
-  const [showLoader, setShowLoader] = useState5(false);
+  const [showLoader, setShowLoader] = useState4(false);
   useEffect3(() => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
@@ -481,6 +556,17 @@ var HLSView = () => {
       videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
     };
   }, []);
+  useEffect3(() => {
+    const videoElem = videoRef.current;
+    const setStreamEndedCallback = () => {
+      setStreamEnded(true);
+      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
+    };
+    videoElem == null ? void 0 : videoElem.addEventListener("ended", setStreamEndedCallback);
+    return () => {
+      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
+    };
+  }, [hlsUrl]);
   useEffect3(() => {
     let videoEl = videoRef.current;
     const manifestLoadedHandler = ({ layers }) => {
@@ -491,6 +577,7 @@ var HLSView = () => {
     };
     const metadataLoadedHandler = (_a2) => {
       var _b = _a2, { payload } = _b, rest = __objRest(_b, ["payload"]);
+      var _a3;
       const parsePayload = (str) => {
         try {
           return JSON.parse(str);
@@ -502,7 +589,7 @@ var HLSView = () => {
       const parsedPayload = parsePayload(payload);
       switch (parsedPayload.type) {
         case EMOJI_REACTION_TYPE:
-          window.showFlyingEmoji(parsedPayload == null ? void 0 : parsedPayload.emojiId, parsedPayload == null ? void 0 : parsedPayload.senderId);
+          (_a3 = window.showFlyingEmoji) == null ? void 0 : _a3.call(window, { emojiId: parsedPayload == null ? void 0 : parsedPayload.emojiId, senderId: parsedPayload == null ? void 0 : parsedPayload.senderId });
           break;
         default: {
           const toast = {
@@ -577,6 +664,41 @@ var HLSView = () => {
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
+  useEffect3(() => {
+    if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
+      if (controlsTimerRef.current) {
+        clearTimeout(controlsTimerRef.current);
+      }
+      controlsTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, 5e3);
+    }
+    if (!isFullScreen && controlsTimerRef.current) {
+      clearTimeout(controlsTimerRef.current);
+    }
+    return () => {
+      if (controlsTimerRef.current) {
+        clearTimeout(controlsTimerRef.current);
+      }
+    };
+  }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
+  const onHoverHandler = useCallback(
+    (event) => {
+      if (event.type === "mouseenter" || qualityDropDownOpen) {
+        setControlsVisible(true);
+        return;
+      }
+      if (event.type === "mouseleave") {
+        setControlsVisible(false);
+      } else if (isFullScreen && !controlsVisible && event.type === "mousemove") {
+        setControlsVisible(true);
+        if (controlsTimerRef.current) {
+          clearTimeout(controlsTimerRef.current);
+        }
+      }
+    },
+    [controlsVisible, isFullScreen, qualityDropDownOpen]
+  );
   return /* @__PURE__ */ React10.createElement(
     Flex,
     {
@@ -588,7 +710,7 @@ var HLSView = () => {
       }
     },
     (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats ? /* @__PURE__ */ React10.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null,
-    hlsUrl && hlsState.running ? /* @__PURE__ */ React10.createElement(
+    hlsUrl && !streamEnded ? /* @__PURE__ */ React10.createElement(
       Flex,
       {
         id: "hls-player-container",
@@ -612,74 +734,110 @@ var HLSView = () => {
         },
         /* @__PURE__ */ React10.createElement(Loading, { width: 72, height: 72 })
       ),
-      /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Root, { ref: videoRef }, hlsPlayer && /* @__PURE__ */ React10.createElement(
-        HMSVideoPlayer.Progress,
-        {
-          onValueChange: (currentTime) => {
-            hlsPlayer.seekTo(currentTime);
-          },
-          hlsPlayer
-        }
-      ), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Root, { css: { p: "$4 $8" } }, /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React10.createElement(
-        HMSVideoPlayer.PlayButton,
-        {
-          onClick: () => __async(void 0, null, function* () {
-            isPaused ? yield hlsPlayer == null ? void 0 : hlsPlayer.play() : hlsPlayer == null ? void 0 : hlsPlayer.pause();
-          }),
-          isPaused
-        }
-      ), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Duration, { hlsPlayer }), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Volume, { hlsPlayer })), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
-        IconButton,
+      /* @__PURE__ */ React10.createElement(
+        HMSVideoPlayer.Root,
         {
-          variant: "standard",
-          css: { px: "$2" },
-          onClick: () => __async(void 0, null, function* () {
-            yield hlsPlayer.seekToLivePosition();
-            setIsVideoLive(true);
-          }),
-          key: "jump-to-live_btn",
-          "data-testid": "jump-to-live_btn"
+          ref: videoRef,
+          onMouseEnter: onHoverHandler,
+          onMouseMove: onHoverHandler,
+          onMouseLeave: onHoverHandler
         },
-        /* @__PURE__ */ React10.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ React10.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React10.createElement(
-          Box,
+        /* @__PURE__ */ React10.createElement(
+          Flex,
           {
+            ref: controlsRef,
+            direction: "column",
+            justify: "flex-end",
+            align: "flex-start",
             css: {
-              height: "$4",
-              width: "$4",
-              background: isVideoLive ? "$alert_error_default" : "$on_primary_high",
-              r: "$1"
-            }
-          }
-        ), /* @__PURE__ */ React10.createElement(
-          Text,
-          {
-            variant: {
-              "@sm": "xs"
+              position: "absolute",
+              bottom: "0",
+              left: "0",
+              background: `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
+              width: "100%",
+              pt: "$8",
+              flexShrink: 0,
+              transition: "visibility 0s 0.5s, opacity 0.5s linear",
+              visibility: controlsVisible ? `` : `hidden`,
+              opacity: controlsVisible ? `1` : "0"
             }
           },
-          isVideoLive ? "LIVE" : "GO LIVE"
-        )))
-      ), /* @__PURE__ */ React10.createElement(
-        HLSQualitySelector,
-        {
-          layers: availableLayers,
-          selection: currentSelectedQuality,
-          onQualityChange: handleQuality,
-          isAuto: isUserSelectedAuto
-        }
-      )) : null, isFullScreenSupported ? /* @__PURE__ */ React10.createElement(
-        FullScreenButton,
-        {
-          isFullScreen,
-          onToggle: toggle,
-          icon: isFullScreen ? /* @__PURE__ */ React10.createElement(ShrinkIcon, null) : /* @__PURE__ */ React10.createElement(ExpandIcon, null)
-        }
-      ) : null)))
-    ) : /* @__PURE__ */ React10.createElement(Flex, { align: "center", justify: "center", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React10.createElement(Text, { variant: "md", css: { textAlign: "center" } }, "Waiting for the stream to start..."))
+          !isMobile && /* @__PURE__ */ React10.createElement(
+            HMSVideoPlayer.Controls.Root,
+            {
+              css: {
+                p: "$4 $8"
+              }
+            },
+            /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React10.createElement(
+              HMSVideoPlayer.PlayButton,
+              {
+                onClick: () => __async(void 0, null, function* () {
+                  isPaused ? yield hlsPlayer == null ? void 0 : hlsPlayer.play() : hlsPlayer == null ? void 0 : hlsPlayer.pause();
+                }),
+                isPaused
+              }
+            ), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Duration, { hlsPlayer }), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Volume, { hlsPlayer }), /* @__PURE__ */ React10.createElement(
+              IconButton,
+              {
+                variant: "standard",
+                css: { px: "$2" },
+                onClick: () => __async(void 0, null, function* () {
+                  yield hlsPlayer.seekToLivePosition();
+                  setIsVideoLive(true);
+                }),
+                key: "jump-to-live_btn",
+                "data-testid": "jump-to-live_btn"
+              },
+              /* @__PURE__ */ React10.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ React10.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React10.createElement(
+                Box,
+                {
+                  css: {
+                    height: "$4",
+                    width: "$4",
+                    background: isVideoLive ? "$alert_error_default" : "$on_primary_medium",
+                    r: "$1"
+                  }
+                }
+              ), /* @__PURE__ */ React10.createElement(
+                Text,
+                {
+                  variant: {
+                    "@sm": "xs"
+                  },
+                  css: {
+                    c: isVideoLive ? "$on_surface_high" : "$on_surface_medium"
+                  }
+                },
+                isVideoLive ? "LIVE" : "GO LIVE"
+              )))
+            )),
+            /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__PURE__ */ React10.createElement(
+              HLSQualitySelector,
+              {
+                layers: availableLayers,
+                onOpen: setQualityDropDownOpen,
+                open: qualityDropDownOpen,
+                selection: currentSelectedQuality,
+                onQualityChange: handleQuality,
+                isAuto: isUserSelectedAuto
+              }
+            ) : null, isFullScreenSupported ? /* @__PURE__ */ React10.createElement(
+              FullScreenButton,
+              {
+                isFullScreen,
+                onToggle: toggle,
+                icon: isFullScreen ? /* @__PURE__ */ React10.createElement(ShrinkIcon, null) : /* @__PURE__ */ React10.createElement(ExpandIcon, null)
+              }
+            ) : null)
+          )
+        )
+      )
+    ) : /* @__PURE__ */ React10.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React10.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React10.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React10.createElement(RadioIcon, { height: 56, width: 56 })), /* @__PURE__ */ React10.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React10.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
   );
 };
 var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-P57IRMAR.js.map
+//# sourceMappingURL=HLSView-HNVYG5VE.js.map