Refactor: make components use new data fields

bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/component.tsx

@@ -269,7 +269,7 @@ const AudioCaptionsButtonContainer: React.FC = () => {
 
   if (audioCaptionsCountData) {
     const hasAudioCaptions = audioCaptionsCountData
-      .audio_caption_aggregate
+      .caption_aggregate
       .aggregate.count > 0;
 
     if (!hasAudioCaptions) return null;

bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/queries.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export interface GetAudioCaptionsCountResponse {
-  audio_caption_aggregate: {
+  caption_aggregate: {
     aggregate: {
       count: number;
     }
@@ -10,9 +10,9 @@ export interface GetAudioCaptionsCountResponse {
 
 export const GET_AUDIO_CAPTIONS_COUNT = gql`
   subscription GetAudioCaptionsCount {
-    audio_caption_aggregate {
+    caption_aggregate {
       aggregate {
-        count(columns: transcriptId)
+        count(columns: captionId)
       }
     }
   }

bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/component.tsx

@@ -1,71 +1,54 @@
 import { useSubscription } from '@apollo/client';
-import { Meteor } from 'meteor/meteor';
-import React, { useEffect, useRef, useState } from 'react';
-import { GET_AUDIO_CAPTIONS, GetAudioCaptions } from './queries';
+import React from 'react';
+import { Caption, GET_CAPTIONS, getCaptions } from './queries';
 import logger from '/imports/startup/client/logger';
-import { User } from '/imports/ui/Types/user';
-import Styled from './styles';
 
-const CAPTIONS_CONFIG = Meteor.settings.public.captions;
+import Styled from './styles';
+import useAudioCaptionEnable from '/imports/ui/core/local-states/useAudioCaptionEnable';
 
 interface AudioCaptionsLiveProps {
-  transcript: string;
-  user: Pick<User, 'avatar' | 'color' | 'name' | 'isModerator'>;
+  captions: Caption[];
 }
 
 const AudioCaptionsLive: React.FC<AudioCaptionsLiveProps> = ({
-  transcript,
-  user,
+  captions,
 }) => {
-  const [clear, setClear] = useState(true);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const prevTranscriptRef = useRef<string>('');
-
-  const resetTimer = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-  // did update
-  useEffect(() => {
-    if (clear) {
-      if (prevTranscriptRef.current !== transcript) {
-        prevTranscriptRef.current = transcript;
-        setClear(false);
-      }
-    } else {
-      resetTimer();
-      timerRef.current = setTimeout(() => setClear(true), CAPTIONS_CONFIG.time);
-    }
-  }, [transcript, clear]);
-  // will unmount
-  useEffect(() => () => resetTimer(), []);
-
-  const hasContent = transcript.length > 0 && !clear;
-
   return (
     <Styled.Wrapper>
-      {clear ? null : (
-        <Styled.UserAvatarWrapper>
-          <Styled.UserAvatar
-            avatar={user.avatar}
-            color={user.color}
-            moderator={user.isModerator}
-          >
-            {user.name.slice(0, 2)}
-          </Styled.UserAvatar>
-        </Styled.UserAvatarWrapper>
-      )}
-      <Styled.Captions hasContent={hasContent}>
-        {clear ? '' : transcript}
-      </Styled.Captions>
-      <Styled.VisuallyHidden
-        aria-atomic
-        aria-live="polite"
-      >
-        {clear ? '' : transcript}
-      </Styled.VisuallyHidden>
+      <>
+        {
+          captions.length > 0 ? captions.map((caption) => {
+            const {
+              user,
+              captionText,
+            } = caption;
+            return (
+              <Styled.CaptionWrapper>
+                {!user ? null : (
+                  <Styled.UserAvatarWrapper>
+                    <Styled.UserAvatar
+                      avatar={user.avatar}
+                      color={user.color}
+                      moderator={user.isModerator}
+                    >
+                      {user.name.slice(0, 2)}
+                    </Styled.UserAvatar>
+                  </Styled.UserAvatarWrapper>
+                )}
+                <Styled.Captions hasContent>
+                  {!captionText ? '' : captionText}
+                </Styled.Captions>
+                <Styled.VisuallyHidden
+                  aria-atomic
+                  aria-live="polite"
+                >
+                  {!captionText ? '' : captionText}
+                </Styled.VisuallyHidden>
+              </Styled.CaptionWrapper>
+            );
+          }) : null
+        }
+      </>
     </Styled.Wrapper>
   );
 };
@@ -75,7 +58,9 @@ const AudioCaptionsLiveContainer: React.FC = () => {
     data: AudioCaptionsLiveData,
     loading: AudioCaptionsLiveLoading,
     error: AudioCaptionsLiveError,
-  } = useSubscription<GetAudioCaptions>(GET_AUDIO_CAPTIONS);
+  } = useSubscription<getCaptions>(GET_CAPTIONS);
+
+  const [audioCaptionsEnable] = useAudioCaptionEnable();
 
   if (AudioCaptionsLiveLoading) return null;
 
@@ -89,16 +74,14 @@ const AudioCaptionsLiveContainer: React.FC = () => {
   }
 
   if (!AudioCaptionsLiveData) return null;
-  if (!AudioCaptionsLiveData.audio_caption) return null;
-  if (!AudioCaptionsLiveData.audio_caption[0]) return null;
-  const {
-    transcript,
-    user,
-  } = AudioCaptionsLiveData.audio_caption[0];
+  if (!AudioCaptionsLiveData.caption) return null;
+  if (!AudioCaptionsLiveData.caption[0]) return null;
+
+  if (!audioCaptionsEnable) return null;
+
   return (
     <AudioCaptionsLive
-      transcript={transcript}
-      user={user}
+      captions={AudioCaptionsLiveData.caption}
     />
   );
 };

bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/queries.ts

@@ -1,4 +1,16 @@
 import { gql } from '@apollo/client';
+import { User } from '/imports/ui/Types/user';
+
+export interface Caption {
+  user: Pick<User, 'avatar' | 'color' | 'isModerator' | 'name'>;
+  captionText: string;
+  captionId: string;
+  createdAt: string;
+}
+
+export interface getCaptions {
+  caption: Caption[];
+}
 
 export interface GetAudioCaptions {
   audio_caption: Array<{
@@ -13,22 +25,22 @@ export interface GetAudioCaptions {
   }>;
 }
 
-export const GET_AUDIO_CAPTIONS = gql`
-  subscription MySubscription {
-    audio_caption {
+export const GET_CAPTIONS = gql`
+  subscription getCaptions {
+    caption {
       user {
         avatar
         color
         isModerator
         name
       }
-      transcript
-      transcriptId
+      captionText
+      captionId
       createdAt
     }
   }
 `;
 
 export default {
-  GET_AUDIO_CAPTIONS,
+  GET_CAPTIONS,
 };

bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/styles.ts

@@ -22,6 +22,13 @@ interface UserAvatarProps {
 
 const Wrapper = styled.div`
   display: flex;
+  flex-direction: column;
+`;
+
+const CaptionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.05rem;  
 `;
 
 const Captions = styled.div<CaptionsProps>`
@@ -136,4 +143,5 @@ export default {
   VisuallyHidden,
   UserAvatarWrapper,
   UserAvatar,
+  CaptionWrapper,
 };