@100mslive/roomkit-react 0.1.0

package/dist/Footer/index.d.ts

@@ -0,0 +1 @@
+export { Footer } from './Footer';

package/dist/HLSView-3RDXRV7Y.js

@@ -0,0 +1,689 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogRow,
+  Dropdown,
+  Slider,
+  ToastManager,
+  useTheme
+} from "./chunk-HCAGFNXW.js";
+import {
+  Loading
+} from "./chunk-ULXGBUSC.js";
+import {
+  Box,
+  Flex,
+  Text
+} from "./chunk-XRJXE6UO.js";
+import {
+  APP_DATA,
+  EMOJI_REACTION_TYPE,
+  IconButton,
+  IconButton_default,
+  Tooltip,
+  __async,
+  __objRest,
+  init_define_process_env,
+  styled
+} from "./chunk-KYYP6ZVK.js";
+
+// src/Prebuilt/layouts/HLSView.jsx
+init_define_process_env();
+import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
+import { useFullscreen, useToggle } from "react-use";
+import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
+import screenfull from "screenfull";
+import { selectAppData, selectHLSState, useHMSActions, useHMSStore } from "@100mslive/react-sdk";
+import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/HlsStatsOverlay.jsx
+init_define_process_env();
+import React, { memo } from "react";
+import { CloseIcon } 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: "rgba(55,59,66, 0.84)",
+        borderRadius: "$1"
+      },
+      direction: "column"
+    },
+    /* @__PURE__ */ React.createElement(IconButton_default, { css: { position: "absolute", top: "$2", right: "$2" }, onClick: onClose }, /* @__PURE__ */ React.createElement(CloseIcon, null)),
+    /* @__PURE__ */ React.createElement(HlsStatsRow, { label: "URL" }, /* @__PURE__ */ React.createElement(Flex, { align: "center" }, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        style: { cursor: "pointer", textDecoration: "underline" },
+        href: hlsStatsState == null ? void 0 : hlsStatsState.url,
+        target: "_blank",
+        rel: "noreferrer"
+      },
+      "Stream url"
+    ))),
+    /* @__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.js
+init_define_process_env();
+
+// src/Prebuilt/components/HMSVideo/Controls.jsx
+init_define_process_env();
+var VideoControls = styled(Flex, {
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  gap: "$2"
+});
+var LeftControls = styled(Flex, {
+  justifyContent: "flex-start",
+  alignItems: "center",
+  width: "100%",
+  gap: "$2"
+});
+var RightControls = styled(Flex, {
+  justifyContent: "flex-end",
+  alignItems: "center",
+  width: "100%",
+  gap: "$2"
+});
+
+// src/Prebuilt/components/HMSVideo/HMSVideo.jsx
+init_define_process_env();
+import React2, { forwardRef } from "react";
+var HMSVideo = forwardRef(({ children }, videoRef) => {
+  return /* @__PURE__ */ React2.createElement(Flex, { "data-testid": "hms-video", css: { size: "100%" }, direction: "column" }, /* @__PURE__ */ React2.createElement("video", { style: { flex: "1 1 0", margin: "0 auto", minHeight: "0" }, ref: videoRef, playsInline: true }), children);
+});
+
+// src/Prebuilt/components/HMSVideo/PlayButton.jsx
+init_define_process_env();
+import React3 from "react";
+import { PauseIcon, PlayIcon } from "@100mslive/react-icons";
+var PlayButton = ({ onClick, isPaused }) => {
+  return /* @__PURE__ */ React3.createElement(Tooltip, { title: `${isPaused ? "Play" : "Pause"}`, side: "top" }, /* @__PURE__ */ React3.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ React3.createElement(PlayIcon, { width: 32, height: 32 }) : /* @__PURE__ */ React3.createElement(PauseIcon, { width: 32, height: 32 })));
+};
+
+// src/Prebuilt/components/HMSVideo/VideoProgress.jsx
+init_define_process_env();
+import React4, { useEffect, useRef, useState } from "react";
+
+// src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js
+init_define_process_env();
+function getPercentage(a, b) {
+  return a / b * 100;
+}
+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;
+}
+
+// src/Prebuilt/components/HMSVideo/VideoProgress.jsx
+var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
+  const [videoProgress, setVideoProgress] = useState(0);
+  const [bufferProgress, setBufferProgress] = useState(0);
+  const progressRootRef = useRef();
+  useEffect(() => {
+    const videoEl = hlsPlayer2.getVideoElement();
+    const timeupdateHandler = () => {
+      var _a;
+      const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
+      let bufferProgress2 = 0;
+      if (videoEl.buffered.length > 0) {
+        bufferProgress2 = Math.floor(getPercentage((_a = videoEl.buffered) == null ? void 0 : _a.end(0), videoEl.duration));
+      }
+      setVideoProgress(isNaN(videoProgress2) ? 0 : videoProgress2);
+      setBufferProgress(isNaN(bufferProgress2) ? 0 : bufferProgress2);
+    };
+    if (videoEl) {
+      videoEl.addEventListener("timeupdate", timeupdateHandler);
+    }
+    return function cleanup() {
+      if (videoEl) {
+        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;
+    if (onValueChange) {
+      onValueChange(currentTime);
+    }
+  };
+  return hlsPlayer2.getVideoElement() ? /* @__PURE__ */ React4.createElement(
+    Flex,
+    {
+      ref: progressRootRef,
+      css: { paddingLeft: "$8", paddingRight: "$8", cursor: "pointer" },
+      onClick: onProgressChangeHandler
+    },
+    /* @__PURE__ */ React4.createElement(
+      Box,
+      {
+        id: "video-actual",
+        css: {
+          display: "inline",
+          width: `${videoProgress}%`,
+          background: "$primaryDefault",
+          height: "0.3rem"
+        }
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      Box,
+      {
+        id: "video-buffer",
+        css: {
+          width: `${bufferProgress - videoProgress}%`,
+          background: "$primaryDark",
+          height: "0.3rem"
+        }
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      Box,
+      {
+        id: "video-rest",
+        css: {
+          width: `${100 - bufferProgress}%`,
+          background: "$grayLight",
+          height: "0.3rem"
+        }
+      }
+    )
+  ) : null;
+};
+
+// src/Prebuilt/components/HMSVideo/VideoTime.jsx
+init_define_process_env();
+import React5, { useEffect as useEffect2, useState as useState2 } from "react";
+import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
+var VideoTime = ({ hlsPlayer: hlsPlayer2 }) => {
+  const [videoTime, setVideoTime] = useState2("");
+  useEffect2(() => {
+    const timeupdateHandler = (currentTime) => setVideoTime(getDurationFromSeconds2(currentTime));
+    if (hlsPlayer2) {
+      hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+    }
+    return function cleanup() {
+      if (hlsPlayer2) {
+        hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+      }
+    };
+  }, [hlsPlayer2]);
+  return hlsPlayer2 ? /* @__PURE__ */ React5.createElement(
+    Text,
+    {
+      css: {
+        minWidth: "$16"
+      },
+      variant: {
+        "@sm": "xs"
+      }
+    },
+    `${videoTime}`
+  ) : null;
+};
+
+// src/Prebuilt/components/HMSVideo/VolumeControl.jsx
+init_define_process_env();
+import React6, { useState as useState3 } from "react";
+import { SpeakerIcon } from "@100mslive/react-icons";
+var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
+  var _a;
+  const [volume, setVolume] = useState3((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
+  return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { color: "$white" } }, /* @__PURE__ */ React6.createElement(
+    SpeakerIcon,
+    {
+      style: { cursor: "pointer" },
+      onClick: () => {
+        setVolume(0);
+        if (hlsPlayer2) {
+          hlsPlayer2.setVolume(0);
+        }
+      }
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    Slider,
+    {
+      css: {
+        mx: "$4",
+        w: "$20",
+        cursor: "pointer",
+        "@sm": { w: "$14" },
+        "@xs": { w: "$14" }
+      },
+      min: 0,
+      max: 100,
+      step: 1,
+      value: [volume],
+      onValueChange: (volume2) => {
+        hlsPlayer2.setVolume(volume2);
+        setVolume(volume2);
+      },
+      thumbStyles: { w: "$6", h: "$6" }
+    }
+  ));
+};
+
+// src/Prebuilt/components/HMSVideo/index.js
+var HMSVideoPlayer = {
+  Root: HMSVideo,
+  PlayButton,
+  Progress: VideoProgress,
+  Duration: VideoTime,
+  Volume: VolumeControl,
+  Controls: {
+    Root: VideoControls,
+    Left: LeftControls,
+    Right: RightControls
+  }
+};
+
+// src/Prebuilt/components/HMSVideo/FullscreenButton.jsx
+init_define_process_env();
+import React7 from "react";
+var FullScreenButton = ({ isFullScreen, icon, onToggle }) => {
+  return /* @__PURE__ */ React7.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React7.createElement(
+    IconButton,
+    {
+      variant: "standard",
+      css: { margin: "0px" },
+      onClick: onToggle,
+      key: "fullscreen_btn",
+      "data-testid": "fullscreen_btn"
+    },
+    /* @__PURE__ */ React7.createElement(Flex, null, icon)
+  ));
+};
+
+// src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx
+init_define_process_env();
+import React8 from "react";
+function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
+  return /* @__PURE__ */ React8.createElement(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (value) => {
+        if (!value) {
+          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(
+      Button,
+      {
+        variant: "primary",
+        onClick: () => {
+          unblockAutoPlay();
+        }
+      },
+      "Play stream"
+    )))
+  );
+}
+
+// src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx
+init_define_process_env();
+import React9, { useState as useState4 } from "react";
+import { CheckCircleIcon, SettingsIcon } from "@100mslive/react-icons";
+function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
+  const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
+  return /* @__PURE__ */ React9.createElement(Dropdown.Root, { open: qualityDropDownOpen, onOpenChange: (value) => setQualityDropDownOpen(value) }, /* @__PURE__ */ React9.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React9.createElement(
+    Flex,
+    {
+      css: {
+        color: "$textPrimary",
+        r: "$1",
+        cursor: "pointer",
+        p: "$2"
+      }
+    },
+    /* @__PURE__ */ React9.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React9.createElement(Flex, { align: "center" }, /* @__PURE__ */ React9.createElement(
+      Box,
+      {
+        css: {
+          w: "$9",
+          h: "$9",
+          display: "inline-flex",
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React9.createElement(SettingsIcon, null)
+    ), /* @__PURE__ */ React9.createElement(
+      Text,
+      {
+        variant: {
+          "@md": "sm",
+          "@sm": "xs",
+          "@xs": "tiny"
+        },
+        css: { display: "flex", alignItems: "center", ml: "$2" }
+      },
+      isAuto && /* @__PURE__ */ React9.createElement(React9.Fragment, null, "Auto", /* @__PURE__ */ React9.createElement(
+        Box,
+        {
+          css: {
+            mx: "$2",
+            w: "$2",
+            h: "$2",
+            background: "$textPrimary",
+            r: "$1"
+          }
+        }
+      )),
+      selection && Math.min(selection.width, selection.height),
+      "p"
+    )))
+  )), layers.length > 0 && /* @__PURE__ */ React9.createElement(Dropdown.Content, { sideOffset: 5, align: "end", css: { height: "auto", maxHeight: "$96", w: "$64" } }, /* @__PURE__ */ React9.createElement(Dropdown.Item, { onClick: () => onQualityChange({ height: "auto" }), key: "auto" }, /* @__PURE__ */ React9.createElement(Text, { css: { flex: "1 1 0" } }, "Automatic"), isAuto && /* @__PURE__ */ React9.createElement(CheckCircleIcon, null)), layers.map((layer) => {
+    return /* @__PURE__ */ React9.createElement(Dropdown.Item, { onClick: () => onQualityChange(layer), key: layer.width }, /* @__PURE__ */ React9.createElement(Text, { css: { flex: "1 1 0" } }, getQualityText(layer)), !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React9.createElement(CheckCircleIcon, null));
+  })));
+}
+var getQualityText = (layer) => `${Math.min(layer.height, layer.width)}p (${(Number(layer.bitrate / 1e3) / 1e3).toFixed(2)} Mbps)`;
+
+// src/Prebuilt/layouts/HLSView.jsx
+var hlsPlayer;
+var HLSView = () => {
+  var _a;
+  const videoRef = useRef2(null);
+  const hlsViewRef = useRef2(null);
+  const hlsState = useHMSStore(selectHLSState);
+  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const hmsActions = useHMSActions();
+  const { themeType } = useTheme();
+  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 [isUserSelectedAuto, setIsUserSelectedAuto] = useState5(true);
+  const [currentSelectedQuality, setCurrentSelectedQuality] = useState5(null);
+  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState5(false);
+  const [isPaused, setIsPaused] = useState5(false);
+  const isFullScreenSupported = screenfull.isEnabled;
+  const [show, toggle] = useToggle(false);
+  const isFullScreen = useFullscreen(hlsViewRef, show, {
+    onClose: () => toggle(false)
+  });
+  const [showLoader, setShowLoader] = useState5(false);
+  useEffect3(() => {
+    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);
+    };
+  }, []);
+  useEffect3(() => {
+    let videoEl = videoRef.current;
+    const manifestLoadedHandler = ({ layers }) => {
+      setAvailableLayers(layers);
+    };
+    const layerUpdatedHandler = ({ layer }) => {
+      setCurrentSelectedQuality(layer);
+    };
+    const metadataLoadedHandler = (_a2) => {
+      var _b = _a2, { payload } = _b, rest = __objRest(_b, ["payload"]);
+      const parsePayload = (str) => {
+        try {
+          return JSON.parse(str);
+        } catch (e) {
+          return str;
+        }
+      };
+      const duration = rest.duration;
+      const parsedPayload = parsePayload(payload);
+      switch (parsedPayload.type) {
+        case EMOJI_REACTION_TYPE:
+          window.showFlyingEmoji(parsedPayload == null ? void 0 : parsedPayload.emojiId, parsedPayload == null ? void 0 : parsedPayload.senderId);
+          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);
+    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.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.AUTOPLAY_BLOCKED, handleAutoplayBlock);
+        hlsPlayer.off(HMSHLSPlayerEvents2.MANIFEST_LOADED, manifestLoadedHandler);
+        hlsPlayer.off(HMSHLSPlayerEvents2.LAYER_UPDATED, layerUpdatedHandler);
+        hlsPlayer.reset();
+        hlsPlayer = null;
+      };
+    }
+  }, [hlsUrl]);
+  useEffect3(() => {
+    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(void 0, null, function* () {
+    try {
+      yield hlsPlayer.play();
+      setIsHlsAutoplayBlocked(false);
+    } catch (error) {
+      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);
+  };
+  return /* @__PURE__ */ React10.createElement(
+    Flex,
+    {
+      key: "hls-viewer",
+      id: `hls-viewer-${themeType}`,
+      ref: hlsViewRef,
+      css: {
+        size: "100%"
+      }
+    },
+    (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats ? /* @__PURE__ */ React10.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null,
+    hlsUrl && hlsState.running ? /* @__PURE__ */ React10.createElement(
+      Flex,
+      {
+        id: "hls-player-container",
+        align: "center",
+        justify: "center",
+        css: {
+          width: "100%",
+          margin: "0 auto",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React10.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
+      showLoader && /* @__PURE__ */ React10.createElement(
+        Flex,
+        {
+          align: "center",
+          justify: "center",
+          css: {
+            position: "absolute"
+          }
+        },
+        /* @__PURE__ */ React10.createElement(Loading, { width: 72, height: 72 })
+      ),
+      /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Root, { ref: videoRef }, hlsPlayer && /* @__PURE__ */ React10.createElement(
+        HMSVideoPlayer.Progress,
+        {
+          onValueChange: (currentTime) => {
+            hlsPlayer.seekTo(currentTime);
+          },
+          hlsPlayer
+        }
+      ), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Root, { css: { p: "$4 $8" } }, /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React10.createElement(
+        HMSVideoPlayer.PlayButton,
+        {
+          onClick: () => __async(void 0, null, function* () {
+            isPaused ? yield hlsPlayer == null ? void 0 : hlsPlayer.play() : hlsPlayer == null ? void 0 : hlsPlayer.pause();
+          }),
+          isPaused
+        }
+      ), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Duration, { hlsPlayer }), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Volume, { hlsPlayer })), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+        IconButton,
+        {
+          variant: "standard",
+          css: { px: "$2" },
+          onClick: () => __async(void 0, null, function* () {
+            yield hlsPlayer.seekToLivePosition();
+            setIsVideoLive(true);
+          }),
+          key: "jump-to-live_btn",
+          "data-testid": "jump-to-live_btn"
+        },
+        /* @__PURE__ */ React10.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ React10.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React10.createElement(
+          Box,
+          {
+            css: {
+              height: "$4",
+              width: "$4",
+              background: isVideoLive ? "$error" : "$white",
+              r: "$1"
+            }
+          }
+        ), /* @__PURE__ */ React10.createElement(
+          Text,
+          {
+            variant: {
+              "@sm": "xs"
+            }
+          },
+          isVideoLive ? "LIVE" : "GO LIVE"
+        )))
+      ), /* @__PURE__ */ React10.createElement(
+        HLSQualitySelector,
+        {
+          layers: availableLayers,
+          selection: currentSelectedQuality,
+          onQualityChange: handleQuality,
+          isAuto: isUserSelectedAuto
+        }
+      )) : null, isFullScreenSupported ? /* @__PURE__ */ React10.createElement(
+        FullScreenButton,
+        {
+          isFullScreen,
+          onToggle: toggle,
+          icon: isFullScreen ? /* @__PURE__ */ React10.createElement(ShrinkIcon, null) : /* @__PURE__ */ React10.createElement(ExpandIcon, null)
+        }
+      ) : null)))
+    ) : /* @__PURE__ */ React10.createElement(Flex, { align: "center", justify: "center", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React10.createElement(Text, { variant: "md", css: { textAlign: "center" } }, "Waiting for the stream to start..."))
+  );
+};
+var HLSView_default = HLSView;
+export {
+  HLSView_default as default
+};
+//# sourceMappingURL=HLSView-3RDXRV7Y.js.map