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

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.
Files changed (51) hide show
  1. package/README.md +30 -33
  2. package/dist/{HLSView-E65JZSU4.js → HLSView-4B5MUDFR.js} +2 -2
  3. package/dist/Prebuilt/common/constants.d.ts +4 -8
  4. package/dist/Prebuilt/components/AudioVideoToggle.d.ts +9 -0
  5. package/dist/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.d.ts +11 -0
  6. package/dist/Prebuilt/components/Polls/common/utils.d.ts +1 -1
  7. package/dist/Prebuilt/components/hooks/useAudioOutputTest.d.ts +8 -0
  8. package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.d.ts +0 -5
  9. package/dist/{chunk-DWLYDCFC.js → chunk-KST24BRA.js} +5297 -5064
  10. package/dist/chunk-KST24BRA.js.map +7 -0
  11. package/dist/index.cjs.js +6302 -6130
  12. package/dist/index.cjs.js.map +4 -4
  13. package/dist/index.js +1 -1
  14. package/dist/meta.cjs.json +745 -1109
  15. package/dist/meta.esbuild.json +761 -1125
  16. package/package.json +8 -7
  17. package/src/Prebuilt/App.tsx +0 -2
  18. package/src/Prebuilt/common/constants.ts +7 -10
  19. package/src/Prebuilt/components/AppData/AppData.tsx +0 -1
  20. package/src/Prebuilt/components/AppData/useUISettings.js +1 -1
  21. package/src/Prebuilt/components/AudioVideoToggle.tsx +308 -0
  22. package/src/Prebuilt/components/Footer/RoleOptions.tsx +1 -0
  23. package/src/Prebuilt/components/Header/Header.tsx +0 -2
  24. package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx +159 -0
  25. package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +0 -2
  26. package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +2 -18
  27. package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx +13 -2
  28. package/src/Prebuilt/components/Notifications/Notifications.tsx +1 -18
  29. package/src/Prebuilt/components/Polls/common/utils.ts +9 -15
  30. package/src/Prebuilt/components/Settings/DeviceSettings.jsx +10 -17
  31. package/src/Prebuilt/components/hooks/useAudioOutputTest.tsx +20 -0
  32. package/src/Prebuilt/layouts/SidePane.tsx +0 -4
  33. package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts +0 -40
  34. package/dist/Prebuilt/components/AppData/useSheet.d.ts +0 -4
  35. package/dist/Prebuilt/components/Header/RoomDetailsHeader.d.ts +0 -2
  36. package/dist/Prebuilt/components/RoomDetails/Duration.d.ts +0 -4
  37. package/dist/Prebuilt/components/RoomDetails/RoomDetailsPane.d.ts +0 -2
  38. package/dist/Prebuilt/components/RoomDetails/RoomDetailsRow.d.ts +0 -4
  39. package/dist/Prebuilt/components/RoomDetails/RoomDetailsSheet.d.ts +0 -2
  40. package/dist/Prebuilt/layouts/Sheet.d.ts +0 -2
  41. package/dist/chunk-DWLYDCFC.js.map +0 -7
  42. package/src/Prebuilt/components/AppData/useSheet.ts +0 -33
  43. package/src/Prebuilt/components/AudioVideoToggle.jsx +0 -171
  44. package/src/Prebuilt/components/Header/RoomDetailsHeader.tsx +0 -51
  45. package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx +0 -121
  46. package/src/Prebuilt/components/RoomDetails/Duration.tsx +0 -26
  47. package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +0 -36
  48. package/src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx +0 -23
  49. package/src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx +0 -45
  50. package/src/Prebuilt/layouts/Sheet.tsx +0 -14
  51. /package/dist/{HLSView-E65JZSU4.js.map → HLSView-4B5MUDFR.js.map} +0 -0
