@100mslive/roomkit-react 0.3.13-alpha.2 → 0.3.13-alpha.4

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -5,6 +5,7 @@ import {
   HMSRoomState,
   selectIsLocalAudioPluginPresent,
   selectLocalAudioTrackID,
+  selectLocalPeer,
   selectLocalVideoTrackID,
   selectRoom,
   selectRoomState,
@@ -27,9 +28,12 @@ import {
 } from '@100mslive/react-icons';
 import { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';
 // @ts-ignore: No implicit Any
+import { ActionTile } from './MoreSettings/ActionTile';
+// @ts-ignore: No implicit Any
 import SettingsModal from './Settings/SettingsModal';
 // @ts-ignore: No implicit Any
 import { ToastManager } from './Toast/ToastManager';
+import { AudioLevel } from '../../AudioLevel';
 import { Dropdown } from '../../Dropdown';
 import { Box, Flex } from '../../Layout';
 import { Switch } from '../../Switch';
@@ -38,10 +42,11 @@ import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
-import { useIsNoiseCancellationEnabled, useSetNoiseCancellationEnabled } from './AppData/useUISettings';
+import { useIsNoiseCancellationEnabled, useSetNoiseCancellation } from './AppData/useUISettings';
 import { useAudioOutputTest } from './hooks/useAudioOutputTest';
 import { isMacOS, TEST_AUDIO_URL } from '../common/constants';
 
+const krispPlugin = new HMSKrispPlugin();
 // const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%' };
 
 export const Options = ({
@@ -96,32 +101,82 @@ const OptionLabel = ({ children, icon }: { children: React.ReactNode; icon: Reac
   );
 };
 
-const plugin = new HMSKrispPlugin();
-const NoiseCancellation = () => {
-  const localPeerAudioTrackID = useHMSStore(selectLocalAudioTrackID);
-  const [enabled, setEnabled] = useSetNoiseCancellationEnabled();
-  const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName()));
-  const [inProgress, setInProgress] = useState(false);
+const useNoiseCancellationWithPlugin = () => {
   const actions = useHMSActions();
-  const room = useHMSStore(selectRoom);
+  const [inProgress, setInProgress] = useState(false);
+  const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
+  const setNoiseCancellationWithPlugin = async (enabled: boolean) => {
+    if (inProgress) {
+      return;
+    }
+    setInProgress(true);
+    if (enabled) {
+      await actions.addPluginToAudioTrack(krispPlugin);
+    } else {
+      await actions.removePluginFromAudioTrack(krispPlugin);
+    }
+    setNoiseCancellationEnabled(enabled);
+    setInProgress(false);
+  };
+  return {
+    setNoiseCancellationWithPlugin,
+    inProgress,
+  };
+};
 
-  useEffect(() => {
-    (async () => {
-      setInProgress(true);
-      if (enabled && !isPluginAdded) {
-        await actions.addPluginToAudioTrack(plugin);
-      }
-      if (!enabled && isPluginAdded) {
-        await actions.removePluginFromAudioTrack(plugin);
-      }
-      setInProgress(false);
-    })();
-  }, [actions, enabled, isPluginAdded]);
+export const NoiseCancellation = ({
+  actionTile,
+  iconOnly,
+  setOpenOptionsSheet,
+}: {
+  setOpenOptionsSheet?: (value: boolean) => void;
+  iconOnly?: boolean;
+  actionTile?: boolean;
+}) => {
+  const localPeerAudioTrackID = useHMSStore(selectLocalAudioTrackID);
+  const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
+  const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
+  const room = useHMSStore(selectRoom);
+  const isKrispPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(krispPlugin.getName()));
 
-  if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
+  if (!krispPlugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
     return null;
   }
 
+  if (actionTile) {
+    return (
+      <ActionTile.Root
+        active={isNoiseCancellationEnabled && isKrispPluginAdded}
+        disable={inProgress}
+        onClick={async () => {
+          await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+          setOpenOptionsSheet?.(false);
+        }}
+      >
+        <AudioLevelIcon />
+        <ActionTile.Title>{isNoiseCancellationEnabled ? 'Noise Reduced' : 'Reduce Noise'}</ActionTile.Title>
+      </ActionTile.Root>
+    );
+  }
+
+  if (iconOnly) {
+    return (
+      <Tooltip title={isNoiseCancellationEnabled ? 'Noise Reduced' : 'Reduce Noise'}>
+        <IconButton
+          onClick={async () => {
+            await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
+          }}
+          disabled={inProgress}
+          css={{
+            bg: isNoiseCancellationEnabled && isKrispPluginAdded ? '$surface_brighter' : '$background_dim',
+            borderColor: isNoiseCancellationEnabled && isKrispPluginAdded ? '$border_brighter' : '$border_bright',
+          }}
+        >
+          <AudioLevelIcon />
+        </IconButton>
+      </Tooltip>
+    );
+  }
   return (
     <>
       <Dropdown.ItemSeparator css={{ mx: 0 }} />
@@ -132,9 +187,9 @@ const NoiseCancellation = () => {
           fontSize: '$xs',
           justifyContent: 'space-between',
         }}
-        onClick={e => {
+        onClick={async e => {
           e.preventDefault();
-          setEnabled(!enabled);
+          await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
         }}
       >
         <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
@@ -143,11 +198,11 @@ const NoiseCancellation = () => {
         </Text>
         <Switch
           id="noise_cancellation"
-          checked={enabled && isPluginAdded}
+          checked={isNoiseCancellationEnabled && isKrispPluginAdded}
           disabled={inProgress}
           onClick={e => e.stopPropagation()}
-          onCheckedChange={value => {
-            setEnabled(value);
+          onCheckedChange={async value => {
+            await setNoiseCancellationWithPlugin(value);
           }}
         />
       </Dropdown.Item>
@@ -204,10 +259,10 @@ const AudioSettings = ({ onClick }: { onClick: () => void }) => {
     </>
   );
 };
-
-export const AudioVideoToggle = ({ hideOptions = false }) => {
+export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolean }) => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
   const { videoInput, audioInput, audioOutput } = allDevices;
+  const localPeer = useHMSStore(selectLocalPeer);
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
   const actions = useHMSActions();
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
@@ -218,15 +273,15 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
   const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype && Number(audioOutput?.length) > 0;
   const { screenType } = useRoomLayoutConferencingScreen();
   const [showSettings, setShowSettings] = useState(false);
-  const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName()));
+  const isKrispPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(krispPlugin.getName()));
   const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
+  const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
+  const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
 
   useEffect(() => {
     (async () => {
-      if (isNoiseCancellationEnabled && !isPluginAdded) {
-        await actions.addPluginToAudioTrack(plugin);
-      }
-      if (isNoiseCancellationEnabled && isPluginAdded) {
+      if (isNoiseCancellationEnabled && !isKrispPluginAdded && !inProgress && localPeer?.audioTrack) {
+        await setNoiseCancellationWithPlugin(true);
         ToastManager.addToast({
           title: `Noise Reduction Enabled`,
           variant: 'standard',
@@ -235,7 +290,8 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
         });
       }
     })();
-  }, [actions, isNoiseCancellationEnabled, isPluginAdded]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNoiseCancellationEnabled, localPeer?.audioTrack, inProgress]);
 
   if (!toggleAudio && !toggleVideo) {
     return null;
@@ -256,7 +312,10 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
           key="toggleAudio"
         >
           <Dropdown.Group>
-            <OptionLabel icon={<MicOnIcon />}>{!shouldShowAudioOutput ? 'Audio' : 'Microphone'}</OptionLabel>
+            <OptionLabel icon={<MicOnIcon />}>
+              <Box css={{ flex: '1 1 0' }}>{!shouldShowAudioOutput ? 'Audio' : 'Microphone'}</Box>
+              {!showMuteIcon && <AudioLevel trackId={localPeer?.audioTrack} />}
+            </OptionLabel>
             <Options
               options={audioInput}
               selectedDeviceId={selectedDeviceIDs.audioInput}

package/src/Prebuilt/components/CaptionIcon.tsx

@@ -18,7 +18,7 @@ export const CaptionIcon = () => {
     return null;
   }
   return (
-    <Tooltip title={isCaption ? 'Disable caption' : 'Enable caption'}>
+    <Tooltip title={isCaption ? 'Hide closed captions' : 'Show closed captions'}>
       <IconButton data-testid="caption_btn" onClick={onClick}>
         {isCaption ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
       </IconButton>

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -111,7 +111,7 @@ export const IconButtonWithOptions = ({
   const commonProps = { disabled, active };
   return (
     <Flex>
-      <IconSection {...commonProps} onClick={onClick} hideOptions={hideOptions}>
+      <IconSection {...commonProps} onClick={onClick} hideOptions={hideOptions} className="__cancel-drag-event">
         <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
           <Icon {...commonProps}>{icon}</Icon>
         </Tooltip>

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -35,6 +35,7 @@ import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
 // @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
+import { NoiseCancellation } from '../../AudioVideoToggle';
 // @ts-ignore: No implicit any
 import { EmojiReaction } from '../../EmojiReaction';
 // @ts-ignore: No implicit any
@@ -54,8 +55,11 @@ import { useRoomLayoutHeader } from '../../../provider/roomLayoutProvider/hooks/
 import { useSheetToggle } from '../../AppData/useSheet';
 // @ts-ignore: No implicit any
 import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useSetIsCaptionEnabled, useShowPolls } from '../../AppData/useUISettings';
+import {
+  useSetIsCaptionEnabled,
+  useShowPolls,
+  // @ts-ignore: No implicit Any
+} from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useMyMetadata } from '../../hooks/useMetadata';
@@ -197,6 +201,7 @@ export const MwebOptions = ({
                 <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
               </ActionTile.Root>
             ) : null}
+            <NoiseCancellation setOpenOptionsSheet={setOpenOptionsSheet} actionTile />
             {isTranscriptionAllowed ? (
               <ActionTile.Root
                 onClick={() => {

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -19,7 +19,7 @@ import { AudioLevel } from '../../../AudioLevel';
 import { useHMSPrebuiltContext } from '../../AppContext';
 import IconButton from '../../IconButton';
 import SidePane from '../../layouts/SidePane';
-import { AudioVideoToggle } from '../AudioVideoToggle';
+import { AudioVideoToggle, NoiseCancellation } from '../AudioVideoToggle';
 import Chip from '../Chip';
 import TileConnection from '../Connection/TileConnection';
 import FullPageProgress from '../FullPageProgress';
@@ -30,8 +30,11 @@ import SettingsModal from '../Settings/SettingsModal';
 import { VBToggle } from '../VirtualBackground/VBToggle';
 import PreviewForm from './PreviewForm';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useAuthToken, useUISettings } from '../AppData/useUISettings';
+import {
+  useAuthToken,
+  useUISettings,
+  // @ts-ignore: No implicit Any
+} from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 // @ts-ignore: No implicit Any
@@ -251,7 +254,6 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
 export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boolean; vbEnabled: boolean }) => {
   const isMobile = useMedia(cssConfig.media.md);
-
   return (
     <Flex
       justify={hideSettings && isMobile ? 'center' : 'between'}
@@ -264,7 +266,10 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
         <AudioVideoToggle />
         {vbEnabled ? <VBToggle /> : null}
       </Flex>
-      {!hideSettings ? <PreviewSettings /> : null}
+      <Flex align="center" gap="1">
+        {isMobile && <NoiseCancellation iconOnly />}
+        {!hideSettings ? <PreviewSettings /> : null}
+      </Flex>
     </Flex>
   );
 };

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useEffect, useState } from 'react';
 import { ControlPosition } from 'react-draggable';
+import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
@@ -17,6 +18,7 @@ import { PeopleAddIcon, ShareScreenIcon } from '@100mslive/react-icons';
 import FullPageProgress from '../components/FullPageProgress';
 import { GridLayout } from '../components/VideoLayouts/GridLayout';
 import { Box, Flex } from '../../Layout';
+import { config } from '../../Theme';
 // @ts-ignore: No implicit Any
 import { EmbedView } from './EmbedView';
 // @ts-ignore: No implicit Any
@@ -51,7 +53,8 @@ export const VideoStreamingSection = ({
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
-  const [captionPosition, setCaptionPosition] = useState<ControlPosition>({ x: -200, y: 0 });
+  const isMobile = useMedia(config.media.md);
+  const [captionPosition, setCaptionPosition] = useState<ControlPosition>({ x: isMobile ? 0 : -200, y: 0 });
   useCloseScreenshareWhiteboard();
 
   const { isNotAllowedToPublish, isScreenOnlyPublishParams, hasSubscribedRolePublishing } = useWaitingRoomInfo();