@100mslive/roomkit-react 0.2.8-alpha.3 → 0.2.8-alpha.5

package/dist/{HLSView-PACDZWJN.js → HLSView-CVNJNDUQ.js}

@@ -2,6 +2,7 @@ import {
   APP_DATA,
   Box,
   Button,
+  ChatToggle,
   Dialog,
   DialogContent,
   DialogRow,
@@ -11,6 +12,9 @@ import {
   IconButton,
   IconButton_default,
   Loading,
+  Logo,
+  SIDE_PANE_OPTIONS,
+  Sheet,
   Slider,
   Text,
   ToastManager,
@@ -19,30 +23,36 @@ import {
   __objRest,
   __spreadValues,
   config,
+  getFormattedCount,
   init_define_process_env,
   styled,
+  theme,
+  useIsLandscape,
   usePollViewToggle,
+  useRoomLayoutConferencingScreen,
+  useSidepaneToggle,
   useTheme
-} from "./chunk-2QHBD2VO.js";
+} from "./chunk-25HZFDG5.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
-import React11, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
-import { useFullscreen, useMedia, usePrevious, useToggle } from "react-use";
+import React13, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useFullscreen, useMedia as useMedia2, usePrevious, useToggle } from "react-use";
 import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
 import screenfull from "screenfull";
 import {
+  HLSPlaylistType,
   HMSNotificationTypes,
   selectAppData,
-  selectHLSState,
+  selectHLSState as selectHLSState2,
   selectPeerNameByID,
   selectPollByID,
   useHMSActions,
   useHMSNotifications,
-  useHMSStore,
+  useHMSStore as useHMSStore2,
   useHMSVanillaStore
 } from "@100mslive/react-sdk";
-import { ColoredHandIcon, ExpandIcon, GoLiveIcon, PlayIcon as PlayIcon2, ShrinkIcon } from "@100mslive/react-icons";
+import { ColoredHandIcon, GoLiveIcon, PauseIcon as PauseIcon2, PlayIcon as PlayIcon2 } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/HlsStatsOverlay.jsx
 init_define_process_env();
@@ -125,7 +135,7 @@ var HlsStatsRow = memo(({ label, children }) => {
   ));
 });
 
-// src/Prebuilt/components/HMSVideo/index.js
+// src/Prebuilt/components/HMSVideo/index.ts
 init_define_process_env();
 
 // src/Prebuilt/components/HMSVideo/Controls.jsx
@@ -173,7 +183,8 @@ var HMSVideo = forwardRef((_a, videoRef) => {
           letterSpacing: "0.5px"
         },
         "& video::-webkit-media-text-track-display": {
-          padding: "0 $4"
+          padding: "0 $4",
+          boxShadow: "0px 1px 3px 0px #000000A3"
         },
         "& video::-webkit-media-text-track-container": {
           fontSize: "$space$10 !important"
@@ -187,7 +198,9 @@ var HMSVideo = forwardRef((_a, videoRef) => {
         style: {
           flex: "1 1 0",
           margin: "0 auto",
-          minHeight: "0"
+          minHeight: "0",
+          objectFit: "contain",
+          width: "inherit"
         },
         ref: videoRef,
         playsInline: true
@@ -197,19 +210,41 @@ var HMSVideo = forwardRef((_a, videoRef) => {
   );
 });
 
-// src/Prebuilt/components/HMSVideo/PlayButton.jsx
+// src/Prebuilt/components/HMSVideo/PlayButton.tsx
 init_define_process_env();
-import React3 from "react";
+import React4 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: 20, height: 20 }) : /* @__PURE__ */ React3.createElement(PauseIcon, { width: 20, height: 20 })));
+
+// src/Prebuilt/components/HMSVideo/PlayerContext.tsx
+init_define_process_env();
+import React3, { useContext } from "react";
+var HMSPlayerContext = React3.createContext({
+  hlsPlayer: void 0
+});
+var useHMSPlayerContext = () => {
+  const context = useContext(HMSPlayerContext);
+  return context;
 };
 
