@100mslive/roomkit-react 0.2.6-alpha.2 → 0.2.6-alpha.3
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-U3DKJBM7.js → HLSView-7QXLQ4KD.js} +2 -2
- package/dist/Prebuilt/common/constants.d.ts +0 -1
- package/dist/{chunk-DO5NCPPI.js → chunk-ZJU5GUBY.js} +369 -345
- package/dist/chunk-ZJU5GUBY.js.map +7 -0
- package/dist/index.cjs.js +6862 -6837
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +152 -147
- package/dist/meta.esbuild.json +157 -152
- package/package.json +6 -6
- package/src/Prebuilt/App.tsx +7 -8
- package/src/Prebuilt/common/constants.ts +1 -1
- package/src/Prebuilt/components/AppData/AppData.tsx +16 -1
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +0 -1
- package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +29 -12
- package/dist/chunk-DO5NCPPI.js.map +0 -7
- package/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx +0 -112
- package/src/Prebuilt/plugins/VirtualBackground/vbutils.js +0 -66
- /package/dist/{HLSView-U3DKJBM7.js.map → HLSView-7QXLQ4KD.js.map} +0 -0
@@ -1,5 +1,10 @@
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
2
|
-
import {
|
2
|
+
import {
|
3
|
+
selectAppData,
|
4
|
+
selectEffectsKey,
|
5
|
+
selectIsEffectsEnabled,
|
6
|
+
selectLocalPeerRole,
|
7
|
+
} from '@100mslive/hms-video-store';
|
3
8
|
import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
|
4
9
|
import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
|
5
10
|
import {
|
@@ -22,7 +27,7 @@ import { VBHandler } from './VBHandler';
|
|
22
27
|
import { useSidepaneToggle } from '../AppData/useSidepane';
|
23
28
|
// @ts-ignore
|
24
29
|
import { useUISettings } from '../AppData/useUISettings';
|
25
|
-
import { SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
|
30
|
+
import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
|
26
31
|
import { defaultMedia } from './constants';
|
27
32
|
|
28
33
|
const iconDims = { height: '40px', width: '40px' };
|
@@ -42,9 +47,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
42
47
|
const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
|
43
48
|
const effectsKey = useHMSStore(selectEffectsKey);
|
44
49
|
const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
|
45
|
-
const
|
46
|
-
(VBHandler?.getBackground() as string | HMSVirtualBackgroundTypes) || HMSVirtualBackgroundTypes.NONE,
|
47
|
-
);
|
50
|
+
const background = useHMSStore(selectAppData(APP_DATA.background));
|
48
51
|
const mediaList = backgroundMedia.length
|
49
52
|
? backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '')
|
50
53
|
: defaultMedia;
|
@@ -71,8 +74,22 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
71
74
|
hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
|
72
75
|
}
|
73
76
|
}
|
77
|
+
const handleDefaultBackground = async () => {
|
78
|
+
switch (background) {
|
79
|
+
case HMSVirtualBackgroundTypes.NONE: {
|
80
|
+
break;
|
81
|
+
}
|
82
|
+
case HMSVirtualBackgroundTypes.BLUR: {
|
83
|
+
await VBHandler.setBlur(blurAmount);
|
84
|
+
break;
|
85
|
+
}
|
86
|
+
default:
|
87
|
+
await VBHandler.setBackground(background);
|
88
|
+
}
|
89
|
+
};
|
90
|
+
handleDefaultBackground();
|
74
91
|
}
|
75
|
-
}, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id]);
|
92
|
+
}, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id, background, blurAmount]);
|
76
93
|
|
77
94
|
useEffect(() => {
|
78
95
|
if (!isVideoOn) {
|
@@ -120,7 +137,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
120
137
|
value: HMSVirtualBackgroundTypes.NONE,
|
121
138
|
onClick: async () => {
|
122
139
|
await VBHandler.removeEffects();
|
123
|
-
|
140
|
+
hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
|
124
141
|
},
|
125
142
|
},
|
126
143
|
{
|
@@ -129,16 +146,16 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
129
146
|
value: HMSVirtualBackgroundTypes.BLUR,
|
130
147
|
onClick: async () => {
|
131
148
|
await VBHandler?.setBlur(blurAmount);
|
132
|
-
|
149
|
+
hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
|
133
150
|
},
|
134
151
|
},
|
135
152
|
]}
|
136
|
-
activeBackground={
|
153
|
+
activeBackground={background}
|
137
154
|
/>
|
138
155
|
|
139
156
|
{/* Slider */}
|
140
157
|
<Flex direction="column" css={{ w: '100%', gap: '$8', mt: '$8' }}>
|
141
|
-
{
|
158
|
+
{background === HMSVirtualBackgroundTypes.BLUR && isEffectsEnabled && effectsKey ? (
|
142
159
|
<Box>
|
143
160
|
<Text variant="sm" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mb: '$4' }}>
|
144
161
|
Blur intensity
|
@@ -173,10 +190,10 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
173
190
|
value: mediaURL,
|
174
191
|
onClick: async () => {
|
175
192
|
await VBHandler?.setBackground(mediaURL);
|
176
|
-
|
193
|
+
hmsActions.setAppData(APP_DATA.background, mediaURL);
|
177
194
|
},
|
178
195
|
}))}
|
179
|
-
activeBackground={
|
196
|
+
activeBackground={background}
|
180
197
|
/>
|
181
198
|
</Box>
|
182
199
|
</Flex>
|