@100mslive/roomkit-react 0.2.6 → 0.2.7-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.6",
+  "version": "0.2.7-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.6",
-    "@100mslive/hms-virtual-background": "1.12.6",
-    "@100mslive/react-icons": "0.9.6",
-    "@100mslive/react-sdk": "0.9.6",
+    "@100mslive/hls-player": "0.2.7-alpha.1",
+    "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
+    "@100mslive/hms-virtual-background": "1.12.7-alpha.1",
+    "@100mslive/react-icons": "0.9.7-alpha.1",
+    "@100mslive/react-sdk": "0.9.7-alpha.1",
     "@100mslive/types-prebuilt": "0.12.6",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -120,5 +121,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "928f9172a44fe6c47232ab84d2c991b04cd9f707"
+  "gitHead": "d9ed012d59612c39bc68dc427b5749405e4eeb38"
 }

package/src/Prebuilt/common/constants.ts

@@ -92,11 +92,12 @@ export const HLS_TIMED_METADATA_DOC_URL =
 
 export const REMOTE_STOP_SCREENSHARE_TYPE = 'REMOTE_STOP_SCREENSHARE';
 
-export const isChrome = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'chrome';
-export const isFirefox = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'firefox';
-export const isSafari = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'safari';
+// mweb could have browser name as "Mobile Chrome" or "Mobile Firefox"
+export const isChrome = parsedUserAgent.getBrowser()?.name?.toLowerCase().includes('chrome');
+export const isFirefox = parsedUserAgent.getBrowser()?.name?.toLowerCase().includes('firefox');
+export const isSafari = parsedUserAgent.getBrowser()?.name?.toLowerCase().includes('safari');
 export const isIOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'ios';
-export const isMacOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'mac os';
+export const isMacOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'macos';
 export const isAndroid = parsedUserAgent.getOS()?.name?.toLowerCase() === 'android';
 export const isIPadOS = false;
 // typeof navigator !== "undefined" &&