-// src/Prebuilt/components/HMSVideo/VideoProgress.jsx
+// src/Prebuilt/components/HMSVideo/PlayButton.tsx
+var PlayButton = ({
+  isPaused,
+  width = 20,
+  height = 20
+}) => {
+  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
+  const onClick = (event) => __async(void 0, null, function* () {
+    event == null ? void 0 : event.stopPropagation();
+    isPaused ? yield hlsPlayer2 == null ? void 0 : hlsPlayer2.play() : hlsPlayer2 == null ? void 0 : hlsPlayer2.pause();
+  });
+  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/VideoProgress.tsx
 init_define_process_env();
-import React4, { useEffect, useRef, useState } from "react";
+import React5, { useEffect, useState } from "react";
 
-// src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js
+// src/Prebuilt/components/HMSVideo/utils.ts
 init_define_process_env();
 function getPercentage(a, b) {
   return a / b * 100;
@@ -229,16 +264,32 @@ 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.jsx
-var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
+// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
+var VideoProgress = () => {
+  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState(0);
   const [bufferProgress, setBufferProgress] = useState(0);
-  const progressRootRef = useRef();
+  const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
+  const onValueChange = (time) => {
+    hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(time);
+  };
   useEffect(() => {
-    const videoEl = hlsPlayer2.getVideoElement();
+    if (!videoEl) {
+      return;
+    }
     const timeupdateHandler = () => {
       var _a;
+      if (!videoEl) {
+        return;
+      }
       const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
       let bufferProgress2 = 0;
       if (videoEl.buffered.length > 0) {
@@ -247,108 +298,105 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
       setVideoProgress(isNaN(videoProgress2) ? 0 : videoProgress2);
       setBufferProgress(isNaN(bufferProgress2) ? 0 : bufferProgress2);
     };
-    if (videoEl) {
-      videoEl.addEventListener("timeupdate", timeupdateHandler);
-    }
+    videoEl.addEventListener("timeupdate", timeupdateHandler);
     return function cleanup() {
-      if (videoEl) {
-        videoEl.removeEventListener("timeupdate", timeupdateHandler);
-      }
+      videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
     };
-  }, [hlsPlayer2]);
-  const onProgressChangeHandler = (e) => {
-    const userClickedX = e.clientX - progressRootRef.current.offsetLeft;
-    const progressBarWidth = progressRootRef.current.offsetWidth;
-    const progress = Math.floor(getPercentage(userClickedX, progressBarWidth));
-    const videoEl = hlsPlayer2.getVideoElement();
-    const currentTime = progress * videoEl.duration / 100;
+  }, [videoEl]);
+  const onProgress = (progress) => {
+    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);
     }
   };
-  return hlsPlayer2.getVideoElement() ? /* @__PURE__ */ React4.createElement(
-    Flex,
+  if (!videoEl) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React5.createElement(
+    Slider,
     {
-      ref: progressRootRef,
-      css: { cursor: "pointer", h: "$2", alignSelf: "stretch" },
-      onClick: onProgressChangeHandler
-    },
-    /* @__PURE__ */ React4.createElement(
-      Box,
-      {
-        id: "video-actual",
-        css: {
-          display: "inline",
-          width: `${videoProgress}%`,
-          background: "$primary_default"
-        }
-      }
-    ),
-    /* @__PURE__ */ React4.createElement(
-      Box,
-      {
-        id: "video-buffer",
-        css: {
-          width: `${bufferProgress - videoProgress}%`,
-          background: "$on_surface_high",
-          opacity: "25%"
-        }
-      }
-    ),
-    /* @__PURE__ */ React4.createElement(
-      Box,
-      {
-        id: "video-rest",
-        css: {
-          width: `${100 - bufferProgress}%`,
-          background: "$on_surface_high",
-          opacity: "10%"
-        }
+      id: "video-actual-rest",
+      css: {
+        cursor: "pointer",
+        h: "$2",
+        zIndex: 1,
+        transition: `all .2s ease .5s`
+      },
+      min: 0,
+      max: 100,
+      step: 1,
+      value: [videoProgress],
+      showTooltip: false,
+      onValueChange: onProgress,
+      thumbStyles: { w: "$6", h: "$6" }
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    Box,
+    {
+      id: "video-buffer",
+      css: {
+        h: "$2",
+        width: `${bufferProgress - videoProgress}%`,
+        background: "$on_surface_high",
+        position: "absolute",
+        left: `${videoProgress}%`,
+        opacity: "25%"
       }
-    )
-  ) : null;
+    }
+  ));
 };
 
-// src/Prebuilt/components/HMSVideo/VideoTime.jsx
+// src/Prebuilt/components/HMSVideo/VideoTime.tsx
 init_define_process_env();
-import React5, { useEffect as useEffect2, useState as useState2 } from "react";
+import React6, { useEffect as useEffect2, useState as useState2 } from "react";
 import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
