@100mslive/roomkit-react 0.1.13-alpha.0 → 0.1.13
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-AIPLCDXY.js → HLSView-IENE4HRP.js} +2 -2
- package/dist/Prebuilt/components/Notifications/ChatNotifications.d.ts +2 -0
- package/dist/{chunk-5DCII2TP.js → chunk-U4AB6X6M.js} +945 -911
- package/dist/chunk-U4AB6X6M.js.map +7 -0
- package/dist/index.cjs.js +1450 -1400
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +227 -148
- package/dist/meta.esbuild.json +232 -153
- package/package.json +6 -6
- package/src/Prebuilt/components/AuthToken.jsx +12 -2
- package/src/Prebuilt/components/Chat/Chat.jsx +5 -7
- package/src/Prebuilt/components/Chat/ChatBody.jsx +53 -34
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +13 -7
- package/src/Prebuilt/components/Chat/ChatStates.jsx +8 -6
- package/src/Prebuilt/components/Chat/Navigation.tsx +1 -1
- package/src/Prebuilt/components/Chat/PinnedMessage.tsx +15 -17
- package/src/Prebuilt/components/Notifications/ChatNotifications.tsx +34 -0
- package/src/Prebuilt/components/Notifications/Notifications.tsx +2 -0
- package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx +6 -4
- package/src/Prebuilt/components/Polls/Voting/TimedVoting.jsx +3 -2
- package/src/Prebuilt/components/Polls/common/VoteCount.jsx +6 -4
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +1 -1
- package/src/Prebuilt/components/Toast/ToastConfig.jsx +0 -19
- package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +46 -35
- package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +1 -2
- package/src/Prebuilt/components/hooks/useUserPreferences.jsx +1 -0
- package/src/Prebuilt/layouts/VideoStreamingSection.tsx +10 -30
- package/dist/chunk-5DCII2TP.js.map +0 -7
- /package/dist/{HLSView-AIPLCDXY.js.map → HLSView-IENE4HRP.js.map} +0 -0
@@ -48,8 +48,9 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
|
|
48
48
|
const addedPluginToVideoTrack = useRef(false);
|
49
49
|
const mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
|
50
50
|
|
51
|
+
const inPreview = roomState === HMSRoomState.Preview;
|
51
52
|
// Hidden in preview as the effect will be visible in the preview tile. Needed inside the room because the peer might not be on-screen
|
52
|
-
const showVideoTile = isVideoOn && isLargeRoom &&
|
53
|
+
const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
|
53
54
|
|
54
55
|
const clearVBState = () => {
|
55
56
|
setBackground(HMSVirtualBackgroundTypes.NONE);
|
@@ -116,8 +117,8 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
|
|
116
117
|
}
|
117
118
|
|
118
119
|
return (
|
119
|
-
<
|
120
|
-
<Flex align="center" justify="between" css={{ w: '100%',
|
120
|
+
<Flex css={{ pr: '$6', size: '100%' }} direction="column">
|
121
|
+
<Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
|
121
122
|
<Text variant="h6" css={{ color: '$on_surface_high' }}>
|
122
123
|
Virtual Background
|
123
124
|
</Text>
|
@@ -134,41 +135,51 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
|
|
134
135
|
mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
|
135
136
|
trackId={localPeer?.videoTrack}
|
136
137
|
data-testid="preview_tile"
|
137
|
-
css={{ width: '100%', height: '16rem'
|
138
|
+
css={{ width: '100%', height: '16rem' }}
|
138
139
|
/>
|
139
140
|
) : null}
|
140
141
|
|
141
|
-
<
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
142
|
+
<Box
|
143
|
+
css={{
|
144
|
+
mt: '$4',
|
145
|
+
overflowY: 'auto',
|
146
|
+
flex: '1 1 0',
|
147
|
+
mr: '-$10',
|
148
|
+
pr: '$10',
|
149
|
+
}}
|
150
|
+
>
|
151
|
+
<VBCollection
|
152
|
+
title="Effects"
|
153
|
+
options={[
|
154
|
+
{
|
155
|
+
title: 'No effect',
|
156
|
+
icon: <CrossCircleIcon style={iconDims} />,
|
157
|
+
type: HMSVirtualBackgroundTypes.NONE,
|
158
|
+
onClick: async () => await disableEffects(),
|
159
|
+
},
|
160
|
+
{
|
161
|
+
title: 'Blur',
|
162
|
+
icon: <BlurPersonHighIcon style={iconDims} />,
|
163
|
+
type: HMSVirtualBackgroundTypes.BLUR,
|
164
|
+
onClick: async () => await addPlugin({ blurPower: 0.5 }),
|
165
|
+
},
|
166
|
+
]}
|
167
|
+
activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
|
168
|
+
// @ts-ignore
|
169
|
+
activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
|
170
|
+
/>
|
161
171
|
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
172
|
+
<VBCollection
|
173
|
+
title="Backgrounds"
|
174
|
+
options={mediaList.map(mediaURL => ({
|
175
|
+
type: HMSVirtualBackgroundTypes.IMAGE,
|
176
|
+
mediaURL,
|
177
|
+
onClick: async () => await addPlugin({ mediaURL }),
|
178
|
+
}))}
|
179
|
+
activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
|
180
|
+
activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
|
181
|
+
/>
|
182
|
+
</Box>
|
183
|
+
</Flex>
|
173
184
|
);
|
174
185
|
};
|
@@ -18,12 +18,11 @@ type PinnedMessage = {
|
|
18
18
|
export const useSetPinnedMessages = () => {
|
19
19
|
const hmsActions = useHMSActions();
|
20
20
|
const vanillaStore = useHMSVanillaStore();
|
21
|
-
// const pinnedMessages: PinnedMessage[] = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
|
22
21
|
|
23
22
|
const setPinnedMessages = useCallback(
|
24
23
|
async (pinnedMessages: PinnedMessage[] = [], message: HMSMessage, pinnedBy: string) => {
|
25
24
|
const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
|
26
|
-
const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.
|
25
|
+
const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.senderUserId || '' };
|
27
26
|
|
28
27
|
if (message && peerName) {
|
29
28
|
newPinnedMessage['text'] = `${peerName}: ${message.message}`;
|
@@ -4,21 +4,11 @@ import {
|
|
4
4
|
DefaultConferencingScreen_Elements,
|
5
5
|
HLSLiveStreamingScreen_Elements,
|
6
6
|
} from '@100mslive/types-prebuilt';
|
7
|
-
import {
|
8
|
-
import {
|
9
|
-
selectIsConnectedToRoom,
|
10
|
-
selectLocalPeerName,
|
11
|
-
selectLocalPeerRoleName,
|
12
|
-
selectSessionStore,
|
13
|
-
useHMSActions,
|
14
|
-
useHMSStore,
|
15
|
-
} from '@100mslive/react-sdk';
|
7
|
+
import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
|
16
8
|
// @ts-ignore: No implicit Any
|
17
9
|
import FullPageProgress from '../components/FullPageProgress';
|
18
|
-
// @ts-ignore: No implicit Any
|
19
|
-
import { ToastBatcher } from '../components/Toast/ToastBatcher';
|
20
10
|
import { GridLayout } from '../components/VideoLayouts/GridLayout';
|
21
|
-
import { Flex } from '../../Layout';
|
11
|
+
import { Box, Flex } from '../../Layout';
|
22
12
|
// @ts-ignore: No implicit Any
|
23
13
|
import { EmbedView } from './EmbedView';
|
24
14
|
// @ts-ignore: No implicit Any
|
@@ -56,9 +46,6 @@ export const VideoStreamingSection = ({
|
|
56
46
|
const waitingViewerRole = useWaitingViewerRole();
|
57
47
|
const urlToIframe = useUrlToEmbed();
|
58
48
|
const pdfAnnotatorActive = usePDFConfig();
|
59
|
-
const localPeerName = useHMSStore(selectLocalPeerName);
|
60
|
-
const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
|
61
|
-
useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
|
62
49
|
|
63
50
|
useEffect(() => {
|
64
51
|
if (!isConnected) {
|
@@ -74,15 +61,6 @@ export const VideoStreamingSection = ({
|
|
74
61
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
75
62
|
}, [isConnected, hmsActions]);
|
76
63
|
|
77
|
-
useEffect(() => {
|
78
|
-
if (!chatStateUpdatedBy || chatStateUpdatedBy === localPeerName) {
|
79
|
-
return;
|
80
|
-
}
|
81
|
-
const type = isChatEnabled ? 'CHAT_RESUMED' : 'CHAT_PAUSED';
|
82
|
-
const notification = { id: uuid(), message: '', type, data: { name: localPeerName } };
|
83
|
-
ToastBatcher.showToast({ notification, type });
|
84
|
-
}, [isChatEnabled, chatStateUpdatedBy, localPeerName]);
|
85
|
-
|
86
64
|
if (!localPeerRole) {
|
87
65
|
// we don't know the role yet to decide how to render UI
|
88
66
|
return null;
|
@@ -112,12 +90,14 @@ export const VideoStreamingSection = ({
|
|
112
90
|
}}
|
113
91
|
>
|
114
92
|
{ViewComponent}
|
115
|
-
<
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
93
|
+
<Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip' }}>
|
94
|
+
<SidePane
|
95
|
+
screenType={screenType}
|
96
|
+
// @ts-ignore
|
97
|
+
tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
|
98
|
+
hideControls={hideControls}
|
99
|
+
/>
|
100
|
+
</Box>
|
121
101
|
</Flex>
|
122
102
|
</Suspense>
|
123
103
|
);
|