@100mslive/roomkit-react 0.2.8-alpha.9 → 0.3.0

package/dist/{HLSView-TOMPA4E4.js → HLSView-LZOTIUWE.js}

@@ -14,6 +14,8 @@ import {
   LeaveRoom,
   Loading,
   Logo,
+  POLL_STATE,
+  POLL_VIEWS,
   RoomDetailsRow,
   SIDE_PANE_OPTIONS,
   Sheet,
@@ -30,19 +32,19 @@ import {
   theme,
   useIsLandscape,
   useIsSidepaneTypeOpen,
-  usePollViewToggle,
   useRoomLayoutConferencingScreen,
   useRoomLayoutHeader,
   useSidepaneToggle,
   useTheme
-} from "./chunk-FUDX3LDB.js";
+} from "./chunk-LCECN6XD.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
-import React14, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
-import { useFullscreen, useMedia as useMedia4, usePrevious, useToggle } from "react-use";
+import React14, { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { useFullscreen, useMedia as useMedia3, usePrevious, useToggle } from "react-use";
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
 import screenfull from "screenfull";
+import { match, P } from "ts-pattern";
 import {
   HLSPlaylistType,
   HMSNotificationTypes,
@@ -166,11 +168,8 @@ var RightControls = styled(Flex, {
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
 init_define_process_env();
 import React2, { forwardRef } from "react";
-import { useMedia } from "react-use";
 var HMSVideo = forwardRef((_a, videoRef) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia(config.media.md);
   return /* @__PURE__ */ React2.createElement(
     Flex,
     __spreadValues({
@@ -178,6 +177,13 @@ var HMSVideo = forwardRef((_a, videoRef) => {
       css: {
         size: "100%",
         position: "relative",
+        justifyContent: "center",
+        "@md": {
+          height: "auto",
+          "& video": {
+            height: "$60 !important"
+          }
+        },
         "& video::cue": {
           color: "white",
           whiteSpace: "pre-line",
@@ -201,16 +207,16 @@ var HMSVideo = forwardRef((_a, videoRef) => {
       "video",
       {
         style: {
-          flex: "1 1 0",
           margin: "0 auto",
-          minHeight: "0",
           objectFit: "contain",
-          width: "inherit",
-          height: isLandscape || isMobile ? "100%" : "",
-          position: isLandscape || isMobile ? "absolute" : ""
+          width: "auto",
+          height: "auto",
+          maxWidth: "100%",
+          maxHeight: "100%"
         },
         ref: videoRef,
-        playsInline: true
+        playsInline: true,
+        disablePictureInPicture: true
       }
     ),
     children
@@ -261,7 +267,7 @@ var SeekControls = ({
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
 init_define_process_env();
-import React6, { useEffect, useState } from "react";
+import React6, { useCallback, useEffect, useState } from "react";
 
 // src/Prebuilt/components/HMSVideo/utils.ts
 init_define_process_env();
@@ -285,44 +291,54 @@ function getDurationFromSeconds2(timeInSeconds) {
 }
 
 // src/Prebuilt/components/HMSVideo/VideoProgress.tsx
-var VideoProgress = () => {
+var VideoProgress = ({
+  seekProgress,
+  setSeekProgress
+}) => {
   const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState(0);
   const [bufferProgress, setBufferProgress] = useState(0);
   const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-  const onValueChange = (time) => {
-    hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(time);
-  };
+  const setProgress = useCallback(() => {
+    var _a, _b;
+    if (!videoEl) {
+      return;
+    }
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
+    const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
+    let bufferProgress2 = 0;
+    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);
+  }, [videoEl]);
+  const timeupdateHandler = useCallback(() => {
+    if (!videoEl || seekProgress) {
+      return;
+    }
+    setProgress();
+  }, [seekProgress, setProgress, videoEl]);
   useEffect(() => {
     if (!videoEl) {
       return;
     }
-    const timeupdateHandler = () => {
-      var _a, _b;
-      if (!videoEl) {
-        return;
-      }
-      const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
-      const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
-      let bufferProgress2 = 0;
-      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);
-    };
     videoEl.addEventListener("timeupdate", timeupdateHandler);
     return function cleanup() {
       videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
     };
-  }, [videoEl]);
+  }, [timeupdateHandler, videoEl]);
   const onProgress = (progress) => {
+    var _a;
     const progress1 = Math.floor(getPercentage(progress[0], 100));
     const videoEl2 = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-    const currentTime = progress1 * ((videoEl2 == null ? void 0 : videoEl2.duration) || 0) / 100;
-    if (onValueChange) {
-      onValueChange(currentTime);
+    if (!videoEl2) {
+      return;
     }
+    const duration = isFinite(videoEl2.duration) ? videoEl2.duration : ((_a = videoEl2.seekable) == null ? void 0 : _a.end(0)) || 0;
+    const currentTime = progress1 * duration / 100;
+    hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(currentTime);
+    setProgress();
   };
   if (!videoEl) {
     return null;
@@ -343,6 +359,8 @@ var VideoProgress = () => {
       value: [videoProgress],
       showTooltip: false,
       onValueChange: onProgress,
+      onPointerDown: () => setSeekProgress(true),
+      onPointerUp: () => setSeekProgress(false),
       thumbStyles: { w: "$6", h: "$6" }
     }
   ), /* @__PURE__ */ React6.createElement(
@@ -499,14 +517,14 @@ var FullScreenButton = ({ isFullScreen, onToggle }) => {
 // src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
 init_define_process_env();
 import React10 from "react";
-import { useMedia as useMedia2 } from "react-use";
+import { useMedia } from "react-use";
 import { VolumeTwoIcon as VolumeTwoIcon2 } from "@100mslive/react-icons";
 function HLSAutoplayBlockedPrompt({
   open,
   unblockAutoPlay
 }) {
   const isLandscape = useIsLandscape();
-  const isMobile = useMedia2(config.media.md);
+  const isMobile = useMedia(config.media.md);
   if ((isMobile || isLandscape) && open) {
     return /* @__PURE__ */ React10.createElement(
       IconButton,
@@ -571,7 +589,7 @@ function HLSCaptionSelector({ isEnabled }) {
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
 init_define_process_env();
 import React12 from "react";
-import { useMedia as useMedia3 } from "react-use";
+import { useMedia as useMedia2 } from "react-use";
 import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
 function HLSQualitySelector({
   open,
@@ -582,7 +600,7 @@ function HLSQualitySelector({
   isAuto,
   containerRef
 }) {
-  const isMobile = useMedia3(config.media.md);
+  const isMobile = useMedia2(config.media.md);
   const isLandscape = useIsLandscape();
   if (layers.length === 0) {
     return null;
@@ -783,7 +801,7 @@ init_define_process_env();
 import React13 from "react";
 import { ChevronDownIcon } from "@100mslive/react-icons";
 var HLSViewTitle = () => {
-  const { title, details } = useRoomLayoutHeader();
+  const { title, details, description } = useRoomLayoutHeader();
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   if (isDetailSidepaneOpen) {
@@ -832,20 +850,36 @@ var HLSViewTitle = () => {
       }
     },
     /* @__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 }), /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more")))
+    /* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ React13.createElement(Flex, null, /* @__PURE__ */ React13.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
   );
 };
 
 // src/Prebuilt/layouts/HLSView.jsx
 var hlsPlayer;
 var toastMap = {};
+var ToggleChat = () => {
+  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 hmsActions = useHMSActions();
+  useEffect3(() => {
+    match({ sidepane, isMobile, showChat }).with({ isMobile: true, showChat: true, sidepane: P.when((value) => !value) }, () => {
+      toggleChat();
+    }).with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
+      hmsActions.setAppData(APP_DATA.sidePane, "");
+    }).otherwise(() => {
+    });
+  }, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
+  return null;
+};
 var HLSView = () => {
   var _a, _b, _c, _d, _e, _f;
   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();
@@ -862,29 +896,20 @@ var HLSView = () => {
   const [isPaused, setIsPaused] = useState4(false);
   const [show, toggle] = useToggle(false);
   const lastHlsUrl = usePrevious(hlsUrl);
-  const togglePollView = usePollViewToggle();
   const vanillaStore = useHMSVanillaStore();
   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 [seekProgress, setSeekProgress] = useState4(false);
   const isFullScreenSupported = screenfull.isEnabled;
-  const isMobile = useMedia4(config.media.md);
+  const isMobile = useMedia3(config.media.md);
   const isLandscape = useIsLandscape();
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
   });
   const [showLoader, setShowLoader] = useState4(false);
-  const isMwebHLSStream = screenType === "hls_live_streaming" && isMobile;
-  useEffect3(() => {
-    if (sidepane === "" && isMwebHLSStream && showChat) {
-      toggleChat();
-    }
-  }, [sidepane, isMwebHLSStream, toggleChat, showChat]);
   useEffect3(() => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
@@ -921,7 +946,7 @@ var HLSView = () => {
       videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
     };
   }, [hlsUrl]);
-  const handleQuality = useCallback(
+  const handleQuality = useCallback2(
     (quality) => {
       var _a2;
       if (hlsPlayer) {
@@ -963,7 +988,13 @@ var HLSView = () => {
             action: /* @__PURE__ */ React14.createElement(
               Button,
               {
-                onClick: () => togglePollView(pollId),
+                onClick: () => {
+                  hmsActions.setAppData(APP_DATA.pollState, {
+                    [POLL_STATE.pollInView]: pollId,
+                    [POLL_STATE.view]: POLL_VIEWS.VOTE
+                  });
+                  hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
+                },
                 variant: "standard",
                 css: {
                   backgroundColor: "$surface_bright",
@@ -1028,7 +1059,7 @@ var HLSView = () => {
         hlsPlayer.reset();
       };
     }
-  }, [hlsUrl, togglePollView, vanillaStore]);
+  }, [hlsUrl, vanillaStore, hmsActions]);
   useEffect3(() => {
     const onHLSStats = (state) => setHlsStatsState(state);
     if (enablHlsStats) {
@@ -1061,19 +1092,21 @@ var HLSView = () => {
       clearTimeout(controlsTimerRef.current);
     }
     controlsTimerRef.current = setTimeout(() => {
-      setControlsVisible(false);
+      if (!seekProgress) {
+        setControlsVisible(false);
+      }
     }, 5e3);
     return () => {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
       }
     };
-  }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
-  const onSeekTo = useCallback((seek) => {
+  }, [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 onDoubleClickHandler = useCallback(
+  const onDoubleClickHandler = useCallback2(
     (event) => {
       var _a2;
       if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
@@ -1092,7 +1125,7 @@ var HLSView = () => {
     },
     [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, onSeekTo]
   );
-  const onClickHandler = useCallback(() => {
+  const onClickHandler = useCallback2(() => {
     if (!(isMobile || isLandscape)) {
       return;
     }
@@ -1101,7 +1134,7 @@ var HLSView = () => {
       clearTimeout(controlsTimerRef.current);
     }
   }, [isLandscape, isMobile]);
-  const onHoverHandler = useCallback(
+  const onHoverHandler = useCallback2(
     (event) => {
       event.preventDefault();
       if (isMobile || isLandscape) {
@@ -1111,17 +1144,33 @@ var HLSView = () => {
         setControlsVisible(true);
         return;
       }
-      if (event.type === "mouseleave") {
+      if (event.type === "mouseleave" && !seekProgress) {
         setControlsVisible(false);
-      } else if (isFullScreen && !controlsVisible && event.type === "mousemove") {
+      } else if (!controlsVisible && event.type === "mousemove") {
         setControlsVisible(true);
         if (controlsTimerRef.current) {
           clearTimeout(controlsTimerRef.current);
         }
       }
     },
-    [controlsVisible, isFullScreen, isLandscape, isMobile, qualityDropDownOpen]
+    [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress]
   );
+  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(
+      Flex,
+      {
+        key: "hls-viewer",
+        id: `hls-viewer-${themeType}`,
+        ref: hlsViewRef,
+        direction: isMobile || isLandscape ? "column" : "row",
+        justify: "center",
+        css: {
+          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"))
+    ));
+  }
   return /* @__PURE__ */ React14.createElement(
     Flex,
     {
@@ -1129,13 +1178,18 @@ var HLSView = () => {
       id: `hls-viewer-${themeType}`,
       ref: hlsViewRef,
       direction: isMobile || isLandscape ? "column" : "row",
+      justify: "center",
       css: {
-        w: sidepane !== "" && isLandscape ? "" : "100%",
-        h: sidepane !== "" && isMobile ? "36%" : "100%",
-        flex: "1 1 0"
+        flex: isLandscape ? "2 1 0" : "1 1 0",
+        "&:fullscreen": {
+          "& video": {
+            height: "unset !important"
+          }
+        }
       }
     },
-    hlsUrl && !streamEnded ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React14.createElement(
+    hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
+    /* @__PURE__ */ React14.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React14.createElement(
       Flex,
       {
         id: "hls-player-container",
@@ -1143,7 +1197,10 @@ var HLSView = () => {
         justify: "center",
         css: {
           size: "100%",
-          margin: "0 auto"
+          margin: "0 auto",
+          "@md": {
+            height: "auto"
+          }
         }
       },
       !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
@@ -1170,12 +1227,13 @@ var HLSView = () => {
             onDoubleClickHandler(e);
           }
         },
-        /* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, !showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React14.createElement(
+        /* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
           Flex,
           {
             align: "center",
             justify: "center",
             css: {
+              position: "absolute",
               bg: "#00000066",
               display: "inline-flex",
               gap: "$2",
@@ -1185,7 +1243,7 @@ var HLSView = () => {
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          /* @__PURE__ */ React14.createElement(
+          !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",
@@ -1195,8 +1253,7 @@ var HLSView = () => {
               }
             },
             /* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 32, height: 32 })
-          ),
-          /* @__PURE__ */ React14.createElement(
+          ), /* @__PURE__ */ React14.createElement(
             Box,
             {
               css: {
@@ -1205,8 +1262,7 @@ var HLSView = () => {
               }
             },
             /* @__PURE__ */ React14.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused, width: 48, height: 48 })
-          ),
-          /* @__PURE__ */ React14.createElement(
+          ), /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Seeker,
             {
               title: "forward",
@@ -1216,7 +1272,7 @@ var HLSView = () => {
               }
             },
             /* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 32, height: 32 })
-          )
+          ))
         ), /* @__PURE__ */ React14.createElement(
           Flex,
           {
@@ -1242,7 +1298,6 @@ var HLSView = () => {
                 p: "$4 $8"
               }
             },
-            /* @__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,
               {
@@ -1256,7 +1311,7 @@ var HLSView = () => {
               }
             ) : null, /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
           )
-        )) : null, /* @__PURE__ */ React14.createElement(
+        )) : null, controlsVisible && /* @__PURE__ */ React14.createElement(
           Flex,
           {
             ref: controlsRef,
@@ -1272,12 +1327,10 @@ var HLSView = () => {
               width: "100%",
               pt: "$8",
               flexShrink: 0,
-              transition: "visibility 0s 0.5s, opacity 0.5s linear",
-              visibility: controlsVisible ? `` : `hidden`,
-              opacity: controlsVisible ? `1` : "0"
+              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, null) : null,
+          ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
           /* @__PURE__ */ React14.createElement(
             HMSVideoPlayer.Controls.Root,
             {
@@ -1350,11 +1403,13 @@ 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 } }, 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"))
+    )),
+    /* @__PURE__ */ React14.createElement(ToggleChat, null),
+    isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)
   );
 };
 var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-TOMPA4E4.js.map
+//# sourceMappingURL=HLSView-LZOTIUWE.js.map