@100mslive/roomkit-react 0.3.8-alpha.0 → 0.3.8-alpha.2

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -72,28 +72,6 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
 });
 
 export const ToastConfig = {
-  PEER_LIST: {
-    single: function (notification) {
-      if (notification.data.length === 1) {
-        return {
-          title: `${notification.data[0]?.name} joined`,
-          icon: <PeopleAddIcon />,
-        };
-      }
-      return {
-        title: `${notification.data[notification.data.length - 1]?.name} and ${
-          notification.data.length - 1
-        } others joined`,
-        icon: <PeopleAddIcon />,
-      };
-    },
-    multiple: notifications => {
-      return {
-        title: `${notifications[0].data.name} and ${notifications.length - 1} others joined`,
-        icon: <PeopleAddIcon />,
-      };
-    },
-  },
   PEER_JOINED: {
     single: function (notification) {
       return {

package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx

@@ -4,12 +4,12 @@ export class VBPlugin {
   private hmsPlugin?: HMSVBPlugin;
   private effectsPlugin?: HMSEffectsPlugin | undefined;
 
-  initialisePlugin = (effectsSDKKey?: string) => {
+  initialisePlugin = (effectsSDKKey?: string, onInit?: () => void) => {
     if (this.getVBObject()) {
       return;
     }
     if (effectsSDKKey) {
-      this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey);
+      this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
     } else {
       this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
     }
@@ -70,7 +70,7 @@ export class VBPlugin {
     }
   };
 
-  setPreset = async (preset: string) => {
+  setPreset = async (preset: 'quality' | 'balanced') => {
     if (this.effectsPlugin) {
       await this.effectsPlugin.setPreset(preset);
     }

package/src/Prebuilt/components/VirtualBackground/VBOption.tsx

@@ -28,7 +28,9 @@ const Root = ({
       '&:hover': { border: '4px solid $primary_dim' },
       ...(mediaURL ? { height: '$20', backgroundImage: `url(${mediaURL})`, backgroundSize: 'cover' } : {}),
     }}
-    onClick={async () => await onClick?.()}
+    onClick={async () => {
+      await onClick?.();
+    }}
   >
     {children}
   </Flex>

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   selectAppData,
   selectEffectsKey,
@@ -19,14 +20,14 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Flex, Slider, Video } from '../../../index';
+import { Box, config as cssConfig, Flex, Loading, Slider, Video } from '../../../index';
 import { Text } from '../../../Text';
 import { VBCollection } from './VBCollection';
 import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore
-import { useUISettings } from '../AppData/useUISettings';
+import { useSetAppDataByKey, useUISettings } from '../AppData/useUISettings';
 import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
 import { defaultMedia } from './constants';
 
@@ -46,6 +47,8 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const effectsKey = useHMSStore(selectEffectsKey);
+  const isMobile = useMedia(cssConfig.media.md);
+  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
   const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
   const background = useHMSStore(selectAppData(APP_DATA.background));
   const mediaList = backgroundMedia.length
@@ -61,13 +64,15 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
       return;
     }
     if (!isPluginAdded) {
+      setLoadingEffects(true);
       let vbObject = VBHandler.getVBObject();
       if (!vbObject) {
-        VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '');
+        VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '', () => setLoadingEffects(false));
         vbObject = VBHandler.getVBObject();
         if (isEffectsEnabled && effectsKey) {
           hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
         } else {
+          setLoadingEffects(false);
           if (!role) {
             return;
           }
@@ -89,19 +94,30 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
       };
       handleDefaultBackground();
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id, background, blurAmount]);
+  }, [
+    hmsActions,
+    role,
+    isPluginAdded,
+    isEffectsEnabled,
+    effectsKey,
+    track?.id,
+    background,
+    blurAmount,
+    setLoadingEffects,
+  ]);
 
   useEffect(() => {
     if (!isVideoOn) {
       toggleVB();
     }
-  }, [isVideoOn, toggleVB]);
+    return () => setLoadingEffects(false);
+  }, [isVideoOn, setLoadingEffects, toggleVB]);
 
   return (
     <Flex css={{ pr: '$6', size: '100%' }} direction="column">
       <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
-        <Text variant="h6" css={{ color: '$on_surface_high' }}>
-          Virtual Background
+        <Text variant="h6" css={{ color: '$on_surface_high', display: 'flex', alignItems: 'center' }}>
+          Virtual Background {isMobile && loadingEffects ? <Loading size={18} style={{ marginLeft: '0.5rem' }} /> : ''}
         </Text>
         <Box
           css={{ color: '$on_surface_high', '&:hover': { color: '$on_surface_medium' }, cursor: 'pointer' }}

package/src/Prebuilt/components/VirtualBackground/VBToggle.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import { selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import { selectAppData, selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
+import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
-import { isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
+import { APP_DATA, isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
+  const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
 
   if (!isVideoOn || (!isEffectsEnabled && isSafari)) {
     return null;
@@ -20,7 +22,7 @@ export const VBToggle = () => {
   return (
     <Tooltip side="top" disabled={isVBOpen} title="Configure Virtual Background">
       <IconButton active={!isVBOpen} onClick={toggleVB} data-testid="virtual_bg_btn">
-        <VirtualBackgroundIcon />
+        {loadingEffects ? <Loading size={18} /> : <VirtualBackgroundIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -6,7 +6,6 @@ import {
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
@@ -25,7 +24,6 @@ import {
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-// @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
 // @ts-ignore: No implicit Any
@@ -107,7 +105,6 @@ export const VideoStreamingSection = ({
             // @ts-ignore
             return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
           })}
-
         <Box
           css={{
             flex: match({ isLandscapeHLSStream, isMobileHLSStream })

package/src/Prebuilt/plugins/CaptionsViewer.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useState } from 'react';
+import { HMSTranscript, selectPeerNameByID, useHMSStore, useTranscript } from '@100mslive/react-sdk';
+import { Flex } from '../../Layout';
+import { Text } from '../../Text';
+
+interface CaptionQueueData extends HMSTranscript {
+  transcriptQueue: SimpleQueue;
+}
+
+interface TranscriptData extends HMSTranscript {
+  timeout?: NodeJS.Timeout | undefined;
+}
+class SimpleQueue {
+  private storage: TranscriptData[] = [];
+  constructor(private capacity: number = 3, private MAX_STORAGE_TIME: number = 5000) {}
+  enqueue(data: TranscriptData): void {
+    if (this.size() === this.capacity && this.storage[this.size() - 1].final) {
+      this.dequeue(this.storage[this.size() - 1]);
+    }
+    if (this.size() === 0) {
+      this.storage.push(data);
+      this.addTimeout(this.storage[this.size() - 1], data.final);
+      return;
+    }
+    if (this.size() > 0 && this.storage[this.size() - 1]?.final === true) {
+      this.storage.push(data);
+      this.addTimeout(this.storage[this.size() - 1], data.final);
+      return;
+    }
+    this.storage[this.size() - 1].transcript = data.transcript;
+    this.storage[this.size() - 1].final = data.final;
+    this.storage[this.size() - 1].end = data.end;
+    this.addTimeout(this.storage[this.size() - 1], data.final);
+  }
+  addTimeout(item: TranscriptData, isFinal: boolean) {
+    if (!isFinal) {
+      return;
+    }
+    item.timeout = setTimeout(() => {
+      this.dequeue(item);
+    }, this.MAX_STORAGE_TIME);
+  }
+  dequeue(item: TranscriptData): TranscriptData | undefined {
+    const index = this.storage.indexOf(item);
+    if (index === -1) {
+      return undefined;
+    }
+    const removedItem = this.storage.splice(index, 1);
+    if (removedItem.length <= 0) {
+      return undefined;
+    }
+    this.clearTimeout(removedItem[0]);
+    return item;
+  }
+  clearTimeout(item: TranscriptData) {
+    if (!item.timeout) {
+      return;
+    }
+    clearTimeout(item.timeout);
+  }
+  peek(): TranscriptData | undefined {
+    if (this.size() <= 0) {
+      return undefined;
+    }
+    return this.storage[0];
+  }
+  getTranscription(): string {
+    let script = '';
+    this.storage.forEach((value: TranscriptData) => (script += value.transcript + ' '));
+    return script;
+  }
+  reset() {
+    this.storage.length = 0;
+  }
+  size(): number {
+    return this.storage.length;
+  }
+}
+class Queue {
+  private storage: Record<string, CaptionQueueData> = {};
+  constructor(private capacity: number = 3) {}
+
+  enqueue(data: HMSTranscript): void {
+    if (this.size() === this.capacity) {
+      this.dequeue();
+    }
+    if (!this.storage[data.peer_id]) {
+      this.storage[data.peer_id] = {
+        peer_id: data.peer_id,
+        transcript: data.transcript,
+        final: data.final,
+        transcriptQueue: new SimpleQueue(),
+        start: data.start,
+        end: data.end,
+      };
+      this.storage[data.peer_id].transcriptQueue.enqueue(data as TranscriptData);
+      return;
+    }
+    this.storage[data.peer_id].transcriptQueue.enqueue(data as TranscriptData);
+  }
+  dequeue(): CaptionQueueData {
+    const key: string = Object.keys(this.storage).shift() || '';
+    const captionData = this.storage[key];
+    captionData.transcriptQueue.reset();
+    delete this.storage[key];
+    return captionData;
+  }
+
+  peek(): CaptionQueueData | undefined {
+    if (this.size() <= 0) return undefined;
+    const key: string = Object.keys(this.storage).shift() || '';
+    return this.storage[key];
+  }
+
+  findPeerData(): { [key: string]: string }[] {
+    const keys = Object.keys(this.storage);
+    const data = keys.map((key: string) => {
+      const data = this.storage[key];
+      const word = data.transcriptQueue.getTranscription();
+      return { [key]: word };
+    });
+    return data;
+  }
+  size(): number {
+    return Object.keys(this.storage).length;
+  }
+}
+
+class CaptionMaintainerQueue {
+  captionData: Queue = new Queue();
+  push(data: HMSTranscript[] = []) {
+    data.forEach((value: HMSTranscript) => {
+      this.captionData.enqueue(value);
+    });
+  }
+}
+const TranscriptView = ({ peer_id, data }: { peer_id: string; data: string }) => {
+  const peerName = useHMSStore(selectPeerNameByID(peer_id));
+  data = data.trim();
+  if (!data) return null;
+  return (
+    <Text
+      variant="body2"
+      css={{
+        fontWeight: '$normal',
+      }}
+    >
+      {`${peerName}: ${data}`}
+    </Text>
+  );
+};
+
+export const CaptionsViewer = () => {
+  const [captionQueue] = useState<CaptionMaintainerQueue>(new CaptionMaintainerQueue());
+  const [currentData, setCurrentData] = useState<{ [key: string]: string }[]>([]);
+
+  useEffect(() => {
+    const timeInterval = setInterval(() => {
+      if (!captionQueue) {
+        return;
+      }
+      const data = captionQueue.captionData?.findPeerData();
+      setCurrentData(data);
+    }, 1000);
+    return () => clearInterval(timeInterval);
+  }, [captionQueue]);
+
+  useTranscript({
+    onTranscript: (data: HMSTranscript[]) => {
+      captionQueue && captionQueue.push(data as HMSTranscript[]);
+    },
+  });
+  const dataToShow = currentData.filter((data: { [key: string]: string }) => {
+    const key = Object.keys(data)[0];
+    if (data[key]) {
+      return true;
+    }
+    return false;
+  });
+  if (dataToShow.length <= 0) {
+    return null;
+  }
+  return (
+    <Flex direction="column" gap={1}>
+      {dataToShow.map((data: { [key: string]: string }, index: number) => {
+        const key = Object.keys(data)[0];
+        return <TranscriptView key={index} peer_id={key} data={data[key]} />;
+      })}
+    </Flex>
+  );
+};