@100mslive/roomkit-react 0.2.8-alpha.5 → 0.2.8-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{HLSView-CVNJNDUQ.js → HLSView-MYKM5AXS.js} +239 -144
- package/dist/HLSView-MYKM5AXS.js.map +7 -0
- package/dist/Prebuilt/components/Chat/MwebChatOption.d.ts +1 -1
- package/dist/Prebuilt/components/HMSVideo/PlayPauseButton.d.ts +6 -0
- package/dist/Prebuilt/components/HMSVideo/SeekControls.d.ts +7 -0
- package/dist/Prebuilt/components/HMSVideo/VideoProgress.d.ts +3 -1
- package/dist/Prebuilt/components/HMSVideo/index.d.ts +10 -2
- package/dist/Prebuilt/layouts/SidePane.d.ts +1 -1
- package/dist/{chunk-25HZFDG5.js → chunk-DRBTAFKN.js} +356 -222
- package/dist/chunk-DRBTAFKN.js.map +7 -0
- package/dist/index.cjs.js +949 -712
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +217 -78
- package/dist/meta.esbuild.json +227 -87
- package/package.json +7 -6
- package/src/Prebuilt/components/AppData/useSidepane.js +34 -7
- package/src/Prebuilt/components/AuthToken.jsx +1 -1
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +1 -1
- package/src/Prebuilt/components/Chat/MwebChatOption.tsx +1 -1
- package/src/Prebuilt/components/ConferenceScreen.tsx +11 -14
- package/src/Prebuilt/components/Footer/RoleOptions.tsx +32 -15
- package/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx +31 -1
- package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx +7 -1
- package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx +27 -0
- package/src/Prebuilt/components/HMSVideo/SeekControls.tsx +22 -0
- package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +4 -3
- package/src/Prebuilt/components/HMSVideo/VolumeControl.tsx +1 -1
- package/src/Prebuilt/components/HMSVideo/index.ts +4 -2
- package/src/Prebuilt/components/Header/StreamActions.tsx +1 -1
- package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +37 -31
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +6 -5
- package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx +2 -2
- package/src/Prebuilt/components/Notifications/PeerNotifications.tsx +1 -1
- package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx +19 -8
- package/src/Prebuilt/components/SidePaneTabs.tsx +27 -35
- package/src/Prebuilt/components/StatsForNerds.jsx +14 -6
- package/src/Prebuilt/components/Streaming/Common.jsx +1 -1
- package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx +2 -2
- package/src/Prebuilt/components/Toast/ToastBatcher.js +8 -1
- package/src/Prebuilt/components/Toast/ToastConfig.jsx +17 -0
- package/src/Prebuilt/layouts/HLSView.jsx +109 -69
- package/src/Prebuilt/layouts/SidePane.tsx +125 -67
- package/src/Prebuilt/layouts/VideoStreamingSection.tsx +2 -1
- package/src/Prebuilt/provider/roomLayoutProvider/index.tsx +1 -1
- package/src/Sheet/Sheet.tsx +4 -0
- package/dist/HLSView-CVNJNDUQ.js.map +0 -7
- package/dist/chunk-25HZFDG5.js.map +0 -7
- package/src/Prebuilt/components/HMSVideo/PlayButton.jsx +0 -13
| @@ -1,17 +1,16 @@ | |
| 1 1 | 
             
            import React, { useEffect } from 'react';
         | 
| 2 2 | 
             
            import { useMedia } from 'react-use';
         | 
| 3 | 
            +
            import { match } from 'ts-pattern';
         | 
| 3 4 | 
             
            import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
         | 
| 4 5 | 
             
            import { Polls } from '../components/Polls/Polls';
         | 
| 5 6 | 
             
            import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
         | 
| 6 7 | 
             
            import { LayoutMode } from '../components/Settings/LayoutSettings';
         | 
| 7 8 | 
             
            import { SidePaneTabs } from '../components/SidePaneTabs';
         | 
| 8 9 | 
             
            import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
         | 
| 9 | 
            -
            // @ts-ignore: No implicit Any
         | 
| 10 10 | 
             
            import VideoTile from '../components/VideoTile';
         | 
| 11 | 
            -
            // @ts-ignore: No implicit Any
         | 
| 12 11 | 
             
            import { VBPicker } from '../components/VirtualBackground/VBPicker';
         | 