-var VideoTime = ({ hlsPlayer: hlsPlayer2 }) => {
+var VideoTime = () => {
+  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
   const [videoTime, setVideoTime] = useState2("");
   useEffect2(() => {
-    const timeupdateHandler = (currentTime) => setVideoTime(getDurationFromSeconds2(currentTime));
+    const timeupdateHandler = (currentTime) => {
+      const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
+      if (videoEl) {
+        setVideoTime(getDurationFromSeconds2(videoEl.duration - currentTime));
+      } else {
+        setVideoTime(getDurationFromSeconds2(currentTime));
+      }
+    };
     if (hlsPlayer2) {
       hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     }
     return function cleanup() {
-      if (hlsPlayer2) {
-        hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-      }
+      hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
     };
   }, [hlsPlayer2]);
-  return hlsPlayer2 ? /* @__PURE__ */ React5.createElement(
+  return hlsPlayer2 ? /* @__PURE__ */ React6.createElement(
     Text,
     {
+      variant: "body1",
       css: {
         minWidth: "$16",
         c: "$on_surface_medium",
         display: "flex",
-        justifyContent: "center"
+        justifyContent: "center",
+        fontWeight: "$regular"
       }
     },
+    "-",
     videoTime
   ) : null;
 };
 
-// src/Prebuilt/components/HMSVideo/VolumeControl.jsx
+// src/Prebuilt/components/HMSVideo/VolumeControl.tsx
 init_define_process_env();
-import React6, { useState as useState3 } from "react";
+import React7, { useState as useState3 } from "react";
 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);
+var VolumeControl = () => {
+  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
+  const [volume, setVolume] = useState3((hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) || 0);
   const [showSlider, setShowSlider] = useState3(false);
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     Flex,
     {
       align: "center",
@@ -362,7 +410,7 @@ var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
         setShowSlider(false);
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       VolumeIcon,
       {
         volume,
@@ -377,7 +425,7 @@ var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
         }
       }
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       Slider,
       {
         css: {
@@ -395,7 +443,7 @@ var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
         step: 1,
         value: [volume],
         onValueChange: (volume2) => {
-          hlsPlayer2.setVolume(volume2[0]);
+          hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(volume2[0]);
           setVolume(volume2[0]);
         },
         thumbStyles: { w: "$6", h: "$6" }
@@ -405,12 +453,12 @@ var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
 };
 var VolumeIcon = ({ volume, onClick }) => {
   if (volume === 0) {
-    return /* @__PURE__ */ React6.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
+    return /* @__PURE__ */ React7.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 });
+  return volume < 50 ? /* @__PURE__ */ React7.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React7.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
 };
 
-// src/Prebuilt/components/HMSVideo/index.js
+// src/Prebuilt/components/HMSVideo/index.ts
 var HMSVideoPlayer = {
   Root: HMSVideo,
   PlayButton,
@@ -424,44 +472,38 @@ var HMSVideoPlayer = {
   }
 };
 
-// src/Prebuilt/components/HMSVideo/FullscreenButton.jsx
+// src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
 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(
-    IconButton,
-    {
-      variant: "standard",
-      css: { margin: "0px" },
-      onClick: onToggle,
-      key: "fullscreen_btn",
-      "data-testid": "fullscreen_btn"
-    },
-    /* @__PURE__ */ React7.createElement(Flex, null, icon)
-  ));
+import React8 from "react";
+import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
+var FullScreenButton = ({ isFullScreen, onToggle }) => {
+  return /* @__PURE__ */ React8.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React8.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React8.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React8.createElement(ShrinkIcon, null) : /* @__PURE__ */ React8.createElement(ExpandIcon, null))));
 };
 
-// src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx
+// src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
 init_define_process_env();
