@100mslive/roomkit-react 0.2.8-alpha.7 → 0.2.8-alpha.8

package/dist/{HLSView-MYKM5AXS.js → HLSView-6KPQ2KD6.js}

@@ -14,6 +14,7 @@ import {
   LeaveRoom,
   Loading,
   Logo,
+  RoomDetailsRow,
   SIDE_PANE_OPTIONS,
   Sheet,
   Slider,
@@ -24,20 +25,21 @@ import {
   __objRest,
   __spreadValues,
   config,
-  getFormattedCount,
   init_define_process_env,
   styled,
   theme,
   useIsLandscape,
+  useIsSidepaneTypeOpen,
   usePollViewToggle,
   useRoomLayoutConferencingScreen,
+  useRoomLayoutHeader,
   useSidepaneToggle,
   useTheme
-} from "./chunk-DRBTAFKN.js";
+} from "./chunk-JQCSGJIR.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
-import React14, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import React14, { useCallback, 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";
@@ -45,12 +47,12 @@ import {
   HLSPlaylistType,
   HMSNotificationTypes,
   selectAppData,
-  selectHLSState as selectHLSState2,
+  selectHLSState,
   selectPeerNameByID,
   selectPollByID,
   useHMSActions,
   useHMSNotifications,
-  useHMSStore as useHMSStore2,
+  useHMSStore,
   useHMSVanillaStore
 } from "@100mslive/react-sdk";
 import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, GoLiveIcon } from "@100mslive/react-icons";
