snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/chat/components/AbstractClosedCaptions.tsx

@@ -0,0 +1,116 @@
+import React, { ComponentType, useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../app/types';
+import { openDialog } from '../../base/dialog/actions';
+import { MEET_FEATURES } from '../../base/jwt/constants';
+import { IMessageGroup, groupMessagesBySender } from '../../base/util/messageGrouping';
+import { maybeShowPremiumFeatureDialog } from '../../jaas/actions';
+import { RecordingTranscriptionDialog } from '../../recording/components/Recording';
+import { setRequestingSubtitles } from '../../subtitles/actions.any';
+import { canStartSubtitles } from '../../subtitles/functions.any';
+import { ISubtitle } from '../../subtitles/types';
+import { isTranscribing } from '../../transcribing/functions';
+
+export type AbstractProps = {
+    canStartSubtitles: boolean;
+    filteredSubtitles: ISubtitle[];
+    groupedSubtitles: IMessageGroup<ISubtitle>[];
+    isButtonPressed: boolean;
+    isTranscribing: boolean;
+    startClosedCaptions: () => void;
+};
+
+const AbstractClosedCaptions = (Component: ComponentType<AbstractProps>) => () => {
+    const dispatch = useDispatch();
+    const subtitles = useSelector((state: IReduxState) => state['features/subtitles'].subtitlesHistory);
+    const language = useSelector((state: IReduxState) => state['features/subtitles']._language);
+    const selectedLanguage = language?.replace('translation-languages:', '');
+    const _isTranscribing = useSelector(isTranscribing);
+    const _canStartSubtitles = useSelector(canStartSubtitles);
+    const [ isButtonPressed, setButtonPressed ] = useState(false);
+    const subtitlesError = useSelector((state: IReduxState) => state['features/subtitles']._hasError);
+    const isAsyncTranscriptionEnabled = useSelector((state: IReduxState) =>
+        state['features/base/conference'].conference?.getMetadataHandler()?.getMetadata()?.asyncTranscription);
+
+    const filteredSubtitles = useMemo(() => {
+        // First, create a map of transcription messages by message ID
+        const transcriptionMessages = new Map(
+            subtitles
+                .filter(s => s.isTranscription)
+                .map(s => [ s.id, s ])
+        );
+
+        if (!selectedLanguage) {
+            // When no language is selected, show all original transcriptions
+            return Array.from(transcriptionMessages.values());
+        }
+
+        // Then, create a map of translation messages by message ID
+        const translationMessages = new Map(
+            subtitles
+                .filter(s => !s.isTranscription && s.language === selectedLanguage)
+                .map(s => [ s.id, s ])
+        );
+
+        // When a language is selected, for each transcription message:
+        // 1. Use its translation if available
+        // 2. Fall back to the original transcription if no translation exists
+        return Array.from(transcriptionMessages.values())
+            .filter((m: ISubtitle) => !m.interim)
+            .map(m => translationMessages.get(m.id) ?? m);
+    }, [ subtitles, selectedLanguage ]);
+
+    const groupedSubtitles = useMemo(() =>
+        groupMessagesBySender(filteredSubtitles), [ filteredSubtitles ]);
+
+    const startClosedCaptions = useCallback(() => {
+        if (dispatch(maybeShowPremiumFeatureDialog(MEET_FEATURES.RECORDING))) {
+            return;
+        }
+
+        if (isAsyncTranscriptionEnabled) {
+            dispatch(openDialog('RecordingTranscriptionDialog', RecordingTranscriptionDialog, {
+                recordAudioAndVideo: false
+            }));
+        } else {
+            if (isButtonPressed) {
+                return;
+            }
+            dispatch(setRequestingSubtitles(true, false, null));
+            setButtonPressed(true);
+        }
+
+    }, [ isAsyncTranscriptionEnabled, dispatch, isButtonPressed, openDialog, setButtonPressed ]);
+
+    useEffect(() => {
+        if (subtitlesError && isButtonPressed && !isAsyncTranscriptionEnabled) {
+            setButtonPressed(false);
+        }
+    }, [ subtitlesError, isButtonPressed, isAsyncTranscriptionEnabled ]);
+
+    useEffect(() => {
+        if (!_isTranscribing && isButtonPressed && !isAsyncTranscriptionEnabled) {
+            setButtonPressed(false);
+        }
+    }, [ _isTranscribing, isButtonPressed, isAsyncTranscriptionEnabled ]);
+
+    useEffect(() => {
+        if (isButtonPressed && !isAsyncTranscriptionEnabled) {
+            setButtonPressed(false);
+        }
+    }, [ isButtonPressed, isAsyncTranscriptionEnabled ]);
+
+    return (
+        <Component
+            canStartSubtitles = { _canStartSubtitles }
+            filteredSubtitles = { filteredSubtitles }
+            groupedSubtitles = { groupedSubtitles }
+            isButtonPressed = { isButtonPressed }
+            isTranscribing = { _isTranscribing }
+            startClosedCaptions = { startClosedCaptions } />
+    );
+};
+
+export default AbstractClosedCaptions;
+