@100mslive/roomkit-react 0.3.10-alpha.9 → 0.3.11-alpha.0

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.10-alpha.9",
+  "version": "0.3.11-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -74,12 +74,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.10-alpha.9",
+    "@100mslive/hls-player": "0.3.11-alpha.0",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.10-alpha.9",
-    "@100mslive/hms-whiteboard": "0.0.0-alpha.3",
-    "@100mslive/react-icons": "0.10.10-alpha.9",
-    "@100mslive/react-sdk": "0.10.10-alpha.9",
+    "@100mslive/hms-virtual-background": "1.13.11-alpha.0",
+    "@100mslive/hms-whiteboard": "0.0.1-alpha.0",
+    "@100mslive/react-icons": "0.10.11-alpha.0",
+    "@100mslive/react-sdk": "0.10.11-alpha.0",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "35e3287f1a488fc2ad6d155aca64276368f27b48"
+  "gitHead": "a4ed4a99addf5a2e5b923743c65bd20bd41d4175"
 }

package/src/Prebuilt/common/constants.ts

@@ -1,6 +1,5 @@
 import { parsedUserAgent } from '@100mslive/react-sdk';
 
-export const DEFAULT_WAITING_VIEWER_ROLE = 'waiting-room';
 export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
 export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
 export const QUERY_PARAM_NAME = 'name';
@@ -30,7 +29,6 @@ export const APP_DATA = {
   appConfig: 'appConfig',
   sidePane: 'sidePane',
   hlsStats: 'hlsStats',
-  waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
   hlsStarted: 'hlsStarted',

package/src/Prebuilt/common/hooks.ts

@@ -1,17 +1,22 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  HMSPeer,
   HMSRecording,
   parsedUserAgent,
   selectAvailableRoleNames,
+  selectIsAllowedToPublish,
   selectIsConnectedToRoom,
+  selectLocalPeerRole,
   selectPeerCount,
   selectPeerMetadata,
   selectPeers,
+  selectPeersByRoles,
   selectRecordingState,
   selectRemotePeers,
+  selectRolesMap,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
@@ -218,3 +223,31 @@ export function getResolution(
   }
   return resolution;
 }
+
+export interface WaitingRoomInfo {
+  isNotAllowedToPublish: boolean;
+  isScreenOnlyPublishParams: boolean;
+  hasSubscribedRolePublishing: boolean;
+}
+export function useWaitingRoomInfo(): WaitingRoomInfo {
+  const localPeerRole = useHMSStore(selectLocalPeerRole);
+  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);
+  const roles = useHMSStore(selectRolesMap);
+  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));
+  const isNotAllowedToPublish = !(video || audio || screen);
+  const isScreenOnlyPublishParams: boolean = screen && !(video || audio);
+  const hasSubscribedRolePublishing: boolean = useMemo(() => {
+    return peersByRoles.some((peer: HMSPeer) => {
+      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
+        return !!roles[peer.roleName].publishParams?.allowed.length;
+      }
+      return false;
+    });
+  }, [peersByRoles, roles]);
+
+  return {
+    isNotAllowedToPublish,
+    isScreenOnlyPublishParams,
+    hasSubscribedRolePublishing,
+  };
+}

package/src/Prebuilt/common/utils.js

@@ -142,22 +142,22 @@ export const getPeerResponses = (questions, peerid, userid) => {
   return questions.map(question =>
     question.responses?.filter(
       response =>
-        ((response && response.peer?.peerid === peerid) || response.peer?.userid === userid) && !response.skipped,
+        response && (response.peer?.peerid === peerid || response.peer?.userid === userid) && !response.skipped,
     ),
   );
 };
 