| 13 | 
            -
            import {  | 
| 14 | 
            -
            import { config as cssConfig } from '../../Theme';
         | 
| 12 | 
            +
            import { Flex } from '../../Layout';
         | 
| 13 | 
            +
            import { config as cssConfig, styled } from '../../Theme';
         | 
| 15 14 | 
             
            // @ts-ignore: No implicit Any
         | 
| 16 15 | 
             
            import { useSidepaneReset } from '../components/AppData/useSidepane';
         | 
| 17 16 | 
             
            // @ts-ignore: No implicit Any
         | 
| @@ -20,10 +19,85 @@ import { | |
| 20 19 | 
             
              useRoomLayoutConferencingScreen,
         | 
| 21 20 | 
             
              useRoomLayoutPreviewScreen,
         | 
| 22 21 | 
             
            } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
         | 
| 23 | 
            -
            import {  | 
| 22 | 
            +
            import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
         | 
| 24 23 | 
             
            import { translateAcross } from '../../utils';
         | 
| 25 24 | 
             
            import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../common/constants';
         | 
| 26 25 |  | 
| 26 | 
            +
            const Wrapper = styled('div', {
         | 
| 27 | 
            +
              w: '$100',
         | 
| 28 | 
            +
              h: '100%',
         | 
| 29 | 
            +
              p: '$10',
         | 
| 30 | 
            +
              flex: '1 1 0',
         | 
| 31 | 
            +
              background: '$surface_dim',
         | 
| 32 | 
            +
              r: '$1',
         | 
| 33 | 
            +
              position: 'relative',
         | 
| 34 | 
            +
              '@lg': {
         | 
| 35 | 
            +
                w: '100%',
         | 
| 36 | 
            +
                h: '100%',
         | 
| 37 | 
            +
                ml: 0,
         | 
| 38 | 
            +
                right: 0,
         | 
| 39 | 
            +
                position: 'fixed',
         | 
| 40 | 
            +
                bottom: 0,
         | 
| 41 | 
            +
                borderRadius: 0,
         | 
| 42 | 
            +
                zIndex: 10,
         | 
| 43 | 
            +
              },
         | 
| 44 | 
            +
              '@md': {
         | 
| 45 | 
            +
                p: '$6 $8',
         | 
| 46 | 
            +
                pb: '$12',
         | 
| 47 | 
            +
                borderTopLeftRadius: 0,
         | 
| 48 | 
            +
                borderTopRightRadius: 0,
         | 
| 49 | 
            +
                animation: `${translateAcross({ yFrom: '100%' })} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
         | 
| 50 | 
            +
              },
         | 
| 51 | 
            +
              variants: {
         | 
| 52 | 
            +
                landscapeStream: {
         | 
| 53 | 
            +
                  true: {
         | 
| 54 | 
            +
                    '@lg': {
         | 
| 55 | 
            +
                      position: 'unset !important',
         | 
| 56 | 
            +
                      minHeight: '100%',
         | 
| 57 | 
            +
                    },
         | 
| 58 | 
            +
                  },
         | 
| 59 | 
            +
                },
         | 
| 60 | 
            +
                mobileStream: {
         | 
| 61 | 
            +
                  true: {
         | 
| 62 | 
            +
                    '@md': {
         | 
| 63 | 
            +
                      position: 'unset !important',
         | 
| 64 | 
            +
                      background: 'red',
         | 
| 65 | 
            +
                    },
         | 
| 66 | 
            +
                  },
         | 
| 67 | 
            +
                },
         | 
| 68 | 
            +
                overlayChat: {
         | 
| 69 | 
            +
                  true: {
         | 
| 70 | 
            +
                    height: 'unset',
         | 
| 71 | 
            +
                    maxHeight: 300,
         | 
| 72 | 
            +
                    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)',
         | 
| 73 | 
            +
                    '@md': {
         | 
| 74 | 
            +
                      pb: '$20',
         | 
| 75 | 
            +
                    },
         | 
| 76 | 
            +
                  },
         | 
| 77 | 
            +
                },
         | 
| 78 | 
            +
              },
         | 
| 79 | 
            +
              compoundVariants: [
         | 
| 80 | 
            +
                {
         | 
| 81 | 
            +
                  landscapeStream: true,
         | 
| 82 | 
            +
                  overlayChat: true,
         | 
| 83 | 
            +
                  css: {
         | 
| 84 | 
            +
                    position: 'unset',
         | 
| 85 | 
            +
                    height: '100%',
         | 
| 86 | 
            +
                    maxHeight: 'unset',
         | 
| 87 | 
            +
                  },
         | 
| 88 | 
            +
                },
         | 
| 89 | 
            +
                {
         | 
| 90 | 
            +
                  mobileStream: true,
         | 
| 91 | 
            +
                  overlayChat: true,
         | 
| 92 | 
            +
                  css: {
         | 
| 93 | 
            +
                    position: 'unset',
         | 
| 94 | 
            +
                    height: '100%',
         | 
| 95 | 
            +
                    maxHeight: 'unset',
         | 
| 96 | 
            +
                  },
         | 
| 97 | 
            +
                },
         | 
| 98 | 
            +
              ],
         | 
| 99 | 
            +
            });
         | 
| 100 | 
            +
             | 
| 27 101 | 
             
            const SidePane = ({
         | 
| 28 102 | 
             
              tileProps,
         | 
| 29 103 | 
             
              hideControls = false,
         | 
| @@ -32,7 +106,6 @@ const SidePane = ({ | |
| 32 106 | 
             
              hideControls?: boolean;
         | 
| 33 107 | 
             
            }) => {
         | 
| 34 108 | 
             
              const isMobile = useMedia(cssConfig.media.md);
         | 
| 35 | 
            -
              const isLandscape = useIsLandscape();
         | 
| 36 109 | 
             
              const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
         | 
| 37 110 | 
             
              const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
         | 
| 38 111 | 
             
              const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
         | 
| @@ -48,21 +121,6 @@ const SidePane = ({ | |
| 48 121 | 
             
                : elements?.virtual_background?.background_media || [];
         | 
| 49 122 |  | 
| 50 123 | 
             
              const resetSidePane = useSidepaneReset();
         | 
| 51 | 
            -
              let ViewComponent;
         | 
| 52 | 
            -
              if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
         | 
| 53 | 
            -
                ViewComponent = <Polls />;
         | 
| 54 | 
            -
              }
         | 
| 55 | 
            -
              if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS || sidepane === SIDE_PANE_OPTIONS.CHAT) {
         | 
| 56 | 
            -
                ViewComponent = (
         | 
| 57 | 
            -
                  <SidePaneTabs hideControls={hideControls} active={sidepane} hideTab={isMobileHLSStream || isLandscapeHLSStream} />
         | 
| 58 | 
            -
                );
         | 
| 59 | 
            -
              }
         | 
| 60 | 
            -
              if (sidepane === SIDE_PANE_OPTIONS.VB) {
         | 
| 61 | 
            -
                ViewComponent = <VBPicker backgroundMedia={backgroundMedia} />;
         | 
| 62 | 
            -
              }
         | 
| 63 | 
            -
              if (sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS) {
         | 
| 64 | 
            -
                ViewComponent = <RoomDetailsPane />;
         | 
| 65 | 
            -
              }
         | 
| 66 124 |  | 
| 67 125 | 
             
              useEffect(() => {
         | 
| 68 126 | 
             
                return () => {
         | 
| @@ -70,9 +128,6 @@ const SidePane = ({ | |
| 70 128 | 
             
                };
         | 
| 71 129 | 
             
              }, [resetSidePane]);
         | 
| 72 130 |  | 
| 73 | 
            -
              if (!ViewComponent && (!trackId || layoutMode !== LayoutMode.GALLERY)) {
         | 
| 74 | 
            -
                return null;
         | 
| 75 | 
            -
              }
         | 
| 76 131 | 
             
              const tileLayout = {
         | 
| 77 132 | 
             
                hideParticipantNameOnTile: tileProps?.hide_participant_name_on_tile,
         | 
| 78 133 | 
             
                roundedVideoTile: tileProps?.rounded_video_tile,
         | 
| @@ -80,8 +135,11 @@ const SidePane = ({ | |
| 80 135 | 
             
                hideMetadataOnTile: tileProps?.hide_metadata_on_tile,
         | 
| 81 136 | 
             
                objectFit: tileProps?.video_object_fit,
         | 
| 82 137 | 
             
              };
         | 
| 83 | 
            -
              const VB = sidepane === SIDE_PANE_OPTIONS.VB;
         | 
| 84 138 | 
             
              const mwebStreamingChat = isMobile && sidepane === SIDE_PANE_OPTIONS.CHAT && elements?.chat?.is_overlay;
         | 
| 139 | 
            +
              const commonProps = {
         | 
| 140 | 
            +
                landscapeStream: isLandscapeHLSStream,
         | 
| 141 | 
            +
                mobileStream: isMobileHLSStream,
         | 
| 142 | 
            +
              };
         | 
| 85 143 |  | 
| 86 144 | 
             
              return (
         | 
| 87 145 | 
             
                <Flex
         | 
| @@ -89,11 +147,14 @@ const SidePane = ({ | |
| 89 147 | 
             
                  justify="center"
         | 
| 90 148 | 
             
                  css={{
         | 
| 91 149 | 
             
                    w: '$100',
         | 
| 92 | 
            -
                    h:  | 
| 150 | 
            +
                    h: '100%',
         | 
| 93 151 | 
             
                    flexShrink: 0,
         | 
| 94 152 | 
             
                    gap: '$4',
         | 
| 95 153 | 
             
                    position: 'relative',
         | 
| 96 | 
            -
                    ' | 
| 154 | 
            +
                    '&:empty': { display: 'none' },
         | 
| 155 | 
            +
                    '@ls': {
         | 
| 156 | 
            +
                      w: isMobileHLSStream || isLandscapeHLSStream ? '340px' : '$100',
         | 
| 157 | 
            +
                    },
         | 
| 97 158 | 
             
                  }}
         | 
| 98 159 | 
             
                >
         | 
| 99 160 | 
             
                  {trackId && layoutMode === LayoutMode.GALLERY && (
         | 
| @@ -106,46 +167,43 @@ const SidePane = ({ | |
| 106 167 | 
             
                      {...tileLayout}
         | 
| 107 168 | 
             
                    />
         | 
| 108 169 | 
             
                  )}
         | 
| 109 | 
            -
             | 
| 110 | 
            -
             | 
| 111 | 
            -
             | 
| 112 | 
            -
             | 
| 113 | 
            -
                         | 
| 114 | 
            -
             | 
| 115 | 
            -
             | 
| 116 | 
            -
             | 
| 117 | 
            -
             | 
| 118 | 
            -
                         | 
| 119 | 
            -
             | 
| 120 | 
            -
             | 
| 121 | 
            -
             | 
| 122 | 
            -
             | 
| 123 | 
            -
             | 
| 124 | 
            -
             | 
| 125 | 
            -
             | 
| 126 | 
            -
             | 
| 127 | 
            -
             | 
| 128 | 
            -
             | 
| 129 | 
            -
             | 
| 130 | 
            -
             | 
| 131 | 
            -
             | 
| 132 | 
            -
                           | 
| 133 | 
            -
                           | 
| 134 | 
            -
             | 
| 135 | 
            -
                         | 
| 136 | 
            -
             | 
| 137 | 
            -
             | 
| 138 | 
            -
             | 
| 139 | 
            -
             | 
| 140 | 
            -
             | 
| 141 | 
            -
             | 
| 142 | 
            -
             | 
| 143 | 
            -
             | 
| 144 | 
            -
                       | 
| 145 | 
            -
                     | 
| 146 | 
            -
                      {ViewComponent}
         | 
| 147 | 
            -
                    </Box>
         | 
| 148 | 
            -
                  )}
         | 
| 170 | 
            +
             | 
| 171 | 
            +
                  {match(sidepane)
         | 
| 172 | 
            +
                    .with(SIDE_PANE_OPTIONS.POLLS, () => (
         | 
| 173 | 
            +
                      <Wrapper
         | 
| 174 | 
            +
                        css={{
         | 
| 175 | 
            +
                          '@md': {
         | 
| 176 | 
            +
                            borderTopLeftRadius: '$2',
         | 
| 177 | 
            +
                            borderTopRightRadius: '$2',
         | 
| 178 | 
            +
                          },
         | 
| 179 | 
            +
                        }}
         | 
| 180 | 
            +
                        {...commonProps}
         | 
| 181 | 
            +
                      >
         | 
| 182 | 
            +
                        <Polls />
         | 
| 183 | 
            +
                      </Wrapper>
         | 
| 184 | 
            +
                    ))
         | 
| 185 | 
            +
                    .with(SIDE_PANE_OPTIONS.VB, () => (
         | 
| 186 | 
            +
                      <Wrapper css={{ p: '$10 $6 $10 $10' }} {...commonProps}>
         | 
| 187 | 
            +
                        <VBPicker backgroundMedia={backgroundMedia} />
         | 
| 188 | 
            +
                      </Wrapper>
         | 
| 189 | 
            +
                    ))
         | 
| 190 | 
            +
                    .with(SIDE_PANE_OPTIONS.CHAT, SIDE_PANE_OPTIONS.PARTICIPANTS, () => (
         | 
| 191 | 
            +
                      <Wrapper {...commonProps} overlayChat={mwebStreamingChat}>
         | 
| 192 | 
            +
                        <SidePaneTabs
         | 
| 193 | 
            +
                          hideControls={hideControls}
         | 
| 194 | 
            +
                          active={sidepane}
         | 
| 195 | 
            +
                          hideTab={isMobileHLSStream || isLandscapeHLSStream}
         | 
| 196 | 
            +
                        />
         | 
| 197 | 
            +
                      </Wrapper>
         | 
| 198 | 
            +
                    ))
         | 
| 199 | 
            +
                    .with(SIDE_PANE_OPTIONS.ROOM_DETAILS, () => (
         | 
| 200 | 
            +
                      <Wrapper {...commonProps}>
         | 
| 201 | 
            +
                        <RoomDetailsPane />
         | 
| 202 | 
            +
                      </Wrapper>
         | 
| 203 | 
            +
                    ))
         | 
| 204 | 
            +
                    .otherwise(() => {
         | 
| 205 | 
            +
                      return null;
         | 
| 206 | 
            +
                    })}
         | 
| 149 207 | 
             
                </Flex>
         | 
| 150 208 | 
             
              );
         | 
| 151 209 | 
             
            };
         | 
| @@ -111,7 +111,8 @@ export const VideoStreamingSection = ({ | |
| 111 111 | 
             
                    {ViewComponent}
         | 
| 112 112 | 
             
                    <Box
         | 
| 113 113 | 
             
                      css={{
         | 
| 114 | 
            -
                         | 
| 114 | 
            +
                        flex: isMobileHLSStream ? '1 1 0' : undefined,
         | 
| 115 | 
            +
                        height: !isMobileHLSStream ? '100%' : undefined,
         | 
| 115 116 | 
             
                        maxHeight: '100%',
         | 
| 116 117 | 
             
                        '&:empty': { display: 'none' },
         | 
| 117 118 | 
             
                        overflowY: 'clip',
         | 
| @@ -21,7 +21,7 @@ export const RoomLayoutContext = React.createContext< | |
| 21 21 | 
             
            // The default merge in lodash merges the values of current layout and the changes.
         | 
| 22 22 | 
             
            // This behaviour makes changes in array based values inconsistent since a union happens.
         | 
| 23 23 | 
             
            // The customizer uses the new value provided if one of the values is an array
         | 
| 24 | 
            -
            function customizer(objValue:  | 
| 24 | 
            +
            function customizer(objValue: unknown, srcValue: unknown) {
         | 
| 25 25 | 
             
              if (isArray(objValue) || isArray(srcValue)) {
         | 
| 26 26 | 
             
                return srcValue;
         | 
| 27 27 | 
             
              }
         | 
    
        package/src/Sheet/Sheet.tsx
    CHANGED
    
    
| @@ -1,7 +0,0 @@ | |
| 1 | 
            -
            {
         | 
| 2 | 
            -
              "version": 3,
         | 
| 3 | 
            -
              "sources": ["../src/Prebuilt/layouts/HLSView.jsx", "../src/Prebuilt/components/HlsStatsOverlay.jsx", "../src/Prebuilt/components/HMSVideo/index.ts", "../src/Prebuilt/components/HMSVideo/Controls.jsx", "../src/Prebuilt/components/HMSVideo/HMSVideo.jsx", "../src/Prebuilt/components/HMSVideo/PlayButton.tsx", "../src/Prebuilt/components/HMSVideo/PlayerContext.tsx", "../src/Prebuilt/components/HMSVideo/VideoProgress.tsx", "../src/Prebuilt/components/HMSVideo/utils.ts", "../src/Prebuilt/components/HMSVideo/VideoTime.tsx", "../src/Prebuilt/components/HMSVideo/VolumeControl.tsx", "../src/Prebuilt/components/HMSVideo/FullscreenButton.tsx", "../src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx", "../src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx", "../src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx", "../src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx"],
         | 
| 4 | 
            -
              "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';\nimport { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport screenfull from 'screenfull';\nimport {\n  HLSPlaylistType,\n  HMSNotificationTypes,\n  selectAppData,\n  selectHLSState,\n  selectPeerNameByID,\n  selectPollByID,\n  useHMSActions,\n  useHMSNotifications,\n  useHMSStore,\n  useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { ColoredHandIcon, GoLiveIcon, PauseIcon, PlayIcon } from '@100mslive/react-icons';\nimport { ChatToggle } from '../components/Footer/ChatToggle';\nimport { HlsStatsOverlay } from '../components/HlsStatsOverlay';\nimport { HMSVideoPlayer } from '../components/HMSVideo';\nimport { FullScreenButton } from '../components/HMSVideo/FullscreenButton';\nimport { HLSAutoplayBlockedPrompt } from '../components/HMSVideo/HLSAutoplayBlockedPrompt';\nimport { HLSCaptionSelector } from '../components/HMSVideo/HLSCaptionSelector';\nimport { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';\nimport { HLSViewTitle } from '../components/HMSVideo/MwebHLSViewTitle';\nimport { HMSPlayerContext } from '../components/HMSVideo/PlayerContext';\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { Button } from '../../Button';\nimport { IconButton } from '../../IconButton';\nimport { Box, Flex } from '../../Layout';\nimport { Loading } from '../../Loading';\nimport { Text } from '../../Text';\nimport { config, theme, useTheme } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport { usePollViewToggle, useSidepaneToggle } from '../components/AppData/useSidepane';\nimport { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\nimport { useIsLandscape } from '../common/hooks';\nimport { APP_DATA, EMOJI_REACTION_TYPE, SIDE_PANE_OPTIONS } from '../common/constants';\n\nlet hlsPlayer;\nconst toastMap = {};\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 { elements, screenType } = useRoomLayoutConferencingScreen();\n  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);\n  const hmsActions = useHMSActions();\n  const { themeType } = useTheme();\n  const [streamEnded, setStreamEnded] = useState(false);\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 [isCaptionEnabled, setIsCaptionEnabled] = useState(true);\n  const [hasCaptions, setHasCaptions] = useState(false);\n  const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);\n  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const [show, toggle] = useToggle(false);\n  const lastHlsUrl = usePrevious(hlsUrl);\n  const togglePollView = usePollViewToggle();\n  const vanillaStore = useHMSVanillaStore();\n  const [controlsVisible, setControlsVisible] = useState(true);\n  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);\n  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);\n  const controlsRef = useRef(null);\n  const controlsTimerRef = useRef();\n  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));\n  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);\n  const showChat = !!elements?.chat;\n  const isFullScreenSupported = screenfull.isEnabled;\n\n  const isMobile = useMedia(config.media.md);\n  const isLandscape = useIsLandscape();\n\n  const isFullScreen = useFullscreen(hlsViewRef, show, {\n    onClose: () => toggle(false),\n  });\n  const [showLoader, setShowLoader] = useState(false);\n\n  const isMwebHLSStream = screenType === 'hls_live_streaming' && isMobile;\n\n  useEffect(() => {\n    if (sidepane === '' && isMwebHLSStream && showChat) {\n      toggleChat();\n    }\n  }, [sidepane, isMwebHLSStream, toggleChat, showChat]);\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  useEffect(() => {\n    if (streamEnded && lastHlsUrl !== hlsUrl) {\n      setStreamEnded(false);\n    }\n  }, [hlsUrl, streamEnded, lastHlsUrl]);\n\n  useEffect(() => {\n    if (!notification) return;\n    const toastID = toastMap?.[notification.data.id];\n    if (toastID) {\n      ToastManager.removeToast(toastMap[notification.data.id]);\n      delete toastMap[notification.data.id];\n    }\n  }, [notification]);\n\n  useEffect(() => {\n    const videoElem = videoRef.current;\n    const setStreamEndedCallback = () => {\n      setStreamEnded(true);\n      // no point keeping the callback attached once the streaming is ended\n      videoElem?.removeEventListener('ended', setStreamEndedCallback);\n    };\n    videoElem?.addEventListener('ended', setStreamEndedCallback);\n    return () => {\n      videoElem?.removeEventListener('ended', setStreamEndedCallback);\n    };\n  }, [hlsUrl]);\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   * initialize HMSHLSPlayer and add event listeners.\n   */\n  useEffect(() => {\n    let videoEl = videoRef.current;\n    const manifestLoadedHandler = ({ layers }) => {\n      setAvailableLayers(layers);\n      setHasCaptions(hlsPlayer?.hasCaptions());\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      const duration = rest.duration;\n      const parsedPayload = parsePayload(payload);\n      // check if poll happened\n      if (parsedPayload.startsWith('poll:')) {\n        const pollId = parsedPayload.substr(parsedPayload.indexOf(':') + 1);\n        const poll = vanillaStore.getState(selectPollByID(pollId));\n        const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || 'Participant';\n        // launch poll\n        const toastID = ToastManager.addToast({\n          title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,\n          action: (\n            <Button\n              onClick={() => togglePollView(pollId)}\n              variant=\"standard\"\n              css={{\n                backgroundColor: '$surface_bright',\n                fontWeight: '$semiBold',\n                color: '$on_surface_high',\n                p: '$xs $md',\n              }}\n            >\n              {poll.type === 'quiz' ? 'Answer' : 'Vote'}\n            </Button>\n          ),\n          duration: Infinity,\n        });\n        toastMap[pollId] = toastID;\n        return;\n      }\n      switch (parsedPayload.type) {\n        case EMOJI_REACTION_TYPE:\n          window.showFlyingEmoji?.({ emojiId: parsedPayload?.emojiId, senderId: 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    const captionEnabledEventHandler = isCaptionEnabled => {\n      setIsCaptionEnabled(isCaptionEnabled);\n    };\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.CAPTION_ENABLED, captionEnabledEventHandler);\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.CAPTION_ENABLED, captionEnabledEventHandler);\n\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      };\n    }\n  }, [hlsUrl, togglePollView, vanillaStore]);\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 sfnOverlayClose = () => {\n    hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);\n  };\n\n  useEffect(() => {\n    if (controlsVisible && isFullScreen && !qualityDropDownOpen) {\n      if (controlsTimerRef.current) {\n        clearTimeout(controlsTimerRef.current);\n      }\n      controlsTimerRef.current = setTimeout(() => {\n        setControlsVisible(false);\n      }, 5000);\n    }\n    if (!isFullScreen && controlsTimerRef.current) {\n      clearTimeout(controlsTimerRef.current);\n    }\n    return () => {\n      if (controlsTimerRef.current) {\n        clearTimeout(controlsTimerRef.current);\n      }\n    };\n  }, [controlsVisible, isFullScreen, qualityDropDownOpen]);\n\n  const onTouchHandler = useCallback(\n    event => {\n      event.preventDefault();\n      // logic for invisible when tapping\n      if (event.type === 'ontouchstart' && controlsVisible) {\n        setControlsVisible(false);\n        return;\n      }\n      // normal scemnario\n      if (event.type === 'ontouchstart' || qualityDropDownOpen) {\n        setControlsVisible(true);\n        return;\n      }\n      if (isFullScreen && !controlsVisible && event.type === 'touchmove') {\n        setControlsVisible(true);\n        if (controlsTimerRef.current) {\n          clearTimeout(controlsTimerRef.current);\n        }\n      }\n    },\n    [controlsVisible, isFullScreen, qualityDropDownOpen],\n  );\n  const onHoverHandler = useCallback(\n    event => {\n      // normal scemnario\n      if (event.type === 'mouseenter' || qualityDropDownOpen) {\n        setControlsVisible(true);\n        return;\n      }\n      if (event.type === 'mouseleave') {\n        setControlsVisible(false);\n      } else if (isFullScreen && !controlsVisible && event.type === 'mousemove') {\n        setControlsVisible(true);\n        if (controlsTimerRef.current) {\n          clearTimeout(controlsTimerRef.current);\n        }\n      }\n    },\n    [controlsVisible, isFullScreen, qualityDropDownOpen],\n  );\n\n  return (\n    <Flex\n      key=\"hls-viewer\"\n      id={`hls-viewer-${themeType}`}\n      ref={hlsViewRef}\n      direction={isMobile || isLandscape ? 'column' : 'row'}\n      css={{\n        w: sidepane !== '' && isLandscape ? '55%' : '100%',\n        h: sidepane !== '' && isMobile ? '36%' : '100%',\n      }}\n    >\n      {hlsUrl && !streamEnded ? (\n        <>\n          <HMSPlayerContext.Provider value={{ hlsPlayer }}>\n            {hlsStatsState?.url && enablHlsStats && !(isMobile || isLandscape) ? (\n              <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />\n            ) : null}\n            <Flex\n              id=\"hls-player-container\"\n              align=\"center\"\n              justify=\"center\"\n              css={{\n                size: '100%',\n                margin: '0 auto',\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\n                ref={videoRef}\n                onMouseEnter={onHoverHandler}\n                onMouseMove={onHoverHandler}\n                onMouseLeave={onHoverHandler}\n                onTouchStart={onTouchHandler}\n                onTouchMove={onTouchHandler}\n              >\n                <>\n                  {isMobile || isLandscape ? (\n                    <>\n                      {!showLoader && (\n                        <Box\n                          css={{\n                            position: 'absolute',\n                            top: '40%',\n                            left: '50%',\n                            transform: 'translateY(-40%) translateX(-50%)',\n                            padding: '$4',\n                            display: 'inline-flex',\n                            r: '$round',\n                            gap: '$1',\n                            bg: 'rgba(0, 0, 0, 0.6)',\n                            zIndex: 1,\n                            visibility: controlsVisible ? `` : `hidden`,\n                            opacity: controlsVisible ? `1` : '0',\n                          }}\n                        >\n                          {isPaused ? (\n                            <IconButton\n                              onClick={async () => {\n                                await hlsPlayer?.play();\n                              }}\n                              data-testid=\"play_btn\"\n                            >\n                              <PlayIcon width=\"48px\" height=\"48px\" />\n                            </IconButton>\n                          ) : (\n                            <IconButton\n                              onClick={async () => {\n                                await hlsPlayer?.pause();\n                              }}\n                              data-testid=\"pause_btn\"\n                            >\n                              <PauseIcon width=\"48px\" height=\"48px\" />\n                            </IconButton>\n                          )}\n                        </Box>\n                      )}\n                      <Flex\n                        ref={controlsRef}\n                        direction=\"column\"\n                        justify=\"start\"\n                        align=\"start\"\n                        css={{\n                          position: 'absolute',\n                          top: '0',\n                          left: '0',\n                          width: '100%',\n                          flexShrink: 0,\n                          visibility: controlsVisible ? `` : `hidden`,\n                          opacity: controlsVisible ? `1` : '0',\n                        }}\n                      >\n                        <HMSVideoPlayer.Controls.Root\n                          css={{\n                            p: '$4 $8',\n                          }}\n                        >\n                          <HMSVideoPlayer.Controls.Right>\n                            {isLandscape && <ChatToggle />}\n                            {hasCaptions && <HLSCaptionSelector isEnabled={isCaptionEnabled} />}\n                            {availableLayers.length > 0 ? (\n                              <HLSQualitySelector\n                                layers={availableLayers}\n                                onOpenChange={setQualityDropDownOpen}\n                                open={qualityDropDownOpen}\n                                selection={currentSelectedQuality}\n                                onQualityChange={handleQuality}\n                                isAuto={isUserSelectedAuto}\n                              />\n                            ) : null}\n                          </HMSVideoPlayer.Controls.Right>\n                        </HMSVideoPlayer.Controls.Root>\n                      </Flex>\n                    </>\n                  ) : null}\n                  <Flex\n                    ref={controlsRef}\n                    direction=\"column\"\n                    justify=\"end\"\n                    align=\"start\"\n                    css={{\n                      position: 'absolute',\n                      bottom: '0',\n                      left: '0',\n                      background:\n                        isMobile || isLandscape\n                          ? ''\n                          : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,\n                      width: '100%',\n                      pt: '$8',\n                      flexShrink: 0,\n                      transition: 'visibility 0s 0.5s, opacity 0.5s linear',\n                      visibility: controlsVisible ? `` : `hidden`,\n                      opacity: controlsVisible ? `1` : '0',\n                    }}\n                  >\n                    {!(isMobile || isLandscape) && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (\n                      <HMSVideoPlayer.Progress />\n                    )}\n                    <HMSVideoPlayer.Controls.Root\n                      css={{\n                        p: '$4 $8',\n                      }}\n                    >\n                      <HMSVideoPlayer.Controls.Left>\n                        {!(isMobile || isLandscape) && (\n                          <>\n                            <HMSVideoPlayer.PlayButton\n                              onClick={async () => {\n                                isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();\n                              }}\n                              isPaused={isPaused}\n                            />\n                            {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}\n                            <HMSVideoPlayer.Volume />\n                          </>\n                        )}\n                        <IconButton\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={isVideoLive ? 'Live' : '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 ? '$alert_error_default' : '$on_primary_medium',\n                                  r: '$1',\n                                }}\n                              />\n                              <Text\n                                variant=\"$body1\"\n                                css={{\n                                  c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',\n                                  fontWeight: '$semiBold',\n                                }}\n                              >\n                                {isVideoLive ? 'LIVE' : 'GO LIVE'}\n                              </Text>\n                            </Flex>\n                          </Tooltip>\n                        </IconButton>\n                        {(isMobile || isLandscape) && !isVideoLive ? <HMSVideoPlayer.Duration /> : null}\n                      </HMSVideoPlayer.Controls.Left>\n\n                      <HMSVideoPlayer.Controls.Right>\n                        {hasCaptions && !(isMobile || isLandscape) && (\n                          <HLSCaptionSelector isEnabled={isCaptionEnabled} />\n                        )}\n                        {availableLayers.length > 0 && !(isMobile || isLandscape) ? (\n                          <HLSQualitySelector\n                            layers={availableLayers}\n                            onOpenChange={setQualityDropDownOpen}\n                            open={qualityDropDownOpen}\n                            selection={currentSelectedQuality}\n                            onQualityChange={handleQuality}\n                            isAuto={isUserSelectedAuto}\n                          />\n                        ) : null}\n                        {isFullScreenSupported ? (\n                          <FullScreenButton isFullScreen={isFullScreen} onToggle={toggle} />\n                        ) : null}\n                      </HMSVideoPlayer.Controls.Right>\n                    </HMSVideoPlayer.Controls.Root>\n                    {(isMobile || isLandscape) && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (\n                      <HMSVideoPlayer.Progress />\n                    ) : null}\n                  </Flex>\n                </>\n              </HMSVideoPlayer.Root>\n            </Flex>\n          </HMSPlayerContext.Provider>\n\n          {isMobile && !isFullScreen && <HLSViewTitle />}\n        </>\n      ) : (\n        <Flex align=\"center\" justify=\"center\" direction=\"column\" css={{ size: '100%', px: '$10' }}>\n          <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>\n            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}\n          </Flex>\n          <Text variant=\"h5\" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>\n            {streamEnded ? 'Stream has ended' : 'Stream yet to start'}\n          </Text>\n          <Text variant=\"md\" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>\n            {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}\n          </Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default HLSView;\n", "import React, { memo } from 'react';\nimport { CrossIcon } 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: '$surface_brighter',\n        borderRadius: '$1',\n      }}\n      direction=\"column\"\n    >\n      <IconButton css={{ position: 'absolute', top: '$2', right: '$2' }} onClick={onClose}>\n        <CrossIcon />\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", "// @ts-ignore\nimport { LeftControls, RightControls, VideoControls } from './Controls';\n// @ts-ignore\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  alignSelf: 'stretch',\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: '$4',\n});\nexport const RightControls = styled(Flex, {\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  width: '100%',\n  gap: '$4',\n});\n", "import React, { forwardRef } from 'react';\nimport { Flex } from '../../../';\n\nexport const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {\n  return (\n    <Flex\n      data-testid=\"hms-video\"\n      css={{\n        size: '100%',\n        position: 'relative',\n        '& video::cue': {\n          color: 'white',\n          // textShadow: '0px 0px 4px #000',\n          whiteSpace: 'pre-line',\n          fontSize: '$lg',\n          fontStyle: 'normal',\n          fontWeight: '$semiBold',\n          lineHeight: '$sm',\n          letterSpacing: '0.5px',\n        },\n        '& video::-webkit-media-text-track-display': {\n          padding: '0 $4',\n          boxShadow: '0px 1px 3px 0px #000000A3',\n        },\n        '& video::-webkit-media-text-track-container': {\n          fontSize: '$space$10 !important',\n        },\n      }}\n      direction=\"column\"\n      {...props}\n    >\n      <video\n        style={{\n          flex: '1 1 0',\n          margin: '0 auto',\n          minHeight: '0',\n          objectFit: 'contain',\n          width: 'inherit',\n        }}\n        ref={videoRef}\n        playsInline\n      />\n      {children}\n    </Flex>\n  );\n});\n", "import React, { MouseEvent } from 'react';\nimport { PauseIcon, PlayIcon } from '@100mslive/react-icons';\nimport { IconButton, Tooltip } from '../../..';\nimport { useHMSPlayerContext } from './PlayerContext';\n\nexport const PlayButton = ({\n  isPaused,\n  width = 20,\n  height = 20,\n}: {\n  isPaused: boolean;\n  width: number;\n  height: number;\n}) => {\n  const { hlsPlayer } = useHMSPlayerContext();\n  const onClick = async (event: MouseEvent) => {\n    event?.stopPropagation();\n    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();\n  };\n  return (\n    <Tooltip title={isPaused ? 'Play' : 'Pause'} side=\"top\">\n      <IconButton onClick={onClick} data-testid=\"play_pause_btn\">\n        {isPaused ? <PlayIcon width={width} height={height} /> : <PauseIcon width={width} height={height} />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n", "import React, { useContext } from 'react';\nimport { HMSHLSPlayer } from '@100mslive/hls-player';\n\ntype IHMSPlayerContext = {\n  hlsPlayer?: HMSHLSPlayer;\n};\n\nexport const HMSPlayerContext = React.createContext<IHMSPlayerContext>({\n  hlsPlayer: undefined,\n});\n\nexport const useHMSPlayerContext = () => {\n  const context = useContext(HMSPlayerContext);\n  return context;\n};\n", "import React, { useEffect, useState } from 'react';\nimport { Box, Flex, Slider } from '../../..';\nimport { useHMSPlayerContext } from './PlayerContext';\nimport { getPercentage } from './utils';\n\nexport const VideoProgress = () => {\n  const { hlsPlayer } = useHMSPlayerContext();\n  const [videoProgress, setVideoProgress] = useState<number>(0);\n  const [bufferProgress, setBufferProgress] = useState(0);\n  const videoEl = hlsPlayer?.getVideoElement();\n\n  const onValueChange = (time: number) => {\n    hlsPlayer?.seekTo(time);\n  };\n  useEffect(() => {\n    if (!videoEl) {\n      return;\n    }\n    const timeupdateHandler = () => {\n      if (!videoEl) {\n        return;\n      }\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    videoEl.addEventListener('timeupdate', timeupdateHandler);\n    return function cleanup() {\n      videoEl?.removeEventListener('timeupdate', timeupdateHandler);\n    };\n  }, [videoEl]);\n\n  const onProgress = (progress: number[]) => {\n    const progress1 = Math.floor(getPercentage(progress[0], 100));\n    const videoEl = hlsPlayer?.getVideoElement();\n    const currentTime = (progress1 * (videoEl?.duration || 0)) / 100;\n    if (onValueChange) {\n      onValueChange(currentTime);\n    }\n  };\n\n  if (!videoEl) {\n    return null;\n  }\n  return (\n    <Flex align=\"center\" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>\n      <Slider\n        id=\"video-actual-rest\"\n        css={{\n          cursor: 'pointer',\n          h: '$2',\n          zIndex: 1,\n          transition: `all .2s ease .5s`,\n        }}\n        min={0}\n        max={100}\n        step={1}\n        value={[videoProgress]}\n        showTooltip={false}\n        onValueChange={onProgress}\n        thumbStyles={{ w: '$6', h: '$6' }}\n      />\n      <Box\n        id=\"video-buffer\"\n        css={{\n          h: '$2',\n          width: `${bufferProgress - videoProgress}%`,\n          background: '$on_surface_high',\n          position: 'absolute',\n          left: `${videoProgress}%`,\n          opacity: '25%',\n        }}\n      />\n    </Flex>\n  );\n};\n", "export function getPercentage(a: number, b: number) {\n  return (a / b) * 100;\n}\n\n/**\n * Take a time in seconds and return its equivalent time in hh:mm:ss format\n * @param {number} timeInSeconds if given as floating point value, it is floored.\n *\n * @returns a string representing timeInSeconds in HH:MM:SS format.\n */\nexport function getDurationFromSeconds(timeInSeconds: number) {\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\nexport function getTime(timeInMilles: number) {\n  const timeInSeconds = Math.floor(timeInMilles / 1000);\n  const hours = Math.floor(timeInSeconds / 3600);\n  const minutes = Math.floor((timeInSeconds % 3600) / 60);\n  const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}` : '';\n  return hour + `${hour ? 'h:' : ''}` + minutes + 'm';\n}\n", "import React, { useEffect, useState } from 'react';\nimport { HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport { Text } from '../../../Text';\nimport { useHMSPlayerContext } from './PlayerContext';\nimport { getDurationFromSeconds } from './utils';\n\nexport const VideoTime = () => {\n  const { hlsPlayer } = useHMSPlayerContext();\n  const [videoTime, setVideoTime] = useState('');\n\n  useEffect(() => {\n    const timeupdateHandler = (currentTime: number) => {\n      const videoEl = hlsPlayer?.getVideoElement();\n      if (videoEl) {\n        setVideoTime(getDurationFromSeconds(videoEl.duration - currentTime));\n      } else {\n        setVideoTime(getDurationFromSeconds(currentTime));\n      }\n    };\n    if (hlsPlayer) {\n      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);\n    }\n    return function cleanup() {\n      hlsPlayer?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);\n    };\n  }, [hlsPlayer]);\n\n  return hlsPlayer ? (\n    <Text\n      variant=\"body1\"\n      css={{\n        minWidth: '$16',\n        c: '$on_surface_medium',\n        display: 'flex',\n        justifyContent: 'center',\n        fontWeight: '$regular',\n      }}\n    >\n      -{videoTime}\n    </Text>\n  ) : null;\n};\n", "import React, { useState } from 'react';\nimport { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';\nimport { Flex, Slider } from '../../..';\nimport { useHMSPlayerContext } from './PlayerContext';\n\nexport const VolumeControl = () => {\n  const { hlsPlayer } = useHMSPlayerContext();\n  const [volume, setVolume] = useState(hlsPlayer?.volume || 0);\n  const [showSlider, setShowSlider] = useState(false);\n\n  return (\n    <Flex\n      align=\"center\"\n      css={{ color: '$on_surface_high' }}\n      onMouseOver={event => {\n        event.stopPropagation();\n        setShowSlider(true);\n      }}\n      onMouseLeave={event => {\n        event.stopPropagation();\n        setShowSlider(false);\n      }}\n    >\n      <VolumeIcon\n        volume={volume}\n        onClick={() => {\n          if (volume > 0) {\n            setVolume(0);\n            hlsPlayer?.setVolume(0);\n          } else {\n            setVolume(100);\n            hlsPlayer?.setVolume(100);\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          opacity: showSlider ? '1' : '0',\n          display: showSlider ? '' : 'none',\n          transition: `all .2s ease .5s`,\n        }}\n        min={0}\n        max={100}\n        step={1}\n        value={[volume]}\n        onValueChange={volume => {\n          hlsPlayer?.setVolume(volume[0]);\n          setVolume(volume[0]);\n        }}\n        thumbStyles={{ w: '$6', h: '$6' }}\n      />\n    </Flex>\n  );\n};\n\nconst VolumeIcon = ({ volume, onClick }: { volume: number; onClick: () => void }) => {\n  if (volume === 0) {\n    return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;\n  }\n  return volume < 50 ? (\n    <VolumeOneIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />\n  ) : (\n    <VolumeTwoIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />\n  );\n};\n", "import React from 'react';\nimport { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';\nimport { Flex, IconButton, Tooltip } from '../../..';\n\nexport const FullScreenButton = ({ isFullScreen, onToggle }: { isFullScreen: boolean; onToggle: () => void }) => {\n  return (\n    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side=\"top\">\n      <IconButton css={{ margin: '0px' }} onClick={onToggle} key=\"fullscreen_btn\" data-testid=\"fullscreen_btn\">\n        <Flex>{isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}</Flex>\n      </IconButton>\n    </Tooltip>\n  );\n};\n", "import React from 'react';\nimport { Button, Dialog, Text } from '../../..';\n// @ts-ignore\nimport { DialogContent, DialogRow } from '../../primitives/DialogContent';\n\nexport function HLSAutoplayBlockedPrompt({\n  open,\n  unblockAutoPlay,\n}: {\n  open: boolean;\n  unblockAutoPlay: () => Promise<void>;\n}) {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={async value => {\n        if (!value) {\n          await 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={async () => {\n              await unblockAutoPlay();\n            }}\n          >\n            Play stream\n          </Button>\n        </DialogRow>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n", "import React from 'react';\nimport { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';\nimport { IconButton, Tooltip } from '../../../';\nimport { useHMSPlayerContext } from './PlayerContext';\n\nexport function HLSCaptionSelector({ isEnabled }: { isEnabled: boolean }) {\n  const { hlsPlayer } = useHMSPlayerContext();\n  return (\n    <Tooltip title=\"Subtitles/closed captions\" side=\"top\">\n      <IconButton css={{ p: '$2' }} onClick={() => hlsPlayer?.toggleCaption()}>\n        {isEnabled ? <ClosedCaptionIcon width=\"20\" height=\"20px\" /> : <OpenCaptionIcon width=\"20\" height=\"20px\" />}\n      </IconButton>\n    </Tooltip>\n  );\n}\n", "import React from 'react';\nimport { useMedia } from 'react-use';\nimport { HMSHLSLayer } from '@100mslive/hls-player';\nimport { CheckIcon, CrossIcon, SettingsIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, Tooltip } from '../../..';\nimport { Sheet } from '../../../Sheet';\nimport { config } from '../../../Theme';\nimport { useIsLandscape } from '../../common/hooks';\n\nexport function HLSQualitySelector({\n  open,\n  onOpenChange,\n  layers,\n  onQualityChange,\n  selection,\n  isAuto,\n}: {\n  open: boolean;\n  onOpenChange: (value: boolean) => void;\n  layers: HMSHLSLayer[];\n  onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;\n  selection: HMSHLSLayer;\n  isAuto: boolean;\n}) {\n  const isMobile = useMedia(config.media.md);\n  const isLandscape = useIsLandscape();\n  if (isMobile || isLandscape) {\n    return (\n      <Sheet.Root open={open} onOpenChange={onOpenChange}>\n        <Sheet.Trigger asChild data-testid=\"quality_selector\">\n          <Flex\n            css={{\n              color: '$on_primary_high',\n              r: '$1',\n              cursor: 'pointer',\n              p: '$2',\n            }}\n          >\n            <SettingsIcon />\n          </Flex>\n        </Sheet.Trigger>\n\n        {layers.length > 0 && (\n          <Sheet.Content css={{ bg: '$surface_default', pb: '$1' }} onClick={() => onOpenChange(false)}>\n            <Sheet.Title\n              css={{\n                display: 'flex',\n                color: '$on_surface_high',\n                w: '100%',\n                justifyContent: 'space-between',\n                mt: '$8',\n                fontSize: '$md',\n                px: '$10',\n                pb: '$8',\n                borderBottom: '1px solid $border_bright',\n                alignItems: 'center',\n              }}\n            >\n              Quality\n              <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>\n                <CrossIcon />\n              </Sheet.Close>\n            </Sheet.Title>\n            {layers.map(layer => {\n              return (\n                <Flex\n                  align=\"center\"\n                  css={{\n                    w: '100%',\n                    bg: '$surface_default',\n                    '&:hover': {\n                      bg: '$surface_brighter',\n                    },\n                    cursor: 'pointer',\n                    gap: '$4',\n                    py: '$8',\n                    px: '$10',\n                  }}\n                  key={layer.width}\n                  onClick={() => onQualityChange(layer)}\n                >\n                  <Text variant=\"caption\" css={{ fontWeight: '$semiBold' }}>\n                    {getQualityText(layer)}\n                  </Text>\n                  <Text variant=\"caption\" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>\n                    {getBitrateText(layer)}\n                  </Text>\n                  {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (\n                    <CheckIcon width=\"16px\" height=\"16px\" />\n                  )}\n                </Flex>\n              );\n            })}\n            <Flex\n              align=\"center\"\n              css={{\n                w: '100%',\n                bg: '$surface_default',\n                '&:hover': {\n                  bg: '$surface_brighter',\n                },\n                cursor: 'pointer',\n                gap: '$4',\n                py: '$8',\n                px: '$10',\n              }}\n              key=\"auto\"\n              onClick={() => onQualityChange({ height: 'auto' })}\n            >\n              <Text variant=\"caption\" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>\n                Auto\n              </Text>\n              {isAuto && <CheckIcon width=\"16px\" height=\"16px\" />}\n            </Flex>\n          </Sheet.Content>\n        )}\n      </Sheet.Root>\n    );\n  }\n  return (\n    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)}>\n      <Dropdown.Trigger asChild data-testid=\"quality_selector\">\n        <Flex\n          css={{\n            color: '$on_primary_high',\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                  c: '$on_surface_high',\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', c: '$on_surface_medium' }}\n              >\n                {isAuto && (\n                  <>\n                    Auto\n                    <Box\n                      css={{\n                        mx: '$2',\n                        w: '$2',\n                        h: '$2',\n                        background: '$on_surface_medium',\n                        r: '$1',\n                      }}\n                    />\n                  </>\n                )}\n                {selection && Math.min(selection.width || 0, selection.height || 0)}p\n              </Text>\n            </Flex>\n          </Tooltip>\n        </Flex>\n      </Dropdown.Trigger>\n      {layers.length > 0 && (\n        <Dropdown.Content\n          sideOffset={5}\n          align=\"end\"\n          css={{\n            height: 'auto',\n            maxHeight: '$52',\n            w: '$40',\n            bg: '$surface_bright',\n            py: '$4',\n            gap: '$4',\n            display: 'grid',\n          }}\n        >\n          {layers.map(layer => {\n            return (\n              <Dropdown.Item\n                onClick={() => onQualityChange(layer)}\n                key={layer.width}\n                css={{\n                  bg:\n                    !isAuto && layer.width === selection?.width && layer.height === selection?.height\n                      ? '$surface_default'\n                      : '$surface_bright',\n                  '&:hover': {\n                    bg: '$surface_brighter',\n                  },\n                  p: '$2 $4 $2 $8',\n                  h: '$12',\n                  gap: '$2',\n                }}\n              >\n                <Text variant=\"caption\" css={{ fontWeight: '$semiBold' }}>\n                  {getQualityText(layer)}\n                </Text>\n                <Text variant=\"caption\" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>\n                  {getBitrateText(layer)}\n                </Text>\n                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (\n                  <CheckIcon width=\"16px\" height=\"16px\" />\n                )}\n              </Dropdown.Item>\n            );\n          })}\n          <Dropdown.Item\n            onClick={() => onQualityChange({ height: 'auto' })}\n            key=\"auto\"\n            css={{\n              bg: !isAuto ? '$surface_bright' : '$surface_default',\n              '&:hover': {\n                bg: '$surface_brighter',\n              },\n              p: '$2 $4 $2 $8',\n              h: '$12',\n              gap: '$2',\n            }}\n          >\n            <Text variant=\"caption\" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>\n              Auto\n            </Text>\n            {isAuto && <CheckIcon width=\"16px\" height=\"16px\" />}\n          </Dropdown.Item>\n        </Dropdown.Content>\n      )}\n    </Dropdown.Root>\n  );\n}\n\nconst getQualityText = (layer: HMSHLSLayer) => `${Math.min(layer.height || 0, layer.width || 0)}p `;\nconst getBitrateText = (layer: HMSHLSLayer) => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;\n", "import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { selectHLSState, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';\nimport { Flex } from '../../../Layout';\nimport { Text } from '../../../Text';\n// @ts-ignore: No implicit any\nimport { Logo } from '../Header/HeaderComponents';\nimport { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';\n// @ts-ignore: No implicit Any\nimport { getFormattedCount } from '../../common/utils';\nimport { getTime } from './utils';\n\n/*\n\tplayer handler --> left -> go live with timer or live, right -> expand icon \n\tinbetween -> play pause icon, double tap to go back/forward\n\tseekbar\n\thalf page will have chat or participant view\n*/\nexport const HLSViewTitle = () => {\n  const peerCount = useHMSStore(selectPeerCount);\n  const hlsState = useHMSStore(selectHLSState);\n  const intervalRef = useRef<NodeJS.Timeout | null>(null);\n  const { screenType } = useRoomLayoutConferencingScreen();\n  const [liveTime, setLiveTime] = useState(0);\n\n  const startTimer = useCallback(() => {\n    intervalRef.current = setInterval(() => {\n      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];\n      if (hlsState?.running && timeStamp) {\n        setLiveTime(Date.now() - timeStamp.getTime());\n      }\n    }, 60000);\n  }, [hlsState?.running, hlsState?.variants, screenType]);\n\n  useEffect(() => {\n    if (hlsState?.running) {\n      startTimer();\n      const timeStamp = hlsState?.variants[0]?.[screenType === 'hls_live_streaming' ? 'startedAt' : 'initialisedAt'];\n      if (hlsState?.running && timeStamp) {\n        setLiveTime(Date.now() - timeStamp.getTime());\n      }\n    }\n    if (!hlsState?.running && intervalRef.current) {\n      clearInterval(intervalRef.current);\n    }\n    return () => {\n      if (intervalRef.current) {\n        clearInterval(intervalRef.current);\n      }\n    };\n  }, [hlsState?.running, hlsState?.variants, screenType, startTimer]);\n\n  return (\n    <Flex\n      gap=\"4\"\n      align=\"center\"\n      css={{\n        position: 'relative',\n        h: 'fit-content',\n        w: '100%',\n        borderBottom: '1px solid $border_bright',\n        p: '$8',\n        backgroundColor: '$surface_dim',\n      }}\n    >\n      <Logo />\n      <Flex direction=\"column\">\n        <Text variant=\"sub2\" css={{ fontWeight: '$semiBold' }}>\n          Tech Talk\n        </Text>\n        <Flex gap=\"1\">\n          <Text variant=\"caption\" css={{ color: '$on_surface_medium' }}>\n            {getFormattedCount(peerCount) + ' watching'}\n          </Text>\n          <Flex\n            direction=\"column\"\n            css={{\n              w: '$3',\n              h: '$3',\n              backgroundColor: '$on_surface_medium',\n              borderRadius: '50%',\n              alignSelf: 'center',\n            }}\n          />\n          <Text variant=\"caption\" css={{ color: '$on_surface_medium' }}>\n            {'Started ' + getTime(liveTime) + ' ago'}\n          </Text>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n"],
         | 
| 5 | 
            -
              "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,OAAOA,WAAS,eAAAC,cAAa,aAAAC,YAAW,UAAAC,SAAQ,YAAAC,iBAAgB;AAChE,SAAS,eAAe,YAAAC,WAAU,aAAa,iBAAiB;AAChE,SAAS,kBAAkB,cAAc,sBAAAC,2BAA0B;AACnE,OAAO,gBAAgB;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAAC;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB,YAAY,aAAAC,YAAW,YAAAC,iBAAgB;;;AChBjE;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,+CAAe,aAAc;AAAA,EACpE;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,WAAW;AAAA,EACX,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;;;ACrBD;AAAA,OAAOC,UAAS,kBAAkB;AAG3B,IAAM,WAAW,WAAW,CAAC,IAAwB,aAAa;AAArC,eAAE,WAHtC,IAGoC,IAAe,kBAAf,IAAe,CAAb;AACpC,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,QACH,MAAM;AAAA,QACN,UAAU;AAAA,QACV,gBAAgB;AAAA,UACd,OAAO;AAAA;AAAA,UAEP,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,eAAe;AAAA,QACjB;AAAA,QACA,6CAA6C;AAAA,UAC3C,SAAS;AAAA,UACT,WAAW;AAAA,QACb;AAAA,QACA,+CAA+C;AAAA,UAC7C,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA,WAAU;AAAA,OACN;AAAA,IAEJ,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QACA,KAAK;AAAA,QACL,aAAW;AAAA;AAAA,IACb;AAAA,IACC;AAAA,EACH;AAEJ,CAAC;;;AC7CD;AAAA,OAAOC,YAA2B;AAClC,SAAS,WAAW,gBAAgB;;;ACDpC;AAAA,OAAOC,UAAS,kBAAkB;AAO3B,IAAM,mBAAmBA,OAAM,cAAiC;AAAA,EACrE,WAAW;AACb,CAAC;AAEM,IAAM,sBAAsB,MAAM;AACvC,QAAM,UAAU,WAAW,gBAAgB;AAC3C,SAAO;AACT;;;ADTO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AACX,MAIM;AACJ,QAAM,EAAE,WAAAC,WAAU,IAAI,oBAAoB;AAC1C,QAAM,UAAU,CAAO,UAAsB;AAC3C,mCAAO;AACP,eAAW,MAAMA,cAAA,gBAAAA,WAAW,SAASA,cAAA,gBAAAA,WAAW;AAAA,EAClD;AACA,SACE,gBAAAC,OAAA,cAAC,WAAQ,OAAO,WAAW,SAAS,SAAS,MAAK,SAChD,gBAAAA,OAAA,cAAC,cAAW,SAAkB,eAAY,oBACvC,WAAW,gBAAAA,OAAA,cAAC,YAAS,OAAc,QAAgB,IAAK,gBAAAA,OAAA,cAAC,aAAU,OAAc,QAAgB,CACpG,CACF;AAEJ;;;AE1BA;AAAA,OAAOC,UAAS,WAAW,gBAAgB;;;ACA3C;AAAO,SAAS,cAAc,GAAW,GAAW;AAClD,SAAQ,IAAI,IAAK;AACnB;AAQO,SAASC,wBAAuB,eAAuB;AAC5D,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;AAEO,SAAS,QAAQ,cAAsB;AAC5C,QAAM,gBAAgB,KAAK,MAAM,eAAe,GAAI;AACpD,QAAM,QAAQ,KAAK,MAAM,gBAAgB,IAAI;AAC7C,QAAM,UAAU,KAAK,MAAO,gBAAgB,OAAQ,EAAE;AACtD,QAAM,OAAO,UAAU,IAAI,GAAG,QAAQ,KAAK,MAAM,EAAE,GAAG,KAAK,KAAK;AAChE,SAAO,OAAO,GAAG,OAAO,OAAO,EAAE,KAAK,UAAU;AAClD;;;AD7BO,IAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,WAAAC,WAAU,IAAI,oBAAoB;AAC1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAiB,CAAC;AAC5D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,UAAUA,cAAA,gBAAAA,WAAW;AAE3B,QAAM,gBAAgB,CAAC,SAAiB;AACtC,IAAAA,cAAA,gBAAAA,WAAW,OAAO;AAAA,EACpB;AACA,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AACA,UAAM,oBAAoB,MAAM;AAlBpC;AAmBM,UAAI,CAAC,SAAS;AACZ;AAAA,MACF;AACA,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,YAAQ,iBAAiB,cAAc,iBAAiB;AACxD,WAAO,SAAS,UAAU;AACxB,yCAAS,oBAAoB,cAAc;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,CAAC,aAAuB;AACzC,UAAM,YAAY,KAAK,MAAM,cAAc,SAAS,CAAC,GAAG,GAAG,CAAC;AAC5D,UAAMC,WAAUH,cAAA,gBAAAA,WAAW;AAC3B,UAAM,cAAe,cAAaG,YAAA,gBAAAA,SAAS,aAAY,KAAM;AAC7D,QAAI,eAAe;AACjB,oBAAc,WAAW;AAAA,IAC3B;AAAA,EACF;AAEA,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AACA,SACE,gBAAAC,OAAA,cAAC,QAAK,OAAM,UAAS,KAAK,EAAE,QAAQ,WAAW,GAAG,MAAM,WAAW,UAAU,KAC3E,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,QACH,QAAQ;AAAA,QACR,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,YAAY;AAAA,MACd;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,CAAC,aAAa;AAAA,MACrB,aAAa;AAAA,MACb,eAAe;AAAA,MACf,aAAa,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA;AAAA,EAClC,GACA,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,QACH,GAAG;AAAA,QACH,OAAO,GAAG,iBAAiB,aAAa;AAAA,QACxC,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,MAAM,GAAG,aAAa;AAAA,QACtB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAEJ;;;AEhFA;AAAA,OAAOC,UAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAC3C,SAAS,0BAA0B;AAK5B,IAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,WAAAC,WAAU,IAAI,oBAAoB;AAC1C,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAS,EAAE;AAE7C,EAAAC,WAAU,MAAM;AACd,UAAM,oBAAoB,CAAC,gBAAwB;AACjD,YAAM,UAAUF,cAAA,gBAAAA,WAAW;AAC3B,UAAI,SAAS;AACX,qBAAaG,wBAAuB,QAAQ,WAAW,WAAW,CAAC;AAAA,MACrE,OAAO;AACL,qBAAaA,wBAAuB,WAAW,CAAC;AAAA,MAClD;AAAA,IACF;AACA,QAAIH,YAAW;AACb,MAAAA,WAAU,GAAG,mBAAmB,cAAc,iBAAiB;AAAA,IACjE;AACA,WAAO,SAAS,UAAU;AACxB,MAAAA,cAAA,gBAAAA,WAAW,IAAI,mBAAmB,cAAc;AAAA,IAClD;AAAA,EACF,GAAG,CAACA,UAAS,CAAC;AAEd,SAAOA,aACL,gBAAAI,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,KAAK;AAAA,QACH,UAAU;AAAA,QACV,GAAG;AAAA,QACH,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA;AAAA,IACD;AAAA,IACG;AAAA,EACJ,IACE;AACN;;;ACzCA;AAAA,OAAOC,UAAS,YAAAC,iBAAgB;AAChC,SAAS,eAAe,eAAe,sBAAsB;AAItD,IAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,WAAAC,WAAU,IAAI,oBAAoB;AAC1C,QAAM,CAAC,QAAQ,SAAS,IAAIC,WAASD,cAAA,gBAAAA,WAAW,WAAU,CAAC;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAIC,UAAS,KAAK;AAElD,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,KAAK,EAAE,OAAO,mBAAmB;AAAA,MACjC,aAAa,WAAS;AACpB,cAAM,gBAAgB;AACtB,sBAAc,IAAI;AAAA,MACpB;AAAA,MACA,cAAc,WAAS;AACrB,cAAM,gBAAgB;AACtB,sBAAc,KAAK;AAAA,MACrB;AAAA;AAAA,IAEA,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,MAAM;AACb,cAAI,SAAS,GAAG;AACd,sBAAU,CAAC;AACX,YAAAF,cAAA,gBAAAA,WAAW,UAAU;AAAA,UACvB,OAAO;AACL,sBAAU,GAAG;AACb,YAAAA,cAAA,gBAAAA,WAAW,UAAU;AAAA,UACvB;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,gBAAAE,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,UACH,IAAI;AAAA,UACJ,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,OAAO,EAAE,GAAG,MAAM;AAAA,UAClB,OAAO,EAAE,GAAG,MAAM;AAAA,UAClB,SAAS,aAAa,MAAM;AAAA,UAC5B,SAAS,aAAa,KAAK;AAAA,UAC3B,YAAY;AAAA,QACd;AAAA,QACA,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO,CAAC,MAAM;AAAA,QACd,eAAe,CAAAC,YAAU;AACvB,UAAAH,cAAA,gBAAAA,WAAW,UAAUG,QAAO,CAAC;AAC7B,oBAAUA,QAAO,CAAC,CAAC;AAAA,QACrB;AAAA,QACA,aAAa,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA;AAAA,IAClC;AAAA,EACF;AAEJ;AAEA,IAAM,aAAa,CAAC,EAAE,QAAQ,QAAQ,MAA+C;AACnF,MAAI,WAAW,GAAG;AAChB,WAAO,gBAAAD,OAAA,cAAC,kBAAe,OAAO,EAAE,QAAQ,WAAW,YAAY,aAAa,GAAG,SAAkB;AAAA,EACnG;AACA,SAAO,SAAS,KACd,gBAAAA,OAAA,cAAC,iBAAc,OAAO,EAAE,QAAQ,WAAW,YAAY,aAAa,GAAG,SAAkB,IAEzF,gBAAAA,OAAA,cAAC,iBAAc,OAAO,EAAE,QAAQ,WAAW,YAAY,aAAa,GAAG,SAAkB;AAE7F;;;AR5DO,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;;;ASpBA;AAAA,OAAOE,YAAW;AAClB,SAAS,YAAY,kBAAkB;AAGhC,IAAM,mBAAmB,CAAC,EAAE,cAAc,SAAS,MAAuD;AAC/G,SACE,gBAAAC,OAAA,cAAC,WAAQ,OAAO,GAAG,eAAe,SAAS,IAAI,eAAe,MAAK,SACjE,gBAAAA,OAAA,cAAC,cAAW,KAAK,EAAE,QAAQ,MAAM,GAAG,SAAS,UAAU,KAAI,kBAAiB,eAAY,oBACtF,gBAAAA,OAAA,cAAC,YAAM,eAAe,gBAAAA,OAAA,cAAC,gBAAW,IAAK,gBAAAA,OAAA,cAAC,gBAAW,CAAG,CACxD,CACF;AAEJ;;;ACZA;AAAA,OAAOC,YAAW;AAKX,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AACF,GAGG;AACD,SACE,gBAAAC,OAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,cAAc,CAAM,UAAS;AAC3B,YAAI,CAAC,OAAO;AACV,gBAAM,gBAAgB;AAAA,QACxB;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,MAAY;AACnB,gBAAM,gBAAgB;AAAA,QACxB;AAAA;AAAA,MACD;AAAA,IAED,CACF,CACF;AAAA,EACF;AAEJ;;;ACzCA;AAAA,OAAOC,aAAW;AAClB,SAAS,mBAAmB,uBAAuB;AAI5C,SAAS,mBAAmB,EAAE,UAAU,GAA2B;AACxE,QAAM,EAAE,WAAAC,WAAU,IAAI,oBAAoB;AAC1C,SACE,gBAAAC,QAAA,cAAC,WAAQ,OAAM,6BAA4B,MAAK,SAC9C,gBAAAA,QAAA,cAAC,cAAW,KAAK,EAAE,GAAG,KAAK,GAAG,SAAS,MAAMD,cAAA,gBAAAA,WAAW,mBACrD,YAAY,gBAAAC,QAAA,cAAC,qBAAkB,OAAM,MAAK,QAAO,QAAO,IAAK,gBAAAA,QAAA,cAAC,mBAAgB,OAAM,MAAK,QAAO,QAAO,CAC1G,CACF;AAEJ;;;ACdA;AAAA,OAAOC,aAAW;AAClB,SAAS,gBAAgB;AAEzB,SAAS,WAAW,aAAAC,YAAW,oBAAoB;AAM5C,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,WAAW,SAAS,OAAO,MAAM,EAAE;AACzC,QAAM,cAAc,eAAe;AACnC,MAAI,YAAY,aAAa;AAC3B,WACE,gBAAAC,QAAA,cAAC,MAAM,MAAN,EAAW,MAAY,gBACtB,gBAAAA,QAAA,cAAC,MAAM,SAAN,EAAc,SAAO,MAAC,eAAY,sBACjC,gBAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,UACH,OAAO;AAAA,UACP,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,GAAG;AAAA,QACL;AAAA;AAAA,MAEA,gBAAAA,QAAA,cAAC,kBAAa;AAAA,IAChB,CACF,GAEC,OAAO,SAAS,KACf,gBAAAA,QAAA,cAAC,MAAM,SAAN,EAAc,KAAK,EAAE,IAAI,oBAAoB,IAAI,KAAK,GAAG,SAAS,MAAM,aAAa,KAAK,KACzF,gBAAAA,QAAA;AAAA,MAAC,MAAM;AAAA,MAAN;AAAA,QACC,KAAK;AAAA,UACH,SAAS;AAAA,UACT,OAAO;AAAA,UACP,GAAG;AAAA,UACH,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,cAAc;AAAA,UACd,YAAY;AAAA,QACd;AAAA;AAAA,MACD;AAAA,MAEC,gBAAAA,QAAA,cAAC,MAAM,OAAN,EAAY,KAAK,EAAE,OAAO,mBAAmB,GAAG,SAAS,MAAM,aAAa,KAAK,KAChF,gBAAAA,QAAA,cAACC,YAAA,IAAU,CACb;AAAA,IACF,GACC,OAAO,IAAI,WAAS;AACnB,aACE,gBAAAD,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,KAAK;AAAA,YACH,GAAG;AAAA,YACH,IAAI;AAAA,YACJ,WAAW;AAAA,cACT,IAAI;AAAA,YACN;AAAA,YACA,QAAQ;AAAA,YACR,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,IAAI;AAAA,UACN;AAAA,UACA,KAAK,MAAM;AAAA,UACX,SAAS,MAAM,gBAAgB,KAAK;AAAA;AAAA,QAEpC,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,YAAY,YAAY,KACpD,eAAe,KAAK,CACvB;AAAA,QACA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,MAAM,SAAS,GAAG,mBAAmB,IAAI,KAAK,KAC1E,eAAe,KAAK,CACvB;AAAA,QACC,CAAC,UAAU,MAAM,WAAU,uCAAW,UAAS,MAAM,YAAW,uCAAW,WAC1E,gBAAAA,QAAA,cAAC,aAAU,OAAM,QAAO,QAAO,QAAO;AAAA,MAE1C;AAAA,IAEJ,CAAC,GACD,gBAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAK;AAAA,UACH,GAAG;AAAA,UACH,IAAI;AAAA,UACJ,WAAW;AAAA,YACT,IAAI;AAAA,UACN;AAAA,UACA,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,QACA,KAAI;AAAA,QACJ,SAAS,MAAM,gBAAgB,EAAE,QAAQ,OAAO,CAAC;AAAA;AAAA,MAEjD,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,YAAY,aAAa,MAAM,QAAQ,KAAG,MAEzE;AAAA,MACC,UAAU,gBAAAA,QAAA,cAAC,aAAU,OAAM,QAAO,QAAO,QAAO;AAAA,IACnD,CACF,CAEJ;AAAA,EAEJ;AACA,SACE,gBAAAA,QAAA,cAAC,SAAS,MAAT,EAAc,MAAY,cAAc,WAAS,aAAa,KAAK,KAClE,gBAAAA,QAAA,cAAC,SAAS,SAAT,EAAiB,SAAO,MAAC,eAAY,sBACpC,gBAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,OAAO;AAAA,QACP,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA;AAAA,IAEA,gBAAAA,QAAA,cAAC,WAAQ,OAAM,kBAAiB,MAAK,SACnC,gBAAAA,QAAA,cAAC,QAAK,OAAM,YACV,gBAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,GAAG;AAAA,QACL;AAAA;AAAA,MAEA,gBAAAA,QAAA,cAAC,kBAAa;AAAA,IAChB,GACA,gBAAAA,QAAA;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,MAAM,GAAG,qBAAqB;AAAA;AAAA,MAE/E,UACC,gBAAAA,QAAA,cAAAA,QAAA,gBAAE,QAEA,gBAAAA,QAAA;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,SAAS,GAAG,UAAU,UAAU,CAAC;AAAA,MAAE;AAAA,IACtE,CACF,CACF;AAAA,EACF,CACF,GACC,OAAO,SAAS,KACf,gBAAAA,QAAA;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,OAAM;AAAA,MACN,KAAK;AAAA,QACH,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,KAAK;AAAA,QACL,SAAS;AAAA,MACX;AAAA;AAAA,IAEC,OAAO,IAAI,WAAS;AACnB,aACE,gBAAAA,QAAA;AAAA,QAAC,SAAS;AAAA,QAAT;AAAA,UACC,SAAS,MAAM,gBAAgB,KAAK;AAAA,UACpC,KAAK,MAAM;AAAA,UACX,KAAK;AAAA,YACH,IACE,CAAC,UAAU,MAAM,WAAU,uCAAW,UAAS,MAAM,YAAW,uCAAW,UACvE,qBACA;AAAA,YACN,WAAW;AAAA,cACT,IAAI;AAAA,YACN;AAAA,YACA,GAAG;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,UACP;AAAA;AAAA,QAEA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,YAAY,YAAY,KACpD,eAAe,KAAK,CACvB;AAAA,QACA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,MAAM,SAAS,GAAG,mBAAmB,IAAI,KAAK,KAC1E,eAAe,KAAK,CACvB;AAAA,QACC,CAAC,UAAU,MAAM,WAAU,uCAAW,UAAS,MAAM,YAAW,uCAAW,WAC1E,gBAAAA,QAAA,cAAC,aAAU,OAAM,QAAO,QAAO,QAAO;AAAA,MAE1C;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAAA,QAAA;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC,SAAS,MAAM,gBAAgB,EAAE,QAAQ,OAAO,CAAC;AAAA,QACjD,KAAI;AAAA,QACJ,KAAK;AAAA,UACH,IAAI,CAAC,SAAS,oBAAoB;AAAA,UAClC,WAAW;AAAA,YACT,IAAI;AAAA,UACN;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH,KAAK;AAAA,QACP;AAAA;AAAA,MAEA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,YAAY,aAAa,MAAM,QAAQ,KAAG,MAEzE;AAAA,MACC,UAAU,gBAAAA,QAAA,cAAC,aAAU,OAAM,QAAO,QAAO,QAAO;AAAA,IACnD;AAAA,EACF,CAEJ;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAAuB,GAAG,KAAK,IAAI,MAAM,UAAU,GAAG,MAAM,SAAS,CAAC,CAAC;AAC/F,IAAM,iBAAiB,CAAC,UAAuB,KAAK,OAAO,MAAM,UAAU,GAAI,IAAI,KAAM,QAAQ,CAAC,CAAC;;;AChPnG;AAAA,OAAOE,WAAS,aAAa,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;AAChE,SAAS,gBAAgB,iBAAiB,mBAAmB;AAgBtD,IAAM,eAAe,MAAM;AAChC,QAAM,YAAY,YAAY,eAAe;AAC7C,QAAM,WAAW,YAAY,cAAc;AAC3C,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,EAAE,WAAW,IAAI,gCAAgC;AACvD,QAAM,CAAC,UAAU,WAAW,IAAIC,UAAS,CAAC;AAE1C,QAAM,aAAa,YAAY,MAAM;AACnC,gBAAY,UAAU,YAAY,MAAM;AAzB5C;AA0BM,YAAM,aAAY,0CAAU,SAAS,OAAnB,mBAAwB,eAAe,uBAAuB,cAAc;AAC9F,WAAI,qCAAU,YAAW,WAAW;AAClC,oBAAY,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC;AAAA,MAC9C;AAAA,IACF,GAAG,GAAK;AAAA,EACV,GAAG,CAAC,qCAAU,SAAS,qCAAU,UAAU,UAAU,CAAC;AAEtD,EAAAC,WAAU,MAAM;AAjClB;AAkCI,QAAI,qCAAU,SAAS;AACrB,iBAAW;AACX,YAAM,aAAY,0CAAU,SAAS,OAAnB,mBAAwB,eAAe,uBAAuB,cAAc;AAC9F,WAAI,qCAAU,YAAW,WAAW;AAClC,oBAAY,KAAK,IAAI,IAAI,UAAU,QAAQ,CAAC;AAAA,MAC9C;AAAA,IACF;AACA,QAAI,EAAC,qCAAU,YAAW,YAAY,SAAS;AAC7C,oBAAc,YAAY,OAAO;AAAA,IACnC;AACA,WAAO,MAAM;AACX,UAAI,YAAY,SAAS;AACvB,sBAAc,YAAY,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,qCAAU,SAAS,qCAAU,UAAU,YAAY,UAAU,CAAC;AAElE,SACE,gBAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,OAAM;AAAA,MACN,KAAK;AAAA,QACH,UAAU;AAAA,QACV,GAAG;AAAA,QACH,GAAG;AAAA,QACH,cAAc;AAAA,QACd,GAAG;AAAA,QACH,iBAAiB;AAAA,MACnB;AAAA;AAAA,IAEA,gBAAAA,QAAA,cAAC,UAAK;AAAA,IACN,gBAAAA,QAAA,cAAC,QAAK,WAAU,YACd,gBAAAA,QAAA,cAAC,QAAK,SAAQ,QAAO,KAAK,EAAE,YAAY,YAAY,KAAG,WAEvD,GACA,gBAAAA,QAAA,cAAC,QAAK,KAAI,OACR,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,OAAO,qBAAqB,KACxD,kBAAkB,SAAS,IAAI,WAClC,GACA,gBAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAK;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,WAAW;AAAA,QACb;AAAA;AAAA,IACF,GACA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,WAAU,KAAK,EAAE,OAAO,qBAAqB,KACxD,aAAa,QAAQ,QAAQ,IAAI,MACpC,CACF,CACF;AAAA,EACF;AAEJ;;;AfnDA,IAAI;AACJ,IAAM,WAAW,CAAC;AAElB,IAAM,UAAU,MAAM;AA1CtB;AA2CE,QAAM,WAAWC,QAAO,IAAI;AAC5B,QAAM,aAAaA,QAAO,IAAI;AAC9B,QAAM,WAAWC,aAAYC,eAAc;AAC3C,QAAM,gBAAgBD,aAAY,cAAc,SAAS,QAAQ,CAAC;AAClE,QAAM,EAAE,UAAU,WAAW,IAAI,gCAAgC;AACjE,QAAM,eAAe,oBAAoB,qBAAqB,YAAY;AAC1E,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAIE,UAAS,KAAK;AACpD,MAAI,CAAC,eAAe,gBAAgB,IAAIA,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,kBAAkB,mBAAmB,IAAIA,UAAS,IAAI;AAC7D,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAS,KAAK;AACpD,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,CAAC,MAAM,MAAM,IAAI,UAAU,KAAK;AACtC,QAAM,aAAa,YAAY,MAAM;AACrC,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,eAAe,mBAAmB;AACxC,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,UAAS,IAAI;AAC3D,QAAM,CAAC,oBAAoB,qBAAqB,IAAIA,UAAS,IAAI;AACjE,QAAM,CAAC,qBAAqB,sBAAsB,IAAIA,UAAS,KAAK;AACpE,QAAM,cAAcH,QAAO,IAAI;AAC/B,QAAM,mBAAmBA,QAAO;AAChC,QAAM,WAAWC,aAAY,cAAc,SAAS,QAAQ,CAAC;AAC7D,QAAM,aAAa,kBAAkB,kBAAkB,IAAI;AAC3D,QAAM,WAAW,CAAC,EAAC,qCAAU;AAC7B,QAAM,wBAAwB,WAAW;AAEzC,QAAM,WAAWG,UAAS,OAAO,MAAM,EAAE;AACzC,QAAM,cAAc,eAAe;AAEnC,QAAM,eAAe,cAAc,YAAY,MAAM;AAAA,IACnD,SAAS,MAAM,OAAO,KAAK;AAAA,EAC7B,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAID,UAAS,KAAK;AAElD,QAAM,kBAAkB,eAAe,wBAAwB;AAE/D,EAAAE,WAAU,MAAM;AACd,QAAI,aAAa,MAAM,mBAAmB,UAAU;AAClD,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,UAAU,iBAAiB,YAAY,QAAQ,CAAC;AAEpD,EAAAA,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;AACL,EAAAD,WAAU,MAAM;AACd,QAAI,eAAe,eAAe,QAAQ;AACxC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,aAAa,UAAU,CAAC;AAEpC,EAAAA,WAAU,MAAM;AACd,QAAI,CAAC;AAAc;AACnB,UAAM,UAAU,qCAAW,aAAa,KAAK;AAC7C,QAAI,SAAS;AACX,mBAAa,YAAY,SAAS,aAAa,KAAK,EAAE,CAAC;AACvD,aAAO,SAAS,aAAa,KAAK,EAAE;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,EAAAA,WAAU,MAAM;AACd,UAAM,YAAY,SAAS;AAC3B,UAAM,yBAAyB,MAAM;AACnC,qBAAe,IAAI;AAEnB,6CAAW,oBAAoB,SAAS;AAAA,IAC1C;AACA,2CAAW,iBAAiB,SAAS;AACrC,WAAO,MAAM;AACX,6CAAW,oBAAoB,SAAS;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgBE;AAAA,IACpB,aAAW;AAtIf,UAAAC;AAuIM,UAAI,WAAW;AACb,gCAAsBA,MAAA,QAAQ,WAAR,gBAAAA,IAAgB,WAAW,mBAAkB,MAAM;AACzE,+CAAW,SAAS;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,eAAe;AAAA;AAAA,EAClB;AAIA,EAAAH,WAAU,MAAM;AACd,QAAI,UAAU,SAAS;AACvB,UAAM,wBAAwB,CAAC,EAAE,OAAO,MAAM;AAC5C,yBAAmB,MAAM;AACzB,qBAAe,uCAAW,aAAa;AAAA,IACzC;AACA,UAAM,sBAAsB,CAAC,EAAE,MAAM,MAAM;AACzC,gCAA0B,KAAK;AAAA,IACjC;AACA,UAAM,wBAAwB,CAACG,QAAyB;AAAzB,UAAAC,MAAAD,KAAE,UA1JrC,IA0JmCC,KAAc,iBAAdA,KAAc,CAAZ;AA1JrC,UAAAD;AA2JM,YAAM,eAAe,SAAO;AAC1B,YAAI;AACF,iBAAO,KAAK,MAAM,GAAG;AAAA,QACvB,SAAS,GAAG;AACV,iBAAO;AAAA,QACT;AAAA,MACF;AACA,YAAM,WAAW,KAAK;AACtB,YAAM,gBAAgB,aAAa,OAAO;AAE1C,UAAI,cAAc,WAAW,OAAO,GAAG;AACrC,cAAM,SAAS,cAAc,OAAO,cAAc,QAAQ,GAAG,IAAI,CAAC;AAClE,cAAM,OAAO,aAAa,SAAS,eAAe,MAAM,CAAC;AACzD,cAAM,gBAAgB,aAAa,SAAS,mBAAmB,KAAK,SAAS,CAAC,KAAK;AAEnF,cAAM,UAAU,aAAa,SAAS;AAAA,UACpC,OAAO,GAAG,aAAa,cAAc,KAAK,IAAI,KAAK,KAAK,KAAK;AAAA,UAC7D,QACE,gBAAAE,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,eAAe,MAAM;AAAA,cACpC,SAAQ;AAAA,cACR,KAAK;AAAA,gBACH,iBAAiB;AAAA,gBACjB,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,GAAG;AAAA,cACL;AAAA;AAAA,YAEC,KAAK,SAAS,SAAS,WAAW;AAAA,UACrC;AAAA,UAEF,UAAU;AAAA,QACZ,CAAC;AACD,iBAAS,MAAM,IAAI;AACnB;AAAA,MACF;AACA,cAAQ,cAAc,MAAM;AAAA,QAC1B,KAAK;AACH,WAAAF,MAAA,OAAO,oBAAP,gBAAAA,IAAA,aAAyB,EAAE,SAAS,+CAAe,SAAS,UAAU,+CAAe,SAAS;AAC9F;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;AACvF,UAAM,6BAA6B,CAAAG,sBAAoB;AACrD,0BAAoBA,iBAAgB;AAAA,IACtC;AAEA,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,iBAAiB,0BAA0B;AAC3E,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,iBAAiB,0BAA0B;AAE5E,kBAAU,IAAIA,oBAAmB,kBAAkB,mBAAmB;AACtE,kBAAU,IAAIA,oBAAmB,iBAAiB,qBAAqB;AACvE,kBAAU,IAAIA,oBAAmB,eAAe,mBAAmB;AACnE,kBAAU,MAAM;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,YAAY,CAAC;AAKzC,EAAAP,WAAU,MAAM;AACd,UAAM,aAAa,WAAS,iBAAiB,KAAK;AAClD,QAAI,eAAe;AACjB,6CAAW,GAAGO,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,kBAAkB,MAAM;AAC5B,eAAW,WAAW,SAAS,UAAU,CAAC,aAAa;AAAA,EACzD;AAEA,EAAAP,WAAU,MAAM;AACd,QAAI,mBAAmB,gBAAgB,CAAC,qBAAqB;AAC3D,UAAI,iBAAiB,SAAS;AAC5B,qBAAa,iBAAiB,OAAO;AAAA,MACvC;AACA,uBAAiB,UAAU,WAAW,MAAM;AAC1C,2BAAmB,KAAK;AAAA,MAC1B,GAAG,GAAI;AAAA,IACT;AACA,QAAI,CAAC,gBAAgB,iBAAiB,SAAS;AAC7C,mBAAa,iBAAiB,OAAO;AAAA,IACvC;AACA,WAAO,MAAM;AACX,UAAI,iBAAiB,SAAS;AAC5B,qBAAa,iBAAiB,OAAO;AAAA,MACvC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,cAAc,mBAAmB,CAAC;AAEvD,QAAM,iBAAiBE;AAAA,IACrB,WAAS;AACP,YAAM,eAAe;AAErB,UAAI,MAAM,SAAS,kBAAkB,iBAAiB;AACpD,2BAAmB,KAAK;AACxB;AAAA,MACF;AAEA,UAAI,MAAM,SAAS,kBAAkB,qBAAqB;AACxD,2BAAmB,IAAI;AACvB;AAAA,MACF;AACA,UAAI,gBAAgB,CAAC,mBAAmB,MAAM,SAAS,aAAa;AAClE,2BAAmB,IAAI;AACvB,YAAI,iBAAiB,SAAS;AAC5B,uBAAa,iBAAiB,OAAO;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,cAAc,mBAAmB;AAAA,EACrD;AACA,QAAM,iBAAiBA;AAAA,IACrB,WAAS;AAEP,UAAI,MAAM,SAAS,gBAAgB,qBAAqB;AACtD,2BAAmB,IAAI;AACvB;AAAA,MACF;AACA,UAAI,MAAM,SAAS,cAAc;AAC/B,2BAAmB,KAAK;AAAA,MAC1B,WAAW,gBAAgB,CAAC,mBAAmB,MAAM,SAAS,aAAa;AACzE,2BAAmB,IAAI;AACvB,YAAI,iBAAiB,SAAS;AAC5B,uBAAa,iBAAiB,OAAO;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,cAAc,mBAAmB;AAAA,EACrD;AAEA,SACE,gBAAAG,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAI;AAAA,MACJ,IAAI,cAAc,SAAS;AAAA,MAC3B,KAAK;AAAA,MACL,WAAW,YAAY,cAAc,WAAW;AAAA,MAChD,KAAK;AAAA,QACH,GAAG,aAAa,MAAM,cAAc,QAAQ;AAAA,QAC5C,GAAG,aAAa,MAAM,WAAW,QAAQ;AAAA,MAC3C;AAAA;AAAA,IAEC,UAAU,CAAC,cACV,gBAAAA,QAAA,cAAAA,QAAA,gBACE,gBAAAA,QAAA,cAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,UAAU,MAC3C,+CAAe,QAAO,iBAAiB,EAAE,YAAY,eACpD,gBAAAA,QAAA,cAAC,mBAAgB,eAA8B,SAAS,iBAAiB,IACvE,MACJ,gBAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,KAAK;AAAA,UACH,MAAM;AAAA,UACN,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;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,KAAK;AAAA,UACL,cAAc;AAAA,UACd,aAAa;AAAA,UACb,cAAc;AAAA,UACd,cAAc;AAAA,UACd,aAAa;AAAA;AAAA,QAEb,gBAAAA,QAAA,cAAAA,QAAA,gBACG,YAAY,cACX,gBAAAA,QAAA,cAAAA,QAAA,gBACG,CAAC,cACA,gBAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,cACH,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,WAAW;AAAA,cACX,SAAS;AAAA,cACT,SAAS;AAAA,cACT,GAAG;AAAA,cACH,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,QAAQ;AAAA,cACR,YAAY,kBAAkB,KAAK;AAAA,cACnC,SAAS,kBAAkB,MAAM;AAAA,YACnC;AAAA;AAAA,UAEC,WACC,gBAAAA,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAY;AACnB,sBAAM,uCAAW;AAAA,cACnB;AAAA,cACA,eAAY;AAAA;AAAA,YAEZ,gBAAAA,QAAA,cAACG,WAAA,EAAS,OAAM,QAAO,QAAO,QAAO;AAAA,UACvC,IAEA,gBAAAH,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAY;AACnB,sBAAM,uCAAW;AAAA,cACnB;AAAA,cACA,eAAY;AAAA;AAAA,YAEZ,gBAAAA,QAAA,cAACI,YAAA,EAAU,OAAM,QAAO,QAAO,QAAO;AAAA,UACxC;AAAA,QAEJ,GAEF,gBAAAJ,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,KAAK;AAAA,cACH,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,YAAY,kBAAkB,KAAK;AAAA,cACnC,SAAS,kBAAkB,MAAM;AAAA,YACnC;AAAA;AAAA,UAEA,gBAAAA,QAAA;AAAA,YAAC,eAAe,SAAS;AAAA,YAAxB;AAAA,cACC,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA;AAAA,YAEA,gBAAAA,QAAA,cAAC,eAAe,SAAS,OAAxB,MACE,eAAe,gBAAAA,QAAA,cAAC,gBAAW,GAC3B,eAAe,gBAAAA,QAAA,cAAC,sBAAmB,WAAW,kBAAkB,GAChE,gBAAgB,SAAS,IACxB,gBAAAA,QAAA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,MAAM;AAAA,gBACN,WAAW;AAAA,gBACX,iBAAiB;AAAA,gBACjB,QAAQ;AAAA;AAAA,YACV,IACE,IACN;AAAA,UACF;AAAA,QACF,CACF,IACE,MACJ,gBAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,KAAK;AAAA,cACH,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,MAAM;AAAA,cACN,YACE,YAAY,cACR,KACA,2BAA2B,MAAM,OAAO,eAAe,KAAK,cAAc,MAAM,OAAO,eAAe,KAAK;AAAA,cACjH,OAAO;AAAA,cACP,IAAI;AAAA,cACJ,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,YAAY,kBAAkB,KAAK;AAAA,cACnC,SAAS,kBAAkB,MAAM;AAAA,YACnC;AAAA;AAAA,UAEC,EAAE,YAAY,kBAAgB,0CAAU,SAAS,OAAnB,mBAAuB,mBAAkB,gBAAgB,OACtF,gBAAAA,QAAA,cAAC,eAAe,UAAf,IAAwB;AAAA,UAE3B,gBAAAA,QAAA;AAAA,YAAC,eAAe,SAAS;AAAA,YAAxB;AAAA,cACC,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA;AAAA,YAEA,gBAAAA,QAAA,cAAC,eAAe,SAAS,MAAxB,MACE,EAAE,YAAY,gBACb,gBAAAA,QAAA,cAAAA,QAAA,gBACE,gBAAAA,QAAA;AAAA,cAAC,eAAe;AAAA,cAAf;AAAA,gBACC,SAAS,MAAY;AACnB,6BAAW,MAAM,uCAAW,SAAS,uCAAW;AAAA,gBAClD;AAAA,gBACA;AAAA;AAAA,YACF,GACC,CAAC,cAAc,gBAAAA,QAAA,cAAC,eAAe,UAAf,IAAwB,IAAK,MAC9C,gBAAAA,QAAA,cAAC,eAAe,QAAf,IAAsB,CACzB,GAEF,gBAAAA,QAAA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK,EAAE,IAAI,KAAK;AAAA,gBAChB,SAAS,MAAY;AACnB,wBAAM,uCAAW;AACjB,iCAAe,IAAI;AAAA,gBACrB;AAAA,gBACA,KAAI;AAAA,gBACJ,eAAY;AAAA;AAAA,cAEZ,gBAAAA,QAAA,cAAC,WAAQ,OAAO,cAAc,SAAS,cAAc,MAAK,SACxD,gBAAAA,QAAA,cAAC,QAAK,SAAQ,UAAS,KAAK,GAAG,OAAM,YACnC,gBAAAA,QAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,oBACH,QAAQ;AAAA,oBACR,OAAO;AAAA,oBACP,YAAY,cAAc,yBAAyB;AAAA,oBACnD,GAAG;AAAA,kBACL;AAAA;AAAA,cACF,GACA,gBAAAA,QAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,KAAK;AAAA,oBACH,GAAG,cAAc,qBAAqB;AAAA,oBACtC,YAAY;AAAA,kBACd;AAAA;AAAA,gBAEC,cAAc,SAAS;AAAA,cAC1B,CACF,CACF;AAAA,YACF,IACE,YAAY,gBAAgB,CAAC,cAAc,gBAAAA,QAAA,cAAC,eAAe,UAAf,IAAwB,IAAK,IAC7E;AAAA,YAEA,gBAAAA,QAAA,cAAC,eAAe,SAAS,OAAxB,MACE,eAAe,EAAE,YAAY,gBAC5B,gBAAAA,QAAA,cAAC,sBAAmB,WAAW,kBAAkB,GAElD,gBAAgB,SAAS,KAAK,EAAE,YAAY,eAC3C,gBAAAA,QAAA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,MAAM;AAAA,gBACN,WAAW;AAAA,gBACX,iBAAiB;AAAA,gBACjB,QAAQ;AAAA;AAAA,YACV,IACE,MACH,wBACC,gBAAAA,QAAA,cAAC,oBAAiB,cAA4B,UAAU,QAAQ,IAC9D,IACN;AAAA,UACF;AAAA,WACE,YAAY,kBAAgB,0CAAU,SAAS,OAAnB,mBAAuB,mBAAkB,gBAAgB,MACrF,gBAAAA,QAAA,cAAC,eAAe,UAAf,IAAwB,IACvB;AAAA,QACN,CACF;AAAA,MACF;AAAA,IACF,CACF,GAEC,YAAY,CAAC,gBAAgB,gBAAAA,QAAA,cAAC,kBAAa,CAC9C,IAEA,gBAAAA,QAAA,cAAC,QAAK,OAAM,UAAS,SAAQ,UAAS,WAAU,UAAS,KAAK,EAAE,MAAM,QAAQ,IAAI,MAAM,KACtF,gBAAAA,QAAA,cAAC,QAAK,KAAK,EAAE,GAAG,oBAAoB,GAAG,UAAU,IAAI,oBAAoB,GAAG,KAAK,KAC9E,cAAc,gBAAAA,QAAA,cAAC,mBAAgB,QAAQ,IAAI,OAAO,IAAI,IAAK,gBAAAA,QAAA,cAAC,cAAW,QAAQ,IAAI,OAAO,IAAI,CACjG,GACA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,MAAK,KAAK,EAAE,GAAG,oBAAoB,IAAI,OAAO,IAAI,GAAG,WAAW,SAAS,KACpF,cAAc,qBAAqB,qBACtC,GACA,gBAAAA,QAAA,cAAC,QAAK,SAAQ,MAAK,KAAK,EAAE,WAAW,UAAU,IAAI,MAAM,GAAG,qBAAqB,KAC9E,cAAc,qBAAqB,oBACtC,CACF;AAAA,EAEJ;AAEJ;AAEA,IAAO,kBAAQ;",
         | 
| 6 | 
            -
              "names": ["React", "useCallback", "useEffect", "useRef", "useState", "useMedia", "HMSHLSPlayerEvents", "selectHLSState", "useHMSStore", "PauseIcon", "PlayIcon", "React", "React", "React", "React", "hlsPlayer", "React", "React", "getDurationFromSeconds", "hlsPlayer", "videoProgress", "bufferProgress", "videoEl", "React", "React", "useEffect", "useState", "hlsPlayer", "useState", "useEffect", "getDurationFromSeconds", "React", "React", "useState", "hlsPlayer", "useState", "React", "volume", "React", "React", "React", "React", "React", "hlsPlayer", "React", "React", "CrossIcon", "React", "CrossIcon", "React", "useEffect", "useState", "useState", "useEffect", "React", "useRef", "useHMSStore", "selectHLSState", "useState", "useMedia", "useEffect", "showLoader", "useCallback", "_a", "_b", "React", "isCaptionEnabled", "HMSHLSPlayerEvents", "PlayIcon", "PauseIcon"]
         | 
| 7 | 
            -
            }
         |