@@ -136,3 +137,5 @@ export enum QUESTION_TYPE {
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';
 
 export const DEFAULT_PORTAL_CONTAINER = '.prebuilt-container';
+
+export const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';

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

@@ -90,7 +90,7 @@ export const usePinnedTrack = () => {
 
 export const useSubscribedNotifications = notificationKey => {
   const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
-  return notificationPreference;
+  return notificationPreference || {};
 };
 
 export const useIsNotificationDisabled = () => {

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -0,0 +1,308 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { HMSKrispPlugin } from '@100mslive/hms-noise-cancellation';
+import {
+  DeviceType,
+  HMSRoomState,
+  selectIsLocalAudioPluginPresent,
+  selectLocalAudioTrackID,
+  selectLocalVideoTrackID,
+  selectRoomState,
+  selectVideoTrackByID,
+  useAVToggle,
+  useDevices,
+  useHMSActions,
+  useHMSStore,
+} 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 SettingsModal from './Settings/SettingsModal';
+// @ts-ignore: No implicit Any
+import { ToastManager } from './Toast/ToastManager';
+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';
+import { useAudioOutputTest } from './hooks/useAudioOutputTest';
+import { isMacOS, TEST_AUDIO_URL } from '../common/constants';
+
+// 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: selectedDeviceId === option.deviceId ? '$surface_bright' : '$surface_dim',
+            p: '$4 $8',
+            h: '$15',
+            fontSize: '$xs',
+            justifyContent: 'space-between',
+          }}
+          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 plugin = new HMSKrispPlugin();
+const NoiseCancellation = () => {
+  const localPeerAudioTrackID = useHMSStore(selectLocalAudioTrackID);
+  const isPluginAdded = useHMSStore(selectIsLocalAudioPluginPresent(plugin.getName()));
+  const [active, setActive] = useState(isPluginAdded);
+  const [inProgress, setInProgress] = useState(false);
+  const actions = useHMSActions();
+
+  useEffect(() => {
+    (async () => {
+      setInProgress(true);
+      if (active && !isPluginAdded) {
+        await actions.addPluginToAudioTrack(plugin);
+      }
+      if (!active && isPluginAdded) {
+        await actions.removePluginFromAudioTrack(plugin);
+      }
+      setInProgress(false);
+    })();
+  }, [actions, active, isPluginAdded]);
+
+  if (!plugin.isSupported() || !localPeerAudioTrackID) {
+    return null;
+  }
+
+  return (
+    <Dropdown.Item
+      css={{
+        p: '$4 $8',
+        h: '$15',
+        fontSize: '$xs',
+        justifyContent: 'space-between',
+      }}
+      onClick={e => {
+        e.preventDefault();
+        setActive(value => !value);
+      }}
+    >
+      <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
+        <AudioLevelIcon />
+        Reduce Noise
+      </Text>
+      <Switch
+        id="noise_cancellation"
+        checked={active}
+        disabled={inProgress}
+        onClick={e => e.stopPropagation()}
+        onCheckedChange={value => {
+          setActive(value);
+        }}
+      />
+    </Dropdown.Item>
+  );
+};
+
+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 }) => {
+  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
+  const { videoInput, audioInput, audioOutput } = allDevices;
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
+  const actions = useHMSActions();
+  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);
+
+  if (!toggleAudio && !toggleVideo) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {toggleAudio ? (
+        <IconButtonWithOptions
+          disabled={!toggleAudio}
+          hideOptions={hideOptions || !hasAudioDevices}
+          onDisabledClick={toggleAudio}
+          tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
+          icon={
+            !isLocalAudioEnabled ? <MicOffIcon data-testid="audio_off_btn" /> : <MicOnIcon data-testid="audio_on_btn" />
+          }
+          active={isLocalAudioEnabled}
+          onClick={toggleAudio}
+          key="toggleAudio"
+        >
+          <Dropdown.Group>
+            <OptionLabel icon={<MicOnIcon />}>{!shouldShowAudioOutput ? 'Audio' : 'Microphone'}</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>
+            </>
+          )}
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+          <NoiseCancellation />
+          <Dropdown.ItemSeparator css={{ mx: 0 }} />
+          <AudioSettings onClick={() => setShowSettings(true)} />
+        </IconButtonWithOptions>
+      ) : null}
+
+      {toggleVideo ? (
+        <IconButtonWithOptions
+          disabled={!toggleVideo}
+          hideOptions={hideOptions || !hasVideoDevices}
+          onDisabledClick={toggleVideo}
+          tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
+          icon={
+            !isLocalVideoEnabled ? (
+              <VideoOffIcon data-testid="video_off_btn" />
+            ) : (
+              <VideoOnIcon data-testid="video_on_btn" />
+            )
+          }
+          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 ? (
+        <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>
+  );
+};

package/src/Prebuilt/components/Footer/RoleOptions.tsx

@@ -80,6 +80,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   return (
     <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
       <Dropdown.Trigger
+        data-testid="role_group_options"
         onClick={e => e.stopPropagation()}
         className="role_actions"
         asChild

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

@@ -0,0 +1,159 @@
+import React from 'react';
+import { VerticalMenuIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Flex } from '../../../Layout';
+import { styled } from '../../../Theme';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+
+const variants = {
+  disabled: {
+    true: {
+      bg: '$surface_brighter',
+    },
+  },
+  active: {
+    false: {
+      bg: '$secondary_dim',
+    },
+  },
+};
+
+const IconSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4',
+  r: '$1',
+  bg: '$transparent',
+  borderTopRightRadius: 0,
+  borderColor: '$border_bright',
+  borderBottomRightRadius: 0,
+  position: 'relative',
+  '&:not([disabled]):focus-visible': {
+    zIndex: 1,
+  },
+  '@md': {
+    mx: 0,
+    borderTopRightRadius: '$1',
+    borderBottomRightRadius: '$1',
+  },
+  variants: {
+    ...variants,
+    hideOptions: {
+      true: {
+        borderTopRightRadius: '$1',
+        borderBottomRightRadius: '$1',
+      },
+    },
+  },
+});
+
+const OptionsSection = styled(IconButton, {
+  w: 'unset',
+  h: '$14',
+  p: '$4 $2',
+  r: '$1',
+  borderTopLeftRadius: 0,
+  borderColor: '$border_bright',
+  borderBottomLeftRadius: 0,
+  borderLeftWidth: 0,
+  position: 'relative',
+  '&:not([disabled]):focus-visible': {
+    zIndex: 1,
+  },
+  '@md': {
+    display: 'none',
+  },
+  variants,
+});
+
+const Icon = styled(Flex, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$on_primary_high',
+  variants: {
+    disabled: {
+      true: {
+        color: '$on_surface_low',
+      },
+    },
+    active: {
+      true: {
+        color: '$on_surface_high',
+      },
+    },
+  },
+});
+
+export const IconButtonWithOptions = ({
+  disabled = false,
+  onDisabledClick = () => {
+    return;
+  },
+  tooltipMessage = '',
+  icon,
+  children,
+  active,
+  hideOptions = false,
+  onClick = () => {
+    return;
+  },
+}: {
+  onClick: () => void;
+  onDisabledClick: () => void;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  hideOptions?: boolean;
+  active: boolean;
+  disabled?: boolean;
+  tooltipMessage?: string;
+}) => {
+  const commonProps = { disabled, active };
+  return (
+    <Flex>
+      <IconSection {...commonProps} onClick={onClick} hideOptions={hideOptions}>
+        <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
+          <Icon {...commonProps}>{icon}</Icon>
+        </Tooltip>
+      </IconSection>
+      {!hideOptions && children ? (
+        <Dropdown.Root>
+          <Dropdown.Trigger
+            asChild
+            // onClick does not work
+            onPointerDown={e => {
+              if (disabled) {
+                e.preventDefault();
+                onDisabledClick();
+              }
+            }}
+          >
+            <OptionsSection {...commonProps}>
+              <Tooltip title="View Options">
+                <Icon {...commonProps}>
+                  <VerticalMenuIcon />
+                </Icon>
+              </Tooltip>
+            </OptionsSection>
+          </Dropdown.Trigger>
+          <Dropdown.Content
+            sideOffset={5}
+            alignOffset={-44}
+            align="start"
+            side="top"
+            css={{
+              w: 344,
+              maxWidth: '100%',
+              maxHeight: 'unset',
+              p: 0,
+              border: 'none',
+              bg: '$surface_dim',
+            }}
+          >
+            {children}
+          </Dropdown.Content>
+        </Dropdown.Root>
+      ) : null}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -1,8 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
-// @ts-ignore: No implicit Any
 import { selectIsConnectedToRoom, selectPermissions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
-// @ts-ignore: No implicit Any
 import { ExitIcon, StopIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -11,25 +11,36 @@ import {
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { useSubscribedNotifications } from '../AppData/useUISettings';
 
 export const HandRaisedNotifications = () => {
   const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
   const roomState = useHMSStore(selectRoomState);
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
+  const subscribedNotifications = useSubscribedNotifications();
 
   useEffect(() => {
     if (!notification?.data) {
       return;
     }
-    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp) {
+
+    // Don't show toast message in case of local peer.
+    if (
+      roomState !== HMSRoomState.Connected ||
+      notification.data.isLocal ||
+      !on_stage_exp ||
+      !subscribedNotifications.METADATA_UPDATED
+    ) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
     if (hasPeerHandRaised) {
       ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+      console.debug('Metadata updated', notification.data);
     }
-  }, [notification, on_stage_exp, roomState, vanillaStore]);
+  }, [notification, on_stage_exp, roomState, subscribedNotifications.METADATA_UPDATED, vanillaStore]);
 
   return null;
 };

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -16,8 +16,6 @@ import { GroupIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
-import { ToastBatcher } from '../Toast/ToastBatcher';
-// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { ChatNotifications } from './ChatNotifications';
@@ -34,8 +32,6 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { getMetadata } from '../../common/utils';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};
@@ -43,7 +39,7 @@ const pollToastKey: Record<string, string> = {};
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
-  const subscribedNotifications = useSubscribedNotifications() || {};
+  const subscribedNotifications = useSubscribedNotifications();
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
@@ -65,19 +61,6 @@ export function Notifications() {
       return;
     }
     switch (notification.type) {
-      case HMSNotificationTypes.METADATA_UPDATED:
-        if (roomState !== HMSRoomState.Connected) {
-          return;
-        }
-        // Don't show toast message when metadata is updated and raiseHand is false.
-        // Don't show toast message in case of local peer.
-        const metadata = getMetadata(notification.data?.metadata);
-        if (!metadata?.isHandRaised || notification.data.isLocal) return;
-
-        console.debug('Metadata updated', notification.data);
-        if (!subscribedNotifications.METADATA_UPDATED) return;
-        ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
-        break;
       case HMSNotificationTypes.NAME_UPDATED:
         console.log(notification.data.id + ' changed their name to ' + notification.data.name);
         break;

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -14,9 +14,10 @@ import { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../..
 import { config as cssConfig } from '../../../Theme';
 import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
 import { useUISettings } from '../AppData/useUISettings';
+import { useAudioOutputTest } from '../hooks/useAudioOutputTest';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
 import { settingOverflow } from './common';
-import { UI_SETTINGS } from '../../common/constants';
+import { TEST_AUDIO_URL, UI_SETTINGS } from '../../common/constants';
 
 /**
  * wrap the button on click of whom settings should open, this component will take care of the rest,
@@ -182,22 +183,8 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children =
   );
 };
 
-const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';
-
 const TestAudio = ({ id }) => {
-  const audioRef = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  useEffect(() => {
-    if (audioRef.current && id) {
-      try {
-        if (typeof audioRef.current.setSinkId !== 'undefined') {
-          audioRef.current.setSinkId(id);
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    }
-  }, [id]);
+  const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId: id });
   return (
     <>
       <Button
@@ -218,7 +205,13 @@ const TestAudio = ({ id }) => {
           &nbsp; speaker
         </Text>
       </Button>
-      <audio ref={audioRef} src={TEST_AUDIO_URL} onEnded={() => setPlaying(false)} onPlay={() => setPlaying(true)} />
+      <audio
+        ref={audioRef}
+        src={TEST_AUDIO_URL}
+        onEnded={() => setPlaying(false)}
+        onPlay={() => setPlaying(true)}
+        css={{ display: 'none' }}
+      />
     </>
   );
 };