-export const getLastAttemptedIndex = (questions, peerid, userid = '') => {
-  const peerResponses = getPeerResponses(questions, peerid, userid) || [];
-  for (let i = 0; i < peerResponses.length; i++) {
-    // If another peer has attempted, undefined changes to an empty array
-    if (peerResponses[i] === undefined || peerResponses[i].length === 0) {
-      // Backend question index starts at 1
-      return i + 1;
+export const getIndexToShow = responses => {
+  let lastAttemptedIndex = 0;
+
+  Object.keys(responses).forEach(key => {
+    const keyNum = parseInt(key);
+    if (keyNum > lastAttemptedIndex && responses[key]) {
+      lastAttemptedIndex = keyNum;
     }
-  }
-  // To indicate all have been attempted
-  return questions.length + 1;
+  });
+
+  return lastAttemptedIndex + 1;
 };
 
 export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUserID) => {

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -21,7 +21,6 @@ import { useSetAppDataByKey } from './useUISettings';
 import {
   APP_DATA,
   CHAT_SELECTOR,
-  DEFAULT_WAITING_VIEWER_ROLE,
   POLL_STATE,
   SIDE_PANE_OPTIONS,
   UI_MODE_GRID,
@@ -56,7 +55,6 @@ const initialAppData = {
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,
-  [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
@@ -68,8 +66,8 @@ const initialAppData = {
     [POLL_STATE.pollInView]: '',
     [POLL_STATE.view]: '',
   },
-  // by default off, so it will not appear in beam bots
-  [APP_DATA.caption]: false,
+  // by default on because of on demand now
+  [APP_DATA.caption]: true,
 };
 
 export const AppData = React.memo(() => {

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

@@ -48,9 +48,6 @@ export const useSetUiSettings = uiSettingKey => {
   return [value, setValue];
 };
 
-export const useWaitingViewerRole = () => {
-  return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
-};
 export const useIsHLSStartedFromUI = () => {
   return useHMSStore(selectAppData(APP_DATA.hlsStarted));
 };

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -10,17 +10,20 @@ import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit any
 import { EmojiReaction } from '../EmojiReaction';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const Chat = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const listRef = useRef<VariableSizeList | null>(null);
   const hmsActions = useHMSActions();
   const vanillaStore = useHMSVanillaStore();
@@ -29,6 +32,7 @@ export const Chat = () => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeStream = useLandscapeHLSStream();
   useSidepaneResetOnLayoutUpdate('chat', SIDE_PANE_OPTIONS.CHAT);
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
 
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
@@ -57,20 +61,27 @@ export const Chat = () => {
     >
       {isMobile && elements?.chat?.is_overlay && !streaming ? null : <PinnedMessage />}
       <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
-
-      <ChatPaused />
-      <ChatBlocked />
+      <Flex align="center" css={{ w: '100%', gap: '$2' }}>
+        <ChatPaused />
+        <ChatBlocked />
+        {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
+          <>
+            <RaiseHand css={{ bg: '$surface_default' }} />
+            <MoreSettings elements={elements} screenType={screenType} />
+          </>
+        )}
+      </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
       {isChatEnabled ? (
         <ChatFooter onSend={scrollToBottom}>
           <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
         </ChatFooter>
       ) : null}
-      {(isMobileHLSStream || isLandscapeStream) && (
+      {streaming && (
         <Box
           css={{
             position: 'absolute',
-            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled })
+            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled, isLocalPeerBlacklisted })
               .with(
                 {
                   isLandscapeStream: true,
@@ -96,6 +107,7 @@ export const Chat = () => {
                 {
                   isMobileHLSStream: true,
                   isChatEnabled: true,
+                  isLocalPeerBlacklisted: false,
                 },
                 () => ({ bottom: '$17', right: '$8' }),
               )
@@ -103,6 +115,14 @@ export const Chat = () => {
                 {
                   isLandscapeStream: false,
                   isChatEnabled: true,
+                  isLocalPeerBlacklisted: true,
+                },
+                () => ({ bottom: '$18', right: '$8' }),
+              )
+              .with(
+                {
+                  isMobileHLSStream: true,
+                  isLocalPeerBlacklisted: true,
                 },
                 () => ({ bottom: '$20', right: '$8' }),
               )

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -102,6 +102,19 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       }
     }
   }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements?.chat]);
+
+  const resetInputHeight = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, inputRef.current.value ? inputRef.current.scrollHeight : 0)}px`;
+    }
+  }, []);
+
+  const updateInputHeight = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, Math.min(inputRef.current.scrollHeight, 24 * 4))}px`;
+    }
+  }, []);
+
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -116,6 +129,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
         await hmsActions.sendBroadcastMessage(message);
       }
       inputRef.current.value = '';
+      resetInputHeight();
       setTimeout(() => {
         onSend(1);
       }, 0);
@@ -131,6 +145,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
+      updateInputHeight();
     }
   }, [draftMessage]);
 
@@ -197,11 +212,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       {selection && (
         <Flex align="center" css={{ gap: '$4', w: '100%' }}>
           <Flex
-            align="center"
+            align="end"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
               minHeight: '$16',
-              maxHeight: '$24',
               position: 'relative',
               py: '$6',
               pl: '$8',
@@ -238,6 +252,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               }}
               autoComplete="off"
               aria-autocomplete="none"
+              onChange={updateInputHeight}
+              onBlur={resetInputHeight}
               onPaste={e => e.stopPropagation()}
               onCut={e => e.stopPropagation()}
               onCopy={e => e.stopPropagation()}

package/src/Prebuilt/components/Chat/ChatStates.tsx

