@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.2

package/dist/{HLSView-PY2FKWX3.js → HLSView-QMU5JK7U.js}

@@ -9,7 +9,7 @@ import {
   Slider,
   ToastManager,
   useTheme
-} from "./chunk-RXTHJUMZ.js";
+} from "./chunk-WVGGQZK4.js";
 import {
   Box,
   Flex,
@@ -20,16 +20,18 @@ import {
   Tooltip,
   __async,
   __objRest,
+  __spreadValues,
+  config,
   styled
-} from "./chunk-GQD2AGWW.js";
+} from "./chunk-KBVIZGYW.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
-import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState5 } from "react";
-import { useFullscreen, useToggle } from "react-use";
+import React10, { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { useFullscreen, useMedia, 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, RadioIcon, ShrinkIcon } from "@100mslive/react-icons";
+import { ColoredHandIcon, ExpandIcon, RadioIcon, ShrinkIcon } from "@100mslive/react-icons";
 
 // src/Prebuilt/components/HlsStatsOverlay.jsx
 import React, { memo } from "react";
@@ -115,6 +117,7 @@ var HlsStatsRow = memo(({ label, children }) => {
 var VideoControls = styled(Flex, {
   justifyContent: "center",
   alignItems: "center",
+  alignSelf: "stretch",
   width: "100%",
   gap: "$2"
 });
@@ -133,8 +136,9 @@ var RightControls = styled(Flex, {
 
 // src/Prebuilt/components/HMSVideo/HMSVideo.jsx
 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);
+var HMSVideo = forwardRef((_a, videoRef) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React2.createElement(Flex, __spreadValues({ "data-testid": "hms-video", css: { size: "100%", position: "relative" }, direction: "column" }, props), /* @__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
@@ -207,7 +211,7 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
     Flex,
     {
       ref: progressRootRef,
-      css: { paddingLeft: "$8", paddingRight: "$8", cursor: "pointer" },
+      css: { cursor: "pointer", h: "$4", alignSelf: "stretch" },
       onClick: onProgressChangeHandler
     },
     /* @__PURE__ */ React4.createElement(
@@ -217,8 +221,7 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
         css: {
           display: "inline",
           width: `${videoProgress}%`,
-          background: "$primary_default",
-          height: "0.3rem"
+          background: "$primary_default"
         }
       }
     ),
@@ -228,8 +231,8 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
         id: "video-buffer",
         css: {
           width: `${bufferProgress - videoProgress}%`,
-          background: "$primary_dim",
-          height: "0.3rem"
+          background: "$on_surface_high",
+          opacity: "25%"
         }
       }
     ),
@@ -239,8 +242,8 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
         id: "video-rest",
         css: {
           width: `${100 - bufferProgress}%`,
-          background: "$surface_brighter",
-          height: "0.3rem"
+          background: "$on_surface_high",
+          opacity: "10%"
         }
       }
     )
@@ -288,7 +291,7 @@ var VolumeControl = ({ hlsPlayer: hlsPlayer2 }) => {
     Flex,
     {
       align: "center",
-      css: { color: "$on_primary_high" },
+      css: { color: "$on_surface_high" },
       onMouseOver: (event) => {
         event.stopPropagation();
         setShowSlider(true);
@@ -403,11 +406,10 @@ function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
 }
 
 // src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx
-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(
+import React9 from "react";
+import { CheckIcon, SettingsIcon } from "@100mslive/react-icons";
+function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
+  return /* @__PURE__ */ React9.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpen(value) }, /* @__PURE__ */ React9.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React9.createElement(
     Flex,
     {
       css: {
@@ -424,7 +426,8 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
           w: "$9",
           h: "$9",
           display: "inline-flex",
-          alignItems: "center"
+          alignItems: "center",
+          c: "$on_surface_high"
         }
       },
       /* @__PURE__ */ React9.createElement(SettingsIcon, null)
@@ -445,7 +448,7 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
             mx: "$2",
             w: "$2",
             h: "$2",
-            background: "$on_primary_high",
+            background: "$on_surface_medium",
             r: "$1"
           }
         }
@@ -458,7 +461,15 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
     {
       sideOffset: 5,
       align: "end",
-      css: { height: "auto", maxHeight: "$96", w: "$64", bg: "$surface_bright" }
+      css: {
+        height: "auto",
+        maxHeight: "$52",
+        w: "$40",
+        bg: "$surface_bright",
+        py: "$4",
+        gap: "$4",
+        display: "grid"
+      }
     },
     layers.map((layer) => {
       return /* @__PURE__ */ React9.createElement(
@@ -467,15 +478,18 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
           onClick: () => onQualityChange(layer),
           key: layer.width,
           css: {
-            bg: "$surface_bright",
+            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_default"
-            }
+              bg: "$surface_brighter"
+            },
+            p: "$2 $4 $2 $8",
+            h: "$12",
+            gap: "$2"
           }
         },
-        /* @__PURE__ */ React9.createElement(Text, null, getQualityText(layer)),
-        /* @__PURE__ */ React9.createElement(Text, { 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__ */ React9.createElement(CheckCircleIcon, null)
+        /* @__PURE__ */ React9.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
+        /* @__PURE__ */ React9.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__ */ React9.createElement(CheckIcon, { width: "16px", height: "16px" })
       );
     }),
     /* @__PURE__ */ React9.createElement(
@@ -484,14 +498,17 @@ function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
         onClick: () => onQualityChange({ height: "auto" }),
         key: "auto",
         css: {
-          bg: "$surface_bright",
+          bg: !isAuto ? "$surface_bright" : "$surface_default",
           "&:hover": {
-            bg: "$surface_default"
-          }
+            bg: "$surface_brighter"
+          },
+          p: "$2 $4 $2 $8",
+          h: "$12",
+          gap: "$2"
         }
       },