@@ -178,13 +180,12 @@ var HMSVideo = forwardRef((_a, videoRef) => {
         position: "relative",
         "& video::cue": {
           color: "white",
-          // textShadow: '0px 0px 4px #000',
           whiteSpace: "pre-line",
-          fontSize: "$lg",
+          fontSize: "$sm",
           fontStyle: "normal",
-          fontWeight: "$semiBold",
+          fontWeight: "$regular",
           lineHeight: "$sm",
-          letterSpacing: "0.5px"
+          letterSpacing: "0.25px"
         },
         "& video::-webkit-media-text-track-display": {
           padding: "0 $4",
@@ -282,13 +283,6 @@ function getDurationFromSeconds2(timeInSeconds) {
   }
   return videoTimeStr;
 }
-function getTime(timeInMilles) {
-  const timeInSeconds = Math.floor(timeInMilles / 1e3);
-  const hours = Math.floor(timeInSeconds / 3600);
-  const minutes = Math.floor(timeInSeconds % 3600 / 60);
-  const hour = hours !== 0 ? `${hours < 10 ? "0" : ""}${hours}` : "";
-  return hour + `${hour ? "h:" : ""}` + minutes + "m";
-}
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
 var VideoProgress = ({ isDvr = true }) => {
@@ -378,7 +372,8 @@ var VideoTime = () => {
     const timeupdateHandler = (currentTime) => {
       const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
       if (videoEl) {
-        setVideoTime(getDurationFromSeconds2(videoEl.duration - currentTime));
+        const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
+        setVideoTime(getDurationFromSeconds2(duration - currentTime));
       } else {
         setVideoTime(getDurationFromSeconds2(currentTime));
       }
@@ -584,10 +579,14 @@ function HLSQualitySelector({
   layers,
   onQualityChange,
   selection,
-  isAuto
+  isAuto,
+  containerRef
 }) {
   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(
       Flex,
@@ -600,26 +599,57 @@ function HLSQualitySelector({
         }
       },
       /* @__PURE__ */ React12.createElement(SettingsIcon, null)
-    )), layers.length > 0 && /* @__PURE__ */ React12.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(
-      Sheet.Title,
+    )), /* @__PURE__ */ React12.createElement(
+      Sheet.Content,
       {
-        css: {
-          display: "flex",
-          color: "$on_surface_high",
-          w: "100%",
-          justifyContent: "space-between",
-          mt: "$8",
-          fontSize: "$md",
-          px: "$10",
-          pb: "$8",
-          borderBottom: "1px solid $border_bright",
-          alignItems: "center"
-        }
+        container: containerRef,
+        css: { bg: "$surface_default", pb: "$1" },
+        onClick: () => onOpenChange(false)
       },
-      "Quality",
-      /* @__PURE__ */ React12.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(CrossIcon2, null))
-    ), layers.map((layer) => {
-      return /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React12.createElement(
+        Sheet.Title,
+        {
+          css: {
+            display: "flex",
+            color: "$on_surface_high",
+            w: "100%",
+            justifyContent: "space-between",
+            mt: "$8",
+            fontSize: "$md",
+            px: "$10",
+            pb: "$8",
+            borderBottom: "1px solid $border_bright",
+            alignItems: "center"
+          }
+        },
+        "Quality",
+        /* @__PURE__ */ React12.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(CrossIcon2, null))
+      ),
+      layers.map((layer) => {
+        return /* @__PURE__ */ React12.createElement(
+          Flex,
+          {
+            align: "center",
+            css: {
+              w: "100%",
+              bg: "$surface_default",
+              "&:hover": {
+                bg: "$surface_brighter"
+              },
+              cursor: "pointer",
+              gap: "$4",
+              py: "$8",
+              px: "$10"
+            },
+            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__ */ React12.createElement(
         Flex,
         {
           align: "center",
@@ -634,36 +664,15 @@ function HLSQualitySelector({
             py: "$8",
             px: "$10"
           },
-          key: layer.width,
-          onClick: () => onQualityChange(layer)
+          key: "auto",
+          onClick: () => onQualityChange({ height: "auto" })
         },
-        /* @__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__ */ React12.createElement(
-      Flex,
-      {
-        align: "center",
-        css: {
-          w: "100%",
-          bg: "$surface_default",
-          "&:hover": {
-            bg: "$surface_brighter"
-          },
-          cursor: "pointer",
-          gap: "$4",
-          py: "$8",
-          px: "$10"
-        },
-        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__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+        isAuto && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
+      )
+    ));
   }
-  return /* @__PURE__ */ React12.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ React12.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React12.createElement(
+  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: {
@@ -710,7 +719,7 @@ function HLSQualitySelector({
       selection && Math.min(selection.width || 0, selection.height || 0),
       "p"
     )))
-  )), layers.length > 0 && /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React12.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ React12.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -764,48 +773,50 @@ function HLSQualitySelector({
       /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
       isAuto && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
     )
-  ));
+  )));
 }
 var getQualityText = (layer) => `${Math.min(layer.height || 0, layer.width || 0)}p `;
 var getBitrateText = (layer) => `(${(Number(layer.bitrate / 1e3) / 1e3).toFixed(2)} Mbps)`;
 
 // src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
 init_define_process_env();
-import React13, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
-import { selectHLSState, selectPeerCount, useHMSStore } from "@100mslive/react-sdk";
+import React13 from "react";
+import { ChevronDownIcon } from "@100mslive/react-icons";
 var HLSViewTitle = () => {
-  const peerCount = useHMSStore(selectPeerCount);
-  const hlsState = useHMSStore(selectHLSState);
-  const intervalRef = useRef(null);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  const [liveTime, setLiveTime] = useState4(0);
-  const startTimer = useCallback(() => {
-    intervalRef.current = setInterval(() => {
-      var _a;
-      const timeStamp = (_a = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a[screenType === "hls_live_streaming" ? "startedAt" : "initialisedAt"];
-      if ((hlsState == null ? void 0 : hlsState.running) && timeStamp) {
-        setLiveTime(Date.now() - timeStamp.getTime());
-      }
-    }, 6e4);
-  }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType]);
-  useEffect3(() => {
-    var _a;
-    if (hlsState == null ? void 0 : hlsState.running) {
-      startTimer();
-      const timeStamp = (_a = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a[screenType === "hls_live_streaming" ? "startedAt" : "initialisedAt"];
-      if ((hlsState == null ? void 0 : hlsState.running) && timeStamp) {
-        setLiveTime(Date.now() - timeStamp.getTime());
-      }
-    }
-    if (!(hlsState == null ? void 0 : hlsState.running) && intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType, startTimer]);
+  const { title, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  if (isDetailSidepaneOpen) {
+    return /* @__PURE__ */ React13.createElement(
+      Flex,
+      {
+        gap: "4",
+        align: "center",
+        justify: "between",
+        css: {
+          position: "relative",
+          h: "fit-content",
+          w: "100%",
+          borderBottom: "1px solid $border_bright",
+          p: "$8",
+          backgroundColor: "$surface_dim"
+        }
+      },
+      /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
+      /* @__PURE__ */ React13.createElement(
+        Flex,
+        {
+          onClick: toggleDetailsPane,
+          css: {
+            color: "$on_surface_high",
+            cursor: "pointer",
+            "&:hover": { opacity: "0.8" }
+          }
+        },
+        /* @__PURE__ */ React13.createElement(ChevronDownIcon, null)
+      )
+    );
+  }
   return /* @__PURE__ */ React13.createElement(
     Flex,
     {
@@ -821,19 +832,7 @@ var HLSViewTitle = () => {
       }
     },
     /* @__PURE__ */ React13.createElement(Logo, null),
-    /* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ React13.createElement(Flex, { gap: "1" }, /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ React13.createElement(
-      Flex,
-      {
-        direction: "column",
-        css: {
-          w: "$3",
-          h: "$3",
-          backgroundColor: "$on_surface_medium",
-          borderRadius: "50%",
-          alignSelf: "center"
-        }
-      }
-    ), /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
+    /* @__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 }), /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more")))
   );
 };
 
@@ -841,36 +840,36 @@ var HLSViewTitle = () => {
 var hlsPlayer;
 var toastMap = {};
 var HLSView = () => {
-  var _a, _b;
-  const videoRef = useRef2(null);
-  const hlsViewRef = useRef2(null);
-  const hlsState = useHMSStore2(selectHLSState2);
-  const enablHlsStats = useHMSStore2(selectAppData(APP_DATA.hlsStats));
+  var _a, _b, _c;
+  const videoRef = useRef(null);
+  const hlsViewRef = useRef();
+  const hlsState = useHMSStore(selectHLSState);
+  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const { elements, screenType } = useRoomLayoutConferencingScreen();
   const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
   const hmsActions = useHMSActions();
   const { themeType } = useTheme();
-  const [streamEnded, setStreamEnded] = useState5(false);
-  let [hlsStatsState, setHlsStatsState] = useState5(null);
+  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 [isCaptionEnabled, setIsCaptionEnabled] = useState5(true);
-  const [hasCaptions, setHasCaptions] = useState5(false);
-  const [currentSelectedQuality, setCurrentSelectedQuality] = useState5(null);
-  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState5(false);
-  const [isSeekEnabled, setIsSeekEnabled] = useState5(false);
-  const [isPaused, setIsPaused] = useState5(false);
+  const [availableLayers, setAvailableLayers] = useState4([]);
+  const [isVideoLive, setIsVideoLive] = useState4(true);
+  const [isCaptionEnabled, setIsCaptionEnabled] = useState4(true);
+  const [hasCaptions, setHasCaptions] = useState4(false);
+  const [currentSelectedQuality, setCurrentSelectedQuality] = useState4(null);
+  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState4(false);
+  const [isSeekEnabled, setIsSeekEnabled] = useState4(false);
+  const [isPaused, setIsPaused] = useState4(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
   const togglePollView = usePollViewToggle();
   const vanillaStore = useHMSVanillaStore();
-  const [controlsVisible, setControlsVisible] = useState5(true);
-  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState5(true);
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState5(false);
-  const controlsRef = useRef2(null);
-  const controlsTimerRef = useRef2();
-  const sidepane = useHMSStore2(selectAppData(APP_DATA.sidePane));
+  const [controlsVisible, setControlsVisible] = useState4(true);
+  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState4(true);
+  const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
+  const controlsRef = useRef(null);
+  const controlsTimerRef = useRef();
+  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const showChat = !!(elements == null ? void 0 : elements.chat);
   const isFullScreenSupported = screenfull.isEnabled;
@@ -879,14 +878,14 @@ var HLSView = () => {
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
   });
-  const [showLoader, setShowLoader] = useState5(false);
+  const [showLoader, setShowLoader] = useState4(false);
   const isMwebHLSStream = screenType === "hls_live_streaming" && isMobile;
-  useEffect4(() => {
+  useEffect3(() => {
     if (sidepane === "" && isMwebHLSStream && showChat) {
       toggleChat();
     }
   }, [sidepane, isMwebHLSStream, toggleChat, showChat]);
-  useEffect4(() => {
+  useEffect3(() => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
     const hideLoader = () => setShowLoader(false);
@@ -897,12 +896,12 @@ var HLSView = () => {
       videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
     };
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     if (streamEnded && lastHlsUrl !== hlsUrl) {
       setStreamEnded(false);
     }
   }, [hlsUrl, streamEnded, lastHlsUrl]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!notification)
       return;
     const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
@@ -911,7 +910,7 @@ var HLSView = () => {
       delete toastMap[notification.data.id];
     }
   }, [notification]);
-  useEffect4(() => {
+  useEffect3(() => {
     const videoElem = videoRef.current;
     const setStreamEndedCallback = () => {
       setStreamEnded(true);
@@ -922,7 +921,7 @@ var HLSView = () => {
       videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
     };
   }, [hlsUrl]);
-  const handleQuality = useCallback2(
+  const handleQuality = useCallback(
     (quality) => {
       var _a2;
       if (hlsPlayer) {
@@ -933,7 +932,7 @@ var HLSView = () => {
     [availableLayers]
     //eslint-disable-line
   );
-  useEffect4(() => {
+  useEffect3(() => {
     let videoEl = videoRef.current;
     const manifestLoadedHandler = ({ layers }) => {
       setAvailableLayers(layers);
@@ -958,25 +957,27 @@ var HLSView = () => {
         const pollId = parsedPayload.substr(parsedPayload.indexOf(":") + 1);
         const poll = vanillaStore.getState(selectPollByID(pollId));
         const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || "Participant";
-        const toastID = ToastManager.addToast({
-          title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-          action: /* @__PURE__ */ React14.createElement(
-            Button,
-            {
-              onClick: () => togglePollView(pollId),
-              variant: "standard",
-              css: {
-                backgroundColor: "$surface_bright",
-                fontWeight: "$semiBold",
-                color: "$on_surface_high",
-                p: "$xs $md"
-              }
-            },
-            poll.type === "quiz" ? "Answer" : "Vote"
-          ),
-          duration: Infinity
-        });
-        toastMap[pollId] = toastID;
+        if (!toastMap[pollId]) {
+          const toastID = ToastManager.addToast({
+            title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
+            action: /* @__PURE__ */ React14.createElement(
+              Button,
+              {
+                onClick: () => togglePollView(pollId),
+                variant: "standard",
+                css: {
+                  backgroundColor: "$surface_bright",
+                  fontWeight: "$semiBold",
+                  color: "$on_surface_high",
+                  p: "$xs $md"
+                }
+              },
+              poll.type === "quiz" ? "Answer" : "Vote"
+            ),
+            duration: Infinity
+          });
+          toastMap[pollId] = toastID;
+        }
         return;
       }
       switch (parsedPayload.type) {
@@ -1028,7 +1029,7 @@ var HLSView = () => {
       };
     }
   }, [hlsUrl, togglePollView, vanillaStore]);
-  useEffect4(() => {
+  useEffect3(() => {
     const onHLSStats = (state) => setHlsStatsState(state);
     if (enablHlsStats) {
       hlsPlayer == null ? void 0 : hlsPlayer.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
@@ -1050,7 +1051,7 @@ var HLSView = () => {
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
-  useEffect4(() => {
+  useEffect3(() => {
     if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
@@ -1068,11 +1069,11 @@ var HLSView = () => {
       }
     };
   }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
-  const onSeekTo = useCallback2((seek) => {
+  const onSeekTo = useCallback((seek) => {
     var _a2;
     hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
   }, []);
-  const onDoubleClickHandler = useCallback2(
+  const onDoubleClickHandler = useCallback(
     (event) => {
       if (!(isMobile || isLandscape)) {
         return;
@@ -1090,7 +1091,7 @@ var HLSView = () => {
     },
     [isLandscape, isMobile, onSeekTo]
   );
-  const onClickHandler = useCallback2(() => {
+  const onClickHandler = useCallback(() => {
     if (!(isMobile || isLandscape)) {
       return;
     }
@@ -1099,7 +1100,7 @@ var HLSView = () => {
       clearTimeout(controlsTimerRef.current);
     }
   }, [isLandscape, isMobile]);
-  const onHoverHandler = useCallback2(
+  const onHoverHandler = useCallback(
     (event) => {
       event.preventDefault();
       if (isMobile || isLandscape) {
@@ -1240,8 +1241,8 @@ var HLSView = () => {
                 p: "$4 $8"
               }
             },
-            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType })),
-            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React14.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React14.createElement(
+            /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, hlsViewRef.current && /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType, container: hlsViewRef.current })),
+            /* @__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,
@@ -1249,7 +1250,8 @@ var HLSView = () => {
                 open: qualityDropDownOpen,
                 selection: currentSelectedQuality,
                 onQualityChange: handleQuality,
-                isAuto: isUserSelectedAuto
+                isAuto: isUserSelectedAuto,
+                containerRef: hlsViewRef.current
               }
             ) : null, /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
           )
@@ -1262,7 +1264,7 @@ var HLSView = () => {
             align: "start",
             css: {
               position: "absolute",
-              bottom: "0",
+              bottom: isFullScreen && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.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%);`,
@@ -1274,7 +1276,7 @@ var HLSView = () => {
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { isDvr: ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR }),
+          /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { isDvr: ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR }),
           /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Controls.Root,
             {
@@ -1347,11 +1349,11 @@ var HLSView = () => {
           )
         ))
       )
-    )), isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType })), /* @__PURE__ */ React14.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React14.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React14.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React14.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React14.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
+    )), isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType }) : null), /* @__PURE__ */ React14.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React14.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React14.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React14.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React14.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
   );
 };
 var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-MYKM5AXS.js.map
+//# sourceMappingURL=HLSView-6KPQ2KD6.js.map