@@ -1,33 +0,0 @@
1
- import { useCallback } from 'react';
2
- import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
3
- import { APP_DATA } from '../../common/constants';
4
-
5
- export const useIsSheetTypeOpen = (sheetType: string) => {
6
- if (!sheetType) {
7
- throw Error('Pass one of the sheet options');
8
- }
9
- return useHMSStore(selectAppData(APP_DATA.sheet)) === sheetType;
10
- };
11
-
12
- export const useSheetState = () => {
13
- const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
14
- return sheet;
15
- };
16
-
17
- export const useSheetToggle = (sheetType: string) => {
18
- const hmsActions = useHMSActions();
19
- const vanillaStore = useHMSVanillaStore();
20
- const toggleSheet = useCallback(() => {
21
- const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sheet)) === sheetType;
22
- hmsActions.setAppData(APP_DATA.sheet, !isOpen ? sheetType : '');
23
- }, [vanillaStore, hmsActions, sheetType]);
24
- return toggleSheet;
25
- };
26
-
27
- export const useSheetReset = () => {
28
- const hmsActions = useHMSActions();
29
- const resetSheet = useCallback(() => {
30
- hmsActions.setAppData(APP_DATA.sheet, '');
31
- }, [hmsActions]);
32
- return resetSheet;
33
- };
@@ -1,171 +0,0 @@
1
- import React, { Fragment } from 'react';
2
- import {
3
- DeviceType,
4
- HMSRoomState,
5
- selectLocalVideoTrackID,
6
- selectRoomState,
7
- selectVideoTrackByID,
8
- useAVToggle,
9
- useDevices,
10
- useHMSActions,
11
- useHMSStore,
12
- } from '@100mslive/react-sdk';
13
- import { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';
14
- import { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';
15
- import { ToastManager } from './Toast/ToastManager';
16
- import { Text } from '../../Text';
17
- import { Tooltip } from '../../Tooltip';
18
- import IconButton from '../IconButton';
19
- import { isMacOS } from '../common/constants';
20
-
21
- const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };
22
-
23
- export const AudioVideoToggle = ({ hideOptions = false }) => {
24
- const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
25
- const { videoInput, audioInput } = allDevices;
26
-
27
- const formattedVideoInputList = videoInput?.map(videoInput => ({
28
- active: selectedDeviceIDs.videoInput === videoInput.deviceId,
29
- content: (
30
- <Text
31
- variant="sm"
32
- onClick={() =>
33
- updateDevice({
34
- deviceType: DeviceType.videoInput,
35
- deviceId: videoInput.deviceId,
36
- })
37
- }
38
- css={optionsCSS}
39
- >
40
- {videoInput.label}
41
- </Text>
42
- ),
43
- title: videoInput.label,
44
- }));
45
-
46
- const formattedAudioInputList = audioInput?.map(audioInput => ({
47
- active: selectedDeviceIDs.audioInput === audioInput.deviceId,
48
- content: (
49
- <Text
50
- variant="sm"
51
- onClick={() =>
52
- updateDevice({
53
- deviceType: DeviceType.audioInput,
54
- deviceId: audioInput.deviceId,
55
- })
56
- }
57
- css={optionsCSS}
58
- >
59
- {audioInput.label}
60
- </Text>
61
- ),
62
- title: audioInput.label,
63
- }));
64
-
65
- const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
66
- const actions = useHMSActions();
67
- const videoTrackId = useHMSStore(selectLocalVideoTrackID);
68
- const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
69
- const roomState = useHMSStore(selectRoomState);
70
- const hasAudioDevices = audioInput?.length > 0;
71
- const hasVideoDevices = videoInput?.length > 0;
72
-
73
- return (
74
- <Fragment>
75
- {toggleAudio ? (
76
- hideOptions || !hasAudioDevices ? (
77
- <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
78
- <IconButton
79
- active={isLocalAudioEnabled}
80
- disabled={!toggleAudio}
81
- onClick={toggleAudio}
82
- key="toggleAudio"
83
- data-testid="audio_btn"
84
- className="__cancel-drag-event"
85
- >
86
- {!isLocalAudioEnabled ? (
87
- <MicOffIcon data-testid="audio_off_btn" />
88
- ) : (
89
- <MicOnIcon data-testid="audio_on_btn" />
90
- )}
91
- </IconButton>
92
- </Tooltip>
93
- ) : (
94
- <IconButtonWithOptions
95
- options={formattedAudioInputList}
96
- disabled={!toggleAudio}
97
- onDisabledClick={toggleAudio}
98
- tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
99
- icon={
100
- !isLocalAudioEnabled ? (
101
- <MicOffIcon data-testid="audio_off_btn" />
102
- ) : (
103
- <MicOnIcon data-testid="audio_on_btn" />
104
- )
105
- }
106
- active={isLocalAudioEnabled}
107
- onClick={toggleAudio}
108
- key="toggleAudio"
109
- />
110
- )
111
- ) : null}
112
-
113
- {toggleVideo ? (
114
- hideOptions || !hasVideoDevices ? (
115
- <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
116
- <IconButton
117
- key="toggleVideo"
118
- active={isLocalVideoEnabled}
119
- disabled={!toggleVideo}
120
- onClick={toggleVideo}
121
- data-testid="video_btn"
122
- className="__cancel-drag-event"
123
- >
124
- {!isLocalVideoEnabled ? (
125
- <VideoOffIcon data-testid="video_off_btn" />
126
- ) : (
127
- <VideoOnIcon data-testid="video_on_btn" />
128
- )}
129
- </IconButton>
130
- </Tooltip>
131
- ) : (
132
- <IconButtonWithOptions
133
- disabled={!toggleVideo}
134
- onDisabledClick={toggleVideo}
135
- options={formattedVideoInputList}
136
- tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
137
- icon={
138
- !isLocalVideoEnabled ? (
139
- <VideoOffIcon data-testid="video_off_btn" />
140
- ) : (
141
- <VideoOnIcon data-testid="video_on_btn" />
142
- )
143
- }
144
- key="toggleVideo"
145
- active={isLocalVideoEnabled}
146
- onClick={toggleVideo}
147
- />
148
- )
149
- ) : null}
150
-
151
- {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? (
152
- <Tooltip title="Switch Camera" key="switchCamera">
153
- <IconButton
154
- onClick={async () => {
155
- try {
156
- await actions.switchCamera();
157
- } catch (e) {
158
- ToastManager.addToast({
159
- title: `Error while flipping camera ${e.message || ''}`,
160
- variant: 'error',
161
- });
162
- }
163
- }}
164
- >
165
- <CameraFlipIcon />
166
- </IconButton>
167
- </Tooltip>
168
- ) : null}
169
- </Fragment>
170
- );
171
- };
@@ -1,51 +0,0 @@
1
- import React from 'react';
2
- import { useMedia } from 'react-use';
3
- import { ChevronRightIcon } from '@100mslive/react-icons';
4
- import { Flex } from '../../../Layout';
5
- import { Text } from '../../../Text';
6
- import { config as cssConfig } from '../../../Theme';
7
- import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
8
- import { useSheetToggle } from '../AppData/useSheet';
9
- // @ts-ignore
10
- import { useSidepaneToggle } from '../AppData/useSidepane';
11
- import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';
12
-
13
- export const RoomDetailsHeader = () => {
14
- const { title, description } = useRoomLayoutHeader();
15
- const isMobile = useMedia(cssConfig.media.md);
16
- const clipLength = 80;
17
- const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
18
- const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
19
-
20
- if ((!title && !description) || (isMobile && !title)) {
21
- return null;
22
- }
23
-
24
- return (
25
- <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>
26
- <Text variant="sm" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
27
- {title}
28
- </Text>
29
- {!isMobile && (
30
- <Flex align="end" css={{ color: '$on_surface_high' }}>
31
- <Text variant="xs" css={{ c: '$on_surface_medium' }}>
32
- {description.slice(0, clipLength)}
33
- </Text>
34
- {description.length > clipLength ? (
35
- <span
36
- style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}
37
- onClick={toggleDetailsPane}
38
- >
39
- &nbsp;...more
40
- </span>
41
- ) : null}
42
- </Flex>
43
- )}
44
- {isMobile && description ? (
45
- <Flex css={{ color: '$on_surface_medium' }}>
46
- <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />
47
- </Flex>
48
- ) : null}
49
- </Flex>
50
- );
51
- };
@@ -1,121 +0,0 @@
1
- import React from 'react';
2
- import { VerticalMenuIcon } from '@100mslive/react-icons';
3
- import { Dropdown } from '../../../Dropdown';
4
- import { Box, Flex } from '../../../Layout';
5
- import { styled } from '../../../Theme';
6
- import { Tooltip } from '../../../Tooltip';
7
- import IconButton from '../../IconButton';
8
-
9
- const IconSection = styled(IconButton, {
10
- w: 'unset',
11
- h: '$14',
12
- p: '$4',
13
- r: '$1',
14
- borderTopRightRadius: 0,
15
- borderColor: '$border_bright',
16
- borderBottomRightRadius: 0,
17
- position: 'relative',
18
- '&:not([disabled]):focus-visible': {
19
- zIndex: 1,
20
- },
21
- '@md': {
22
- mx: 0,
23
- borderTopRightRadius: '$1',
24
- borderBottomRightRadius: '$1',
25
- },
26
- });
27
-
28
- const OptionsSection = styled(IconButton, {
29
- w: 'unset',
30
- h: '$14',
31
- p: '$4 $2',
32
- r: '$1',
33
- borderTopLeftRadius: 0,
34
- borderColor: '$border_bright',
35
- borderBottomLeftRadius: 0,
36
- borderLeftWidth: 0,
37
- position: 'relative',
38
- '&:not([disabled]):focus-visible': {
39
- zIndex: 1,
40
- },
41
- '@md': {
42
- display: 'none',
43
- },
44
- });
45
-
46
- export const IconButtonWithOptions = ({
47
- disabled = false,
48
- onDisabledClick = () => {
49
- return;
50
- },
51
- tooltipMessage = '',
52
- icon,
53
- options = [],
54
- active,
55
- onClick = () => {
56
- return;
57
- },
58
- }) => {
59
- const bgCss = { backgroundColor: disabled ? '$surface_brighter' : active ? '$transparent' : '$secondary_dim' };
60
- const iconCss = { color: disabled ? '$on_surface_low' : active ? '$on_surface_high' : '$on_primary_high' };
61
-
62
- return (
63
- <Flex>
64
- <IconSection css={bgCss} onClick={onClick}>
65
- <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
66
- <Flex align="center" justify="center" css={iconCss}>
67
- {icon}
68
- </Flex>
69
- </Tooltip>
70
- </IconSection>
71
- <Dropdown.Root>
72
- <Dropdown.Trigger
73
- asChild
74
- // onClick does not work
75
- onPointerDown={e => {
76
- if (disabled) {
77
- e.preventDefault();
78
- onDisabledClick();
79
- }
80
- }}
81
- >
82
- <OptionsSection css={bgCss}>
83
- <Tooltip title="View Options">
84
- <Box css={iconCss}>
85
- <VerticalMenuIcon />
86
- </Box>
87
- </Tooltip>
88
- </OptionsSection>
89
- </Dropdown.Trigger>
90
- <Dropdown.Content
91
- sideOffset={5}
92
- align="center"
93
- css={{
94
- w: '$64',
95
- maxHeight: '$96',
96
- p: 0,
97
- border: 'none',
98
- }}
99
- >
100
- {options.map((option, index) => (
101
- <Dropdown.Item
102
- key={option.title}
103
- css={{
104
- flexDirection: 'column',
105
- alignItems: 'flex-start',
106
- backgroundColor: option.active ? '$surface_bright' : '$surface_dim',
107
- borderTop: index === 0 ? 'none' : '1px solid $border_default',
108
- '&:hover': {
109
- cursor: 'pointer',
110
- },
111
- p: '0',
112
- }}
113
- >
114
- {option.content}
115
- </Dropdown.Item>
116
- ))}
117
- </Dropdown.Content>
118
- </Dropdown.Root>
119
- </Flex>
120
- );
121
- };
@@ -1,26 +0,0 @@
1
- import React, { useEffect, useState } from 'react';
2
- import { Flex } from '../../../Layout';
3
- import { Text } from '../../../Text';
4
- import { getFormattedTime } from '../Polls/common/utils';
5
-
6
- export const Duration = ({ timestamp }: { timestamp: Date }) => {
7
- const [elapsedTime, setElapsedTime] = useState(getFormattedTime(Date.now() - timestamp.getTime(), false));
8
-
9
- useEffect(() => {
10
- const timerAdded = setInterval(() => {
11
- setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false));
12
- }, 1000);
13
-
14
- return () => {
15
- clearInterval(timerAdded);
16
- };
17
- }, [timestamp]);
18
-
19
- return (
20
- <Flex css={{ color: '$on_surface_medium' }}>
21
- <Text variant="xs" css={{ color: 'inherit' }}>
22
- Started {elapsedTime} ago
23
- </Text>
24
- </Flex>
25
- );
26
- };
@@ -1,36 +0,0 @@
1
- import React from 'react';
2
- import { CrossIcon } from '@100mslive/react-icons';
3
- import { Box, Flex } from '../../../Layout';
4
- import { Text } from '../../../Text';
5
- import { RoomDetailsRow } from './RoomDetailsRow';
6
- import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
7
- // @ts-ignore
8
- import { useSidepaneToggle } from '../AppData/useSidepane';
9
- import { SIDE_PANE_OPTIONS } from '../../common/constants';
10
-
11
- export const RoomDetailsPane = () => {
12
- const { title, description, details } = useRoomLayoutHeader();
13
- const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
14
- return (
15
- <Box css={{ flex: '1 1 0' }}>
16
- <Flex justify="between" align="center" css={{ w: '100%' }}>
17
- <Text variant="h6">{title}</Text>
18
- <Flex
19
- onClick={toggleDetailsPane}
20
- css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
21
- >
22
- <CrossIcon />
23
- </Flex>
24
- </Flex>
25
-
26
- <RoomDetailsRow details={details} />
27
-
28
- <Box css={{ mt: '$10' }}>
29
- <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
30
- <Text variant="sm" css={{ c: '$on_surface_medium' }}>
31
- {description}
32
- </Text>
33
- </Box>
34
- </Box>
35
- );
36
- };
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- import { Box, Flex } from '../../../Layout';
3
- import { Text } from '../../../Text';
4
- import { Duration } from './Duration';
5
-
6
- export const RoomDetailsRow = ({ details }: { details: (string | Date)[] }) => {
7
- return (
8
- <Flex align="center" css={{ w: '100%' }}>
9
- {details.map((detail, index) => (
10
- <React.Fragment key={detail.toString()}>
11
- {index > 0 && <Box css={{ h: '$2', w: '$2', r: '$round', bg: '$on_surface_medium', m: '0 $2' }} />}
12
- {typeof detail !== 'string' ? (
13
- <Duration timestamp={detail} />
14
- ) : (
15
- <Text variant="xs" css={{ c: '$on_surface_medium' }}>
16
- {detail}
17
- </Text>
18
- )}
19
- </React.Fragment>
20
- ))}
21
- </Flex>
22
- );
23
- };
@@ -1,45 +0,0 @@
1
- import React from 'react';
2
- import { CrossIcon } from '@100mslive/react-icons';
3
- import { Box, Flex } from '../../../Layout';
4
- import { Sheet } from '../../../Sheet';
5
- import { Text } from '../../../Text';
6
- // @ts-ignore
7
- import { Logo } from '../Header/HeaderComponents';
8
- import { RoomDetailsRow } from './RoomDetailsRow';
9
- import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
10
- import { useIsSheetTypeOpen, useSheetToggle } from '../AppData/useSheet';
11
- import { SHEET_OPTIONS } from '../../common/constants';
12
-
13
- export const RoomDetailsSheet = () => {
14
- const { title, description, details } = useRoomLayoutHeader();
15
- const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
16
- const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS);
17
- return (
18
- <Sheet.Root open={showRoomDetailsSheet} onOpenChange={toggleSheet}>
19
- <Sheet.Content css={{ py: '$8', pb: '$12' }}>
20
- <Flex
21
- justify="between"
22
- align="center"
23
- css={{ w: '100%', borderBottom: '1px solid $border_bright', pb: '$4', mb: '$4', px: '$8' }}
24
- >
25
- <Text css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>Description</Text>
26
- <Sheet.Close css={{ color: '$on_surface_high' }}>
27
- <CrossIcon />
28
- </Sheet.Close>
29
- </Flex>
30
- <Flex align="center" css={{ w: '100%', gap: '$4', pb: '$8', px: '$8' }}>
31
- <Logo />
32
- <Box>
33
- <Text variant="sm" css={{ c: '$on_secondary_high', fontWeight: '$semiBold' }}>
34
- {title}
35
- </Text>
36
- <RoomDetailsRow details={details} />
37
- </Box>
38
- </Flex>
39
- <Text variant="sm" css={{ color: '$on_surface_medium', px: '$8' }}>
40
- {description}
41
- </Text>
42
- </Sheet.Content>
43
- </Sheet.Root>
44
- );
45
- };
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
3
- import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet';
4
- import { Box } from '../../Layout';
5
- import { APP_DATA, SHEET_OPTIONS } from '../common/constants';
6
-
7
- export const Sheet = () => {
8
- const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
9
- let ViewComponent;
10
- if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
11
- ViewComponent = <RoomDetailsSheet />;
12
- }
13
- return <Box>{ViewComponent}</Box>;
14
- };