@100mslive/roomkit-react 0.1.0 → 0.1.2-alpha.0

package/src/Loading/Loading.tsx

@@ -14,20 +14,17 @@ type Props = {
 type LoadingProps = Props & React.SVGProps<SVGSVGElement>;
 
 export const Loading = ({ size = 24, color = 'white', ...props }: LoadingProps) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M19.8852 12C20.5009 12 21.0071 12.501 20.9311 13.1119C20.7585 14.498 20.2649 15.8303 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89471 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17293 13.7558C2.82567 12.01 3.0039 10.2004 3.68508 8.55585C4.36627 6.91131 5.51983 5.50571 6.99987 4.51677C8.16971 3.73511 9.50199 3.24152 10.8881 3.06895C11.499 2.99288 12 3.4991 12 4.11476C12 4.73042 11.4976 5.22017 10.8903 5.32108C9.94601 5.47798 9.04141 5.83408 8.23852 6.37055C7.12512 7.1145 6.25733 8.17191 5.74489 9.40905C5.23245 10.6462 5.09837 12.0075 5.35961 13.3209C5.62085 14.6342 6.26568 15.8406 7.21255 16.7875C8.15942 17.7343 9.3658 18.3791 10.6791 18.6404C11.9925 18.9016 13.3538 18.7675 14.591 18.2551C15.8281 17.7427 16.8855 16.8749 17.6294 15.7615C18.1659 14.9586 18.522 14.054 18.6789 13.1097C18.7798 12.5024 19.2696 12 19.8852 12Z"
-      fill={color}
-    >
+  <svg width={size} height={size} viewBox="0 0 50 50" fill={color} xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx="25" cy="25" r="20" stroke="#0074D9" stroke-width="4" stroke-dasharray="70 30" fill="none">
       <animateTransform
-        attributeType="XML"
         attributeName="transform"
+        attributeType="XML"
         type="rotate"
-        from="0 12 12"
-        to="360 12 12"
-        dur="0.75s"
+        from="0 25 25"
+        to="360 25 25"
+        dur="1s"
         repeatCount="indefinite"
       />
-    </path>
+    </circle>
   </svg>
 );

package/src/Modal/Dialog.stories.tsx

