@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.
- package/README.md +30 -33
- package/dist/{HLSView-E65JZSU4.js → HLSView-4B5MUDFR.js} +2 -2
- package/dist/Prebuilt/common/constants.d.ts +4 -8
- package/dist/Prebuilt/components/AudioVideoToggle.d.ts +9 -0
- package/dist/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.d.ts +11 -0
- package/dist/Prebuilt/components/Polls/common/utils.d.ts +1 -1
- package/dist/Prebuilt/components/hooks/useAudioOutputTest.d.ts +8 -0
- package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.d.ts +0 -5
- package/dist/{chunk-DWLYDCFC.js → chunk-KST24BRA.js} +5297 -5064
- package/dist/chunk-KST24BRA.js.map +7 -0
- package/dist/index.cjs.js +6302 -6130
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +745 -1109
- package/dist/meta.esbuild.json +761 -1125
- package/package.json +8 -7
- package/src/Prebuilt/App.tsx +0 -2
- package/src/Prebuilt/common/constants.ts +7 -10
- package/src/Prebuilt/components/AppData/AppData.tsx +0 -1
- package/src/Prebuilt/components/AppData/useUISettings.js +1 -1
- package/src/Prebuilt/components/AudioVideoToggle.tsx +308 -0
- package/src/Prebuilt/components/Footer/RoleOptions.tsx +1 -0
- package/src/Prebuilt/components/Header/Header.tsx +0 -2
- package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx +159 -0
- package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +0 -2
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +2 -18
- package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx +13 -2
- package/src/Prebuilt/components/Notifications/Notifications.tsx +1 -18
- package/src/Prebuilt/components/Polls/common/utils.ts +9 -15
- package/src/Prebuilt/components/Settings/DeviceSettings.jsx +10 -17
- package/src/Prebuilt/components/hooks/useAudioOutputTest.tsx +20 -0
- package/src/Prebuilt/layouts/SidePane.tsx +0 -4
- package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts +0 -40
- package/dist/Prebuilt/components/AppData/useSheet.d.ts +0 -4
- package/dist/Prebuilt/components/Header/RoomDetailsHeader.d.ts +0 -2
- package/dist/Prebuilt/components/RoomDetails/Duration.d.ts +0 -4
- package/dist/Prebuilt/components/RoomDetails/RoomDetailsPane.d.ts +0 -2
- package/dist/Prebuilt/components/RoomDetails/RoomDetailsRow.d.ts +0 -4
- package/dist/Prebuilt/components/RoomDetails/RoomDetailsSheet.d.ts +0 -2
- package/dist/Prebuilt/layouts/Sheet.d.ts +0 -2
- package/dist/chunk-DWLYDCFC.js.map +0 -7
- package/src/Prebuilt/components/AppData/useSheet.ts +0 -33
- package/src/Prebuilt/components/AudioVideoToggle.jsx +0 -171
- package/src/Prebuilt/components/Header/RoomDetailsHeader.tsx +0 -51
- package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx +0 -121
- package/src/Prebuilt/components/RoomDetails/Duration.tsx +0 -26
- package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx +0 -36
- package/src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx +0 -23
- package/src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx +0 -45
- package/src/Prebuilt/layouts/Sheet.tsx +0 -14
- /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
|
-
...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
|
-
};
|
File without changes
|