@100mslive/roomkit-react 0.3.19-alpha.1 → 0.3.19-alpha.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/dist/{HLSView-6KUW45BA.js → HLSView-DOV7NHOO.js} +43 -43
  2. package/dist/{HLSView-6KUW45BA.js.map → HLSView-DOV7NHOO.js.map} +1 -1
  3. package/dist/{HLSView-MI7WHLIB.css → HLSView-F3KLSFYU.css} +67 -19
  4. package/dist/{HLSView-MI7WHLIB.css.map → HLSView-F3KLSFYU.css.map} +2 -2
  5. package/dist/Modal/Dialog.d.ts +3 -1
  6. package/dist/Prebuilt/components/EndCallFeedback/Feedback.d.ts +2 -0
  7. package/dist/Prebuilt/components/EndCallFeedback/FeedbackForm.d.ts +28 -0
  8. package/dist/Prebuilt/components/EndCallFeedback/ThankyouView.d.ts +2 -0
  9. package/dist/Prebuilt/components/VirtualBackground/VBCollection.d.ts +1 -1
  10. package/dist/Prebuilt/components/VirtualBackground/VBHandler.d.ts +5 -6
  11. package/dist/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.d.ts +1 -0
  12. package/dist/{chunk-NC3PKPDD.js → chunk-HVB3AVX7.js} +1669 -1168
  13. package/dist/chunk-HVB3AVX7.js.map +7 -0
  14. package/dist/index.cjs.css +66 -18
  15. package/dist/index.cjs.css.map +2 -2
  16. package/dist/index.cjs.js +1754 -1229
  17. package/dist/index.cjs.js.map +4 -4
  18. package/dist/index.css +66 -18
  19. package/dist/index.css.map +2 -2
  20. package/dist/index.js +1 -1
  21. package/dist/meta.cjs.json +402 -150
  22. package/dist/meta.esbuild.json +421 -169
  23. package/package.json +8 -8
  24. package/src/Modal/Dialog.tsx +13 -2
  25. package/src/Prebuilt/App.tsx +3 -0
  26. package/src/Prebuilt/AppStateContext.tsx +1 -2
  27. package/src/Prebuilt/Prebuilt.stories.tsx +1 -0
  28. package/src/Prebuilt/common/PeersSorter.ts +2 -1
  29. package/src/Prebuilt/components/EndCallFeedback/Feedback.tsx +70 -0
  30. package/src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx +371 -0
  31. package/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx +44 -0
  32. package/src/Prebuilt/components/LeaveScreen.tsx +2 -0
  33. package/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx +2 -9
  34. package/src/Prebuilt/components/VirtualBackground/VBCollection.tsx +3 -1
  35. package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx +14 -4
  36. package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +46 -31
  37. package/src/Prebuilt/components/VirtualBackground/VBToggle.tsx +2 -1
  38. package/src/Prebuilt/plugins/CaptionsViewer.tsx +4 -1
  39. package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts +1 -0
  40. package/src/Video/Video.tsx +1 -1
  41. package/dist/chunk-NC3PKPDD.js.map +0 -7
