@100mslive/roomkit-react 0.4.3-alpha.3 → 0.4.3-alpha.4

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -1,212 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-  selectAppData,
-  selectAppDataByPath,
-  selectAudioTrackByPeerID,
-  selectPermissions,
-  selectPolls,
-  selectSessionStore,
-  selectTrackByID,
-  selectVideoTrackByPeerID,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, POLL_STATE, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';
-
-/**
- * fields saved related to UI settings in store's app data can be
- * accessed using this hook. key is optional if not passed
- * the whole UI settings object is returned. Usage -
- * 1. val = useUiSettings("isAudioOnly");
- *    console.log(val); // false
- * 2. val = useUISettings();
- *    console.log(val); // {isAudioOnly: false}
- * @param {string | undefined} uiSettingKey
- */
-export const useUISettings = uiSettingKey => {
-  const uiSettings = useHMSStore(selectAppDataByPath(APP_DATA.uiSettings, uiSettingKey));
-  return uiSettings;
-};
-
-/**
- * fields saved related to UI settings in store's app data can be
- * accessed using this hook. key is optional if not passed
- * the whole UI settings object is returned. Usage -
- * [val, setVal] = useUiSettings("isAudioOnly");
- * console.log(val); // false
- * setVal(true);
- * @param {string} uiSettingKey
- */
-export const useSetUiSettings = uiSettingKey => {
-  const value = useUISettings(uiSettingKey);
-  const setValue = useSetAppData({
-    key1: APP_DATA.uiSettings,
-    key2: uiSettingKey,
-  });
-  return [value, setValue];
-};
-
-export const useIsHLSStartedFromUI = () => {
-  return useHMSStore(selectAppData(APP_DATA.hlsStarted));
-};
-
-export const useIsRTMPStartedFromUI = () => {
-  return useHMSStore(selectAppData(APP_DATA.rtmpStarted));
-};
-
-export const useAuthToken = () => {
-  return useHMSStore(selectAppData(APP_DATA.authToken));
-};
-
-export const useUrlToEmbed = () => {
-  return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;
-};
-
-export const usePDFConfig = () => {
-  return useHMSStore(selectAppData(APP_DATA.pdfConfig));
-};
-
-export const useResetPDFConfig = () => {
-  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  return useCallback(() => setPDFConfig(), [setPDFConfig]);
-};
-
-export const useResetEmbedConfig = () => {
-  const [, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  return () => setEmbedConfig();
-};
-export const usePinnedTrack = () => {
-  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
-  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const spotlightVideoTrackId = useHMSStore(selectVideoTrackByPeerID(spotlightPeerId))?.id;
-  const spotlightAudioTrackId = useHMSStore(selectAudioTrackByPeerID(spotlightPeerId))?.id;
-  return useHMSStore(selectTrackByID(pinnedTrackId || spotlightVideoTrackId || spotlightAudioTrackId));
-};
-
-export const useSubscribedNotifications = notificationKey => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
-  return notificationPreference;
-};
-
-export const useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotifications));
-  return notificationPreference;
-};
-
-export const useSetSubscribedNotifications = notificationKey => {
-  const value = useSubscribedNotifications(notificationKey);
-  const setValue = useSetAppData({
-    key1: APP_DATA.subscribedNotifications,
-    key2: notificationKey,
-  });
-  return [value, setValue];
-};
-
-export const useIsCaptionEnabled = () => {
-  const isCaptionEnabled = useHMSStore(selectAppDataByPath(APP_DATA.caption));
-  return isCaptionEnabled;
-};
-
-export const useSetIsCaptionEnabled = () => {
-  const [value, setValue] = useSetAppDataByKey(APP_DATA.caption);
-  return [value, setValue];
-};
-
-export const useSubscribeChatSelector = chatSelectorKey => {
-  const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));
-  return chatSelectorPreference;
-};
-
-export const useSetSubscribedChatSelector = chatSelectorKey => {
-  const value = useSubscribeChatSelector(chatSelectorKey);
-  const setValue = useSetAppData({
-    key1: APP_DATA.chatSelector,
-    key2: chatSelectorKey,
-  });
-  return [value, setValue];
-};
-
-export const useSetAppDataByKey = appDataKey => {
-  const value = useHMSStore(selectAppData(appDataKey));
-  const actions = useHMSActions();
-  const setValue = useCallback(
-    value => {
-      actions.setAppData(appDataKey, value);
-    },
-    [actions, appDataKey],
-  );
-  return [value, setValue];
-};
-
-const useSetAppData = ({ key1, key2 }) => {
-  const actions = useHMSActions();
-  const store = useHMSVanillaStore();
-  const [, setPreferences] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
-  const setValue = useCallback(
-    value => {
-      if (!key1) {
-        return;
-      }
-      actions.setAppData(
-        key1,
-        key2
-          ? {
-              [key2]: value,
-            }
-          : value,
-        true,
-      );
-      const appData = store.getState(selectAppData());
-      setPreferences({
-        ...appData.uiSettings,
-        [UI_SETTINGS.isAudioOnly]: undefined,
-        subscribedNotifications: appData.subscribedNotifications,
-      });
-    },
-    [actions, key1, key2, store, setPreferences],
-  );
-  return setValue;
-};
-
-export const useShowPolls = () => {
-  const permissions = useHMSStore(selectPermissions);
-  const polls = useHMSStore(selectPolls);
-
-  const showPolls = useMemo(() => {
-    return permissions?.pollWrite || (permissions?.pollRead && polls?.length > 0);
-  }, [permissions?.pollRead, permissions?.pollWrite, polls?.length]);
-
-  return { showPolls };
-};
-
-export const usePollViewState = () => {
-  const [pollState, setPollState] = useSetAppDataByKey(APP_DATA.pollState);
-
-  const setPollView = useCallback(
-    view => {
-      setPollState({
-        [POLL_STATE.pollInView]: pollState?.pollInView,
-        [POLL_STATE.view]: view,
-      });
-    },
-    [pollState?.pollInView, setPollState],
-  );
-
-  return {
-    setPollState,
-    setPollView,
-    pollInView: pollState?.pollInView,
-    view: pollState?.view,
-  };
-};
-
-export const useIsNoiseCancellationEnabled = () => {
-  const isNoiseCancellationEnabled = useHMSStore(selectAppDataByPath(APP_DATA.noiseCancellation));
-  return isNoiseCancellationEnabled;
-};
-export const useSetNoiseCancellation = () => {
-  const [isNoiseCancellationEnabled, setNoiseCancellationEnabled] = useSetAppDataByKey(APP_DATA.noiseCancellation);
-  return [isNoiseCancellationEnabled, setNoiseCancellationEnabled];
-};

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -1,411 +0,0 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { HMSKrispPlugin } from '@100mslive/hms-noise-cancellation';
-import {
-  DeviceType,
-  HMSRoomState,
-  selectIsLocalAudioPluginPresent,
-  selectLocalAudioTrackID,
-  selectLocalPeer,
-  selectLocalVideoTrackID,
-  selectRoom,
-  selectRoomState,
-  selectVideoTrackByID,
-  useAVToggle,
-  useDevices,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import {
-  AudioLevelIcon,
-  CameraFlipIcon,
-  CheckIcon,
-  MicOffIcon,
-  MicOnIcon,
-  SettingsIcon,
-  SpeakerIcon,
-  VideoOffIcon,
-  VideoOnIcon,
-} 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';
-import { Text } from '../../Text';
-import { Tooltip } from '../../Tooltip';
-import IconButton from '../IconButton';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { useIsNoiseCancellationEnabled, useSetNoiseCancellation } from './AppData/useUISettings';
-import { useAudioOutputTest } from './hooks/useAudioOutputTest';
-import { isAndroid, isIOS, isMacOS, TEST_AUDIO_URL } from '../common/constants';
-
-const krispPlugin = new HMSKrispPlugin();
-// const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%' };
-
-export const Options = ({
-  options,
-  selectedDeviceId,
-  onClick,
-}: {
-  options?: Array<MediaDeviceInfo | InputDeviceInfo>;
-  selectedDeviceId?: string;
-  onClick: (deviceId: string) => Promise<void>;
-}) => {
-  return (
-    <>
-      {options?.map(option => (
-        <Dropdown.Item
-          key={option.label}
-          css={{
-            backgroundColor: '$surface_dim',
-            p: '$4 $8',
-            h: '$15',
-            fontSize: '$xs',
-            justifyContent: 'space-between',
-            color: selectedDeviceId === option.deviceId ? '$primary_bright' : '',
-          }}
-          onClick={() => {
-            onClick(option.deviceId);
-          }}
-        >
-          {option.label}
-          {selectedDeviceId === option.deviceId ? <CheckIcon width={16} height={16} /> : null}
-        </Dropdown.Item>
-      ))}
-    </>
-  );
-};
-
-const OptionLabel = ({ children, icon }: { children: React.ReactNode; icon: React.ReactNode }) => {
-  return (
-    <Dropdown.Label
-      css={{
-        h: '$16',
-        p: '$4 $8',
-        color: '$on_surface_medium',
-        bg: 'transparent',
-        fontSize: '$xs',
-        gap: '$4',
-        alignItems: 'center',
-      }}
-    >
-      <Flex css={{ alignItems: 'center', justifyContent: 'center', '& svg': { size: '$8' } }}>{icon}</Flex> {children}
-    </Dropdown.Label>
-  );
-};
-
-const useNoiseCancellationWithPlugin = () => {
-  const actions = useHMSActions();
-  const [inProgress, setInProgress] = useState(false);
-  const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
-  const isEnabledForRoom = useHMSStore(selectRoom)?.isNoiseCancellationEnabled;
-  const setNoiseCancellationWithPlugin = useCallback(
-    async (enabled: boolean) => {
-      if (!isEnabledForRoom || inProgress) {
-        return;
-      }
-      if (!krispPlugin.checkSupport().isSupported) {
-        throw Error('Krisp plugin is not supported');
-      }
-      setInProgress(true);
-      if (enabled) {
-        await actions.addPluginToAudioTrack(krispPlugin);
-      } else {
-        await actions.removePluginFromAudioTrack(krispPlugin);
-      }
-      setNoiseCancellationEnabled(enabled);
-      setInProgress(false);
-    },
-    [actions, inProgress, isEnabledForRoom, setNoiseCancellationEnabled],
-  );
-  return {
-    setNoiseCancellationWithPlugin,
-    inProgress,
-  };
-};
-
-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 (!krispPlugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
-    return null;
-  }
-
-  if (actionTile) {
-    return (
-      <ActionTile.Root
-        active={isNoiseCancellationEnabled && isKrispPluginAdded}
-        disabled={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 }} />
-      <Dropdown.Item
-        css={{
-          p: '$4 $8',
-          h: '$15',
-          fontSize: '$xs',
-          justifyContent: 'space-between',
-        }}
-        onClick={async e => {
-          e.preventDefault();
-          await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
-        }}
-      >
-        <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
-          <AudioLevelIcon />
-          Reduce Noise
-        </Text>
-        <Switch
-          id="noise_cancellation"
-          checked={isNoiseCancellationEnabled && isKrispPluginAdded}
-          disabled={inProgress}
-          onClick={e => e.stopPropagation()}
-          onCheckedChange={async value => {
-            await setNoiseCancellationWithPlugin(value);
-          }}
-        />
-      </Dropdown.Item>
-      <Dropdown.ItemSeparator css={{ mx: 0 }} />
-    </>
-  );
-};
-
-const AudioOutputLabel = ({ deviceId }: { deviceId: string }) => {
-  const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId });
-  return (
-    <OptionLabel icon={<SpeakerIcon />}>
-      <Box css={{ flex: '1 1 0' }}>Speakers</Box>
-      <Text
-        variant="xs"
-        css={{ color: '$primary_bright', '&:hover': { cursor: 'pointer' } }}
-        onClick={async () => {
-          if (playing) {
-            return;
-          }
-          await audioRef.current?.play();
-        }}
-      >
-        <audio
-          ref={audioRef}
-          src={TEST_AUDIO_URL}
-          onEnded={() => setPlaying(false)}
-          onPlay={() => setPlaying(true)}
-          style={{ display: 'none' }}
-        />
-        {playing ? 'Playing Sound...' : 'Play Test Sound'}
-      </Text>
-    </OptionLabel>
-  );
-};
-
-const AudioSettings = ({ onClick }: { onClick: () => void }) => {
-  return (
-    <>
-      <Dropdown.Item
-        css={{
-          backgroundColor: '$surface_dim',
-          p: '$4 $8',
-          h: '$15',
-          alignItems: 'center',
-          gap: '$2',
-          fontSize: '$xs',
-          '& svg': { size: '$8' },
-        }}
-        onClick={onClick}
-      >
-        <SettingsIcon /> Audio Settings
-      </Dropdown.Item>
-    </>
-  );
-};
-export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolean }) => {
-  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices(error => {
-    ToastManager.addToast({
-      title: error.message,
-      variant: 'error',
-      duration: 2000,
-    });
-  });
-  const { videoInput, audioInput, audioOutput } = allDevices;
-  const localPeer = useHMSStore(selectLocalPeer);
-  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
-  const actions = useHMSActions();
-  const vanillaStore = useHMSVanillaStore();
-  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
-  const roomState = useHMSStore(selectRoomState);
-  const hasAudioDevices = Number(audioInput?.length) > 0;
-  const hasVideoDevices = Number(videoInput?.length) > 0;
-  const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype && Number(audioOutput?.length) > 0;
-  const { screenType } = useRoomLayoutConferencingScreen();
-  const [showSettings, setShowSettings] = useState(false);
-  const isKrispPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(krispPlugin.getName()));
-  const isNoiseCancellationEnabled = useIsNoiseCancellationEnabled();
-  const { setNoiseCancellationWithPlugin, inProgress } = useNoiseCancellationWithPlugin();
-  const showMuteIcon = !isLocalAudioEnabled || !toggleAudio;
-
-  useEffect(() => {
-    (async () => {
-      const isEnabledForRoom = vanillaStore.getState(selectRoom)?.isNoiseCancellationEnabled;
-      if (
-        isEnabledForRoom &&
-        isNoiseCancellationEnabled &&
-        !isKrispPluginAdded &&
-        !inProgress &&
-        localPeer?.audioTrack
-      ) {
-        try {
-          await setNoiseCancellationWithPlugin(true);
-          ToastManager.addToast({
-            title: `Noise Reduction Enabled`,
-            variant: 'standard',
-            duration: 2000,
-            icon: <AudioLevelIcon />,
-          });
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isNoiseCancellationEnabled, localPeer?.audioTrack, inProgress]);
-
-  if (!toggleAudio && !toggleVideo) {
-    return null;
-  }
-  return (
-    <Fragment>
-      {toggleAudio ? (
-        <IconButtonWithOptions
-          disabled={!toggleAudio}
-          hideOptions={hideOptions || !hasAudioDevices}
-          onDisabledClick={toggleAudio}
-          testid="audio_toggle_btn"
-          tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
-          icon={!isLocalAudioEnabled ? <MicOffIcon /> : <MicOnIcon />}
-          active={isLocalAudioEnabled}
-          onClick={toggleAudio}
-          key="toggleAudio"
-        >
-          <Dropdown.Group>
-            <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}
-              onClick={deviceId => updateDevice({ deviceId, deviceType: DeviceType.audioInput })}
-            />
-          </Dropdown.Group>
-          <Dropdown.ItemSeparator css={{ mx: 0 }} />
-          {shouldShowAudioOutput && (
-            <>
-              <AudioOutputLabel deviceId={selectedDeviceIDs.audioOutput || ''} />
-              <Dropdown.Group>
-                <Options
-                  options={audioOutput}
-                  selectedDeviceId={selectedDeviceIDs.audioOutput}
-                  onClick={deviceId => updateDevice({ deviceId, deviceType: DeviceType.audioOutput })}
-                />
-              </Dropdown.Group>
-            </>
-          )}
-          <NoiseCancellation />
-          <AudioSettings onClick={() => setShowSettings(true)} />
-        </IconButtonWithOptions>
-      ) : null}
-
-      {toggleVideo ? (
-        <IconButtonWithOptions
-          disabled={!toggleVideo}
-          hideOptions={hideOptions || !hasVideoDevices}
-          onDisabledClick={toggleVideo}
-          tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
-          testid="video_toggle_btn"
-          icon={!isLocalVideoEnabled ? <VideoOffIcon /> : <VideoOnIcon />}
-          key="toggleVideo"
-          active={isLocalVideoEnabled}
-          onClick={toggleVideo}
-        >
-          <Options
-            options={videoInput}
-            selectedDeviceId={selectedDeviceIDs.videoInput}
-            onClick={deviceId => updateDevice({ deviceId, deviceType: DeviceType.videoInput })}
-          />
-        </IconButtonWithOptions>
-      ) : null}
-
-      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview && (isIOS || isAndroid) ? (
-        <Tooltip title="Switch Camera" key="switchCamera">
-          <IconButton
-            onClick={async () => {
-              try {
-                await actions.switchCamera();
-              } catch (e) {
-                ToastManager.addToast({
-                  title: `Error while flipping camera ${(e as Error).message || ''}`,
-                  variant: 'error',
-                });
-              }
-            }}
-          >
-            <CameraFlipIcon />
-          </IconButton>
-        </Tooltip>
-      ) : null}
-      {showSettings && (
-        <SettingsModal open={showSettings} onOpenChange={() => setShowSettings(false)} screenType={screenType} />
-      )}
-    </Fragment>
-  );
-};