From b0cc1d7c2484258c2994474086cddc03cef48464 Mon Sep 17 00:00:00 2001 From: Tainan Felipe Date: Mon, 13 Nov 2023 12:54:43 -0300 Subject: [PATCH] Refactor: make components use new data fields --- .../audio-captions/button/component.tsx | 2 +- .../audio-captions/button/queries.ts | 6 +- .../audio-captions/live/component.tsx | 115 ++++++++---------- .../audio-captions/live/queries.ts | 24 +++- .../audio-captions/live/styles.ts | 8 ++ 5 files changed, 79 insertions(+), 76 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/component.tsx b/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/component.tsx index f4c37699e8..6634a4e00c 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/component.tsx +++ b/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; diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/queries.ts b/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/queries.ts index 5221a454d3..92a4e3c651 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/button/queries.ts +++ b/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) } } } diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/component.tsx b/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/component.tsx index 2ceecaf484..8b6c9e8d0d 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/component.tsx +++ b/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; + captions: Caption[]; } const AudioCaptionsLive: React.FC = ({ - transcript, - user, + captions, }) => { - const [clear, setClear] = useState(true); - const timerRef = useRef | null>(null); - const prevTranscriptRef = useRef(''); - - 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 ( - {clear ? null : ( - - - {user.name.slice(0, 2)} - - - )} - - {clear ? '' : transcript} - - - {clear ? '' : transcript} - + <> + { + captions.length > 0 ? captions.map((caption) => { + const { + user, + captionText, + } = caption; + return ( + + {!user ? null : ( + + + {user.name.slice(0, 2)} + + + )} + + {!captionText ? '' : captionText} + + + {!captionText ? '' : captionText} + + + ); + }) : null + } + ); }; @@ -75,7 +58,9 @@ const AudioCaptionsLiveContainer: React.FC = () => { data: AudioCaptionsLiveData, loading: AudioCaptionsLiveLoading, error: AudioCaptionsLiveError, - } = useSubscription(GET_AUDIO_CAPTIONS); + } = useSubscription(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 ( ); }; diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/queries.ts b/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/queries.ts index 80abed2af8..3aad2305f5 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/queries.ts +++ b/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; + 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, }; diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/styles.ts b/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/styles.ts index 81bdc2073a..ca4b7ede9f 100644 --- a/bigbluebutton-html5/imports/ui/components/audio/audio-graphql/audio-captions/live/styles.ts +++ b/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` @@ -136,4 +143,5 @@ export default { VisuallyHidden, UserAvatarWrapper, UserAvatar, + CaptionWrapper, };