@@ -30,7 +30,7 @@ const Template: ComponentStory<typeof Dialog.Root> = () => (
     <Dialog.Portal>
       <Dialog.Overlay />
       <Dialog.Content>
-        <Dialog.Title css={{ c: '$textHighEmp', position: 'relative' }}>
+        <Dialog.Title css={{ c: '$on_surface_high', position: 'relative' }}>
           <Flex direction="row" justify="between" css={{ w: '100%' }}>
             <Flex justify="start" align="center" gap="3">
               <InfoIcon />
@@ -41,7 +41,7 @@ const Template: ComponentStory<typeof Dialog.Root> = () => (
             </Dialog.DefaultClose>
           </Flex>
         </Dialog.Title>
-        <Text variant="body1" css={{ c: '$textMedEmp' }}>
+        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
           Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
           dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
           labore et dolore magna aliqua. Ut enim ad minim veniam,im veni

package/src/Modal/DialogContent.tsx

@@ -26,13 +26,13 @@ export const StyledDialogOverlay = styled(DialogPrimitive.Overlay, {
 export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
 
 export const StyledDialogContent = styled(DialogPrimitive.Content, {
-  color: '$textMedEmp',
-  backgroundColor: '$surfaceDefault',
+  color: '$on_surface_medium',
+  backgroundColor: '$surface_default',
   borderRadius: '8px',
   position: 'fixed',
   top: '50%',
   left: '50%',
-  border: '$space$px solid $borderDefault',
+  border: '$space$px solid $border_bright',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   transform: 'translate(-50%, -50%)',
   zIndex: 999,

package/src/Pagination/StyledPagination.tsx

@@ -13,12 +13,12 @@ const Root = styled('div', {
 });
 
 const Chevron = styled('button', {
-  color: '$textPrimary',
+  color: '$on_surface_high',
   '&:focus': {
     outline: 'none',
   },
   '&[disabled]': {
-    color: '$grayDefault',
+    color: '$on_surface_low',
     cursor: 'not-allowed',
   },
   display: 'flex',
@@ -40,14 +40,14 @@ const Dot = styled('button', {
   borderRadius: '9999px',
   width: '0.5rem',
   height: '0.5rem',
-  backgroundColor: '$textDisabled',
+  backgroundColor: '$on_surface_low',
   padding: '0px',
   border: 'none',
   cursor: 'pointer',
   variants: {
     active: {
       true: {
-        backgroundColor: '$textPrimary',
+        backgroundColor: '$on_surface_high',
       },
     },
   },

package/src/Popover/Popover.stories.tsx

@@ -35,11 +35,11 @@ const Template: ComponentStory<typeof Popover.Root> = () => (
             aspectRatio: 1,
             r: '$round',
             p: '$2 $2',
-            bg: '$bgPrimary',
-            '&:hover': { bg: '$bgSecondary !important' },
+            bg: '$background_default',
+            '&:hover': { bg: '$background_dim !important' },
           }}
         >
-          <Box css={{ w: '$10', h: '$10', c: '$textPrimary' }}>
+          <Box css={{ w: '$10', h: '$10', c: '$on_primary_high' }}>
             <VerticalMenuIcon />
           </Box>
         </Button>
@@ -47,10 +47,10 @@ const Template: ComponentStory<typeof Popover.Root> = () => (
       <Popover.Content align="center" side="bottom" sideOffset={10}>
         <Flex css={{ flexDirection: 'column', gap: 10 }} justify="center" align="center">
           <Flex direction="row" justify="between" css={{ width: '100%' }}>
-            <Text as="div" variant="caption" css={{ color: '$textMedEmp' }}>
+            <Text as="div" variant="caption" css={{ color: '$on_surface_medium' }}>
               Dimensions
             </Text>
-            <Box css={{ color: '$textMedEmp' }}>
+            <Box css={{ color: '$on_surface_medium' }}>
               <CrossIcon width="0.75rem" height="0.75rem" />
             </Box>
           </Flex>

package/src/Popover/index.tsx

@@ -5,7 +5,7 @@ import { popoverAnimation } from '../utils/animations';
 const StyledContent = styled(Content, {
   padding: '$6',
   borderRadius: '$2',
-  backgroundColor: '$bgSecondary',
+  backgroundColor: '$background_default',
   boxShadow: '$sm',
   zIndex: 12,
   ...popoverAnimation,

package/src/Prebuilt/App.jsx

@@ -1,6 +1,12 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect, useRef } from 'react';
 import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';
-import { HMSRoomProvider, selectIsConnectedToRoom, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import {
+  HMSReactiveStore,
+  HMSRoomProvider,
+  selectIsConnectedToRoom,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { AppData } from './components/AppData/AppData';
 import { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';
 import AuthToken from './components/AuthToken';
@@ -12,14 +18,13 @@ import { Notifications } from './components/Notifications';
 import PostLeave from './components/PostLeave';
 import PreviewContainer from './components/Preview/PreviewContainer';
 import { ToastContainer } from './components/Toast/ToastContainer';
+import { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider/index.tsx';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
 import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
-import { hmsActions, hmsNotifications, hmsStats, hmsStore } from './hms.js';
-import { Confetti } from './plugins/confetti';
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
-import { getRoutePrefix, shadeColor } from './common/utils';
+import { getRoutePrefix } from './common/utils';
 import { FeatureFlags } from './services/FeatureFlags';
 
 const Conference = React.lazy(() => import('./components/conference'));
@@ -38,52 +43,77 @@ export const HMSPrebuilt = React.forwardRef(
   (
     {
       roomCode = '',
-      logo: { url: logoUrl = '' } = {},
+      logo,
+      typography,
+      themes,
       options: {
         userName = '',
         userId = '',
-        endPoints: { init: initEndpoint = '', tokenByRoomCode = '', tokenByRoomIdRole = '' } = {},
+        endpoints: {
+          init: initEndpoint = '',
+          tokenByRoomCode: tokenByRoomCodeEndpoint = '',
+          tokenByRoomIdRole: tokenByRoomIdRoleEndpoint = '',
+          roomLayout: roomLayoutEndpoint = '',
+        } = {},
       } = {},
+      screens,
       onLeave,
     },
     ref,
   ) => {
     const aspectRatio = '1-1';
-    const color = '#2F80FF';
-    const theme = 'dark';
     const metadata = '';
-    const recordingUrl = '';
     const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));
+    const reactiveStore = useRef();
 
-    const [hyderated, setHyderated] = React.useState(false);
-    useEffect(() => setHyderated(true), []);
+    const [hydrated, setHydrated] = React.useState(false);
     useEffect(() => {
-      if (!ref) {
-        return;
-      }
-      ref.current = {
+      setHydrated(true);
+      const hms = new HMSReactiveStore();
+      const hmsStore = hms.getStore();
+      const hmsActions = hms.getActions();
+      const hmsNotifications = hms.getNotifications();
+      const hmsStats = hms.getStats();
+
+      reactiveStore.current = {
         hmsActions,
         hmsStats,
         hmsStore,
         hmsNotifications,
       };
+    }, []);
+
+    useEffect(() => {
+      if (!ref || !reactiveStore.current) {
+        return;
+      }
+
+      ref.current = { ...reactiveStore.current };
     }, [ref]);
 
     // leave room when component unmounts
     useEffect(
       () => () => {
-        return hmsActions.leave();
+        return reactiveStore.current.hmsActions.leave();
       },
       [],
     );
 
-    const endPoints = {
-      tokenByRoomCode,
+    const endpoints = {
+      tokenByRoomCode: tokenByRoomCodeEndpoint,
       init: initEndpoint,
-      tokenByRoomIdRole,
+      tokenByRoomIdRole: tokenByRoomIdRoleEndpoint,
+      roomLayout: roomLayoutEndpoint,
+    };
+
+    const overrideLayout = {
+      logo,
+      themes,
+      typography,
+      screens,
     };
 
-    if (!hyderated) {
+    if (!hydrated) {
       return null;
     }
 
@@ -93,58 +123,61 @@ export const HMSPrebuilt = React.forwardRef(
       <ErrorBoundary>
         <HMSPrebuiltContext.Provider
           value={{
-            roomId: '',
-            role: '',
             roomCode,
             showPreview: true,
             showLeave: true,
             onLeave,
             userName,
             userId,
-            endPoints,
+            endpoints,
           }}
         >
-          <HMSThemeProvider
-            themeType={theme}
-            aspectRatio={getAspectRatio({ width, height })}
-            theme={{
-              colors: {
-                brandDefault: color,
-                brandDark: shadeColor(color, -30),
-                brandLight: shadeColor(color, 30),
-                brandDisabled: shadeColor(color, 10),
-              },
-              fonts: {
-                sans: ['Roboto', 'Inter', 'sans-serif'],
-              },
-            }}
+          <HMSRoomProvider
+            isHMSStatsOn={FeatureFlags.enableStatsForNerds}
+            actions={reactiveStore.current.hmsActions}
+            store={reactiveStore.current.hmsStore}
+            notifications={reactiveStore.current.hmsNotifications}
+            stats={reactiveStore.current.hmsStats}
           >
-            <HMSRoomProvider
-              isHMSStatsOn={FeatureFlags.enableStatsForNerds}
-              actions={hmsActions}
-              store={hmsStore}
-              notifications={hmsNotifications}
-              stats={hmsStats}
-            >
-              <AppData
-                appDetails={metadata}
-                recordingUrl={recordingUrl}
-                logo={logoUrl}
-                tokenEndpoint={endPoints.tokenByRoomIdRole}
-              />
-              <Init />
-              <Box
-                css={{
-                  bg: '$mainBg',
-                  size: '100%',
-                  lineHeight: '1.5',
-                  '-webkit-text-size-adjust': '100%',
+            <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
+              <RoomLayoutContext.Consumer>
+                {layout => {
+                  const theme = layout.themes?.[0] || {};
+                  const { typography } = layout;
+                  let fontFamily = ['sans-serif'];
+                  if (typography?.font_family) {
+                    fontFamily = [`${typography?.font_family}`, ...fontFamily];
+                  }
+
+                  return (
+                    <HMSThemeProvider
+                      themeType={theme.name}
+                      aspectRatio={getAspectRatio({ width, height })}
+                      theme={{
+                        colors: theme.palette,
+                        fonts: {
+                          sans: fontFamily,
+                        },
+                      }}
+                    >
+                      <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />
+                      <Init />
+                      <Box
+                        css={{
+                          bg: '$background_dim',
+                          size: '100%',
+                          lineHeight: '1.5',
+                          '-webkit-text-size-adjust': '100%',
+                        }}
+                      >
+                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} />
+                      </Box>
+                    </HMSThemeProvider>
+                  );
                 }}
-              >
-                <AppRoutes authTokenByRoomCodeEndpoint={endPoints.tokenByRoomCode} />
-              </Box>
-            </HMSRoomProvider>
-          </HMSThemeProvider>
+              </RoomLayoutContext.Consumer>
+            </RoomLayoutProvider>
+          </HMSRoomProvider>
         </HMSPrebuiltContext.Provider>
       </ErrorBoundary>
     );
@@ -179,7 +212,7 @@ const RouteList = () => {
           <Route
             path=":roomId/:role"
             element={
-              <Suspense fallback={<FullPageProgress />}>
+              <Suspense fallback={<FullPageProgress loadingText="Loading preview..." />}>
                 <PreviewContainer />
               </Suspense>
             }
@@ -187,7 +220,7 @@ const RouteList = () => {
           <Route
             path=":roomId"
             element={
-              <Suspense fallback={<FullPageProgress />}>
+              <Suspense fallback={<FullPageProgress loadingText="Loading preview..." />}>
                 <PreviewContainer />
               </Suspense>
             }
@@ -198,7 +231,7 @@ const RouteList = () => {
         <Route
           path=":roomId/:role"
           element={
-            <Suspense fallback={<FullPageProgress />}>
+            <Suspense fallback={<FullPageProgress loadingText="Joining..." />}>
               <Conference />
             </Suspense>
           }
@@ -206,7 +239,7 @@ const RouteList = () => {
         <Route
           path=":roomId"
           element={
-            <Suspense fallback={<FullPageProgress />}>
+            <Suspense fallback={<FullPageProgress loadingText="Joining..." />}>
               <Conference />
             </Suspense>
           }
@@ -218,6 +251,7 @@ const RouteList = () => {
           <Route path=":roomId" element={<PostLeave />} />
         </Route>
       )}
+
       <Route path="/:roomId/:role" element={<Redirector showPreview={showPreview} />} />
       <Route path="/:roomId/" element={<Redirector showPreview={showPreview} />} />
     </Routes>
@@ -258,7 +292,6 @@ function AppRoutes({ authTokenByRoomCodeEndpoint }) {
       <ToastContainer />
       <Notifications />
       <BackSwipe />
-      <Confetti />
       <FlyingEmoji />
       <RemoteStopScreenshare />
       <KeyboardHandler />

package/src/Prebuilt/IconButton.jsx

@@ -4,13 +4,13 @@ import { styled } from '../Theme';
 const IconButton = styled(BaseIconButton, {
   width: '$14',
   height: '$14',
-  border: '1px solid $borderLight',
+  border: '1px solid $border_bright',
   r: '$1',
   variants: {
     active: {
       false: {
         border: '1px solid transparent',
-        color: '$white',
+        color: '$on_primary_high',
       },
     },
   },

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -7,14 +7,20 @@ export default {
   component: HMSPrebuilt,
   argTypes: {
     roomCode: { control: { type: 'text' }, defaultValue: 'tsj-obqh-lwx' },
+    logo: { control: { type: 'object' }, defaultValue: undefined },
   },
 } as Meta<typeof HMSPrebuilt>;
 
-const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({ roomCode = '', logo }) => {
-  return <HMSPrebuilt roomCode={roomCode} logo={logo} />;
+const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({ roomCode = '', logo, themes, typography, options }) => {
+  return <HMSPrebuilt roomCode={roomCode} logo={logo} options={options} themes={themes} typography={typography} />;
 };
 
 export const Example = PrebuiltRoomCodeStory.bind({});
 Example.args = {
   roomCode: 'tsj-obqh-lwx',
+  options: {
+    endpoints: {
+      roomLayout: 'https://demo8271564.mockable.io/v2/layouts/ui',
+    },
+  },
 };

package/src/Prebuilt/common/constants.js

@@ -118,7 +118,6 @@ export const APP_DATA = {
   chatSelector: 'chatSelector',
   chatDraft: 'chatDraft',
   appConfig: 'appConfig',
-  recordingUrl: 'recordingUrl',
   sidePane: 'sidePane',
   hlsStats: 'hlsStats',
   hlsViewerRole: 'hlsViewerRole',

package/src/Prebuilt/common/utils.js

@@ -1,5 +1,3 @@
-import { QUERY_PARAM_SKIP_PREVIEW } from './constants';
-
 // eslint-disable-next-line complexity
 export function shadeColor(color, percent) {
   let R = parseInt(color.substring(1, 3), 16);
@@ -58,10 +56,6 @@ export const isScreenshareSupported = () => {
   return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';
 };
 
-export const getDefaultMeetingUrl = () => {
-  return `${window.location.href.replace('meeting', 'preview')}?${QUERY_PARAM_SKIP_PREVIEW}=true`;
-};
-
 export const getRoutePrefix = () => {
   return window.location.pathname.startsWith('/streaming') ? '/streaming' : '';
 };

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -74,7 +74,7 @@ const initialAppData = {
   [APP_DATA.authToken]: '',
 };
 
-export const AppData = React.memo(({ appDetails, logo, recordingUrl, tokenEndpoint }) => {
+export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions();
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const sidePane = useSidepaneState();
@@ -93,6 +93,11 @@ export const AppData = React.memo(({ appDetails, logo, recordingUrl, tokenEndpoi
 
   useEffect(() => {
     hmsActions.initAppData(initialAppData);
+    hmsActions.setFrameworkInfo({
+      type: 'react-web',
+      isPrebuilt: true,
+      version: React.version,
+    });
   }, [hmsActions]);
 
   useEffect(() => {
@@ -108,16 +113,14 @@ export const AppData = React.memo(({ appDetails, logo, recordingUrl, tokenEndpoi
 
   useEffect(() => {
     const appData = {
-      [APP_DATA.recordingUrl]: recordingUrl,
       [APP_DATA.tokenEndpoint]: tokenEndpoint,
-      [APP_DATA.logo]: logo,
       [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,
       [APP_DATA.appConfig]: getAppDetails(appDetails),
     };
     for (const key in appData) {
       hmsActions.setAppData([key], appData[key]);
     }
-  }, [appDetails, logo, recordingUrl, tokenEndpoint, hmsActions]);
+  }, [appDetails, tokenEndpoint, hmsActions]);
 
   useEffect(() => {
     if (!preferences.subscribedNotifications) {

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

@@ -77,10 +77,6 @@ export const useAuthToken = () => {
   return useHMSStore(selectAppData(APP_DATA.authToken));
 };
 
-export const useLogo = () => {
-  return useHMSStore(selectAppData(APP_DATA.logo));
-};
-
 export const useUrlToEmbed = () => {
   return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;
 };

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -1,50 +1,103 @@
 import React, { Fragment } from 'react';
 import {
-  selectIsConnectedToRoom,
+  DeviceType,
   selectLocalVideoTrackID,
   selectVideoTrackByID,
   useAVToggle,
+  useDevices,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { CameraFlipIcon, MicOffIcon, MicOnIcon, VideoOffIcon, VideoOnIcon } from '@100mslive/react-icons';
+import { IconButtonWithOptions } from './IconButtonWithOptions/IconButtonWithOptions';
 import { ToastManager } from './Toast/ToastManager';
+import { Text } from '../../Text';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
 import { isMacOS } from '../common/constants';
 
+const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%', p: '$8' };
+
 export const AudioVideoToggle = () => {
+  const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
+  const { videoInput, audioInput } = allDevices;
+
+  const formattedVideoInputList = videoInput?.map(videoInput => ({
+    active: selectedDeviceIDs.videoInput === videoInput.deviceId,
+    content: (
+      <Text
+        variant="sm"
+        onClick={() =>
+          updateDevice({
+            deviceType: DeviceType.videoInput,
+            deviceId: videoInput.deviceId,
+          })
+        }
+        css={optionsCSS}
+      >
+        {videoInput.label}
+      </Text>
+    ),
+    title: videoInput.label,
+  }));
+
+  const formattedAudioInputList = audioInput?.map(audioInput => ({
+    active: selectedDeviceIDs.audioInput === audioInput.deviceId,
+    content: (
+      <Text
+        variant="sm"
+        onClick={() =>
+          updateDevice({
+            deviceType: DeviceType.audioInput,
+            deviceId: audioInput.deviceId,
+          })
+        }
+        css={optionsCSS}
+      >
+        {audioInput.label}
+      </Text>
+    ),
+    title: audioInput.label,
+  }));
+
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
   const actions = useHMSActions();
-  const videoTracKId = useHMSStore(selectLocalVideoTrackID);
-  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTracKId));
-  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
+  const videoTrackId = useHMSStore(selectLocalVideoTrackID);
+  const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
 
   return (
     <Fragment>
       {toggleAudio ? (
-        <Tooltip title={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}>
-          <IconButton active={isLocalAudioEnabled} onClick={toggleAudio} key="toggleAudio" data-testid="audio_btn">
-            {!isLocalAudioEnabled ? (
-              <MicOffIcon data-testid="audio_off_btn" />
-            ) : (
-              <MicOnIcon data-testid="audio_on_btn" />
-            )}
-          </IconButton>
-        </Tooltip>
+        <IconButtonWithOptions
+          options={formattedAudioInputList}
+          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"
+        />
       ) : null}
+
       {toggleVideo ? (
-        <Tooltip title={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}>
-          <IconButton key="toggleVideo" active={isLocalVideoEnabled} onClick={toggleVideo} data-testid="video_btn">
-            {!isLocalVideoEnabled ? (
+        <IconButtonWithOptions
+          options={formattedVideoInputList}
+          tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
+          icon={
+            !isLocalVideoEnabled ? (
               <VideoOffIcon data-testid="video_off_btn" />
             ) : (
               <VideoOnIcon data-testid="video_on_btn" />
-            )}
-          </IconButton>
-        </Tooltip>
+            )
+          }
+          key="toggleVideo"
+          active={isLocalVideoEnabled}
+          onClick={toggleVideo}
+        />
       ) : null}
-      {localVideoTrack?.facingMode && isConnectedToRoom ? (
+
+      {localVideoTrack?.facingMode ? (
         <Tooltip title="Switch Camera" key="switchCamera">
           <IconButton
             onClick={async () => {