fix: caption position

100mslive · Apr 19, 2024 · e1bb9f0 · e1bb9f0
1 parent 07f68ae
commit e1bb9f0
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 44 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx b/packages/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { v4 as uuid } from 'uuid';
 import {
@@ -19,7 +18,6 @@ import { ActivatedPIP } from './PIP/PIPComponent';
 import { PictureInPicture } from './PIP/PIPManager';
 import { RoleChangeRequestModal } from './RoleChangeRequest/RoleChangeRequestModal';
 import { Box, Flex } from '../../Layout';
-import { config } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
@@ -28,21 +26,17 @@ import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
 import { RaiseHand } from './RaiseHand';
-import { CaptionsViewer } from '../plugins/CaptionsViewer';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
 } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
-import { useIsSidepaneTypeOpen } from './AppData/useSidepane';
-// @ts-ignore: No implicit Any
-import { useAuthToken, useIsCaptionEnabled, useSetAppDataByKey } from './AppData/useUISettings';
+import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-import { APP_DATA, isAndroid, isIOS, isIPadOS, SIDE_PANE_OPTIONS } from '../common/constants';
+import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 export const ConferenceScreen = () => {
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
-  const isMobile = useMedia(config.media.md);
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
@@ -63,10 +57,6 @@ export const ConferenceScreen = () => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
-  const isCaptionEnabled = useIsCaptionEnabled();
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-
-  const showCaptionAtTop = screenProps.elements?.chat?.is_overlay && isChatOpen && isMobile;
 
   const toggleControls = () => {
     if (dropdownListRef.current?.length === 0 && isMobileDevice && !isMwebHLSStream) {
@@ -134,28 +124,6 @@ export const ConferenceScreen = () => {
           <FullPageProgress text="Starting live stream..." css={{ opacity: 0.8, bg: '$background_dim' }} />
         </Box>
       ) : null}
-      {isCaptionEnabled && screenProps.screenType !== 'hls_live_streaming' && (
-        <Box
-          css={{
-            position: 'fixed',
-            w: isMobile ? '100%' : '40%',
-            bottom: showCaptionAtTop ? '' : hideControlsForStreaming ? '5%' : '10%',
-            top: showCaptionAtTop ? (hideControlsForStreaming ? '5%' : '10%') : '',
-            left: isMobile ? 0 : '50%',
-            transform: isMobile ? '' : 'translateX(-50%)',
-            background: '#000000A3',
-            overflow: 'clip',
-            zIndex: 10,
-            height: 'fit-content',
-            r: '$1',
-            p: '$6',
-            transition: 'bottom 0.3s ease-in-out',
-            '&:empty': { display: 'none' },
-          }}
-        >
-          <CaptionsViewer />
-        </Box>
-      )}
       <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
         {!(screenProps.hideSections.includes('header') || isMwebHLSStream) && (
           <Box

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -16,6 +16,8 @@ import { PDFView } from './PDFView';
 import SidePane from './SidePane';
 // @ts-ignore: No implicit Any
 import { WaitingView } from './WaitingView';
+import { CaptionsViewer } from '../plugins/CaptionsViewer';
+// @ts-ignore: No implicit Any
 import {
   usePDFConfig,
   useUrlToEmbed,
@@ -25,7 +27,6 @@ import {
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { SESSION_STORE_KEY } from '../common/constants';
-
 // @ts-ignore: No implicit Any
 const HLSView = React.lazy(() => import('./HLSView'));
 
@@ -105,6 +106,7 @@ export const VideoStreamingSection = ({
             // @ts-ignore
             return <GridLayout {...(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid} />;
           })}
+        <CaptionsViewer />
         <Box
           css={{
             flex: match({ isLandscapeHLSStream, isMobileHLSStream })

diff --git a/packages/roomkit-react/src/Prebuilt/plugins/CaptionsViewer.tsx b/packages/roomkit-react/src/Prebuilt/plugins/CaptionsViewer.tsx
@@ -1,8 +1,15 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import { HMSTranscript, selectPeerNameByID, useHMSStore, useTranscript } from '@100mslive/react-sdk';
-import { Flex } from '../../Layout';
+import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
-
+import { config } from '../../Theme';
+// @ts-ignore: No implicit Any
+import { useIsSidepaneTypeOpen } from '../components/AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { useIsCaptionEnabled } from '../components/AppData/useUISettings';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { SIDE_PANE_OPTIONS } from '../common/constants';
 interface CaptionQueueData extends HMSTranscript {
   transcriptQueue: SimpleQueue;
 }
@@ -152,9 +159,17 @@ const TranscriptView = ({ peer_id, data }: { peer_id: string; data: string }) =>
 };
 
 export const CaptionsViewer = () => {
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
+  const isMobile = useMedia(config.media.md);
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+
+  const showCaptionAtTop = elements?.chat?.is_overlay && isChatOpen && isMobile;
+
   const [captionQueue] = useState<CaptionMaintainerQueue>(new CaptionMaintainerQueue());
   const [currentData, setCurrentData] = useState<{ [key: string]: string }[]>([]);
 
+  const isCaptionEnabled = useIsCaptionEnabled();
+
   useEffect(() => {
     const timeInterval = setInterval(() => {
       if (!captionQueue) {
@@ -178,15 +193,34 @@ export const CaptionsViewer = () => {
     }
     return false;
   });
-  if (dataToShow.length <= 0) {
+  if (dataToShow.length <= 0 || screenType === 'hls_live_streaming' || !isCaptionEnabled) {
     return null;
   }
   return (
-    <Flex direction="column">
-      {dataToShow.map((data: { [key: string]: string }, index: number) => {
-        const key = Object.keys(data)[0];
-        return <TranscriptView key={index} peer_id={key} data={data[key]} />;
-      })}
-    </Flex>
+    <Box
+      css={{
+        position: 'absolute',
+        w: isMobile ? '100%' : '40%',
+        bottom: showCaptionAtTop ? '' : '0',
+        top: showCaptionAtTop ? '0' : '',
+        left: isMobile ? 0 : '50%',
+        transform: isMobile ? '' : 'translateX(-50%)',
+        background: '#000000A3',
+        overflow: 'clip',
+        zIndex: 10,
+        height: 'fit-content',
+        r: '$1',
+        p: '$6',
+        transition: 'bottom 0.3s ease-in-out',
+        '&:empty': { display: 'none' },
+      }}
+    >
+      <Flex direction="column">
+        {dataToShow.map((data: { [key: string]: string }, index: number) => {
+          const key = Object.keys(data)[0];
+          return <TranscriptView key={index} peer_id={key} data={data[key]} />;
+        })}
+      </Flex>
+    </Box>
   );
 };