@@ -1,14 +1,24 @@
1
- import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
1
+ // Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
2
+ // eslint-disable-next-line
3
+ import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
4
+
2
5
  export class VBPlugin {
3
6
  private hmsPlugin?: HMSVBPlugin;
4
- private effectsPlugin?: HMSEffectsPlugin;
7
+ private effectsPlugin?: any;
5
8
 
6
- initialisePlugin = (effectsSDKKey?: string, onInit?: () => void) => {
9
+ initialisePlugin = async (effectsSDKKey?: string, onInit?: () => void) => {
7
10
  if (this.getVBObject()) {
8
11
  return;
9
12
  }
10
13
  if (effectsSDKKey) {
11
- this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
14
+ try {
15
+ // eslint-disable-next-line
16
+ const { HMSEffectsPlugin } = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
17
+ this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
18
+ } catch (error) {
19
+ console.error('Failed to initialise HMSEffectsPlugin:', error, 'Using HMSVBPlugin');
20
+ this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
21
+ }
12
22
  } else {
13
23
  this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
14
24
  }
@@ -1,12 +1,15 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { useEffect, useRef, useState } from 'react';
2
2
  import { useMedia } from 'react-use';
3
3
  import {
4
+ HMSMediaStreamPlugin,
4
5
  selectAppData,
5
6
  selectEffectsKey,
6
7
  selectIsEffectsEnabled,
7
8
  selectLocalPeerRole,
8
9
  } from '@100mslive/hms-video-store';
9
- import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
10
+ // Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
11
+ // eslint-disable-next-line
12
+ import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
10
13
  import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
11
14
  import {
12
15
  HMSRoomState,
@@ -54,49 +57,61 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
54
57
  const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
55
58
  const background = useHMSStore(selectAppData(APP_DATA.background));
56
59
  const mediaList = backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '');
60
+ const pluginLoadingRef = useRef(false);
57
61
 
58
62
  const inPreview = roomState === HMSRoomState.Preview;
59
63
  // Hidden in preview as the effect will be visible in the preview tile
60
64
  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
61
65
 
62
66
  useEffect(() => {
63
- if (!track?.id) {
64
- return;
65
- }
66
- const isEffectsSupported = doesBrowserSupportEffectsSDK();
67
- setIsBlurSupported(isEffectsSupported);
68
- const vbObject = VBHandler.getVBObject();
69
- if (!isPluginAdded && !vbObject) {
70
- setLoadingEffects(true);
71
- let vbObject = VBHandler.getVBObject();
72
- if (!vbObject) {
73
- VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '', () => setLoadingEffects(false));
74
- vbObject = VBHandler.getVBObject();
67
+ const initializeVirtualBackground = async () => {
68
+ if (!track?.id || pluginLoadingRef.current || isPluginAdded) {
69
+ return;
70
+ }
71
+
72
+ const isEffectsSupported = doesBrowserSupportEffectsSDK();
73
+ setIsBlurSupported(isEffectsSupported);
74
+
75
+ try {
76
+ pluginLoadingRef.current = true;
75
77
  if (isEffectsEnabled && isEffectsSupported && effectsKey) {
76
- hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
78
+ setLoadingEffects(true);
79
+ await VBHandler.initialisePlugin(effectsKey, () => {
80
+ setLoadingEffects(false);
81
+ });
82
+ hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);
77
83
  } else {
78
84
  setLoadingEffects(false);
79
85
  if (!role) {
80
86
  return;
81
87
  }
82
- hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
88
+ await VBHandler.initialisePlugin();
89
+ await hmsActions.addPluginToVideoTrack(
90
+ VBHandler.getVBObject() as HMSVBPlugin,
91
+ Math.floor(role.publishParams.video.frameRate / 2),
92
+ );
83
93
  }
84
- }
85
- const handleDefaultBackground = async () => {
86
- switch (background) {
87
- case HMSVirtualBackgroundTypes.NONE: {
88
- break;
89
- }
90
- case HMSVirtualBackgroundTypes.BLUR: {
91
- await VBHandler.setBlur(blurAmount);
92
- break;
94
+
95
+ const handleDefaultBackground = async () => {
96
+ switch (background) {
97
+ case HMSVirtualBackgroundTypes.NONE:
98
+ break;
99
+ case HMSVirtualBackgroundTypes.BLUR:
100
+ await VBHandler.setBlur(blurAmount);
101
+ break;
102
+ default:
103
+ await VBHandler.setBackground(background);
93
104
  }
94
- default:
95
- await VBHandler.setBackground(background);
96
- }
97
- };
98
- handleDefaultBackground();
99
- }
105
+ };
106
+
107
+ await handleDefaultBackground();
108
+ } catch (error) {
109
+ console.error('Error initializing virtual background:', error);
110
+ setLoadingEffects(false);
111
+ }
112
+ };
113
+
114
+ initializeVirtualBackground();
100
115
  }, [
101
116
  hmsActions,
102
117
  role,
@@ -1,5 +1,6 @@
1
1
  import React, { useEffect } from 'react';
2
- import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
2
+ // eslint-disable-next-line
3
+ import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
3
4
  import {
4
5
  selectAppData,
5
6
  selectIsEffectsEnabled,
@@ -144,7 +144,10 @@ class Queue {
144
144
  }
145
145
 
146
146
  class CaptionMaintainerQueue {
147
- captionData: Queue = new Queue();
147
+ captionData: Queue;
148
+ constructor() {
149
+ this.captionData = new Queue();
150
+ }
148
151
  push(data: HMSTranscript[] = []) {
149
152
  data.forEach((value: HMSTranscript) => {
150
153
  this.captionData.enqueue(value);
@@ -77,6 +77,7 @@ export function useRoomLayoutLeaveScreen() {
77
77
  const isLeaveScreenEnabled = !!screenProps;
78
78
  return {
79
79
  isLeaveScreenEnabled,
80
+ feedback: screenProps?.default?.elements?.feedback,
80
81
  };
81
82
  }
82
83
 
@@ -57,5 +57,5 @@ interface Props {
57
57
 
58
58
  export const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {
59
59
  const { videoRef } = useVideo({ trackId, attach });
60
- return <StyledVideo autoPlay muted playsInline controls={false} ref={videoRef} {...props} />;
60
+ return <StyledVideo ref={videoRef} {...props} />;
61
61
  };