-import React8 from "react";
-function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
-  return /* @__PURE__ */ React8.createElement(
+import React9 from "react";
+function HLSAutoplayBlockedPrompt({
+  open,
+  unblockAutoPlay
+}) {
+  return /* @__PURE__ */ React9.createElement(
     Dialog.Root,
     {
       open,
-      onOpenChange: (value) => {
+      onOpenChange: (value) => __async(this, null, function* () {
         if (!value) {
-          unblockAutoPlay();
+          yield unblockAutoPlay();
         }
-      }
+      })
     },
-    /* @__PURE__ */ React8.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React8.createElement(DialogRow, null, /* @__PURE__ */ React8.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React8.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React9.createElement(DialogRow, null, /* @__PURE__ */ React9.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React9.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React9.createElement(
       Button,
       {
         variant: "primary",
-        onClick: () => {
-          unblockAutoPlay();
-        }
+        onClick: () => __async(this, null, function* () {
+          yield unblockAutoPlay();
+        })
       },
       "Play stream"
     )))
@@ -470,18 +512,104 @@ function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
 
 // src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
 init_define_process_env();
-import React9 from "react";
+import React10 from "react";
 import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
-function HLSCaptionSelector({ isEnabled, onClick }) {
-  return /* @__PURE__ */ React9.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React9.createElement(IconButton, { css: { p: "$2" }, onClick: () => onClick() }, isEnabled ? /* @__PURE__ */ React9.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React9.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
+function HLSCaptionSelector({ isEnabled }) {
+  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
+  return /* @__PURE__ */ React10.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React10.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React10.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React10.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
 }
 
-// src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx
+// src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
 init_define_process_env();
-import React10 from "react";
-import { CheckIcon, SettingsIcon } from "@100mslive/react-icons";
-function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
-  return /* @__PURE__ */ React10.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpen(value) }, /* @__PURE__ */ React10.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React10.createElement(
+import React11 from "react";
+import { useMedia } from "react-use";
+import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
+function HLSQualitySelector({
+  open,
+  onOpenChange,
+  layers,
+  onQualityChange,
+  selection,
+  isAuto
+}) {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+  if (isMobile || isLandscape) {
+    return /* @__PURE__ */ React11.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React11.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React11.createElement(
+      Flex,
+      {
+        css: {
+          color: "$on_primary_high",
+          r: "$1",
+          cursor: "pointer",
+          p: "$2"
+        }
+      },
+      /* @__PURE__ */ React11.createElement(SettingsIcon, null)
+    )), layers.length > 0 && /* @__PURE__ */ React11.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React11.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__ */ React11.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React11.createElement(CrossIcon2, null))
+    ), layers.map((layer) => {
+      return /* @__PURE__ */ React11.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__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ React11.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__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
+      );
+    }), /* @__PURE__ */ React11.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__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
+    )));
+  }
+  return /* @__PURE__ */ React11.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ React11.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React11.createElement(
     Flex,
     {
       css: {
@@ -491,7 +619,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
         p: "$2"
       }
     },
-    /* @__PURE__ */ React10.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React10.createElement(Flex, { align: "center" }, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React11.createElement(Flex, { align: "center" }, /* @__PURE__ */ React11.createElement(
       Box,
       {
         css: {
@@ -502,8 +630,8 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
           c: "$on_surface_high"
         }
       },
-      /* @__PURE__ */ React10.createElement(SettingsIcon, null)
-    ), /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React11.createElement(SettingsIcon, null)
+    ), /* @__PURE__ */ React11.createElement(
       Text,
       {
         variant: {
@@ -513,7 +641,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
         },
         css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
       },
-      isAuto && /* @__PURE__ */ React10.createElement(React10.Fragment, null, "Auto", /* @__PURE__ */ React10.createElement(
+      isAuto && /* @__PURE__ */ React11.createElement(React11.Fragment, null, "Auto", /* @__PURE__ */ React11.createElement(
         Box,
         {
           css: {
@@ -525,10 +653,10 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
           }
         }
       )),
-      selection && Math.min(selection.width, selection.height),
+      selection && Math.min(selection.width || 0, selection.height || 0),
       "p"
     )))
-  )), layers.length > 0 && /* @__PURE__ */ React10.createElement(
+  )), layers.length > 0 && /* @__PURE__ */ React11.createElement(
     Dropdown.Content,
     {
       sideOffset: 5,
@@ -544,7 +672,7 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
       }
     },
     layers.map((layer) => {
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.createElement(
         Dropdown.Item,
         {
           onClick: () => onQualityChange(layer),
@@ -559,12 +687,12 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
             gap: "$2"
           }
         },
-        /* @__PURE__ */ React10.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ React10.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__ */ React10.createElement(CheckIcon, { width: "16px", height: "16px" })
+        /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ React11.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__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
       );
     }),
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       Dropdown.Item,
       {
         onClick: () => onQualityChange({ height: "auto" }),
@@ -579,52 +707,131 @@ function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection,
           gap: "$2"
         }
       },
