@100mslive/roomkit-react 0.1.0 → 0.1.2-alpha.0

package/src/Theme/ThemeProvider.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
 import type { Theme } from './stitches.config';
 import { createTheme, theme } from './stitches.config';
 import useSSR from './useSSR';
@@ -11,9 +10,7 @@ const defaultAspectRatio = {
 
 export enum ThemeTypes {
   // eslint-disable-next-line no-unused-vars
-  light = 'light',
-  // eslint-disable-next-line no-unused-vars
-  dark = 'dark',
+  default = 'default',
 }
 
 export type ThemeContextValue = {
@@ -36,7 +33,7 @@ export type ThemeProviderProps = {
 };
 
 const defaultContext = {
-  themeType: ThemeTypes.dark,
+  themeType: ThemeTypes.default,
   theme,
   aspectRatio: { width: 1, height: 1 },
   toggleTheme: (_themeToUpdateTo?: ThemeTypes) => {
@@ -58,7 +55,7 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
   aspectRatio = defaultAspectRatio,
   children,
 }) => {
-  const systemTheme = useMedia('prefers-color-scheme: dark') ? ThemeTypes.dark : ThemeTypes.light;
+  const systemTheme = ThemeTypes.default;
   const [currentTheme, setCurrentTheme] = useState(themeType || systemTheme);
   const previousClassName = useRef('');
   const { isBrowser } = useSSR();
@@ -81,7 +78,7 @@ export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderPro
         setCurrentTheme(themeToUpdateTo);
         return;
       }
-      setCurrentTheme(currentTheme === ThemeTypes.dark ? ThemeTypes.light : ThemeTypes.dark);
+      setCurrentTheme(ThemeTypes.default);
     },
     [currentTheme],
   );

package/src/Theme/ThemeStory.jsx

