@100mslive/roomkit-react 0.5.4-alpha.0 → 0.5.4-alpha.1

package/dist/HLSView-KDT33XIC.js

@@ -1,1642 +0,0 @@
-import {
-  APP_DATA,
-  Box,
-  Button,
-  ChatToggle,
-  Dialog,
-  DialogContent,
-  DialogRow,
-  Dropdown,
-  EMOJI_REACTION_TYPE,
-  Flex,
-  IconButton,
-  IconButton_default,
-  LeaveRoom,
-  Loading,
-  Logo,
-  POLL_STATE,
-  POLL_VIEWS,
-  RoomDetailsRow,
-  SIDE_PANE_OPTIONS,
-  Sheet,
-  Slider,
-  Text,
-  ToastManager,
-  Tooltip,
-  WaitingView,
-  config,
-  styled,
-  theme,
-  useIsLandscape,
-  useIsSidepaneTypeOpen,
-  useKeyboardHandler,
-  useRoomLayoutConferencingScreen,
-  useRoomLayoutHeader,
-  useSidepaneToggle,
-  useTheme
-} from "./chunk-NBFKVN6C.js";
-import {
-  __async,
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  init_define_process_env
-} from "./chunk-WS5Q67XX.js";
-
-// src/Prebuilt/layouts/HLSView.jsx
-init_define_process_env();
-import React15, { useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState5 } from "react";
-import { useFullscreen, useMedia as useMedia4, usePrevious, useToggle } from "react-use";
-import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
-import screenfull from "screenfull";
-import { match, P } from "ts-pattern";
-import {
-  HLSPlaylistType,
-  HMSNotificationTypes,
-  selectAppData,
-  selectHLSState,
-  selectPeerNameByID,
-  selectPollByID,
-  useHMSActions,
-  useHMSNotifications,
-  useHMSStore,
-  useHMSVanillaStore
-} from "@100mslive/react-sdk";
-import { ColoredHandIcon, GoLiveIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/HlsStatsOverlay.jsx
-init_define_process_env();
-import React, { memo } from "react";
-import { CrossIcon } from "@100mslive/react-icons";
-function HlsStatsOverlay({ hlsStatsState, onClose }) {
-  var _a, _b, _c;
-  return /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      css: {
-        position: "absolute",
-        width: "$80",
-        marginLeft: "$8",
-        padding: "$8 $8 $10",
-        zIndex: 10,
-        backgroundColor: "$surface_brighter",
-        borderRadius: "$1"
-      },
-      direction: "column"
-    },
-    /* @__PURE__ */ React.createElement(IconButton_default, { css: { position: "absolute", top: "$2", right: "$2" }, onClick: onClose }, /* @__PURE__ */ React.createElement(CrossIcon, null)),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Video size" }, ` ${(_a = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _a.width}x${(_b = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _b.height}`),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Buffer duration" }, (_c = hlsStatsState == null ? void 0 : hlsStatsState.bufferedDuration) == null ? void 0 : _c.toFixed(2), " "),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Connection speed" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bandwidthEstimate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Bitrate" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bitrate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
-    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
-  );
-}
-function getDurationFromSeconds(timeInSeconds) {
-  let time = Math.floor(timeInSeconds);
-  const hours = Math.floor(time / 3600);
-  time = time - hours * 3600;
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time - minutes * 60);
-  const prefixedMinutes = `${minutes < 10 ? "0" + minutes : minutes}`;
-  const prefixedSeconds = `${seconds < 10 ? "0" + seconds : seconds}`;
-  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;
-  if (hours) {
-    const prefixedHours = `${hours < 10 ? "0" + hours : hours}`;
-    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;
-  }
-  return videoTimeStr;
-}
-var HlsStatsRow = memo(({ label, children }) => {
-  return /* @__PURE__ */ React.createElement(Flex, { gap: 4, justify: "center", css: { width: "100%" } }, /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      css: {
-        width: "50%",
-        "@md": { fontSize: "$md" },
-        "@sm": { fontSize: "$sm" }
-        // textAlign: "right",
-      }
-    },
-    label
-  ), /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      css: {
-        "@md": { fontSize: "$md" },
-        "@sm": { fontSize: "$sm" },
-        width: "50%",
-        overflowWrap: "break-word"
-        // textAlign: "left",
-      }
-    },
-    children
-  ));
-});
-
-// src/Prebuilt/components/HMSVideo/index.ts
-init_define_process_env();
-
-// src/Prebuilt/components/HMSVideo/Controls.jsx
-init_define_process_env();
-var VideoControls = styled(Flex, {
-  justifyContent: "center",
-  alignItems: "center",
-  alignSelf: "stretch",
-  width: "100%",
-  gap: "$2"
-});
-var LeftControls = styled(Flex, {
-  justifyContent: "flex-start",
-  alignItems: "center",
-  width: "100%",
-  gap: "$4"
-});
-var RightControls = styled(Flex, {
-  justifyContent: "flex-end",
-  alignItems: "center",
-  width: "100%",
-  gap: "$4"
-});
-
-// src/Prebuilt/components/HMSVideo/HMSVideo.jsx
-init_define_process_env();
-import React2, { forwardRef, useEffect, useState } from "react";
-var HMSVideo = forwardRef((_a, videoRef) => {
-  var _b = _a, { children, isFullScreen } = _b, props = __objRest(_b, ["children", "isFullScreen"]);
-  const [width, setWidth] = useState("auto");
-  useEffect(() => {
-    const updatingVideoWidth = () => {
-      const videoEl2 = videoRef.current;
-      if (!videoEl2) {
-        return;
-      }
-      if (videoEl2.videoWidth > videoEl2.videoHeight && width !== "100%") {
-        setWidth("100%");
-      }
-    };
-    const videoEl = videoRef.current;
-    if (!videoEl) {
-      return;
-    }
-    videoEl.addEventListener("loadedmetadata", updatingVideoWidth);
-    return () => {
-      videoEl.removeEventListener("loadedmetadata", updatingVideoWidth);
-    };
-  }, [videoRef, width]);
-  return /* @__PURE__ */ React2.createElement(
-    Flex,
-    __spreadValues({
-      "data-testid": "hms-video",
-      css: {
-        size: "100%",
-        position: "relative",
-        justifyContent: "center",
-        transition: "all 0.3s ease-in-out",
-        "@md": {
-          "& video": {
-            height: isFullScreen ? "" : "$60 !important"
-          }
-        },
-        "& video::cue": {
-          // default for on-surface-high
-          color: "#EFF0FA",
-          whiteSpace: "pre-line",
-          fontSize: "$sm",
-          fontStyle: "normal",
-          fontWeight: "$regular",
-          lineHeight: "$sm",
-          letterSpacing: "0.25px"
-        },
-        "& video::-webkit-media-text-track-display": {
-          padding: "0 $4",
-          boxShadow: "0px 1px 3px 0px #000000A3"
-        },
-        "& video::-webkit-media-text-track-container": {
-          fontSize: "$space$10 !important"
-        }
-      },
-      direction: "column"
-    }, props),
-    /* @__PURE__ */ React2.createElement(
-      "video",
-      {
-        style: {
-          margin: "0 auto",
-          objectFit: "contain",
-          width,
-          height: "100%",
-          maxWidth: "100%"
-        },
-        ref: videoRef,
-        playsInline: true,
-        disablePictureInPicture: true
-      }
-    ),
-    children
-  );
-});
-
-// src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
-init_define_process_env();
-import React6 from "react";
-import { useMedia } from "react-use";
-import { BackwardArrowIcon, ForwardArrowIcon } from "@100mslive/react-icons";
-
-// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
-init_define_process_env();
-import React4 from "react";
-import { PauseIcon, PlayIcon } from "@100mslive/react-icons";
-
-// 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/PlayPauseButton.tsx
-var PlayPauseButton = ({
-  isPaused,
-  width = 20,
-  height = 20
-}) => {
-  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const onClick = (event) => __async(null, 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/SeekControl.tsx
-init_define_process_env();
-import React5 from "react";
-var SeekControl = ({
-  title,
-  onClick,
-  children,
-  css
-}) => {
-  return /* @__PURE__ */ React5.createElement(Tooltip, { title, side: "top" }, /* @__PURE__ */ React5.createElement(IconButton, { onClick, "data-testid": "backward_forward_arrow_btn", css }, children));
-};
-
-// src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
-var PlayPauseSeekControls = ({
-  isPaused,
-  onSeekTo
-}) => {
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
-    SeekControl,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onSeekTo(-10);
-      },
-      title: "backward"
-    },
-    /* @__PURE__ */ React6.createElement(BackwardArrowIcon, { width: 20, height: 20 })
-  ), /* @__PURE__ */ React6.createElement(PlayPauseButton, { isPaused }), /* @__PURE__ */ React6.createElement(
-    SeekControl,
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onSeekTo(10);
-      },
-      title: "forward"
-    },
-    /* @__PURE__ */ React6.createElement(ForwardArrowIcon, { width: 20, height: 20 })
-  ));
-};
-var PlayPauseSeekOverlayControls = ({
-  isPaused,
-  showControls,
-  hoverControlsVisible
-}) => {
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useIsLandscape();
-  if (!isMobile && !isLandscape) {
-    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
-      Flex,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round",
-          size: "$24",
-          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekBackward ? `1` : "0"
-        },
-        direction: "column",
-        align: "center"
-      },
-      /* @__PURE__ */ React6.createElement(SeekControl, { title: "backward" }, /* @__PURE__ */ React6.createElement(BackwardArrowIcon, { width: 52, height: 52 })),
-      /* @__PURE__ */ React6.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
-    ), /* @__PURE__ */ React6.createElement(
-      Box,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round",
-          visibility: hoverControlsVisible.pausePlay ? `` : `hidden`,
-          opacity: hoverControlsVisible.pausePlay ? `1` : "0"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
-    ), /* @__PURE__ */ React6.createElement(
-      Flex,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round",
-          size: "$24",
-          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekForward ? `1` : "0"
-        },
-        direction: "column",
-        align: "center"
-      },
-      /* @__PURE__ */ React6.createElement(SeekControl, { title: "forward" }, /* @__PURE__ */ React6.createElement(ForwardArrowIcon, { width: 52, height: 52 })),
-      /* @__PURE__ */ React6.createElement(Text, { variant: "body2", css: { fontWeight: "$regular" } }, "10 secs")
-    ));
-  }
-  return /* @__PURE__ */ React6.createElement(
-    Flex,
-    {
-      align: "center",
-      justify: "center",
-      css: {
-        position: "absolute",
-        bg: "#00000066",
-        display: "inline-flex",
-        gap: "$2",
-        zIndex: 1,
-        size: "100%",
-        visibility: showControls ? `` : `hidden`,
-        opacity: showControls ? `1` : "0"
-      }
-    },
-    /* @__PURE__ */ React6.createElement(
-      SeekControl,
-      {
-        title: "backward",
-        css: {
-          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekBackward ? `1` : "0"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(BackwardArrowIcon, { width: 32, height: 32 })
-    ),
-    /* @__PURE__ */ React6.createElement(
-      Box,
-      {
-        css: {
-          bg: "rgba(0, 0, 0, 0.6)",
-          r: "$round"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(PlayPauseButton, { isPaused, width: 48, height: 48 })
-    ),
-    /* @__PURE__ */ React6.createElement(
-      SeekControl,
-      {
-        title: "forward",
-        css: {
-          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
-          opacity: hoverControlsVisible.seekForward ? `1` : "0"
-        }
-      },
-      /* @__PURE__ */ React6.createElement(ForwardArrowIcon, { width: 32, height: 32 })
-    )
-  );
-};
-
-// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
-init_define_process_env();
-import React7, { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
-
-// src/Prebuilt/components/HMSVideo/utils.ts
-init_define_process_env();
-function getPercentage(a, b) {
-  return a / b * 100;
-}
-function getDurationFromSeconds2(timeInSeconds) {
-  let time = Math.floor(timeInSeconds);
-  const hours = Math.floor(time / 3600);
-  time = time - hours * 3600;
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time - minutes * 60);
-  const prefixedMinutes = `${minutes < 10 ? `0${minutes}` : minutes}`;
-  const prefixedSeconds = `${seconds < 10 ? `0${seconds}` : seconds}`;
-  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;
-  if (hours) {
-    const prefixedHours = `${hours < 10 ? `0${hours}` : hours}`;
-    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;
-  }
-  return videoTimeStr;
-}
-function getDuration(videoEl) {
-  if (isFinite(videoEl.duration)) {
-    return videoEl.duration;
-  }
-  if (videoEl.seekable.length > 0) {
-    return videoEl.seekable.end(0);
-  }
-  return 0;
-}
-
-// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
-var VideoProgress = ({
-  seekProgress,
-  setSeekProgress
-}) => {
-  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const [videoProgress, setVideoProgress] = useState2(0);
-  const [bufferProgress, setBufferProgress] = useState2(0);
-  const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-  const setProgress = useCallback(() => {
-    var _a;
-    if (!videoEl) {
-      return;
-    }
-    const duration = getDuration(videoEl);
-    const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
-    let bufferProgress2 = 0;
-    if (videoEl.buffered.length > 0) {
-      bufferProgress2 = Math.floor(getPercentage((_a = videoEl.buffered) == null ? void 0 : _a.end(0), duration));
-    }
-    if (!isNaN(videoProgress2)) {
-      setVideoProgress(videoProgress2);
-    }
-    if (!isNaN(bufferProgress2)) {
-      setBufferProgress(bufferProgress2);
-    }
-  }, [videoEl]);
-  const timeupdateHandler = useCallback(() => {
-    if (!videoEl || seekProgress) {
-      return;
-    }
-    setProgress();
-  }, [seekProgress, setProgress, videoEl]);
-  useEffect2(() => {
-    if (!videoEl) {
-      return;
-    }
-    setProgress();
-    videoEl.addEventListener("timeupdate", timeupdateHandler);
-    return function cleanup() {
-      videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
-    };
-  }, [setProgress, timeupdateHandler, videoEl]);
-  const onProgress = (progress) => {
-    var _a;
-    const progress1 = Math.floor(getPercentage(progress[0], 100));
-    const videoEl2 = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-    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;
-  }
-  return /* @__PURE__ */ React7.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React7.createElement(
-    Slider,
-    {
-      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,
-      onPointerDown: () => setSeekProgress(true),
-      onPointerUp: () => setSeekProgress(false),
-      thumbStyles: { w: "$6", h: "$6" }
-    }
-  ), /* @__PURE__ */ React7.createElement(
-    Box,
-    {
-      id: "video-buffer",
-      css: {
-        h: "$2",
-        width: `${bufferProgress - videoProgress}%`,
-        background: "$on_surface_high",
-        position: "absolute",
-        left: `${videoProgress}%`,
-        opacity: "25%"
-      }
-    }
-  ));
-};
-
-// src/Prebuilt/components/HMSVideo/VideoTime.tsx
-init_define_process_env();
-import React8, { useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
-import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
-var VideoTime = () => {
-  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const [videoTime, setVideoTime] = useState3(getDurationFromSeconds2(0));
-  const updateTime = useCallback2(
-    (currentTime) => {
-      const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-      if (videoEl) {
-        const duration = getDuration(videoEl);
-        setVideoTime(getDurationFromSeconds2(duration - currentTime));
-      } else {
-        setVideoTime(getDurationFromSeconds2(currentTime));
-      }
-    },
-    [hlsPlayer2]
-  );
-  useEffect3(() => {
-    const timeupdateHandler = (currentTime) => {
-      updateTime(currentTime);
-    };
-    if (hlsPlayer2) {
-      hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-      const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
-      updateTime(videoEl.currentTime);
-    }
-    return function cleanup() {
-      hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-    };
-  }, [hlsPlayer2, updateTime]);
-  return hlsPlayer2 ? /* @__PURE__ */ React8.createElement(
-    Text,
-    {
-      variant: "body1",
-      css: {
-        minWidth: "$16",
-        c: "$on_surface_medium",
-        display: "flex",
-        justifyContent: "center",
-        fontWeight: "$regular"
-      }
-    },
-    "-",
-    videoTime
-  ) : null;
-};
-
-// src/Prebuilt/components/HMSVideo/VolumeControl.tsx
-init_define_process_env();
-import React9, { useState as useState4 } from "react";
-import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from "@100mslive/react-icons";
-var VolumeControl = () => {
-  var _a;
-  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  const [volume, setVolume] = useState4((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
-  const [showSlider, setShowSlider] = useState4(false);
-  return /* @__PURE__ */ React9.createElement(
-    Flex,
-    {
-      align: "center",
-      css: { color: "$on_surface_high" },
-      onMouseOver: (event) => {
-        event.stopPropagation();
-        setShowSlider(true);
-      },
-      onMouseLeave: (event) => {
-        event.stopPropagation();
-        setShowSlider(false);
-      }
-    },
-    /* @__PURE__ */ React9.createElement(
-      VolumeIcon,
-      {
-        volume,
-        onClick: () => {
-          if (volume > 0) {
-            setVolume(0);
-            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(0);
-          } else {
-            setVolume(100);
-            hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(100);
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ React9.createElement(
-      Slider,
-      {
-        css: {
-          mx: "$4",
-          w: "$20",
-          cursor: "pointer",
-          "@sm": { w: "$14" },
-          "@xs": { w: "$14" },
-          opacity: showSlider ? "1" : "0",
-          display: showSlider ? "" : "none",
-          transition: `all .2s ease .5s`
-        },
-        min: 0,
-        max: 100,
-        step: 1,
-        value: [volume],
-        onValueChange: (volume2) => {
-          hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(volume2[0]);
-          setVolume(volume2[0]);
-        },
-        thumbStyles: { w: "$6", h: "$6" }
-      }
-    )
-  );
-};
-var VolumeIcon = ({ volume, onClick }) => {
-  if (volume === 0) {
-    return /* @__PURE__ */ React9.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
-  }
-  return volume < 50 ? /* @__PURE__ */ React9.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React9.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
-};
-
-// src/Prebuilt/components/HMSVideo/index.ts
-var HMSVideoPlayer = {
-  Root: HMSVideo,
-  Progress: VideoProgress,
-  Duration: VideoTime,
-  Volume: VolumeControl,
-  Controls: {
-    Root: VideoControls,
-    Left: LeftControls,
-    Right: RightControls
-  },
-  PlayPauseSeekControls: {
-    Overlay: PlayPauseSeekOverlayControls,
-    Button: PlayPauseSeekControls
-  }
-};
-
-// src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
-init_define_process_env();
-import React10 from "react";
-import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
-var FullScreenButton = ({ isFullScreen, onToggle }) => {
-  return /* @__PURE__ */ React10.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React10.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React10.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React10.createElement(ShrinkIcon, null) : /* @__PURE__ */ React10.createElement(ExpandIcon, null))));
-};
-
-// src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
-init_define_process_env();
-import React11 from "react";
-import { useMedia as useMedia2 } from "react-use";
-import { VolumeTwoIcon as VolumeTwoIcon2 } from "@100mslive/react-icons";
-function HLSAutoplayBlockedPrompt({
-  open,
-  unblockAutoPlay
-}) {
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia2(config.media.md);
-  if ((isMobile || isLandscape) && open) {
-    return /* @__PURE__ */ React11.createElement(
-      IconButton,
-      {
-        css: {
-          border: "1px solid white",
-          bg: "white",
-          color: "#000",
-          r: "$2"
-        },
-        onClick: () => __async(null, null, function* () {
-          return yield unblockAutoPlay();
-        })
-      },
-      /* @__PURE__ */ React11.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
-      /* @__PURE__ */ React11.createElement(
-        Text,
-        {
-          variant: "body1",
-          css: {
-            fontWeight: "$semiBold",
-            px: "$2",
-            color: "#000"
-          }
-        },
-        "Tap To Unmute"
-      )
-    );
-  }
-  return /* @__PURE__ */ React11.createElement(
-    Dialog.Root,
-    {
-      open,
-      onOpenChange: (value) => __async(null, null, function* () {
-        if (!value) {
-          yield unblockAutoPlay();
-        }
-      })
-    },
-    /* @__PURE__ */ React11.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React11.createElement(DialogRow, null, /* @__PURE__ */ React11.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React11.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React11.createElement(
-      Button,
-      {
-        variant: "primary",
-        onClick: () => __async(null, null, function* () {
-          yield unblockAutoPlay();
-        })
-      },
-      "Play stream"
-    )))
-  );
-}
-
-// src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
-init_define_process_env();
-import React12 from "react";
-import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
-function HLSCaptionSelector({ isEnabled }) {
-  const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
-  return /* @__PURE__ */ React12.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React12.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React12.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React12.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
-}
-
-// src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
-init_define_process_env();
-import React13 from "react";
-import { useMedia as useMedia3 } from "react-use";
-import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
-function HLSQualitySelector({
-  open,
-  onOpenChange,
-  layers,
-  onQualityChange,
-  selection,
-  isAuto,
-  containerRef
-}) {
-  const isMobile = useMedia3(config.media.md);
-  const isLandscape = useIsLandscape();
-  if (layers.length === 0) {
-    return null;
-  }
-  if (isMobile || isLandscape) {
-    return /* @__PURE__ */ React13.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React13.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React13.createElement(
-      Flex,
-      {
-        css: {
-          color: "$on_primary_high",
-          r: "$1",
-          cursor: "pointer",
-          p: "$2"
-        }
-      },
-      /* @__PURE__ */ React13.createElement(SettingsIcon, null)
-    )), /* @__PURE__ */ React13.createElement(
-      Sheet.Content,
-      {
-        container: containerRef,
-        css: { bg: "$surface_default", pb: "$1" },
-        onClick: () => onOpenChange(false)
-      },
-      /* @__PURE__ */ React13.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__ */ React13.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React13.createElement(CrossIcon2, null))
-      ),
-      layers.map((layer) => {
-        return /* @__PURE__ */ React13.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__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-          /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-          !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
-        );
-      }),
-      /* @__PURE__ */ React13.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__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-        isAuto && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
-      )
-    ));
-  }
-  return /* @__PURE__ */ React13.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value), modal: false }, /* @__PURE__ */ React13.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React13.createElement(
-    Flex,
-    {
-      css: {
-        color: "$on_primary_high",
-        r: "$1",
-        cursor: "pointer",
-        p: "$2"
-      }
-    },
-    /* @__PURE__ */ React13.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React13.createElement(Flex, { align: "center" }, /* @__PURE__ */ React13.createElement(
-      Box,
-      {
-        css: {
-          w: "$9",
-          h: "$9",
-          display: "inline-flex",
-          alignItems: "center",
-          c: "$on_surface_high"
-        }
-      },
-      /* @__PURE__ */ React13.createElement(SettingsIcon, null)
-    ), /* @__PURE__ */ React13.createElement(
-      Text,
-      {
-        variant: {
-          "@md": "sm",
-          "@sm": "xs",
-          "@xs": "tiny"
-        },
-        css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
-      },
-      isAuto && /* @__PURE__ */ React13.createElement(React13.Fragment, null, "Auto", /* @__PURE__ */ React13.createElement(
-        Box,
-        {
-          css: {
-            mx: "$2",
-            w: "$2",
-            h: "$2",
-            background: "$on_surface_medium",
-            r: "$1"
-          }
-        }
-      )),
-      selection && Math.min(selection.width || 0, selection.height || 0),
-      "p"
-    )))
-  )), /* @__PURE__ */ React13.createElement(Dropdown.Portal, { container: containerRef }, /* @__PURE__ */ React13.createElement(
-    Dropdown.Content,
-    {
-      sideOffset: 5,
-      align: "end",
-      css: {
-        height: "auto",
-        maxHeight: "$52",
-        w: "$40",
-        bg: "$surface_bright",
-        py: "$4",
-        gap: "$4",
-        display: "grid"
-      }
-    },
-    layers.map((layer) => {
-      return /* @__PURE__ */ React13.createElement(
-        Dropdown.Item,
-        {
-          onClick: () => onQualityChange(layer),
-          key: layer.width,
-          css: {
-            bg: !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) ? "$surface_default" : "$surface_bright",
-            "&:hover": {
-              bg: "$surface_brighter"
-            },
-            p: "$2 $4 $2 $8",
-            h: "$12",
-            gap: "$2"
-          }
-        },
-        /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
-        /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
-        !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
-      );
-    }),
-    /* @__PURE__ */ React13.createElement(
-      Dropdown.Item,
-      {
-        onClick: () => onQualityChange({ height: "auto" }),
-        key: "auto",
-        css: {
-          bg: !isAuto ? "$surface_bright" : "$surface_default",
-          "&:hover": {
-            bg: "$surface_brighter"
-          },
-          p: "$2 $4 $2 $8",
-          h: "$12",
-          gap: "$2"
-        }
-      },
-      /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ React13.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 React14 from "react";
-import { ChevronDownIcon } from "@100mslive/react-icons";
-var HLSViewTitle = () => {
-  const { title, details, description } = useRoomLayoutHeader();
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
-  if (isDetailSidepaneOpen) {
-    return /* @__PURE__ */ React14.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__ */ React14.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "About Session"),
-      /* @__PURE__ */ React14.createElement(
-        Flex,
-        {
-          onClick: toggleDetailsPane,
-          css: {
-            color: "$on_surface_high",
-            cursor: "pointer",
-            "&:hover": { opacity: "0.8" }
-          }
-        },
-        /* @__PURE__ */ React14.createElement(ChevronDownIcon, null)
-      )
-    );
-  }
-  return /* @__PURE__ */ React14.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__ */ React14.createElement(Logo, null),
-    /* @__PURE__ */ React14.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ React14.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ React14.createElement(Flex, null, /* @__PURE__ */ React14.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ React14.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
-  );
-};
-
-// src/Prebuilt/layouts/HLSView.jsx
-var hlsPlayer;
-var toastMap = {};
-var ToggleChat = ({ isFullScreen = false }) => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  const showChat = !!(elements == null ? void 0 : elements.chat);
-  const isMobile = useMedia4(config.media.md);
-  const hmsActions = useHMSActions();
-  useEffect4(() => {
-    match({ sidepane, isMobile, showChat, isFullScreen }).with({ isFullScreen: true }, () => {
-      hmsActions.setAppData(APP_DATA.sidePane, "");
-    }).with({ isMobile: true, showChat: true, sidepane: P.when((value) => !value) }, () => {
-      hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.CHAT);
-    }).with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
-      hmsActions.setAppData(APP_DATA.sidePane, "");
-    }).otherwise(() => {
-    });
-  }, [sidepane, isMobile, showChat, hmsActions, isFullScreen]);
-  return null;
-};
-var HLSView = () => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const videoRef = useRef(null);
-  const hlsViewRef = useRef();
-  const { elements } = useRoomLayoutConferencingScreen();
-  const hlsState = useHMSStore(selectHLSState);
-  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
-  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
-  const hmsActions = useHMSActions();
-  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] = 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 [hoverControlsVisible, setHoverControlsVisible] = useState5({
-    seekForward: false,
-    pausePlay: false,
-    seekBackward: false
-  });
-  const [isPaused, setIsPaused] = useState5(false);
-  const [show, toggle] = useToggle(false);
-  const lastHlsUrl = usePrevious(hlsUrl);
-  const vanillaStore = useHMSVanillaStore();
-  const [controlsVisible, setControlsVisible] = useState5(true);
-  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState5(true);
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState5(false);
-  const controlsRef = useRef(null);
-  const controlsTimerRef = useRef();
-  const [seekProgress, setSeekProgress] = useState5(false);
-  const isFullScreenSupported = screenfull.isEnabled;
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const showChat = !!(elements == null ? void 0 : elements.chat);
-  const isMobile = useMedia4(config.media.md);
-  const isLandscape = useIsLandscape();
-  const isFullScreen = useFullscreen(hlsViewRef, show, {
-    onClose: () => toggle(false)
-  });
-  const [showLoader, setShowLoader] = useState5(false);
-  useEffect4(() => {
-    const videoEl = videoRef.current;
-    const showLoader2 = () => setShowLoader(true);
-    const hideLoader = () => setShowLoader(false);
-    videoEl == null ? void 0 : videoEl.addEventListener("playing", hideLoader);
-    videoEl == null ? void 0 : videoEl.addEventListener("waiting", showLoader2);
-    return () => {
-      videoEl == null ? void 0 : videoEl.removeEventListener("playing", hideLoader);
-      videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
-    };
-  }, []);
-  useEffect4(() => {
-    if (streamEnded && lastHlsUrl !== hlsUrl) {
-      setStreamEnded(false);
-    }
-  }, [hlsUrl, streamEnded, lastHlsUrl]);
-  useEffect4(() => {
-    if (!notification) return;
-    const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
-    if (toastID) {
-      ToastManager.removeToast(toastMap[notification.data.id]);
-      delete toastMap[notification.data.id];
-    }
-  }, [notification]);
-  useEffect4(() => {
-    const videoElem = videoRef.current;
-    const setStreamEndedCallback = () => {
-      setStreamEnded(true);
-      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
-    };
-    videoElem == null ? void 0 : videoElem.addEventListener("ended", setStreamEndedCallback);
-    return () => {
-      videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
-    };
-  }, [hlsUrl]);
-  const handleQuality = useCallback3(
-    (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);
-      setHasCaptions(hlsPlayer == null ? void 0 : hlsPlayer.hasCaptions());
-    };
-    const layerUpdatedHandler = ({ layer }) => {
-      setCurrentSelectedQuality(layer);
-    };
-    const metadataLoadedHandler = (_a2) => {
-      var _b2 = _a2, { payload } = _b2, rest = __objRest(_b2, ["payload"]);
-      var _a3;
-      const parsePayload = (str) => {
-        try {
-          return JSON.parse(str);
-        } catch (e) {
-          return str;
-        }
-      };
-      const duration = rest.duration;
-      const parsedPayload = parsePayload(payload);
-      if (parsedPayload.startsWith("poll:")) {
-        const pollId = parsedPayload.substr(parsedPayload.indexOf(":") + 1);
-        const poll = vanillaStore.getState(selectPollByID(pollId));
-        const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || "Participant";
-        if (!toastMap[pollId]) {
-          const toastID = ToastManager.addToast({
-            title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-            action: /* @__PURE__ */ React15.createElement(
-              Button,
-              {
-                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",
-                  fontWeight: "$semiBold",
-                  color: "$on_surface_high",
-                  p: "$xs $md"
-                }
-              },
-              poll.type === "quiz" ? "Answer" : "Vote"
-            ),
-            duration: Infinity
-          });
-          toastMap[pollId] = toastID;
-        }
-        return;
-      }
-      switch (parsedPayload.type) {
-        case EMOJI_REACTION_TYPE:
-          (_a3 = window.showFlyingEmoji) == null ? void 0 : _a3.call(window, { emojiId: parsedPayload == null ? void 0 : parsedPayload.emojiId, senderId: parsedPayload == null ? void 0 : parsedPayload.senderId });
-          break;
-        default: {
-          const toast = {
-            title: `Payload from timed Metadata ${parsedPayload}`,
-            duration: duration || 3e3
-          };
-          console.debug("Added toast ", JSON.stringify(toast));
-          ToastManager.addToast(toast);
-          break;
-        }
-      }
-    };
-    const handleError = (data) => {
-      console.error("[HLSView] error in hls", `${data}`);
-    };
-    const handleNoLongerLive = ({ isLive }) => {
-      setIsVideoLive(isLive);
-    };
-    const playbackEventHandler = (data) => {
-      setIsPaused(data.state === HLSPlaybackState.paused);
-      setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-        pausePlay: true
-      }));
-      setTimeout(() => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          pausePlay: false
-        }));
-      }, 2e3);
-    };
-    const captionEnabledEventHandler = (isCaptionEnabled2) => {
-      setIsCaptionEnabled(isCaptionEnabled2);
-    };
-    const handleAutoplayBlock = (data) => setIsHlsAutoplayBlocked(!!data);
-    if (videoEl && hlsUrl) {
-      hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);
-      hlsPlayer.on(HMSHLSPlayerEvents2.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
-      hlsPlayer.on(HMSHLSPlayerEvents2.TIMED_METADATA_LOADED, metadataLoadedHandler);
-      hlsPlayer.on(HMSHLSPlayerEvents2.ERROR, handleError);
-      hlsPlayer.on(HMSHLSPlayerEvents2.PLAYBACK_STATE, playbackEventHandler);
-      hlsPlayer.on(HMSHLSPlayerEvents2.CAPTION_ENABLED, captionEnabledEventHandler);
-      hlsPlayer.on(HMSHLSPlayerEvents2.AUTOPLAY_BLOCKED, handleAutoplayBlock);
-      hlsPlayer.on(HMSHLSPlayerEvents2.MANIFEST_LOADED, manifestLoadedHandler);
-      hlsPlayer.on(HMSHLSPlayerEvents2.LAYER_UPDATED, layerUpdatedHandler);
-      return () => {
-        hlsPlayer.off(HMSHLSPlayerEvents2.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
-        hlsPlayer.off(HMSHLSPlayerEvents2.ERROR, handleError);
-        hlsPlayer.off(HMSHLSPlayerEvents2.TIMED_METADATA_LOADED, metadataLoadedHandler);
-        hlsPlayer.off(HMSHLSPlayerEvents2.PLAYBACK_STATE, playbackEventHandler);
-        hlsPlayer.off(HMSHLSPlayerEvents2.CAPTION_ENABLED, captionEnabledEventHandler);
-        hlsPlayer.off(HMSHLSPlayerEvents2.AUTOPLAY_BLOCKED, handleAutoplayBlock);
-        hlsPlayer.off(HMSHLSPlayerEvents2.MANIFEST_LOADED, manifestLoadedHandler);
-        hlsPlayer.off(HMSHLSPlayerEvents2.LAYER_UPDATED, layerUpdatedHandler);
-        hlsPlayer.reset();
-      };
-    }
-  }, [hlsUrl, vanillaStore, hmsActions]);
-  useEffect4(() => {
-    const onHLSStats = (state) => setHlsStatsState(state);
-    if (enablHlsStats) {
-      hlsPlayer == null ? void 0 : hlsPlayer.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
-    } else {
-      hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
-    }
-    return () => {
-      hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
-    };
-  }, [enablHlsStats]);
-  const unblockAutoPlay = () => __async(null, null, function* () {
-    try {
-      yield hlsPlayer.play();
-      setIsHlsAutoplayBlocked(false);
-    } catch (error) {
-      console.error("Tried to unblock Autoplay failed with", error.message);
-    }
-  });
-  const sfnOverlayClose = () => {
-    hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
-  };
-  useEffect4(() => {
-    if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
-      if (controlsTimerRef.current) {
-        clearTimeout(controlsTimerRef.current);
-      }
-    }
-    if (!isFullScreen && controlsTimerRef.current) {
-      clearTimeout(controlsTimerRef.current);
-    }
-    controlsTimerRef.current = setTimeout(() => {
-      if (!seekProgress) {
-        setControlsVisible(false);
-      }
-    }, 5e3);
-    return () => {
-      if (controlsTimerRef.current) {
-        clearTimeout(controlsTimerRef.current);
-      }
-    };
-  }, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
-  const onSeekTo = useCallback3(
-    (seek) => {
-      var _a2;
-      match({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekBackward: true }));
-        setTimeout(() => {
-          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-            seekBackward: false
-          }));
-        }, 1e3);
-      }).with({ seek: 10, isMobile: false, isLandscape: false }, () => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekForward: true }));
-        setTimeout(() => {
-          setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-            seekForward: false
-          }));
-        }, 1e3);
-      }).otherwise(() => null);
-      hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
-    },
-    [hoverControlsVisible, isLandscape, isMobile]
-  );
-  const onDoubleClickHandler = useCallback3(
-    (event) => {
-      var _a2;
-      if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
-        return;
-      }
-      const sidePercentage = event.screenX * 100 / event.target.clientWidth;
-      if (sidePercentage < 45) {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          seekBackward: true
-        }));
-        onSeekTo(-10);
-      } else {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          seekForward: true
-        }));
-        onSeekTo(10);
-      }
-      setTimeout(() => {
-        setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
-          seekForward: false,
-          seekBackward: false
-        }));
-      }, 1e3);
-    },
-    [hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
-  );
-  const onClickHandler = useCallback3(() => __async(null, null, function* () {
-    var _a2;
-    match({ isMobile, isLandscape, playlist_type: (_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type }).with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, () => __async(null, null, function* () {
-      if (isPaused) {
-        yield hlsPlayer == null ? void 0 : hlsPlayer.play();
-      } else {
-        hlsPlayer == null ? void 0 : hlsPlayer.pause();
-      }
-    })).when(
-      ({ isMobile: isMobile2, isLandscape: isLandscape2 }) => isMobile2 || isLandscape2,
-      () => {
-        setControlsVisible((value) => !value);
-        if (controlsTimerRef.current) {
-          clearTimeout(controlsTimerRef.current);
-        }
-      }
-    ).otherwise(() => null);
-  }), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
-  const onHoverHandler = useCallback3(
-    (event) => {
-      event.preventDefault();
-      if (isMobile || isLandscape) {
-        return;
-      }
-      if (event.type === "mouseenter" || qualityDropDownOpen) {
-        setControlsVisible(true);
-        return;
-      }
-      if (event.type === "mouseleave" && !seekProgress) {
-        setControlsVisible(false);
-      } else if (!controlsVisible && event.type === "mousemove") {
-        setControlsVisible(true);
-        if (controlsTimerRef.current) {
-          clearTimeout(controlsTimerRef.current);
-        }
-      }
-    },
-    [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress]
-  );
-  const keyHandler = useKeyboardHandler(isPaused, hlsPlayer);
-  if (!hlsUrl || streamEnded) {
-    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ToggleChat, null), hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React15.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })), /* @__PURE__ */ React15.createElement(
-      Flex,
-      {
-        key: "hls-viewer",
-        id: `hls-viewer-${themeType}`,
-        ref: hlsViewRef,
-        direction: isMobile || isLandscape ? "column" : "row",
-        justify: "center",
-        css: {
-          flex: isLandscape ? "2 1 0" : "1 1 0"
-        }
-      },
-      streamEnded ? /* @__PURE__ */ React15.createElement(
-        WaitingView,
-        {
-          icon: /* @__PURE__ */ React15.createElement(ColoredHandIcon, { height: 56, width: 56 }),
-          title: "Stream has ended",
-          subtitle: "Have a nice day!"
-        }
-      ) : /* @__PURE__ */ React15.createElement(
-        WaitingView,
-        {
-          icon: /* @__PURE__ */ React15.createElement(GoLiveIcon, { height: 56, width: 56, style: { color: "white" } }),
-          title: "Stream yet to start",
-          subtitle: "Sit back and relax"
-        }
-      )
-    ));
-  }
-  return /* @__PURE__ */ React15.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",
-        transition: "all 0.3s ease-in-out"
-      }
-    },
-    hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React15.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
-    /* @__PURE__ */ React15.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React15.createElement(
-      Flex,
-      {
-        id: "hls-player-container",
-        align: "center",
-        justify: "center",
-        css: {
-          size: "100%",
-          margin: "0 auto",
-          "@md": {
-            height: "auto"
-          },
-          outline: "none"
-        },
-        onKeyDown: (event) => __async(null, null, function* () {
-          var _a2;
-          if (((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) === HLSPlaylistType.DVR) {
-            yield keyHandler(event);
-          }
-        }),
-        tabIndex: "0"
-      },
-      !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
-      showLoader && /* @__PURE__ */ React15.createElement(
-        Flex,
-        {
-          align: "center",
-          justify: "center",
-          css: {
-            position: "absolute"
-          }
-        },
-        /* @__PURE__ */ React15.createElement(Loading, { width: 72, height: 72 })
-      ),
-      /* @__PURE__ */ React15.createElement(
-        HMSVideoPlayer.Root,
-        {
-          ref: videoRef,
-          onMouseEnter: onHoverHandler,
-          onMouseMove: onHoverHandler,
-          onMouseLeave: onHoverHandler,
-          onClick: onClickHandler,
-          isFullScreen,
-          onDoubleClick: (e) => {
-            onDoubleClickHandler(e);
-          }
-        },
-        /* @__PURE__ */ React15.createElement(React15.Fragment, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(
-          Flex,
-          {
-            align: "center",
-            justify: "between",
-            css: {
-              position: "absolute",
-              bg: `${hoverControlsVisible.pausePlay || hoverControlsVisible.seekBackward || hoverControlsVisible.seekForward ? "#00000066" : ""}`,
-              display: "inline-flex",
-              gap: "$2",
-              zIndex: 1,
-              size: "100%"
-            }
-          },
-          !showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
-            HMSVideoPlayer.PlayPauseSeekControls.Overlay,
-            {
-              isPaused,
-              showControls: controlsVisible,
-              hoverControlsVisible
-            }
-          )
-        ), isMobile || isLandscape ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, !showLoader && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
-          HMSVideoPlayer.PlayPauseSeekControls.Overlay,
-          {
-            isPaused,
-            showControls: controlsVisible,
-            hoverControlsVisible
-          }
-        ), /* @__PURE__ */ React15.createElement(
-          Flex,
-          {
-            ref: controlsRef,
-            direction: "column",
-            justify: "start",
-            align: "start",
-            css: {
-              position: "absolute",
-              top: "0",
-              left: "0",
-              width: "100%",
-              flexShrink: 0,
-              zIndex: 1,
-              visibility: controlsVisible ? `` : `hidden`,
-              opacity: controlsVisible ? `1` : "0"
-            }
-          },
-          /* @__PURE__ */ React15.createElement(
-            HMSVideoPlayer.Controls.Root,
-            {
-              css: {
-                p: "$4 $8"
-              },
-              onClick: (e) => e.stopPropagation()
-            },
-            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Right, null, (isLandscape || isMobile && isFullScreen) && showChat && /* @__PURE__ */ React15.createElement(
-              ChatToggle,
-              {
-                onClick: () => {
-                  if (isFullScreen) {
-                    toggle();
-                  }
-                  setTimeout(() => {
-                    toggleChat();
-                  }, 0);
-                }
-              }
-            ), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React15.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React15.createElement(
-              HLSQualitySelector,
-              {
-                layers: availableLayers,
-                onOpenChange: setQualityDropDownOpen,
-                open: qualityDropDownOpen,
-                selection: currentSelectedQuality,
-                onQualityChange: handleQuality,
-                isAuto: isUserSelectedAuto,
-                containerRef: hlsViewRef.current
-              }
-            ) : null, /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
-          )
-        )) : null, controlsVisible && /* @__PURE__ */ React15.createElement(
-          Flex,
-          {
-            ref: controlsRef,
-            direction: isMobile ? "columnReverse" : "column",
-            justify: "end",
-            align: "start",
-            css: {
-              position: "absolute",
-              bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? "$8" : "0",
-              left: "0",
-              zIndex: 1,
-              background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
-              width: "100%",
-              pt: "$8",
-              flexShrink: 0,
-              transition: "visibility 0s 0.5s, opacity 0.5s linear"
-            }
-          },
-          ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
-          /* @__PURE__ */ React15.createElement(
-            HMSVideoPlayer.Controls.Root,
-            {
-              css: {
-                p: "$4 $8"
-              },
-              onClick: (e) => e.stopPropagation()
-            },
-            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(React15.Fragment, null, ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.PlayPauseSeekControls.Button, { isPaused, onSeekTo }), !isVideoLive ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React15.createElement(
-              IconButton,
-              {
-                css: { px: "$2" },
-                onClick: (e) => __async(null, null, function* () {
-                  e.stopPropagation();
-                  yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
-                  setIsVideoLive(true);
-                }),
-                key: "jump-to-live_btn",
-                "data-testid": "jump-to-live_btn"
-              },
-              /* @__PURE__ */ React15.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React15.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React15.createElement(
-                Box,
-                {
-                  css: {
-                    height: "$4",
-                    width: "$4",
-                    background: isVideoLive ? "$alert_error_default" : "$on_primary_medium",
-                    r: "$1"
-                  }
-                }
-              ), /* @__PURE__ */ React15.createElement(
-                Text,
-                {
-                  variant: "$body1",
-                  css: {
-                    c: isVideoLive ? "$on_surface_high" : "$on_surface_medium",
-                    fontWeight: "$semiBold"
-                  }
-                },
-                isVideoLive ? "LIVE" : "GO LIVE"
-              )))
-            ), (isMobile || isLandscape) && !isVideoLive && ((_g = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _g.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null),
-            /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(
-              HLSQualitySelector,
-              {
-                layers: availableLayers,
-                onOpenChange: setQualityDropDownOpen,
-                open: qualityDropDownOpen,
-                selection: currentSelectedQuality,
-                onQualityChange: handleQuality,
-                isAuto: isUserSelectedAuto,
-                containerRef: hlsViewRef.current
-              }
-            ) : null, isFullScreenSupported ? /* @__PURE__ */ React15.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
-          )
-        ))
-      )
-    )),
-    /* @__PURE__ */ React15.createElement(ToggleChat, { isFullScreen }),
-    isMobile && !isFullScreen && /* @__PURE__ */ React15.createElement(HLSViewTitle, null)
-  );
-};
-var HLSView_default = HLSView;
-export {
-  HLSView_default as default
-};
-//# sourceMappingURL=HLSView-KDT33XIC.js.map