-      /* @__PURE__ */ React10.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ React10.createElement(CheckIcon, { width: "16px", height: "16px" })
+      /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
     )
   ));
 }
-var getQualityText = (layer) => `${Math.min(layer.height, layer.width)}p `;
+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 React12, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
+import { selectHLSState, selectPeerCount, useHMSStore } from "@100mslive/react-sdk";
+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]);
+  return /* @__PURE__ */ React12.createElement(
+    Flex,
+    {
+      gap: "4",
+      align: "center",
+      css: {
+        position: "relative",
+        h: "fit-content",
+        w: "100%",
+        borderBottom: "1px solid $border_bright",
+        p: "$8",
+        backgroundColor: "$surface_dim"
+      }
+    },
+    /* @__PURE__ */ React12.createElement(Logo, null),
+    /* @__PURE__ */ React12.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React12.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ React12.createElement(Flex, { gap: "1" }, /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ React12.createElement(
+      Flex,
+      {
+        direction: "column",
+        css: {
+          w: "$3",
+          h: "$3",
+          backgroundColor: "$on_surface_medium",
+          borderRadius: "50%",
+          alignSelf: "center"
+        }
+      }
+    ), /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
+  );
+};
+
 // src/Prebuilt/layouts/HLSView.jsx
 var hlsPlayer;
 var toastMap = {};
 var HLSView = () => {
-  var _a;
+  var _a, _b, _c;
   const videoRef = useRef2(null);
   const hlsViewRef = useRef2(null);
-  const hlsState = useHMSStore(selectHLSState);
-  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const hlsState = useHMSStore2(selectHLSState2);
+  const enablHlsStats = useHMSStore2(selectAppData(APP_DATA.hlsStats));
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
   const hmsActions = useHMSActions();
-  const { themeType, theme } = useTheme();
-  const [streamEnded, setStreamEnded] = useState4(false);
-  let [hlsStatsState, setHlsStatsState] = useState4(null);
+  const { themeType } = useTheme();
+  const [streamEnded, setStreamEnded] = useState5(false);
+  let [hlsStatsState, setHlsStatsState] = useState5(null);
   const hlsUrl = (_a = hlsState.variants[0]) == null ? void 0 : _a.url;
-  const [availableLayers, setAvailableLayers] = useState4([]);
-  const [isVideoLive, setIsVideoLive] = useState4(true);
-  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState4(true);
-  const [isCaptionEnabled, setIsCaptionEnabled] = useState4(true);
-  const [hasCaptions, setHasCaptions] = useState4(false);
-  const [currentSelectedQuality, setCurrentSelectedQuality] = useState4(null);
-  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState4(false);
-  const [isPaused, setIsPaused] = useState4(false);
-  const isFullScreenSupported = screenfull.isEnabled;
+  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 [isPaused, setIsPaused] = useState5(false);
   const [show, toggle] = useToggle(false);
-  const [controlsVisible, setControlsVisible] = useState4(true);
-  const controlsRef = useRef2();
-  const controlsTimerRef = useRef2();
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
   const lastHlsUrl = usePrevious(hlsUrl);
   const togglePollView = usePollViewToggle();
   const vanillaStore = useHMSVanillaStore();
-  const isMobile = useMedia(config.media.md);
+  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 toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const showChat = !!(elements == null ? void 0 : elements.chat);
+  const isFullScreenSupported = screenfull.isEnabled;
+  const isMobile = useMedia2(config.media.md);
+  const isLandscape = useIsLandscape();
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
   });
-  const [showLoader, setShowLoader] = useState4(false);
-  useEffect3(() => {
+  const [showLoader, setShowLoader] = useState5(false);
+  const isMwebHLSStream = screenType === "hls_live_streaming" && isMobile;
+  useEffect4(() => {
+    if (sidepane === "" && isMwebHLSStream && showChat) {
+      toggleChat();
+    }
+  }, [sidepane, isMwebHLSStream, toggleChat, showChat]);
+  useEffect4(() => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
     const hideLoader = () => setShowLoader(false);
@@ -635,12 +842,12 @@ var HLSView = () => {
       videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (streamEnded && lastHlsUrl !== hlsUrl) {
       setStreamEnded(false);
     }
   }, [hlsUrl, streamEnded, lastHlsUrl]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!notification)
       return;
     const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
@@ -649,7 +856,7 @@ var HLSView = () => {
       delete toastMap[notification.data.id];
     }
   }, [notification]);