@@ -7,48 +7,46 @@ const ThemeStory = () => {
       <ColorItem
         title="theme.color.brand"
         subtitle="Brand Variants"
-        colors={{ brandLight: '#74AAFF', brandDefault: '#2F80FF', brandDark: '#0B326F', brandDisabled: '#D8E7FF' }}
+        colors={{ brandLight: '#74AAFF', primary_default: '#2F80FF', brandDark: '#0B326F', brandDisabled: '#D8E7FF' }}
       />
       <ColorItem
         title="theme.color.text"
         subtitle="Text Variants"
         colors={{
-          textHighEmp: 'rgba(250, 252, 255, 0.9)',
-          textMedEmp: 'rgba(215, 227, 245, 0.8)',
-          textDisabled: 'rgba(164, 176, 193, 0.5)',
-          textMedWhite: 'rgba(255, 255, 255, 0.72)',
-          textDarkWhite: 'rgba(255, 255, 255, 0.48)',
+          on_surface_high: 'rgba(250, 252, 255, 0.9)',
+          on_surface_medium: 'rgba(215, 227, 245, 0.8)',
+          on_surface_low: 'rgba(164, 176, 193, 0.5)',
         }}
       />
       <ColorItem
         title="theme.color.surface"
         subtitle="Surface Variants"
         colors={{
-          surfaceDarker: '#06080A',
-          surfaceDark: '#080B0F',
-          surfaceDefault: '#0B0F15',
-          surfaceLight: '#12161C',
-          surfaceLighter: '#1F2228',
+          surface_dimmer: '#06080A',
+          surface_dim: '#080B0F',
+          surface_default: '#0B0F15',
+          surface_bright: '#12161C',
+          surface_brighter: '#1F2228',
         }}
       />
       <ColorItem
         title="theme.color.primary"
         subtitle="Primary Variants"
         colors={{
-          primaryLight: '#6DA6FF',
-          primaryDefault: '#2F80FF',
-          primaryDark: '#184080',
-          primaryDisabled: '#D8E7FF',
+          primary_bright: '#6DA6FF',
+          primary_default: '#2F80FF',
+          primary_dim: '#184080',
+          primary_disabled: '#D8E7FF',
         }}
       />
       <ColorItem
         title="theme.color.secondary"
         subtitle="Secondary Variants"
         colors={{
-          secondaryLight: '#505863',
-          secondaryDefault: '#657080',
-          secondaryDark: '#1E2329',
-          secondaryDisabled: '#DCE4EF',
+          secondary_bright: '#505863',
+          secondary_default: '#657080',
+          secondary_dim: '#1E2329',
+          secondary_disabled: '#DCE4EF',
         }}
       />
     </ColorPalette>

package/src/Theme/base.config.ts

@@ -4,65 +4,37 @@ import { defaultThemeMap as defaultStitchesThemeMap } from '@stitches/react';
 export const baseConfig = {
   theme: {
     colors: {
-      white: '#FFFFFF',
-      black: '#000000',
-      transparent: '#00000000',
-      orange: '#F69133',
-      cyan: '#8FF5FB',
-      tamarind: '#F79133',
-      yellow: '#FAC919',
-      twinYellow: '#ECC502',
-      green: '#00AE63',
-      darkgreen: '37F28D',
-      purple: '#6554C0',
-      borderDefault: '#1B1F26',
-      borderLight: '#2D3440',
-      borderAccent: '#2471ED',
-      success: '#36B37E',
-      error: '#CC525F',
-      errorTint: '#ED4C5AE6',
-      warning: '#FFAB00',
-      brandLight: '#74AAFF',
-      brandDefault: '#2F80FF',
-      brandDark: '#0B326F',
-      brandDisabled: '#D8E7FF',
-      grayLight: '#B0C3DB',
-      grayDefault: '#657080',
-      grayDark: '#303740',
-      secondaryGray: '#242A33',
-      grayDisabled: '#DCE4EF',
-      menuBg: '$grayDark',
-      textHighEmp: '#F5F9FFF2',
-      textMedEmp: '#E0ECFFCC',
-      textDisabled: '#C3D0E580',
-
-      // text variants when bg is accent (blue)
-      // same for both themes
-      textAccentHigh: '#FFFFFFFA',
-      textAccentMedium: '#FFFFFFB8',
-      textAccentDisabled: '#FFFFFF7A',
-
-      surfaceDefault: '#14171C',
-      surfaceLight: '#1D2229',
-      surfaceLighter: '#272E38',
-      surfaceDark: '#0F1115',
-
-      backgroundDefault: '#0B0D0F',
-      backgroundDark: '#090B0D',
-      backgroundDarker: '#040405',
-
-      primaryLight: '#66A1FF',
-      primaryDefault: '#2471ED',
-      primaryDark: '#143466',
-      primaryDisabled: '#3666B2',
-      secondaryLight: '#6B7D99',
-      secondaryDefault: '#475366',
-      secondaryDark: '#2D3440',
-      secondaryDisabled: '#242A33',
-      errorDefault: '#CC525F',
-      errorLight: '#D87983',
-      errorDark: '#9D2F3B',
-      errorDisabled: '#621D24',
+      primary_default: '#2572ED',
+      primary_bright: '#538DFF',
+      primary_dim: '#002D6D',
+      primary_disabled: '#004299',
+      on_primary_high: '#FFFFFF',
+      on_primary_medium: '#DADADA',
+      on_primary_low: '#ABABAB',
+      secondary_default: '#444954',
+      secondary_bright: '#70778B',
+      secondary_dim: '#293042',
+      secondary_disabled: '#404759',
+      on_secondary_high: '#FFFFFF',
+      on_secondary_medium: '#D3D9F0',
+      on_secondary_low: '#A4ABC0',
+      background_default: '#0B0E15',
+      background_dim: '#000000',
+      surface_default: '#191B23',
+      surface_bright: '#272A31',
+      surface_brighter: '#2E3038',
+      surface_dim: '#11131A',
+      on_surface_high: '#EFF0FA',
+      on_surface_medium: '#C5C6D0',
+      on_surface_low: '#8F9099',
+      border_default: '#1D1F27',
+      border_bright: '#272A31',
+      alert_success: '#36B37E',
+      alert_warning: '#FFAB00',
+      alert_error_default: '#C74E5B',
+      alert_error_bright: '#FFB2B6',
+      alert_error_brighter: '#FFEDEC',
+      alert_error_dim: '#270005',
     },
     shadows: {
       sm: '0 0 4px 0 #0000004D',

package/src/Theme/index.tsx

@@ -1,3 +1,2 @@
 export * from './stitches.config';
 export * from './ThemeProvider';
-export * from './themes';

package/src/Theme/stitches.config.ts

@@ -2,7 +2,6 @@ import type * as Stitches from '@stitches/react';
 import { createStitches } from '@stitches/react';
 import merge from 'lodash.merge';
 import { baseConfig, defaultMedia, defaultThemeMap, defaultUtils } from './base.config';
-import { darkTheme, lightTheme } from './themes';
 
 const HmsStitches = createStitches({
   prefix: 'hms-ui',
@@ -10,7 +9,6 @@ const HmsStitches = createStitches({
     ...baseConfig.theme,
     colors: {
       ...baseConfig.theme.colors,
-      ...darkTheme.colors,
     },
   },
   media: defaultMedia,
@@ -71,7 +69,7 @@ export const globalStyles = globalCss({
   },
 });
 
-export type ThemeType = 'light' | 'dark';
+export type ThemeType = 'default';
 export type Theme = typeof HmsStitches.theme;
 
 /**
@@ -91,10 +89,7 @@ export const createTheme = ({
   if (!themeType) {
     throw new Error('Theme type is required');
   }
-  return createThemeBase(
-    className || `${themeType}-theme`,
-    merge(baseConfig.theme, themeType === 'dark' ? darkTheme : lightTheme, theme || {}),
-  );
+  return createThemeBase(className || `${themeType}-theme`, merge(baseConfig.theme, theme || {}));
 };
 
 export type CSS = Stitches.CSS<typeof HmsStitches>;

package/src/TileMenu/StyledMenuTile.tsx

@@ -12,20 +12,21 @@ const StyledTrigger = styled(Popover.Trigger, {
   zIndex: 10,
   width: '$13',
   height: '$13',
-  color: '$textPrimary',
+  color: '$on_surface_high',
   borderRadius: '$round',
-  backgroundColor: '$menuBg',
+  backgroundColor: '$surface_bright',
+  cursor: 'pointer',
   border: 'none',
   ...flexCenter,
   '&:not([disabled]):focus': {
     outline: 'none',
-    boxShadow: '0 0 0 3px $colors$brandLight',
+    boxShadow: '0 0 0 3px $colors$primary_bright',
   },
 });
 
 const StyledContent = styled(Popover.Content, {
   fontFamily: '$sans',
-  backgroundColor: '$menuBg',
+  backgroundColor: '$surface_bright',
   padding: '$5 0',
   display: 'flex',
   flexDirection: 'column',
@@ -37,19 +38,21 @@ const StyledContent = styled(Popover.Content, {
 
 const styledItem = {
   fontSize: '$sm',
-  color: '$textPrimary',
+  color: '$on_surface_high',
   display: 'flex',
   alignItems: 'center',
   padding: '$4 $6',
   width: '100%',
+  backgroundColor: '$menuBg',
 };
 
 const StyledItemButton = styled('button', {
   ...styledItem,
   height: '$14',
   '&:hover': {
-    backgroundColor: '$menuBg',
+    backgroundColor: '$surface_brighter',
   },
+  cursor: 'pointer',
   // TODO: default focus applied cause issues with this style
   '&:focus': {
     outline: 'none',
@@ -78,8 +81,8 @@ export const Flex = styled('div', {
 });
 
 const RemoveMenuItem = styled(StyledItemButton, {
-  color: '$error',
-  borderTop: '1px solid $borderLight',
+  color: '$alert_error_default',
+  borderTop: '1px solid $border_bright',
 });
 
 interface MenuTileType {

package/src/Toast/Toast.tsx

@@ -38,13 +38,13 @@ const getToastVariant = (base: string) => {
 
 const ToastRoot = styled(ToastPrimitives.Root, {
   r: '$3',
-  bg: '$surfaceDefault',
+  bg: '$surface_default',
   p: '$10',
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
   fontFamily: '$sans',
-  border: 'solid $space$px $borderLight',
+  border: 'solid $space$px $border_bright',
   overflow: 'hidden',
   ...toastAnimation,
   '@sm': {
@@ -52,10 +52,10 @@ const ToastRoot = styled(ToastPrimitives.Root, {
   },
   variants: {
     variant: {
-      standard: getToastVariant('$secondaryDefault'),
-      warning: getToastVariant('$warning'),
-      error: getToastVariant('$error'),
-      success: getToastVariant('$success'),
+      standard: getToastVariant('$secondary_default'),
+      warning: getToastVariant('$alert_warning'),
+      error: getToastVariant('$alert_error_default'),
+      success: getToastVariant('$alert_success'),
     },
   },
   defaultVariants: {
@@ -65,18 +65,19 @@ const ToastRoot = styled(ToastPrimitives.Root, {
 
 const ToastTitle = styled(ToastPrimitives.Title, {
   fontSize: '$md',
-  color: '$textHighEmp',
+  color: '$on_surface_high',
   fontWeight: '$semiBold',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
 });
 const ToastDescription = styled(ToastPrimitives.Description, {
-  color: '$textMedEmp',
+  color: '$on_surface_medium',
 });
 const ToastClose = styled(ToastPrimitives.Close, {});
 const ToastAction = styled(ToastPrimitives.Action, {
   cursor: 'pointer',
+  background: 'none',
 });
 const ToastViewport = styled(ToastPrimitives.Viewport, {
   position: 'fixed',
@@ -142,7 +143,7 @@ const HMSToast: React.FC<HMSToastProps> = ({
         </ToastTitle>
         {description ? (
           <ToastDescription>
-            <Text variant="body1" css={{ fontWeight: '$regular', c: '$textMedEmp' }}>
+            <Text variant="body1" css={{ fontWeight: '$regular', c: '$on_surface_medium' }}>
               {description}
             </Text>
           </ToastDescription>

package/src/Tooltip/Tooltip.stories.tsx

@@ -39,7 +39,7 @@ const TooltipStoryWithString = (
 export const ExampleWithString = TooltipStoryWithString.bind({});
 
 const ExampleTitle = () => {
-  return <h3 style={{ color: '$textPrimary' }}>This is title</h3>;
+  return <h3 style={{ color: '$on_primary_high' }}>This is title</h3>;
 };
 
 const TooltipStorywithReactNode = (

package/src/Tooltip/Tooltip.tsx

@@ -9,8 +9,8 @@ const TooltipBox = styled(BaseTooltip.Content, {
   padding: '$2 $4',
   fontSize: '$xs',
 
-  color: '$textHighEmp',
-  backgroundColor: '$surfaceLight',
+  color: '$on_surface_high',
+  backgroundColor: '$surface_bright',
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
     animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
@@ -25,8 +25,8 @@ const TooltipBox = styled(BaseTooltip.Content, {
   variants: {
     outlined: {
       true: {
-        backgroundColor: '$backgroundDark',
-        border: 'solid $space$px $borderLight',
+        backgroundColor: '$background_dim',
+        border: 'solid $space$px $border_bright',
       },
     },
   },

package/src/Video/Video.tsx

@@ -11,7 +11,7 @@ export const StyledVideo = styled('video', {
   alignItems: 'center',
   borderRadius: '$2',
   objectFit: 'cover',
-  background: '$tileBg',
+  background: '$background_default',
   variants: {
     mirror: {
       true: {

package/src/VideoTile/StyledVideoTile.tsx

@@ -18,7 +18,7 @@ const Container = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  background: '$tileBg',
+  background: '$surface_default',
   variants: {
     transparentBg: {
       true: {
@@ -40,7 +40,7 @@ const Overlay = styled('div', {
 });
 
 const Info = styled('div', {
-  color: '$textPrimary',
+  color: '$on_primary_high',
   position: 'absolute',
   bottom: '5px',
   left: '50%',
@@ -56,18 +56,18 @@ const Info = styled('div', {
 
 const AttributeBox = styled('div', {
   position: 'absolute',
-  color: '$textPrimary',
+  color: '$on_primary_high',
 });
 
 const AudioIndicator = styled('div', {
   position: 'absolute',
-  top: '$2',
-  right: '$2',
-  color: '$white',
-  bg: '$error',
+  top: '$4',
+  right: '$4',
+  color: '$on_primary_high',
+  bg: '$secondary_dim',
   borderRadius: '$round',
-  width: '$13',
-  height: '$13',
+  width: '$14',
+  height: '$14',
   mb: '5px',
   ...flexCenter,
   variants: {
@@ -94,9 +94,9 @@ const AudioIndicator = styled('div', {
 const FullScreenButton = styled('button', {
   width: '2.25rem',
   height: '2.25rem',
-  color: '$textHighEmp',
+  color: '$on_surface_high',
   borderRadius: '$round',
-  backgroundColor: '$menuBg',
+  backgroundColor: '$surface_default',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -106,7 +106,7 @@ const FullScreenButton = styled('button', {
   zIndex: 5,
   '&:not([disabled]):focus': {
     outline: 'none',
-    boxShadow: '0 0 0 3px $colors$brandLight',
+    boxShadow: '0 0 0 3px $colors$primary_bright',
   },
 });
 

package/src/fixtures/chats.ts

@@ -15,7 +15,7 @@ export const makeFakeMessage = (msg: string, sender: string): HMSMessage => {
 };
 
 export const fakeMessages = [
-  makeFakeMessage('Hello from 100m', 'Yash'),
+  makeFakeMessage('Hello from 100ms', 'Yash'),
   makeFakeMessage('This is a chat example', 'admin'),
   makeFakeMessage('via the sendBroadcast action', 'Yash'),
   makeFakeMessage('Our twitter handle @100mslive', '100ms'),

package/dist/HLSView-3RDXRV7Y.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/layouts/HLSView.jsx", "../src/Prebuilt/components/HlsStatsOverlay.jsx", "../src/Prebuilt/components/HMSVideo/index.js", "../src/Prebuilt/components/HMSVideo/Controls.jsx", "../src/Prebuilt/components/HMSVideo/HMSVideo.jsx", "../src/Prebuilt/components/HMSVideo/PlayButton.jsx", "../src/Prebuilt/components/HMSVideo/VideoProgress.jsx", "../src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js", "../src/Prebuilt/components/HMSVideo/VideoTime.jsx", "../src/Prebuilt/components/HMSVideo/VolumeControl.jsx", "../src/Prebuilt/components/HMSVideo/FullscreenButton.jsx", "../src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx", "../src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useFullscreen, useToggle } from 'react-use';\nimport { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport screenfull from 'screenfull';\nimport { selectAppData, selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';\nimport { HlsStatsOverlay } from '../components/HlsStatsOverlay';\nimport { HMSVideoPlayer } from '../components/HMSVideo';\nimport { FullScreenButton } from '../components/HMSVideo/FullscreenButton';\nimport { HLSAutoplayBlockedPrompt } from '../components/HMSVideo/HLSAutoplayBlockedPrompt';\nimport { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { IconButton } from '../../IconButton';\nimport { Box, Flex } from '../../Layout';\nimport { Loading } from '../../Loading';\nimport { Text } from '../../Text';\nimport { useTheme } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';\n\nlet hlsPlayer;\n\nconst HLSView = () => {\n  const videoRef = useRef(null);\n  const hlsViewRef = useRef(null);\n  const hlsState = useHMSStore(selectHLSState);\n  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));\n  const hmsActions = useHMSActions();\n  const { themeType } = useTheme();\n  let [hlsStatsState, setHlsStatsState] = useState(null);\n  const hlsUrl = hlsState.variants[0]?.url;\n  const [availableLayers, setAvailableLayers] = useState([]);\n  const [isVideoLive, setIsVideoLive] = useState(true);\n  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);\n  const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);\n  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const isFullScreenSupported = screenfull.isEnabled;\n  const [show, toggle] = useToggle(false);\n  const isFullScreen = useFullscreen(hlsViewRef, show, {\n    onClose: () => toggle(false),\n  });\n  const [showLoader, setShowLoader] = useState(false);\n\n  // FIXME: move this logic to player controller in next release\n  useEffect(() => {\n    /**\n     * @type {HTMLVideoElement} videoEl\n     */\n    const videoEl = videoRef.current;\n    const showLoader = () => setShowLoader(true);\n    const hideLoader = () => setShowLoader(false);\n    videoEl?.addEventListener('playing', hideLoader);\n    videoEl?.addEventListener('waiting', showLoader);\n    return () => {\n      videoEl?.removeEventListener('playing', hideLoader);\n      videoEl?.removeEventListener('waiting', showLoader);\n    };\n  }, []);\n\n  /**\n   * initialize HMSHLSPlayer and add event listeners.\n   */\n  useEffect(() => {\n    let videoEl = videoRef.current;\n    const manifestLoadedHandler = ({ layers }) => {\n      setAvailableLayers(layers);\n    };\n    const layerUpdatedHandler = ({ layer }) => {\n      setCurrentSelectedQuality(layer);\n    };\n    const metadataLoadedHandler = ({ payload, ...rest }) => {\n      const parsePayload = str => {\n        try {\n          return JSON.parse(str);\n        } catch (e) {\n          return str;\n        }\n      };\n      // parse payload and extract start_time and payload\n      const duration = rest.duration;\n      const parsedPayload = parsePayload(payload);\n      switch (parsedPayload.type) {\n        case EMOJI_REACTION_TYPE:\n          window.showFlyingEmoji(parsedPayload?.emojiId, parsedPayload?.senderId);\n          break;\n        default: {\n          const toast = {\n            title: `Payload from timed Metadata ${parsedPayload}`,\n            duration: duration || 3000,\n          };\n          console.debug('Added toast ', JSON.stringify(toast));\n          ToastManager.addToast(toast);\n          break;\n        }\n      }\n    };\n    const handleError = data => {\n      console.error('[HLSView] error in hls', `${data}`);\n    };\n    const handleNoLongerLive = ({ isLive }) => {\n      setIsVideoLive(isLive);\n    };\n\n    const playbackEventHandler = data => setIsPaused(data.state === HLSPlaybackState.paused);\n\n    const handleAutoplayBlock = data => setIsHlsAutoplayBlocked(!!data);\n    if (videoEl && hlsUrl) {\n      hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);\n      hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);\n      hlsPlayer.on(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);\n      hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);\n      hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);\n      hlsPlayer.on(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);\n\n      hlsPlayer.on(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);\n      hlsPlayer.on(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);\n      return () => {\n        hlsPlayer.off(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);\n        hlsPlayer.off(HMSHLSPlayerEvents.ERROR, handleError);\n        hlsPlayer.off(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);\n        hlsPlayer.off(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);\n        hlsPlayer.off(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);\n        hlsPlayer.off(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);\n        hlsPlayer.off(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);\n        hlsPlayer.reset();\n        hlsPlayer = null;\n      };\n    }\n  }, [hlsUrl]);\n\n  /**\n   * initialize and subscribe to hlsState\n   */\n  useEffect(() => {\n    const onHLSStats = state => setHlsStatsState(state);\n    if (enablHlsStats) {\n      hlsPlayer?.on(HMSHLSPlayerEvents.STATS, onHLSStats);\n    } else {\n      hlsPlayer?.off(HMSHLSPlayerEvents.STATS, onHLSStats);\n    }\n    return () => {\n      hlsPlayer?.off(HMSHLSPlayerEvents.STATS, onHLSStats);\n    };\n  }, [enablHlsStats]);\n\n  const unblockAutoPlay = async () => {\n    try {\n      await hlsPlayer.play();\n      setIsHlsAutoplayBlocked(false);\n    } catch (error) {\n      console.error('Tried to unblock Autoplay failed with', error.message);\n    }\n  };\n\n  const handleQuality = useCallback(\n    quality => {\n      if (hlsPlayer) {\n        setIsUserSelectedAuto(quality.height.toString().toLowerCase() === 'auto');\n        hlsPlayer.setLayer(quality);\n      }\n    },\n    [availableLayers], //eslint-disable-line\n  );\n\n  const sfnOverlayClose = () => {\n    hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);\n  };\n\n  return (\n    <Flex\n      key=\"hls-viewer\"\n      id={`hls-viewer-${themeType}`}\n      ref={hlsViewRef}\n      css={{\n        size: '100%',\n      }}\n    >\n      {hlsStatsState?.url && enablHlsStats ? (\n        <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />\n      ) : null}\n      {hlsUrl && hlsState.running ? (\n        <Flex\n          id=\"hls-player-container\"\n          align=\"center\"\n          justify=\"center\"\n          css={{\n            width: '100%',\n            margin: '0 auto',\n            height: '100%',\n          }}\n        >\n          <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />\n          {showLoader && (\n            <Flex\n              align=\"center\"\n              justify=\"center\"\n              css={{\n                position: 'absolute',\n              }}\n            >\n              <Loading width={72} height={72} />\n            </Flex>\n          )}\n          <HMSVideoPlayer.Root ref={videoRef}>\n            {hlsPlayer && (\n              <HMSVideoPlayer.Progress\n                onValueChange={currentTime => {\n                  hlsPlayer.seekTo(currentTime);\n                }}\n                hlsPlayer={hlsPlayer}\n              />\n            )}\n\n            <HMSVideoPlayer.Controls.Root css={{ p: '$4 $8' }}>\n              <HMSVideoPlayer.Controls.Left>\n                <HMSVideoPlayer.PlayButton\n                  onClick={async () => {\n                    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();\n                  }}\n                  isPaused={isPaused}\n                />\n                <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />\n                <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />\n              </HMSVideoPlayer.Controls.Left>\n\n              <HMSVideoPlayer.Controls.Right>\n                {availableLayers.length > 0 ? (\n                  <>\n                    <IconButton\n                      variant=\"standard\"\n                      css={{ px: '$2' }}\n                      onClick={async () => {\n                        await hlsPlayer.seekToLivePosition();\n                        setIsVideoLive(true);\n                      }}\n                      key=\"jump-to-live_btn\"\n                      data-testid=\"jump-to-live_btn\"\n                    >\n                      <Tooltip title=\"Go to Live\" side=\"top\">\n                        <Flex justify=\"center\" gap={2} align=\"center\">\n                          <Box\n                            css={{\n                              height: '$4',\n                              width: '$4',\n                              background: isVideoLive ? '$error' : '$white',\n                              r: '$1',\n                            }}\n                          />\n                          <Text\n                            variant={{\n                              '@sm': 'xs',\n                            }}\n                          >\n                            {isVideoLive ? 'LIVE' : 'GO LIVE'}\n                          </Text>\n                        </Flex>\n                      </Tooltip>\n                    </IconButton>\n                    <HLSQualitySelector\n                      layers={availableLayers}\n                      selection={currentSelectedQuality}\n                      onQualityChange={handleQuality}\n                      isAuto={isUserSelectedAuto}\n                    />\n                  </>\n                ) : null}\n                {isFullScreenSupported ? (\n                  <FullScreenButton\n                    isFullScreen={isFullScreen}\n                    onToggle={toggle}\n                    icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}\n                  />\n                ) : null}\n              </HMSVideoPlayer.Controls.Right>\n            </HMSVideoPlayer.Controls.Root>\n          </HMSVideoPlayer.Root>\n        </Flex>\n      ) : (\n        <Flex align=\"center\" justify=\"center\" css={{ size: '100%', px: '$10' }}>\n          <Text variant=\"md\" css={{ textAlign: 'center' }}>\n            Waiting for the stream to start...\n          </Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default HLSView;\n", "import React, { memo } from 'react';\nimport { CloseIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport IconButton from '../IconButton';\n\nexport function HlsStatsOverlay({ hlsStatsState, onClose }) {\n  return (\n    <Flex\n      css={{\n        position: 'absolute',\n        width: '$80',\n        marginLeft: '$8',\n        padding: '$8 $8 $10',\n        zIndex: 10,\n        backgroundColor: 'rgba(55,59,66, 0.84)',\n        borderRadius: '$1',\n      }}\n      direction=\"column\"\n    >\n      <IconButton css={{ position: 'absolute', top: '$2', right: '$2' }} onClick={onClose}>\n        <CloseIcon />\n      </IconButton>\n      <HlsStatsRow label=\"URL\">\n        <Flex align=\"center\">\n          <a\n            style={{ cursor: 'pointer', textDecoration: 'underline' }}\n            href={hlsStatsState?.url}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            Stream url\n          </a>\n        </Flex>\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Video size\">\n        {` ${hlsStatsState?.videoSize?.width}x${hlsStatsState?.videoSize?.height}`}\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Buffer duration\">{hlsStatsState?.bufferedDuration?.toFixed(2)} </HlsStatsRow>\n      <HlsStatsRow label=\"Connection speed\">\n        {`${(hlsStatsState?.bandwidthEstimate / (1000 * 1000)).toFixed(2)} Mbps`}\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Bitrate\">{`${(hlsStatsState?.bitrate / (1000 * 1000)).toFixed(2)} Mbps`}</HlsStatsRow>\n      <HlsStatsRow label=\"distance from live\">\n        {getDurationFromSeconds(hlsStatsState.distanceFromLive / 1000)}\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Dropped frames\">{`${hlsStatsState?.droppedFrames}`}</HlsStatsRow>\n    </Flex>\n  );\n}\n\n/**\n * Extracted from HLS new Player PR.\n * TODO: remove this and use HMSVideoUtils.js\n * when that code is merged\n */\nexport function getDurationFromSeconds(timeInSeconds) {\n  let time = Math.floor(timeInSeconds);\n  const hours = Math.floor(time / 3600);\n  time = time - hours * 3600;\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.floor(time - minutes * 60);\n\n  const prefixedMinutes = `${minutes < 10 ? '0' + minutes : minutes}`;\n  const prefixedSeconds = `${seconds < 10 ? '0' + seconds : seconds}`;\n\n  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;\n  if (hours) {\n    const prefixedHours = `${hours < 10 ? '0' + hours : hours}`;\n    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;\n  }\n  return videoTimeStr;\n}\n\nconst HlsStatsRow = memo(({ label, children }) => {\n  return (\n    <Flex gap={4} justify=\"center\" css={{ width: '100%' }}>\n      <Text\n        css={{\n          width: '50%',\n          '@md': { fontSize: '$md' },\n          '@sm': { fontSize: '$sm' },\n          // textAlign: \"right\",\n        }}\n      >\n        {label}\n      </Text>\n      <Text\n        css={{\n          '@md': { fontSize: '$md' },\n          '@sm': { fontSize: '$sm' },\n          width: '50%',\n          overflowWrap: 'break-word',\n          // textAlign: \"left\",\n        }}\n      >\n        {children}\n      </Text>\n    </Flex>\n  );\n});\n", "import { LeftControls, RightControls, VideoControls } from './Controls';\nimport { HMSVideo } from './HMSVideo';\nimport { PlayButton } from './PlayButton';\nimport { VideoProgress } from './VideoProgress';\nimport { VideoTime } from './VideoTime';\nimport { VolumeControl } from './VolumeControl';\n\nexport const HMSVideoPlayer = {\n  Root: HMSVideo,\n  PlayButton: PlayButton,\n  Progress: VideoProgress,\n  Duration: VideoTime,\n  Volume: VolumeControl,\n  Controls: {\n    Root: VideoControls,\n    Left: LeftControls,\n    Right: RightControls,\n  },\n};\n", "import { Flex, styled } from '../../../';\n\nexport const VideoControls = styled(Flex, {\n  justifyContent: 'center',\n  alignItems: 'center',\n  width: '100%',\n  gap: '$2',\n});\n\nexport const LeftControls = styled(Flex, {\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n  width: '100%',\n  gap: '$2',\n});\nexport const RightControls = styled(Flex, {\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  width: '100%',\n  gap: '$2',\n});\n", "import React, { forwardRef } from 'react';\nimport { Flex } from '../../../';\n\nexport const HMSVideo = forwardRef(({ children }, videoRef) => {\n  return (\n    <Flex data-testid=\"hms-video\" css={{ size: '100%' }} direction=\"column\">\n      <video style={{ flex: '1 1 0', margin: '0 auto', minHeight: '0' }} ref={videoRef} playsInline />\n      {children}\n    </Flex>\n  );\n});\n", "import React from 'react';\nimport { PauseIcon, PlayIcon } from '@100mslive/react-icons';\nimport { IconButton, Tooltip } from '../../../';\n\nexport const PlayButton = ({ onClick, isPaused }) => {\n  return (\n    <Tooltip title={`${isPaused ? 'Play' : 'Pause'}`} side=\"top\">\n      <IconButton onClick={onClick} data-testid=\"play_pause_btn\">\n        {isPaused ? <PlayIcon width={32} height={32} /> : <PauseIcon width={32} height={32} />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n", "import React, { useEffect, useRef, useState } from 'react';\nimport { Box, Flex } from '../../../';\nimport { getPercentage } from './HMSVIdeoUtils';\n\nexport const VideoProgress = ({ onValueChange, hlsPlayer }) => {\n  const [videoProgress, setVideoProgress] = useState(0);\n  const [bufferProgress, setBufferProgress] = useState(0);\n  const progressRootRef = useRef();\n\n  useEffect(() => {\n    const videoEl = hlsPlayer.getVideoElement();\n    const timeupdateHandler = () => {\n      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));\n      let bufferProgress = 0;\n      if (videoEl.buffered.length > 0) {\n        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration));\n      }\n\n      setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);\n      setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);\n    };\n    if (videoEl) {\n      videoEl.addEventListener('timeupdate', timeupdateHandler);\n    }\n    return function cleanup() {\n      if (videoEl) {\n        videoEl.removeEventListener('timeupdate', timeupdateHandler);\n      }\n    };\n  }, [hlsPlayer]);\n\n  const onProgressChangeHandler = e => {\n    const userClickedX = e.clientX - progressRootRef.current.offsetLeft;\n    const progressBarWidth = progressRootRef.current.offsetWidth;\n    const progress = Math.floor(getPercentage(userClickedX, progressBarWidth));\n    const videoEl = hlsPlayer.getVideoElement();\n    const currentTime = (progress * videoEl.duration) / 100;\n\n    if (onValueChange) {\n      onValueChange(currentTime);\n    }\n  };\n\n  return hlsPlayer.getVideoElement() ? (\n    <Flex\n      ref={progressRootRef}\n      css={{ paddingLeft: '$8', paddingRight: '$8', cursor: 'pointer' }}\n      onClick={onProgressChangeHandler}\n    >\n      <Box\n        id=\"video-actual\"\n        css={{\n          display: 'inline',\n          width: `${videoProgress}%`,\n          background: '$primaryDefault',\n          height: '0.3rem',\n        }}\n      />\n      <Box\n        id=\"video-buffer\"\n        css={{\n          width: `${bufferProgress - videoProgress}%`,\n          background: '$primaryDark',\n          height: '0.3rem',\n        }}\n      />\n      <Box\n        id=\"video-rest\"\n        css={{\n          width: `${100 - bufferProgress}%`,\n          background: '$grayLight',\n          height: '0.3rem',\n        }}\n      />\n    </Flex>\n  ) : null;\n};\n", "export function getPercentage(a, b) {\n  return (a / b) * 100;\n}\n\n/**\n *\n * @param {number} timeInSeconds - if given as floating point value, it is floored.\n * @returns  a string representing timeInSeconds in HH:MM:SS format.\n * (e.g) getDurationFromSeconds(3910) returns \"1:05:10\"\n */\nexport function getDurationFromSeconds(timeInSeconds) {\n  let time = Math.floor(timeInSeconds);\n  const hours = Math.floor(time / 3600);\n  time = time - hours * 3600;\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.floor(time - minutes * 60);\n\n  const prefixedMinutes = `${minutes < 10 ? `0${minutes}` : minutes}`;\n  const prefixedSeconds = `${seconds < 10 ? `0${seconds}` : seconds}`;\n\n  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;\n  if (hours) {\n    const prefixedHours = `${hours < 10 ? `0${hours}` : hours}`;\n    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;\n  }\n  return videoTimeStr;\n}\n", "import React, { useEffect, useState } from 'react';\nimport { HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport { Text } from '../../../';\nimport { getDurationFromSeconds } from './HMSVIdeoUtils';\n\nexport const VideoTime = ({ hlsPlayer }) => {\n  const [videoTime, setVideoTime] = useState('');\n\n  useEffect(() => {\n    const timeupdateHandler = currentTime => setVideoTime(getDurationFromSeconds(currentTime));\n    if (hlsPlayer) {\n      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);\n    }\n    return function cleanup() {\n      if (hlsPlayer) {\n        hlsPlayer.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);\n      }\n    };\n  }, [hlsPlayer]);\n\n  return hlsPlayer ? (\n    <Text\n      css={{\n        minWidth: '$16',\n      }}\n      variant={{\n        '@sm': 'xs',\n      }}\n    >{`${videoTime}`}</Text>\n  ) : null;\n};\n", "import React, { useState } from 'react';\nimport { SpeakerIcon } from '@100mslive/react-icons';\nimport { Flex, Slider } from '../../../';\n\nexport const VolumeControl = ({ hlsPlayer }) => {\n  const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);\n\n  return (\n    <Flex align=\"center\" css={{ color: '$white' }}>\n      <SpeakerIcon\n        style={{ cursor: 'pointer' }}\n        onClick={() => {\n          setVolume(0);\n          if (hlsPlayer) {\n            hlsPlayer.setVolume(0);\n          }\n        }}\n      />\n      <Slider\n        css={{\n          mx: '$4',\n          w: '$20',\n          cursor: 'pointer',\n          '@sm': { w: '$14' },\n          '@xs': { w: '$14' },\n        }}\n        min={0}\n        max={100}\n        step={1}\n        value={[volume]}\n        onValueChange={volume => {\n          hlsPlayer.setVolume(volume);\n          setVolume(volume);\n        }}\n        thumbStyles={{ w: '$6', h: '$6' }}\n      />\n    </Flex>\n  );\n};\n", "import React from 'react';\nimport { Flex, IconButton, Tooltip } from '../../../';\n\nexport const FullScreenButton = ({ isFullScreen, icon, onToggle }) => {\n  return (\n    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side=\"top\">\n      <IconButton\n        variant=\"standard\"\n        css={{ margin: '0px' }}\n        onClick={onToggle}\n        key=\"fullscreen_btn\"\n        data-testid=\"fullscreen_btn\"\n      >\n        <Flex>{icon}</Flex>\n      </IconButton>\n    </Tooltip>\n  );\n};\n", "import React from 'react';\nimport { Button, Dialog, Text } from '../../../';\nimport { DialogContent, DialogRow } from '../../primitives/DialogContent';\n\nexport function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={value => {\n        if (!value) {\n          unblockAutoPlay();\n        }\n      }}\n    >\n      <DialogContent title=\"Attention\" closeable={false}>\n        <DialogRow>\n          <Text variant=\"md\">\n            The browser wants us to get a confirmation for playing the HLS Stream. Please click \"play stream\" to\n            proceed.\n          </Text>\n        </DialogRow>\n        <DialogRow justify=\"end\">\n          <Button\n            variant=\"primary\"\n            onClick={() => {\n              unblockAutoPlay();\n            }}\n          >\n            Play stream\n          </Button>\n        </DialogRow>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n", "import React, { useState } from 'react';\nimport { CheckCircleIcon, SettingsIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, Tooltip } from '../../../';\n\nexport function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {\n  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);\n\n  return (\n    <Dropdown.Root open={qualityDropDownOpen} onOpenChange={value => setQualityDropDownOpen(value)}>\n      <Dropdown.Trigger asChild data-testid=\"quality_selector\">\n        <Flex\n          css={{\n            color: '$textPrimary',\n            r: '$1',\n            cursor: 'pointer',\n            p: '$2',\n          }}\n        >\n          <Tooltip title=\"Select Quality\" side=\"top\">\n            <Flex align=\"center\">\n              <Box\n                css={{\n                  w: '$9',\n                  h: '$9',\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                }}\n              >\n                <SettingsIcon />\n              </Box>\n              <Text\n                variant={{\n                  '@md': 'sm',\n                  '@sm': 'xs',\n                  '@xs': 'tiny',\n                }}\n                css={{ display: 'flex', alignItems: 'center', ml: '$2' }}\n              >\n                {isAuto && (\n                  <>\n                    Auto\n                    <Box\n                      css={{\n                        mx: '$2',\n                        w: '$2',\n                        h: '$2',\n                        background: '$textPrimary',\n                        r: '$1',\n                      }}\n                    />\n                  </>\n                )}\n                {selection && Math.min(selection.width, selection.height)}p\n              </Text>\n            </Flex>\n          </Tooltip>\n        </Flex>\n      </Dropdown.Trigger>\n      {layers.length > 0 && (\n        <Dropdown.Content sideOffset={5} align=\"end\" css={{ height: 'auto', maxHeight: '$96', w: '$64' }}>\n          <Dropdown.Item onClick={() => onQualityChange({ height: 'auto' })} key=\"auto\">\n            <Text css={{ flex: '1 1 0' }}>Automatic</Text>\n            {isAuto && <CheckCircleIcon />}\n          </Dropdown.Item>\n          {layers.map(layer => {\n            return (\n              <Dropdown.Item onClick={() => onQualityChange(layer)} key={layer.width}>\n                <Text css={{ flex: '1 1 0' }}>{getQualityText(layer)}</Text>\n                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (\n                  <CheckCircleIcon />\n                )}\n              </Dropdown.Item>\n            );\n          })}\n        </Dropdown.Content>\n      )}\n    </Dropdown.Root>\n  );\n}\n\nconst getQualityText = layer =>\n  `${Math.min(layer.height, layer.width)}p (${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,OAAOA,WAAS,aAAa,aAAAC,YAAW,UAAAC,SAAQ,YAAAC,iBAAgB;AAChE,SAAS,eAAe,iBAAiB;AACzC,SAAS,kBAAkB,cAAc,sBAAAC,2BAA0B;AACnE,OAAO,gBAAgB;AACvB,SAAS,eAAe,gBAAgB,eAAe,mBAAmB;AAC1E,SAAS,YAAY,kBAAkB;;;ACLvC;AAAA,OAAO,SAAS,YAAY;AAC5B,SAAS,iBAAiB;AAKnB,SAAS,gBAAgB,EAAE,eAAe,QAAQ,GAAG;AAN5D;AAOE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,UAAU;AAAA,QACV,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,cAAc;AAAA,MAChB;AAAA,MACA,WAAU;AAAA;AAAA,IAEV,oCAAC,sBAAW,KAAK,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,KAAK,GAAG,SAAS,WAC1E,oCAAC,eAAU,CACb;AAAA,IACA,oCAAC,eAAY,OAAM,SACjB,oCAAC,QAAK,OAAM,YACV;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,QAAQ,WAAW,gBAAgB,YAAY;AAAA,QACxD,MAAM,+CAAe;AAAA,QACrB,QAAO;AAAA,QACP,KAAI;AAAA;AAAA,MACL;AAAA,IAED,CACF,CACF;AAAA,IACA,oCAAC,eAAY,OAAM,gBAChB,KAAI,oDAAe,cAAf,mBAA0B,KAAK,KAAI,oDAAe,cAAf,mBAA0B,MAAM,EAC1E;AAAA,IACA,oCAAC,eAAY,OAAM,sBAAmB,oDAAe,qBAAf,mBAAiC,QAAQ,IAAG,GAAC;AAAA,IACnF,oCAAC,eAAY,OAAM,sBAChB,KAAI,+CAAe,sBAAqB,MAAO,MAAO,QAAQ,CAAC,CAAC,OACnE;AAAA,IACA,oCAAC,eAAY,OAAM,aAAW,KAAI,+CAAe,YAAW,MAAO,MAAO,QAAQ,CAAC,CAAC,OAAQ;AAAA,IAC5F,oCAAC,eAAY,OAAM,wBAChB,uBAAuB,cAAc,mBAAmB,GAAI,CAC/D;AAAA,IACA,oCAAC,eAAY,OAAM,oBAAkB,GAAG,+CAAe,aAAa,EAAG;AAAA,EACzE;AAEJ;AAOO,SAAS,uBAAuB,eAAe;AACpD,MAAI,OAAO,KAAK,MAAM,aAAa;AACnC,QAAM,QAAQ,KAAK,MAAM,OAAO,IAAI;AACpC,SAAO,OAAO,QAAQ;AACtB,QAAM,UAAU,KAAK,MAAM,OAAO,EAAE;AACpC,QAAM,UAAU,KAAK,MAAM,OAAO,UAAU,EAAE;AAE9C,QAAM,kBAAkB,GAAG,UAAU,KAAK,MAAM,UAAU,OAAO;AACjE,QAAM,kBAAkB,GAAG,UAAU,KAAK,MAAM,UAAU,OAAO;AAEjE,MAAI,eAAe,GAAG,eAAe,IAAI,eAAe;AACxD,MAAI,OAAO;AACT,UAAM,gBAAgB,GAAG,QAAQ,KAAK,MAAM,QAAQ,KAAK;AACzD,mBAAe,GAAG,aAAa,IAAI,eAAe,IAAI,eAAe;AAAA,EACvE;AACA,SAAO;AACT;AAEA,IAAM,cAAc,KAAK,CAAC,EAAE,OAAO,SAAS,MAAM;AAChD,SACE,oCAAC,QAAK,KAAK,GAAG,SAAQ,UAAS,KAAK,EAAE,OAAO,OAAO,KAClD;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,OAAO;AAAA,QACP,OAAO,EAAE,UAAU,MAAM;AAAA,QACzB,OAAO,EAAE,UAAU,MAAM;AAAA;AAAA,MAE3B;AAAA;AAAA,IAEC;AAAA,EACH,GACA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,OAAO,EAAE,UAAU,MAAM;AAAA,QACzB,OAAO,EAAE,UAAU,MAAM;AAAA,QACzB,OAAO;AAAA,QACP,cAAc;AAAA;AAAA,MAEhB;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ,CAAC;;;ACpGD;;;ACAA;AAEO,IAAM,gBAAgB,OAAO,MAAM;AAAA,EACxC,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,KAAK;AACP,CAAC;AAEM,IAAM,eAAe,OAAO,MAAM;AAAA,EACvC,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,KAAK;AACP,CAAC;AACM,IAAM,gBAAgB,OAAO,MAAM;AAAA,EACxC,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,KAAK;AACP,CAAC;;;ACpBD;AAAA,OAAOC,UAAS,kBAAkB;AAG3B,IAAM,WAAW,WAAW,CAAC,EAAE,SAAS,GAAG,aAAa;AAC7D,SACE,gBAAAC,OAAA,cAAC,QAAK,eAAY,aAAY,KAAK,EAAE,MAAM,OAAO,GAAG,WAAU,YAC7D,gBAAAA,OAAA,cAAC,WAAM,OAAO,EAAE,MAAM,SAAS,QAAQ,UAAU,WAAW,IAAI,GAAG,KAAK,UAAU,aAAW,MAAC,GAC7F,QACH;AAEJ,CAAC;;;ACVD;AAAA,OAAOC,YAAW;AAClB,SAAS,WAAW,gBAAgB;AAG7B,IAAM,aAAa,CAAC,EAAE,SAAS,SAAS,MAAM;AACnD,SACE,gBAAAC,OAAA,cAAC,WAAQ,OAAO,GAAG,WAAW,SAAS,OAAO,IAAI,MAAK,SACrD,gBAAAA,OAAA,cAAC,cAAW,SAAkB,eAAY,oBACvC,WAAW,gBAAAA,OAAA,cAAC,YAAS,OAAO,IAAI,QAAQ,IAAI,IAAK,gBAAAA,OAAA,cAAC,aAAU,OAAO,IAAI,QAAQ,IAAI,CACtF,CACF;AAEJ;;;ACZA;AAAA,OAAOC,UAAS,WAAW,QAAQ,gBAAgB;;;ACAnD;AAAO,SAAS,cAAc,GAAG,GAAG;AAClC,SAAQ,IAAI,IAAK;AACnB;AAQO,SAASC,wBAAuB,eAAe;AACpD,MAAI,OAAO,KAAK,MAAM,aAAa;AACnC,QAAM,QAAQ,KAAK,MAAM,OAAO,IAAI;AACpC,SAAO,OAAO,QAAQ;AACtB,QAAM,UAAU,KAAK,MAAM,OAAO,EAAE;AACpC,QAAM,UAAU,KAAK,MAAM,OAAO,UAAU,EAAE;AAE9C,QAAM,kBAAkB,GAAG,UAAU,KAAK,IAAI,OAAO,KAAK,OAAO;AACjE,QAAM,kBAAkB,GAAG,UAAU,KAAK,IAAI,OAAO,KAAK,OAAO;AAEjE,MAAI,eAAe,GAAG,eAAe,IAAI,eAAe;AACxD,MAAI,OAAO;AACT,UAAM,gBAAgB,GAAG,QAAQ,KAAK,IAAI,KAAK,KAAK,KAAK;AACzD,mBAAe,GAAG,aAAa,IAAI,eAAe,IAAI,eAAe;AAAA,EACvE;AACA,SAAO;AACT;;;ADtBO,IAAM,gBAAgB,CAAC,EAAE,eAAe,WAAAC,WAAU,MAAM;AAC7D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,kBAAkB,OAAO;AAE/B,YAAU,MAAM;AACd,UAAM,UAAUA,WAAU,gBAAgB;AAC1C,UAAM,oBAAoB,MAAM;AAXpC;AAYM,YAAMC,iBAAgB,KAAK,MAAM,cAAc,QAAQ,aAAa,QAAQ,QAAQ,CAAC;AACrF,UAAIC,kBAAiB;AACrB,UAAI,QAAQ,SAAS,SAAS,GAAG;AAC/B,QAAAA,kBAAiB,KAAK,MAAM,eAAc,aAAQ,aAAR,mBAAkB,IAAI,IAAI,QAAQ,QAAQ,CAAC;AAAA,MACvF;AAEA,uBAAiB,MAAMD,cAAa,IAAI,IAAIA,cAAa;AACzD,wBAAkB,MAAMC,eAAc,IAAI,IAAIA,eAAc;AAAA,IAC9D;AACA,QAAI,SAAS;AACX,cAAQ,iBAAiB,cAAc,iBAAiB;AAAA,IAC1D;AACA,WAAO,SAAS,UAAU;AACxB,UAAI,SAAS;AACX,gBAAQ,oBAAoB,cAAc,iBAAiB;AAAA,MAC7D;AAAA,IACF;AAAA,EACF,GAAG,CAACF,UAAS,CAAC;AAEd,QAAM,0BAA0B,OAAK;AACnC,UAAM,eAAe,EAAE,UAAU,gBAAgB,QAAQ;AACzD,UAAM,mBAAmB,gBAAgB,QAAQ;AACjD,UAAM,WAAW,KAAK,MAAM,cAAc,cAAc,gBAAgB,CAAC;AACzE,UAAM,UAAUA,WAAU,gBAAgB;AAC1C,UAAM,cAAe,WAAW,QAAQ,WAAY;AAEpD,QAAI,eAAe;AACjB,oBAAc,WAAW;AAAA,IAC3B;AAAA,EACF;AAEA,SAAOA,WAAU,gBAAgB,IAC/B,gBAAAG,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK,EAAE,aAAa,MAAM,cAAc,MAAM,QAAQ,UAAU;AAAA,MAChE,SAAS;AAAA;AAAA,IAET,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,KAAK;AAAA,UACH,SAAS;AAAA,UACT,OAAO,GAAG,aAAa;AAAA,UACvB,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,IACA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,KAAK;AAAA,UACH,OAAO,GAAG,iBAAiB,aAAa;AAAA,UACxC,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,IACA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,KAAK;AAAA,UACH,OAAO,GAAG,MAAM,cAAc;AAAA,UAC9B,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,EACF,IACE;AACN;;;AE5EA;AAAA,OAAOC,UAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAC3C,SAAS,0BAA0B;AAI5B,IAAM,YAAY,CAAC,EAAE,WAAAC,WAAU,MAAM;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAS,EAAE;AAE7C,EAAAC,WAAU,MAAM;AACd,UAAM,oBAAoB,iBAAe,aAAaC,wBAAuB,WAAW,CAAC;AACzF,QAAIH,YAAW;AACb,MAAAA,WAAU,GAAG,mBAAmB,cAAc,iBAAiB;AAAA,IACjE;AACA,WAAO,SAAS,UAAU;AACxB,UAAIA,YAAW;AACb,QAAAA,WAAU,IAAI,mBAAmB,cAAc,iBAAiB;AAAA,MAClE;AAAA,IACF;AAAA,EACF,GAAG,CAACA,UAAS,CAAC;AAEd,SAAOA,aACL,gBAAAI,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,OAAO;AAAA,MACT;AAAA;AAAA,IACA,GAAG,SAAS;AAAA,EAAG,IACf;AACN;;;AC9BA;AAAA,OAAOC,UAAS,YAAAC,iBAAgB;AAChC,SAAS,mBAAmB;AAGrB,IAAM,gBAAgB,CAAC,EAAE,WAAAC,WAAU,MAAM;AAJhD;AAKE,QAAM,CAAC,QAAQ,SAAS,IAAIC,WAAS,KAAAD,cAAA,gBAAAA,WAAW,WAAX,YAAqB,GAAG;AAE7D,SACE,gBAAAE,OAAA,cAAC,QAAK,OAAM,UAAS,KAAK,EAAE,OAAO,SAAS,KAC1C,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,UAAU;AAAA,MAC3B,SAAS,MAAM;AACb,kBAAU,CAAC;AACX,YAAIF,YAAW;AACb,UAAAA,WAAU,UAAU,CAAC;AAAA,QACvB;AAAA,MACF;AAAA;AAAA,EACF,GACA,gBAAAE,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,OAAO,EAAE,GAAG,MAAM;AAAA,QAClB,OAAO,EAAE,GAAG,MAAM;AAAA,MACpB;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,CAAC,MAAM;AAAA,MACd,eAAe,CAAAC,YAAU;AACvB,QAAAH,WAAU,UAAUG,OAAM;AAC1B,kBAAUA,OAAM;AAAA,MAClB;AAAA,MACA,aAAa,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA;AAAA,EAClC,CACF;AAEJ;;;AP/BO,IAAM,iBAAiB;AAAA,EAC5B,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;;;AQlBA;AAAA,OAAOC,YAAW;AAGX,IAAM,mBAAmB,CAAC,EAAE,cAAc,MAAM,SAAS,MAAM;AACpE,SACE,gBAAAC,OAAA,cAAC,WAAQ,OAAO,GAAG,eAAe,SAAS,IAAI,eAAe,MAAK,SACjE,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,KAAK,EAAE,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,KAAI;AAAA,MACJ,eAAY;AAAA;AAAA,IAEZ,gBAAAA,OAAA,cAAC,YAAM,IAAK;AAAA,EACd,CACF;AAEJ;;;ACjBA;AAAA,OAAOC,YAAW;AAIX,SAAS,yBAAyB,EAAE,MAAM,gBAAgB,GAAG;AAClE,SACE,gBAAAC,OAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,cAAc,WAAS;AACrB,YAAI,CAAC,OAAO;AACV,0BAAgB;AAAA,QAClB;AAAA,MACF;AAAA;AAAA,IAEA,gBAAAA,OAAA,cAAC,iBAAc,OAAM,aAAY,WAAW,SAC1C,gBAAAA,OAAA,cAAC,iBACC,gBAAAA,OAAA,cAAC,QAAK,SAAQ,QAAK,+GAGnB,CACF,GACA,gBAAAA,OAAA,cAAC,aAAU,SAAQ,SACjB,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,0BAAgB;AAAA,QAClB;AAAA;AAAA,MACD;AAAA,IAED,CACF,CACF;AAAA,EACF;AAEJ;;;AClCA;AAAA,OAAOC,UAAS,YAAAC,iBAAgB;AAChC,SAAS,iBAAiB,oBAAoB;AAGvC,SAAS,mBAAmB,EAAE,QAAQ,iBAAiB,WAAW,OAAO,GAAG;AACjF,QAAM,CAAC,qBAAqB,sBAAsB,IAAIC,UAAS,KAAK;AAEpE,SACE,gBAAAC,OAAA,cAAC,SAAS,MAAT,EAAc,MAAM,qBAAqB,cAAc,WAAS,uBAAuB,KAAK,KAC3F,gBAAAA,OAAA,cAAC,SAAS,SAAT,EAAiB,SAAO,MAAC,eAAY,sBACpC,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,OAAO;AAAA,QACP,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA;AAAA,IAEA,gBAAAA,OAAA,cAAC,WAAQ,OAAM,kBAAiB,MAAK,SACnC,gBAAAA,OAAA,cAAC,QAAK,OAAM,YACV,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA;AAAA,MAEA,gBAAAA,OAAA,cAAC,kBAAa;AAAA,IAChB,GACA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,UACP,OAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO;AAAA,QACT;AAAA,QACA,KAAK,EAAE,SAAS,QAAQ,YAAY,UAAU,IAAI,KAAK;AAAA;AAAA,MAEtD,UACC,gBAAAA,OAAA,cAAAA,OAAA,gBAAE,QAEA,gBAAAA,OAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,YACH,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,GAAG;AAAA,YACH,YAAY;AAAA,YACZ,GAAG;AAAA,UACL;AAAA;AAAA,MACF,CACF;AAAA,MAED,aAAa,KAAK,IAAI,UAAU,OAAO,UAAU,MAAM;AAAA,MAAE;AAAA,IAC5D,CACF,CACF;AAAA,EACF,CACF,GACC,OAAO,SAAS,KACf,gBAAAA,OAAA,cAAC,SAAS,SAAT,EAAiB,YAAY,GAAG,OAAM,OAAM,KAAK,EAAE,QAAQ,QAAQ,WAAW,OAAO,GAAG,MAAM,KAC7F,gBAAAA,OAAA,cAAC,SAAS,MAAT,EAAc,SAAS,MAAM,gBAAgB,EAAE,QAAQ,OAAO,CAAC,GAAG,KAAI,UACrE,gBAAAA,OAAA,cAAC,QAAK,KAAK,EAAE,MAAM,QAAQ,KAAG,WAAS,GACtC,UAAU,gBAAAA,OAAA,cAAC,qBAAgB,CAC9B,GACC,OAAO,IAAI,WAAS;AACnB,WACE,gBAAAA,OAAA,cAAC,SAAS,MAAT,EAAc,SAAS,MAAM,gBAAgB,KAAK,GAAG,KAAK,MAAM,SAC/D,gBAAAA,OAAA,cAAC,QAAK,KAAK,EAAE,MAAM,QAAQ,KAAI,eAAe,KAAK,CAAE,GACpD,CAAC,UAAU,MAAM,WAAU,uCAAW,UAAS,MAAM,YAAW,uCAAW,WAC1E,gBAAAA,OAAA,cAAC,qBAAgB,CAErB;AAAA,EAEJ,CAAC,CACH,CAEJ;AAEJ;AAEA,IAAM,iBAAiB,WACrB,GAAG,KAAK,IAAI,MAAM,QAAQ,MAAM,KAAK,CAAC,OAAO,OAAO,MAAM,UAAU,GAAI,IAAI,KAAM,QAAQ,CAAC,CAAC;;;AZ7D9F,IAAI;AAEJ,IAAM,UAAU,MAAM;AAtBtB;AAuBE,QAAM,WAAWC,QAAO,IAAI;AAC5B,QAAM,aAAaA,QAAO,IAAI;AAC9B,QAAM,WAAW,YAAY,cAAc;AAC3C,QAAM,gBAAgB,YAAY,cAAc,SAAS,QAAQ,CAAC;AAClE,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,MAAI,CAAC,eAAe,gBAAgB,IAAIC,UAAS,IAAI;AACrD,QAAM,UAAS,cAAS,SAAS,CAAC,MAAnB,mBAAsB;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,UAAS,CAAC,CAAC;AACzD,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAS,IAAI;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,IAAIA,UAAS,IAAI;AACjE,QAAM,CAAC,wBAAwB,yBAAyB,IAAIA,UAAS,IAAI;AACzE,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA,UAAS,KAAK;AACtE,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAS,KAAK;AAC9C,QAAM,wBAAwB,WAAW;AACzC,QAAM,CAAC,MAAM,MAAM,IAAI,UAAU,KAAK;AACtC,QAAM,eAAe,cAAc,YAAY,MAAM;AAAA,IACnD,SAAS,MAAM,OAAO,KAAK;AAAA,EAC7B,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAIA,UAAS,KAAK;AAGlD,EAAAC,WAAU,MAAM;AAId,UAAM,UAAU,SAAS;AACzB,UAAMC,cAAa,MAAM,cAAc,IAAI;AAC3C,UAAM,aAAa,MAAM,cAAc,KAAK;AAC5C,uCAAS,iBAAiB,WAAW;AACrC,uCAAS,iBAAiB,WAAWA;AACrC,WAAO,MAAM;AACX,yCAAS,oBAAoB,WAAW;AACxC,yCAAS,oBAAoB,WAAWA;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,CAAC;AAKL,EAAAD,WAAU,MAAM;AACd,QAAI,UAAU,SAAS;AACvB,UAAM,wBAAwB,CAAC,EAAE,OAAO,MAAM;AAC5C,yBAAmB,MAAM;AAAA,IAC3B;AACA,UAAM,sBAAsB,CAAC,EAAE,MAAM,MAAM;AACzC,gCAA0B,KAAK;AAAA,IACjC;AACA,UAAM,wBAAwB,CAACE,QAAyB;AAAzB,eAAAA,KAAE,UAvErC,IAuEmC,IAAc,iBAAd,IAAc,CAAZ;AAC/B,YAAM,eAAe,SAAO;AAC1B,YAAI;AACF,iBAAO,KAAK,MAAM,GAAG;AAAA,QACvB,SAAS,GAAG;AACV,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,YAAM,WAAW,KAAK;AACtB,YAAM,gBAAgB,aAAa,OAAO;AAC1C,cAAQ,cAAc,MAAM;AAAA,QAC1B,KAAK;AACH,iBAAO,gBAAgB,+CAAe,SAAS,+CAAe,QAAQ;AACtE;AAAA,QACF,SAAS;AACP,gBAAM,QAAQ;AAAA,YACZ,OAAO,+BAA+B,aAAa;AAAA,YACnD,UAAU,YAAY;AAAA,UACxB;AACA,kBAAQ,MAAM,gBAAgB,KAAK,UAAU,KAAK,CAAC;AACnD,uBAAa,SAAS,KAAK;AAC3B;AAAA,QACF;AAAA,MACF;AAAA,IACF;AACA,UAAM,cAAc,UAAQ;AAC1B,cAAQ,MAAM,0BAA0B,GAAG,IAAI,EAAE;AAAA,IACnD;AACA,UAAM,qBAAqB,CAAC,EAAE,OAAO,MAAM;AACzC,qBAAe,MAAM;AAAA,IACvB;AAEA,UAAM,uBAAuB,UAAQ,YAAY,KAAK,UAAU,iBAAiB,MAAM;AAEvF,UAAM,sBAAsB,UAAQ,wBAAwB,CAAC,CAAC,IAAI;AAClE,QAAI,WAAW,QAAQ;AACrB,kBAAY,IAAI,aAAa,QAAQ,OAAO;AAC5C,gBAAU,GAAGC,oBAAmB,2BAA2B,kBAAkB;AAC7E,gBAAU,GAAGA,oBAAmB,uBAAuB,qBAAqB;AAC5E,gBAAU,GAAGA,oBAAmB,OAAO,WAAW;AAClD,gBAAU,GAAGA,oBAAmB,gBAAgB,oBAAoB;AACpE,gBAAU,GAAGA,oBAAmB,kBAAkB,mBAAmB;AAErE,gBAAU,GAAGA,oBAAmB,iBAAiB,qBAAqB;AACtE,gBAAU,GAAGA,oBAAmB,eAAe,mBAAmB;AAClE,aAAO,MAAM;AACX,kBAAU,IAAIA,oBAAmB,2BAA2B,kBAAkB;AAC9E,kBAAU,IAAIA,oBAAmB,OAAO,WAAW;AACnD,kBAAU,IAAIA,oBAAmB,uBAAuB,qBAAqB;AAC7E,kBAAU,IAAIA,oBAAmB,gBAAgB,oBAAoB;AACrE,kBAAU,IAAIA,oBAAmB,kBAAkB,mBAAmB;AACtE,kBAAU,IAAIA,oBAAmB,iBAAiB,qBAAqB;AACvE,kBAAU,IAAIA,oBAAmB,eAAe,mBAAmB;AACnE,kBAAU,MAAM;AAChB,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAKX,EAAAH,WAAU,MAAM;AACd,UAAM,aAAa,WAAS,iBAAiB,KAAK;AAClD,QAAI,eAAe;AACjB,6CAAW,GAAGG,oBAAmB,OAAO;AAAA,IAC1C,OAAO;AACL,6CAAW,IAAIA,oBAAmB,OAAO;AAAA,IAC3C;AACA,WAAO,MAAM;AACX,6CAAW,IAAIA,oBAAmB,OAAO;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,kBAAkB,MAAY;AAClC,QAAI;AACF,YAAM,UAAU,KAAK;AACrB,8BAAwB,KAAK;AAAA,IAC/B,SAAS,OAAO;AACd,cAAQ,MAAM,yCAAyC,MAAM,OAAO;AAAA,IACtE;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,aAAW;AACT,UAAI,WAAW;AACb,8BAAsB,QAAQ,OAAO,SAAS,EAAE,YAAY,MAAM,MAAM;AACxE,kBAAU,SAAS,OAAO;AAAA,MAC5B;AAAA,IACF;AAAA,IACA,CAAC,eAAe;AAAA;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,eAAW,WAAW,SAAS,UAAU,CAAC,aAAa;AAAA,EACzD;AAEA,SACE,gBAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,IAAI,cAAc,SAAS;AAAA,MAC3B,KAAK;AAAA,MACL,KAAK;AAAA,QACH,MAAM;AAAA,MACR;AAAA;AAAA,KAEC,+CAAe,QAAO,gBACrB,gBAAAA,QAAA,cAAC,mBAAgB,eAA8B,SAAS,iBAAiB,IACvE;AAAA,IACH,UAAU,SAAS,UAClB,gBAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA;AAAA,MAEA,gBAAAA,QAAA,cAAC,4BAAyB,MAAM,sBAAsB,iBAAkC;AAAA,MACvF,cACC,gBAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,KAAK;AAAA,YACH,UAAU;AAAA,UACZ;AAAA;AAAA,QAEA,gBAAAA,QAAA,cAAC,WAAQ,OAAO,IAAI,QAAQ,IAAI;AAAA,MAClC;AAAA,MAEF,gBAAAA,QAAA,cAAC,eAAe,MAAf,EAAoB,KAAK,YACvB,aACC,gBAAAA,QAAA;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,eAAe,iBAAe;AAC5B,sBAAU,OAAO,WAAW;AAAA,UAC9B;AAAA,UACA;AAAA;AAAA,MACF,GAGF,gBAAAA,QAAA,cAAC,eAAe,SAAS,MAAxB,EAA6B,KAAK,EAAE,GAAG,QAAQ,KAC9C,gBAAAA,QAAA,cAAC,eAAe,SAAS,MAAxB,MACC,gBAAAA,QAAA;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,SAAS,MAAY;AACnB,uBAAW,MAAM,uCAAW,SAAS,uCAAW;AAAA,UAClD;AAAA,UACA;AAAA;AAAA,MACF,GACA,gBAAAA,QAAA,cAAC,eAAe,UAAf,EAAwB,WAAsB,GAC/C,gBAAAA,QAAA,cAAC,eAAe,QAAf,EAAsB,WAAsB,CAC/C,GAEA,gBAAAA,QAAA,cAAC,eAAe,SAAS,OAAxB,MACE,gBAAgB,SAAS,IACxB,gBAAAA,QAAA,cAAAA,QAAA,gBACE,gBAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,KAAK,EAAE,IAAI,KAAK;AAAA,UAChB,SAAS,MAAY;AACnB,kBAAM,UAAU,mBAAmB;AACnC,2BAAe,IAAI;AAAA,UACrB;AAAA,UACA,KAAI;AAAA,UACJ,eAAY;AAAA;AAAA,QAEZ,gBAAAA,QAAA,cAAC,WAAQ,OAAM,cAAa,MAAK,SAC/B,gBAAAA,QAAA,cAAC,QAAK,SAAQ,UAAS,KAAK,GAAG,OAAM,YACnC,gBAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,cACH,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,YAAY,cAAc,WAAW;AAAA,cACrC,GAAG;AAAA,YACL;AAAA;AAAA,QACF,GACA,gBAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,cACP,OAAO;AAAA,YACT;AAAA;AAAA,UAEC,cAAc,SAAS;AAAA,QAC1B,CACF,CACF;AAAA,MACF,GACA,gBAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,QAAQ;AAAA;AAAA,MACV,CACF,IACE,MACH,wBACC,gBAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,MAAM,eAAe,gBAAAA,QAAA,cAAC,gBAAW,IAAK,gBAAAA,QAAA,cAAC,gBAAW;AAAA;AAAA,MACpD,IACE,IACN,CACF,CACF;AAAA,IACF,IAEA,gBAAAA,QAAA,cAAC,QAAK,OAAM,UAAS,SAAQ,UAAS,KAAK,EAAE,MAAM,QAAQ,IAAI,MAAM,KACnE,gBAAAA,QAAA,cAAC,QAAK,SAAQ,MAAK,KAAK,EAAE,WAAW,SAAS,KAAG,oCAEjD,CACF;AAAA,EAEJ;AAEJ;AAEA,IAAO,kBAAQ;",
-  "names": ["React", "useEffect", "useRef", "useState", "HMSHLSPlayerEvents", "React", "React", "React", "React", "React", "getDurationFromSeconds", "hlsPlayer", "videoProgress", "bufferProgress", "React", "React", "useEffect", "useState", "hlsPlayer", "useState", "useEffect", "getDurationFromSeconds", "React", "React", "useState", "hlsPlayer", "useState", "React", "volume", "React", "React", "React", "React", "React", "useState", "useState", "React", "useRef", "useState", "useEffect", "showLoader", "_a", "HMSHLSPlayerEvents", "React"]
-}