-      /* @__PURE__ */ React9.createElement(Text, { css: { flex: "1 1 0" } }, "Auto"),
-      isAuto && /* @__PURE__ */ React9.createElement(CheckCircleIcon, null)
+      /* @__PURE__ */ React9.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
+      isAuto && /* @__PURE__ */ React9.createElement(CheckIcon, { width: "16px", height: "16px" })
     )
   ));
 }
@@ -507,21 +524,27 @@ var HLSView = () => {
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const hmsActions = useHMSActions();
-  const { themeType } = useTheme();
-  let [hlsStatsState, setHlsStatsState] = useState5(null);
+  const { themeType, theme } = useTheme();
+  const [streamEnded, setStreamEnded] = useState4(false);
+  let [hlsStatsState, setHlsStatsState] = useState4(null);
   const hlsUrl = (_a = hlsState.variants[0]) == null ? void 0 : _a.url;
-  const [availableLayers, setAvailableLayers] = useState5([]);
-  const [isVideoLive, setIsVideoLive] = useState5(true);
-  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState5(true);
-  const [currentSelectedQuality, setCurrentSelectedQuality] = useState5(null);
-  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState5(false);
-  const [isPaused, setIsPaused] = useState5(false);
+  const [availableLayers, setAvailableLayers] = useState4([]);
+  const [isVideoLive, setIsVideoLive] = useState4(true);
+  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState4(true);
+  const [currentSelectedQuality, setCurrentSelectedQuality] = useState4(null);
+  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState4(false);
+  const [isPaused, setIsPaused] = useState4(false);
   const isFullScreenSupported = screenfull.isEnabled;
   const [show, toggle] = useToggle(false);
+  const [controlsVisible, setControlsVisible] = useState4(true);
+  const controlsRef = useRef2();
+  const controlsTimerRef = useRef2();
+  const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
+  const isMobile = useMedia(config.media.md);
   const isFullScreen = useFullscreen(hlsViewRef, show, {
     onClose: () => toggle(false)
   });
-  const [showLoader, setShowLoader] = useState5(false);
+  const [showLoader, setShowLoader] = useState4(false);
   useEffect3(() => {
     const videoEl = videoRef.current;
     const showLoader2 = () => setShowLoader(true);
@@ -533,6 +556,17 @@ var HLSView = () => {
       videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
     };
   }, []);
+  useEffect3(() => {
+    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]);
   useEffect3(() => {
     let videoEl = videoRef.current;
     const manifestLoadedHandler = ({ layers }) => {
@@ -543,6 +577,7 @@ var HLSView = () => {
     };
     const metadataLoadedHandler = (_a2) => {
       var _b = _a2, { payload } = _b, rest = __objRest(_b, ["payload"]);
+      var _a3;
       const parsePayload = (str) => {
         try {
           return JSON.parse(str);
@@ -554,7 +589,7 @@ var HLSView = () => {
       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);
+          (_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 = {
@@ -629,6 +664,41 @@ var HLSView = () => {
   const sfnOverlayClose = () => {
     hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
   };
+  useEffect3(() => {
+    if (controlsVisible && isFullScreen && !qualityDropDownOpen) {
+      if (controlsTimerRef.current) {
+        clearTimeout(controlsTimerRef.current);
+      }
+      controlsTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, 5e3);
+    }
+    if (!isFullScreen && controlsTimerRef.current) {
+      clearTimeout(controlsTimerRef.current);
+    }
+    return () => {
+      if (controlsTimerRef.current) {
+        clearTimeout(controlsTimerRef.current);
+      }
+    };
+  }, [controlsVisible, isFullScreen, qualityDropDownOpen]);
+  const onHoverHandler = useCallback(
+    (event) => {
+      if (event.type === "mouseenter" || qualityDropDownOpen) {
+        setControlsVisible(true);
+        return;
+      }
+      if (event.type === "mouseleave") {
+        setControlsVisible(false);
+      } else if (isFullScreen && !controlsVisible && event.type === "mousemove") {
+        setControlsVisible(true);
+        if (controlsTimerRef.current) {
+          clearTimeout(controlsTimerRef.current);
+        }
+      }
+    },
+    [controlsVisible, isFullScreen, qualityDropDownOpen]
+  );
   return /* @__PURE__ */ React10.createElement(
     Flex,
     {
@@ -640,7 +710,7 @@ var HLSView = () => {
       }
     },
     (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats ? /* @__PURE__ */ React10.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null,
-    hlsUrl && hlsState.running ? /* @__PURE__ */ React10.createElement(
+    hlsUrl && !streamEnded ? /* @__PURE__ */ React10.createElement(
       Flex,
       {
         id: "hls-player-container",
@@ -649,8 +719,7 @@ var HLSView = () => {
         css: {
           width: "100%",
           margin: "0 auto",
-          height: "100%",
-          background: "linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)"
+          height: "100%"
         }
       },
       /* @__PURE__ */ React10.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
@@ -665,89 +734,110 @@ var HLSView = () => {
         },
         /* @__PURE__ */ React10.createElement(Loading, { width: 72, height: 72 })
       ),
-      /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Root, { ref: videoRef }, /* @__PURE__ */ React10.createElement(
-        Flex,
+      /* @__PURE__ */ React10.createElement(
+        HMSVideoPlayer.Root,
         {
-          direction: "column",
-          justify: "flex-end",
-          align: "flex-start",
-          css: {
-            background: "linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)"
-          }
+          ref: videoRef,
+          onMouseEnter: onHoverHandler,
+          onMouseMove: onHoverHandler,
+          onMouseLeave: onHoverHandler
         },
-        hlsPlayer && /* @__PURE__ */ React10.createElement(
-          HMSVideoPlayer.Progress,
+        /* @__PURE__ */ React10.createElement(
+          Flex,
           {
-            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(
-          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"
+            ref: controlsRef,
+            direction: "column",
+            justify: "flex-end",
+            align: "flex-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%);`,
+              width: "100%",
+              pt: "$8",
+              flexShrink: 0,
+              transition: "visibility 0s 0.5s, opacity 0.5s linear",
+              visibility: controlsVisible ? `` : `hidden`,
+              opacity: controlsVisible ? `1` : "0"
+            }
           },
-          /* @__PURE__ */ React10.createElement(Tooltip, { title: "Go to Live", side: "top" }, /* @__PURE__ */ React10.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React10.createElement(
-            Box,
+          !isMobile && /* @__PURE__ */ React10.createElement(
+            HMSVideoPlayer.Controls.Root,
             {
               css: {
-                height: "$4",
-                width: "$4",
-                background: isVideoLive ? "$alert_error_default" : "$on_primary_medium",
-                r: "$1"
+                p: "$4 $8"
               }
-            }
-          ), /* @__PURE__ */ React10.createElement(
-            Text,
-            {
-              variant: {
-                "@sm": "xs"
+            },
+            /* @__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(
+              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"
               },
-              css: {
-                c: isVideoLive ? "$on_primary_high" : "$on_primary_medium"
+              /* @__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 ? "$alert_error_default" : "$on_primary_medium",
+                    r: "$1"
+                  }
+                }
+              ), /* @__PURE__ */ React10.createElement(
+                Text,
+                {
+                  variant: {
+                    "@sm": "xs"
+                  },
+                  css: {
+                    c: isVideoLive ? "$on_surface_high" : "$on_surface_medium"
+                  }
+                },
+                isVideoLive ? "LIVE" : "GO LIVE"
+              )))
+            )),
+            /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__PURE__ */ React10.createElement(
+              HLSQualitySelector,
+              {
+                layers: availableLayers,
+                onOpen: setQualityDropDownOpen,
+                open: qualityDropDownOpen,
+                selection: currentSelectedQuality,
+                onQualityChange: handleQuality,
+                isAuto: isUserSelectedAuto
               }
-            },
-            isVideoLive ? "LIVE" : "GO LIVE"
-          )))
-        )), /* @__PURE__ */ React10.createElement(HMSVideoPlayer.Controls.Right, null, availableLayers.length > 0 ? /* @__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", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React10.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, /* @__PURE__ */ React10.createElement(RadioIcon, { height: 56, width: 56 })), /* @__PURE__ */ React10.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, "Stream yet to start"), /* @__PURE__ */ React10.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, "Sit back and relax"))
+            ) : 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", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React10.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React10.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React10.createElement(RadioIcon, { height: 56, width: 56 })), /* @__PURE__ */ React10.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React10.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-PY2FKWX3.js.map
+//# sourceMappingURL=HLSView-QMU5JK7U.js.map