-  useEffect3(() => {
+  useEffect4(() => {
     const videoElem = videoRef.current;
     const setStreamEndedCallback = () => {
       setStreamEnded(true);
@@ -660,7 +867,18 @@ var HLSView = () => {
       videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
     };
   }, [hlsUrl]);
-  useEffect3(() => {
+  const handleQuality = useCallback2(
+    (quality) => {
+      var _a2;
+      if (hlsPlayer) {
+        setIsUserSelectedAuto(((_a2 = quality.height) == null ? void 0 : _a2.toString().toLowerCase()) === "auto");
+        hlsPlayer == null ? void 0 : hlsPlayer.setLayer(quality);
+      }
+    },
+    [availableLayers]
+    //eslint-disable-line
+  );
+  useEffect4(() => {
     let videoEl = videoRef.current;
     const manifestLoadedHandler = ({ layers }) => {
       setAvailableLayers(layers);
@@ -670,7 +888,7 @@ var HLSView = () => {
       setCurrentSelectedQuality(layer);
     };
     const metadataLoadedHandler = (_a2) => {
-      var _b = _a2, { payload } = _b, rest = __objRest(_b, ["payload"]);
+      var _b2 = _a2, { payload } = _b2, rest = __objRest(_b2, ["payload"]);
       var _a3;
       const parsePayload = (str) => {
         try {
@@ -687,7 +905,7 @@ var HLSView = () => {
         const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || "Participant";
         const toastID = ToastManager.addToast({
           title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-          action: /* @__PURE__ */ React11.createElement(
+          action: /* @__PURE__ */ React13.createElement(
             Button,
             {
               onClick: () => togglePollView(pollId),
@@ -752,11 +970,10 @@ var HLSView = () => {
         hlsPlayer.off(HMSHLSPlayerEvents2.MANIFEST_LOADED, manifestLoadedHandler);
         hlsPlayer.off(HMSHLSPlayerEvents2.LAYER_UPDATED, layerUpdatedHandler);
         hlsPlayer.reset();
-        hlsPlayer = null;
       };
     }
-  }, [hlsUrl]);
-  useEffect3(() => {
+  }, [hlsUrl, togglePollView, vanillaStore]);
+  useEffect4(() => {
     const onHLSStats = (state) => setHlsStatsState(state);
     if (enablHlsStats) {
       hlsPlayer == null ? void 0 : hlsPlayer.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
@@ -775,20 +992,10 @@ var HLSView = () => {
       console.error("Tried to unblock Autoplay failed with", error.message);
     }
   });
-  const handleQuality = useCallback(
-    (quality) => {
-      if (hlsPlayer) {
-        setIsUserSelectedAuto(quality.height.toString().toLowerCase() === "auto");
-        hlsPlayer.setLayer(quality);
-      }
-    },
-    [availableLayers]
-    //eslint-disable-line
-  );
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
       if (controlsTimerRef.current) {
         clearTimeout(controlsTimerRef.current);
@@ -806,7 +1013,27 @@ var HLSView = () => {
       }
     };
   }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
-  const onHoverHandler = useCallback(
+  const onTouchHandler = useCallback2(
+    (event) => {
+      event.preventDefault();
+      if (event.type === "ontouchstart" && controlsVisible) {
+        setControlsVisible(false);
+        return;
+      }
+      if (event.type === "ontouchstart" || qualityDropDownOpen) {
+        setControlsVisible(true);
+        return;
+      }
+      if (isFullScreen && !controlsVisible && event.type === "touchmove") {
+        setControlsVisible(true);
+        if (controlsTimerRef.current) {
+          clearTimeout(controlsTimerRef.current);
+        }
+      }
+    },
+    [controlsVisible, isFullScreen, qualityDropDownOpen]
+  );
+  const onHoverHandler = useCallback2(
     (event) => {
       if (event.type === "mouseenter" || qualityDropDownOpen) {
         setControlsVisible(true);
@@ -823,31 +1050,31 @@ var HLSView = () => {
     },
     [controlsVisible, isFullScreen, qualityDropDownOpen]
   );
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Flex,
     {
       key: "hls-viewer",
       id: `hls-viewer-${themeType}`,
       ref: hlsViewRef,
+      direction: isMobile || isLandscape ? "column" : "row",
       css: {
-        size: "100%"
+        w: sidepane !== "" && isLandscape ? "55%" : "100%",
+        h: sidepane !== "" && isMobile ? "36%" : "100%"
       }
     },
-    (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats ? /* @__PURE__ */ React11.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null,
-    hlsUrl && !streamEnded ? /* @__PURE__ */ React11.createElement(
+    hlsUrl && !streamEnded ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React13.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React13.createElement(
       Flex,
       {
         id: "hls-player-container",
         align: "center",
         justify: "center",
         css: {
-          width: "100%",
-          margin: "0 auto",
-          height: "100%"
+          size: "100%",
+          margin: "0 auto"
         }
       },
-      /* @__PURE__ */ React11.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-      showLoader && /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React13.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+      showLoader && /* @__PURE__ */ React13.createElement(
         Flex,
         {
           align: "center",
@@ -856,17 +1083,19 @@ var HLSView = () => {
             position: "absolute"
           }
         },
-        /* @__PURE__ */ React11.createElement(Loading, { width: 72, height: 72 })
+        /* @__PURE__ */ React13.createElement(Loading, { width: 72, height: 72 })
       ),
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React13.createElement(
         HMSVideoPlayer.Root,
         {
           ref: videoRef,
           onMouseEnter: onHoverHandler,
           onMouseMove: onHoverHandler,
-          onMouseLeave: onHoverHandler
+          onMouseLeave: onHoverHandler,
+          onTouchStart: onTouchHandler,
+          onTouchMove: onTouchHandler
         },
-        isMobile && isPaused && /* @__PURE__ */ React11.createElement(
+        /* @__PURE__ */ React13.createElement(React13.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, !showLoader && /* @__PURE__ */ React13.createElement(
           Box,
           {
             css: {
@@ -874,30 +1103,83 @@ var HLSView = () => {
               top: "40%",
               left: "50%",
               transform: "translateY(-40%) translateX(-50%)",
-              padding: "$8 14px $8 18px",
+              padding: "$4",
               display: "inline-flex",
-              r: "50%",
+              r: "$round",
               gap: "$1",
-              bg: "$primary_default",
-              zIndex: 21
+              bg: "rgba(0, 0, 0, 0.6)",
+              zIndex: 1,
+              visibility: controlsVisible ? `` : `hidden`,
+              opacity: controlsVisible ? `1` : "0"
+            }
+          },
+          isPaused ? /* @__PURE__ */ React13.createElement(
+            IconButton,
+            {
+              onClick: () => __async(void 0, null, function* () {
+                yield hlsPlayer == null ? void 0 : hlsPlayer.play();
+              }),
+              "data-testid": "play_btn"
+            },
+            /* @__PURE__ */ React13.createElement(PlayIcon2, { width: "48px", height: "48px" })
+          ) : /* @__PURE__ */ React13.createElement(
+            IconButton,
+            {
+              onClick: () => __async(void 0, null, function* () {
+                yield hlsPlayer == null ? void 0 : hlsPlayer.pause();
+              }),
+              "data-testid": "pause_btn"
+            },
+            /* @__PURE__ */ React13.createElement(PauseIcon2, { width: "48px", height: "48px" })
+          )
+        ), /* @__PURE__ */ React13.createElement(
+          Flex,
+          {
+            ref: controlsRef,
+            direction: "column",
+            justify: "start",
+            align: "start",
+            css: {
+              position: "absolute",
+              top: "0",
+              left: "0",
+              width: "100%",
+              flexShrink: 0,
+              visibility: controlsVisible ? `` : `hidden`,
+              opacity: controlsVisible ? `1` : "0"
             }
           },
-          /* @__PURE__ */ React11.createElement(IconButton, { onClick: () => __async(void 0, null, function* () {
-            return yield hlsPlayer == null ? void 0 : hlsPlayer.play();
-          }), "data-testid": "play_btn" }, /* @__PURE__ */ React11.createElement(PlayIcon2, { width: "60px", height: "60px" }))
-        ),
-        /* @__PURE__ */ React11.createElement(
+          /* @__PURE__ */ React13.createElement(
+            HMSVideoPlayer.Controls.Root,
+            {
+              css: {
+                p: "$4 $8"
+              }
+            },
+            /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React13.createElement(ChatToggle, null), hasCaptions && /* @__PURE__ */ React13.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 ? /* @__PURE__ */ React13.createElement(
+              HLSQualitySelector,
+              {
+                layers: availableLayers,
+                onOpenChange: setQualityDropDownOpen,
+                open: qualityDropDownOpen,
+                selection: currentSelectedQuality,
+                onQualityChange: handleQuality,
+                isAuto: isUserSelectedAuto
+              }
+            ) : null)
+          )
+        )) : null, /* @__PURE__ */ React13.createElement(
           Flex,
           {
             ref: controlsRef,
             direction: "column",
-            justify: "flex-end",
-            align: "flex-start",
+            justify: "end",
+            align: "start",
             css: {
               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%);`,
+              background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
               width: "100%",
               pt: "$8",
               flexShrink: 0,
@@ -906,14 +1188,15 @@ var HLSView = () => {
               opacity: controlsVisible ? `1` : "0"
             }
           },
-          !isMobile && /* @__PURE__ */ React11.createElement(
+          !(isMobile || isLandscape) && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Progress, null),
+          /* @__PURE__ */ React13.createElement(
             HMSVideoPlayer.Controls.Root,
             {
               css: {
                 p: "$4 $8"
               }
             },
-            /* @__PURE__ */ React11.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React11.createElement(
+            /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
               HMSVideoPlayer.PlayButton,
               {
                 onClick: () => __async(void 0, null, function* () {
@@ -921,19 +1204,18 @@ var HLSView = () => {
                 }),
                 isPaused
               }
-            ), /* @__PURE__ */ React11.createElement(HMSVideoPlayer.Duration, { hlsPlayer }), /* @__PURE__ */ React11.createElement(HMSVideoPlayer.Volume, { hlsPlayer }), /* @__PURE__ */ React11.createElement(
+            ), !isVideoLive ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React13.createElement(
               IconButton,
               {
-                variant: "standard",
                 css: { px: "$2" },
                 onClick: () => __async(void 0, null, function* () {
-                  yield hlsPlayer.seekToLivePosition();
+                  yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
                   setIsVideoLive(true);
                 }),
                 key: "jump-to-live_btn",
                 "data-testid": "jump-to-live_btn"
               },
-              /* @__PURE__ */ React11.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ React11.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React11.createElement(
+              /* @__PURE__ */ React13.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React13.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React13.createElement(
                 Box,
                 {
                   css: {
@@ -943,45 +1225,38 @@ var HLSView = () => {
                     r: "$1"
                   }
                 }
-              ), /* @__PURE__ */ React11.createElement(
+              ), /* @__PURE__ */ React13.createElement(
                 Text,
                 {
-                  variant: {
-                    "@sm": "xs"
-                  },
+                  variant: "$body1",
                   css: {
-                    c: isVideoLive ? "$on_surface_high" : "$on_surface_medium"
+                    c: isVideoLive ? "$on_surface_high" : "$on_surface_medium",
+                    fontWeight: "$semiBold"
                   }
                 },
                 isVideoLive ? "LIVE" : "GO LIVE"
               )))
-            )),
-            /* @__PURE__ */ React11.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && /* @__PURE__ */ React11.createElement(HLSCaptionSelector, { onClick: () => hlsPlayer == null ? void 0 : hlsPlayer.toggleCaption(), isEnabled: isCaptionEnabled }), availableLayers.length > 0 ? /* @__PURE__ */ React11.createElement(
+            ), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Duration, null) : null),
+            /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React13.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React13.createElement(
               HLSQualitySelector,
               {
                 layers: availableLayers,
-                onOpen: setQualityDropDownOpen,
+                onOpenChange: setQualityDropDownOpen,
                 open: qualityDropDownOpen,
                 selection: currentSelectedQuality,
                 onQualityChange: handleQuality,
                 isAuto: isUserSelectedAuto
               }
-            ) : null, isFullScreenSupported ? /* @__PURE__ */ React11.createElement(
-              FullScreenButton,
-              {
-                isFullScreen,
-                onToggle: toggle,
-                icon: isFullScreen ? /* @__PURE__ */ React11.createElement(ShrinkIcon, null) : /* @__PURE__ */ React11.createElement(ExpandIcon, null)
-              }
-            ) : null)
-          )
-        )
+            ) : null, isFullScreenSupported ? /* @__PURE__ */ React13.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
+          ),
+          (isMobile || isLandscape) && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Progress, null) : null
+        ))
       )
-    ) : /* @__PURE__ */ React11.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React11.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React11.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React11.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React11.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React11.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__ */ React13.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React13.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React13.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React13.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React13.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React13.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React13.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-PACDZWJN.js.map
+//# sourceMappingURL=HLSView-CVNJNDUQ.js.map