@@ -30,7 +30,7 @@ export const ChatPaused = () => {
     <Flex
       align="center"
       justify="between"
-      css={{ borderRadius: '$1', bg: '$surface_default', p: '$4 $4 $4 $8', w: '100%' }}
+      css={{ borderRadius: '$1', bg: '$surface_default', p: '$2 $4 $2 $8', w: '100%' }}
     >
       <Box>
         <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>

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

@@ -21,7 +21,11 @@ export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton
+          onClick={() => (onClick ? onClick() : toggleChat())}
+          css={{ bg: isChatOpen ? '$surface_brighter' : '' }}
+          data-testid="chat_btn"
+        >
           <ChatIcon />
         </IconButton>
       </Tooltip>

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

@@ -86,6 +86,7 @@ export const ParticipantList = ({
       return { ...filterValue };
     });
   }, []);
+
   if (peerCount === 0) {
     return null;
   }
@@ -128,7 +129,7 @@ export const ParticipantList = ({
 export const ParticipantCount = () => {
   const peerCount = useHMSStore(selectPeerCount);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const isPeerListOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
 
   if (peerCount === 0) {
     return null;
@@ -139,13 +140,13 @@ export const ParticipantCount = () => {
         w: 'auto',
         p: '$4',
         h: 'auto',
+        bg: isPeerListOpen ? '$surface_brighter' : '',
       }}
       onClick={() => {
         if (peerCount > 0) {
           toggleSidepane();
         }
       }}
-      active={!isParticipantsOpen}
       data-testid="participant_list"
     >
       <PeopleIcon />
@@ -447,6 +448,7 @@ export const ParticipantSearch = ({
     300,
     [value, onSearch],
   );
+
   return (
     <Flex
       align="center"

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

@@ -27,7 +27,7 @@ export const PollsToggle = () => {
           togglePollView();
           setUnreadPollQuiz(false);
         }}
-        active={!isPollsOpen}
+        css={{ bg: isPollsOpen ? '$surface_brighter' : '' }}
         data-testid="polls_btn"
       >
         {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}

package/src/Prebuilt/components/MoreSettings/CaptionContent.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Loading } from '../../../Loading';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore: No implicit Any
+import { useSetIsCaptionEnabled } from '../AppData/useUISettings';
+
+export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => {
+  const DURATION = 2000;
+  const actions = useHMSActions();
+  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
+
+  const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
+  return (
+    <>
+      <Text
+        variant={isMobile ? 'md' : 'lg'}
+        css={{
+          color: '$on_surface_high',
+          fontWeight: '$semiBold',
+          display: 'flex',
+          pb: '$4',
+          '@md': { px: '$8', borderBottom: '1px solid $border_default' },
+        }}
+      >
+        {isTranscriptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session?
+        <Box
+          css={{ color: 'inherit', ml: 'auto', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
+          onClick={onExit}
+        >
+          <CrossIcon />
+        </Box>
+      </Text>
+      {!isMobile ? (
+        <Text variant="sm" css={{ color: '$on_surface_medium', pb: '$6', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
+          This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can
+          {isTranscriptionEnabled ? 'enable' : 'disable'} it later.
+        </Text>
+      ) : null}
+
+      <Flex
+        justify="between"
+        align="center"
+        css={{
+          width: '100%',
+          gap: '$md',
+          mt: '$10',
+          '@md': { px: '$4' },
+        }}
+      >
+        {isMobile ? null : (
+          <Button variant="standard" css={{ w: '100%' }} outlined onClick={onExit}>
+            Cancel
+          </Button>
+        )}
+        <Flex
+          direction="column"
+          justify="between"
+          align="center"
+          css={{
+            width: '100%',
+          }}
+        >
+          {isMobile && isTranscriptionEnabled ? (
+            <Button
+              variant="standard"
+              css={{ w: '100%', mb: '$8' }}
+              outlined
+              onClick={() => {
+                setIsCaptionEnabled(!isCaptionEnabled);
+                onExit();
+              }}
+            >
+              {isCaptionEnabled ? 'Hide For Me' : 'Show For Me'}
+            </Button>
+          ) : null}
+          <Button
+            variant={isTranscriptionEnabled ? 'danger' : 'primary'}
+            css={{ width: '100%' }}
+            data-testid="popup_change_btn"
+            onClick={async () => {
+              try {
+                if (isTranscriptionEnabled) {
+                  await actions.stopTranscription({
+                    mode: HMSTranscriptionMode.CAPTION,
+                  });
+                  ToastManager.addToast({
+                    title: `Disabling Closed Caption for everyone.`,
+                    variant: 'standard',
+                    duration: DURATION,
+                    icon: <Loading color="currentColor" />,
+                  });
+                  onExit();
+                  return;
+                }
+                await actions.startTranscription({
+                  mode: HMSTranscriptionMode.CAPTION,
+                });
+                ToastManager.addToast({
+                  title: `Enabling Closed Caption for everyone.`,
+                  variant: 'standard',
+                  duration: DURATION,
+                  icon: <Loading color="currentColor" />,
+                });
+              } catch (err) {
+                ToastManager.addToast({
+                  title: `Failed to ${isTranscriptionEnabled ? 'disabled' : 'enabled'} closed caption`,
+                  variant: 'error',
+                  icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
+                });
+              }
+              onExit();
+            }}
+          >
+            {isTranscriptionEnabled ? 'Disable' : 'Enable'} for Everyone
+          </Button>
+        </Flex>
+      </Flex>
+      {isMobile && (
+        <Text variant="sm" css={{ color: '$on_surface_medium', pb: '$6', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
+          This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can
+          {isTranscriptionEnabled ? 'enable' : 'disable'} it later.
+        </Text>
+      )}
+    </>
+  );
+};

package/src/Prebuilt/components/MoreSettings/CaptionModal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { config as cssConfig, Dialog } from '../../..';
+import { Sheet } from '../../../Sheet';
+import { CaptionContent } from './CaptionContent';
+
+export const CaptionModal = ({ onOpenChange }: { onOpenChange: (value: boolean) => void }) => {
+  const isMobile = useMedia(cssConfig.media.md);
+
+  const props = {
+    isMobile,
+    onExit: () => {
+      onOpenChange(false);
+    },
+  };
+
+  if (isMobile) {
+    return (
+      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
+        <Sheet.Content css={{ bg: '$surface_dim', p: '$8 0' }}>
+          <CaptionContent {...props} />
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
+          <CaptionContent {...props} />
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

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

@@ -6,9 +6,23 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
-import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
+import {
+  selectAppData,
+  selectIsTranscriptionEnabled,
+  selectLocalPeerID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import {
+  BrbIcon,
+  CheckIcon,
+  HamburgerMenuIcon,
+  InfoIcon,
+  OpenCaptionIcon,
+  PipIcon,
+  SettingsIcon,
+} from '@100mslive/react-icons';
+import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..';
 import IconButton from '../../../IconButton';
 // @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
@@ -24,6 +38,7 @@ import StartRecording from '../../Settings/StartRecording';
 import { StatsForNerds } from '../../StatsForNerds';
 // @ts-ignore: No implicit any
 import { BulkRoleChangeModal } from '../BulkRoleChangeModal';
+import { CaptionModal } from '../CaptionModal';
 // @ts-ignore: No implicit any
 import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
@@ -43,6 +58,7 @@ const MODALS = {
   BULK_ROLE_CHANGE: 'bulkRoleChange',
   MUTE_ALL: 'muteAll',
   EMBED_URL: 'embedUrl',
+  CAPTION: 'caption',
 };
 
 export const DesktopOptions = ({
@@ -59,6 +75,7 @@ export const DesktopOptions = ({
   const { isBRBOn, toggleBRB } = useMyMetadata();
   const isPipOn = PictureInPicture.isOn();
   const isBRBEnabled = !!elements?.brb;
+  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
@@ -115,6 +132,23 @@ export const DesktopOptions = ({
             </Dropdown.Item>
           ) : null}
 
+          <Dropdown.Item
+            data-testid="closed_caption_admin"
+            onClick={() => {
+              updateState(MODALS.CAPTION, true);
+            }}
+          >
+            <OpenCaptionIcon />
+            <Flex direction="column" css={{ flexGrow: '1' }}>
+              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+                Closed Captions
+              </Text>
+              <Text variant="caption" css={{ ml: '$4', color: '$on_surface_medium' }}>
+                {isTranscriptionEnabled ? 'Enabled' : 'Disabled'}
+              </Text>
+            </Flex>
+            <Switch id="closed_caption_start_stop" checked={isTranscriptionEnabled} disabled={false} />
+          </Dropdown.Item>
           {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item css={{ p: 0, '&:empty': { display: 'none' } }}>
               <PIP
@@ -211,6 +245,9 @@ export const DesktopOptions = ({
           onOpenChange={(value: boolean) => updateState(MODALS.SELF_ROLE_CHANGE, value)}
         />
       )}
+      {openModals.has(MODALS.CAPTION) && (
+        <CaptionModal onOpenChange={(value: boolean) => updateState(MODALS.CAPTION, value)} />
+      )}
       {/* {openModals.has(MODALS.EMBED_URL) && (
         <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
       )} */}