feat(chat/native): add Closed Captions tab (#16787)

* Added CC tab inside Chat screen and some UI fixes on mobile.

react/features/base/modal/components/JitsiScreen.tsx

@@ -17,7 +17,7 @@ interface IProps {
     /**
      * The children component(s) of the Modal, to be rendered.
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
 
     /**
      * Additional style to be appended to the KeyboardAvoidingView content container.

react/features/chat/actions.native.ts

@@ -22,7 +22,7 @@ export function openChat(participant?: IParticipant | undefined | Object, disabl
         if (disablePolls) {
             navigate(screen.conference.chat);
         } else {
-            navigate(screen.conference.chatandpolls.main);
+            navigate(screen.conference.chatTabs.main);
         }
 
         dispatch(setFocusedTab(ChatTabs.CHAT));

react/features/chat/components/AbstractClosedCaptions.tsx

@@ -0,0 +1,111 @@
+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 { IMessageGroup, groupMessagesBySender } from '../../base/util/messageGrouping';
+// @ts-ignore
+import { StartRecordingDialog } 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 (isAsyncTranscriptionEnabled) {
+            dispatch(openDialog('StartRecordingDialog', StartRecordingDialog, {
+                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;
+

react/features/chat/components/native/ChatButton.ts

@@ -43,7 +43,7 @@ class ChatButton extends AbstractButton<IProps> {
     override _handleClick() {
         this.props._isPollsDisabled
             ? navigate(screen.conference.chat)
-            : navigate(screen.conference.chatandpolls.main);
+            : navigate(screen.conference.chatTabs.main);
     }
 
     /**

react/features/chat/components/native/ClosedCaptions.tsx

@@ -0,0 +1,125 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TouchableHighlight, View, ViewStyle } from 'react-native';
+import { Text } from 'react-native-paper';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import Icon from '../../../base/icons/components/Icon';
+import { IconArrowRight, IconSubtitles } from '../../../base/icons/svg';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { StyleType } from '../../../base/styles/functions.any';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { TabBarLabelCounter } from '../../../mobile/navigation/components/TabBarLabelCounter';
+import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import { ChatTabs } from '../../constants';
+import AbstractClosedCaptions, { AbstractProps } from '../AbstractClosedCaptions';
+
+import { SubtitlesMessagesContainer } from './SubtitlesMessagesContainer';
+import { closedCaptionsStyles } from './styles';
+
+/**
+ * Component that displays the closed captions interface.
+ *
+ * @returns {JSX.Element} - The ClosedCaptions component.
+ */
+const ClosedCaptions = ({
+    canStartSubtitles,
+    filteredSubtitles,
+    groupedSubtitles,
+    isButtonPressed,
+    isTranscribing,
+    startClosedCaptions
+}: AbstractProps): JSX.Element => {
+    const navigation = useNavigation();
+    const { t } = useTranslation();
+    const isCCTabFocused = useSelector((state: IReduxState) => state['features/chat'].focusedTab === ChatTabs.CLOSED_CAPTIONS);
+    const selectedLanguage = useSelector((state: IReduxState) => state['features/subtitles']._language);
+    const navigateToLanguageSelect = useCallback(() => {
+        navigate(screen.conference.subtitles);
+    }, [ navigation, screen ]);
+
+    useEffect(() => {
+        navigation?.setOptions({
+            tabBarLabel: () => (
+                <TabBarLabelCounter
+                    isFocused = { isCCTabFocused }
+                    label = { t('chat.tabs.closedCaptions') } />
+            )
+        });
+    }, [ isCCTabFocused, navigation, t ]);
+
+    const getContentContainerStyle = () => {
+        if (isTranscribing) {
+            return closedCaptionsStyles.transcribingContainer as StyleType;
+        }
+
+        return closedCaptionsStyles.emptyContentContainer as StyleType;
+    };
+
+    const renderContent = () => {
+        if (!isTranscribing) {
+            if (canStartSubtitles) {
+                return (
+                    <View style = { closedCaptionsStyles.emptyContent as ViewStyle }>
+                        <Button
+                            accessibilityLabel = { t('closedCaptionsTab.startClosedCaptionsButton') }
+                            disabled = { isButtonPressed }
+                            labelKey = 'closedCaptionsTab.startClosedCaptionsButton'
+                            onClick = { startClosedCaptions }
+                            type = { BUTTON_TYPES.PRIMARY } />
+                    </View>
+                );
+            }
+
+            return (
+                <View style = { closedCaptionsStyles.emptyContent as ViewStyle }>
+                    <Icon
+                        color = { BaseTheme.palette.icon03 }
+                        size = { 100 }
+                        src = { IconSubtitles } />
+                    <Text style = { [ closedCaptionsStyles.emptyStateText, { marginTop: BaseTheme.spacing[3] } ] }>
+                        { t('closedCaptionsTab.emptyState') }
+                    </Text>
+                </View>
+            );
+        }
+
+        return (
+            <>
+                <View style = { closedCaptionsStyles.languageButtonContainer as ViewStyle }>
+                    <Text style = { closedCaptionsStyles.languageButtonText }>{ t('transcribing.translateTo') }:</Text>
+                    <TouchableHighlight onPress = { navigateToLanguageSelect }>
+                        <View style = { closedCaptionsStyles.languageButtonContent as ViewStyle }>
+                            <Text style = { closedCaptionsStyles.languageButtonText }>{ t(selectedLanguage ?? 'transcribing.subtitlesOff') }</Text>
+                            <Icon
+                                size = { 24 }
+                                src = { IconArrowRight } />
+                        </View>
+                    </TouchableHighlight>
+                </View>
+                <View style = { closedCaptionsStyles.messagesContainer as ViewStyle }>
+                    <SubtitlesMessagesContainer
+                        groups = { groupedSubtitles }
+                        messages = { filteredSubtitles } />
+                </View>
+            </>
+        );
+    };
+
+    return (
+        <JitsiScreen
+            contentContainerStyle = { getContentContainerStyle() }
+            disableForcedKeyboardDismiss = { true }
+            hasExtraHeaderHeight = { true }
+            style = { closedCaptionsStyles.container as StyleType }>
+            { renderContent() }
+        </JitsiScreen>
+    );
+};
+
+export default AbstractClosedCaptions(ClosedCaptions);

react/features/chat/components/native/MessageContainer.tsx

@@ -44,19 +44,23 @@ class MessageContainer extends Component<IProps, any> {
      */
     override render() {
         const data = this._getMessagesGroupedBySender();
+        const noMessages = data.length === 0;
 
         return (
             <FlatList
                 ListEmptyComponent = { this._renderListEmptyComponent }
                 bounces = { false }
-                data = { data }
 
+                // @ts-ignore
+                contentContainerStyle = { noMessages && styles.emptyListContentContainer }
+                data = { data }
                 // Workaround for RN bug:
                 // https://github.com/facebook/react-native/issues/21196
                 inverted = { Boolean(data.length) }
                 keyExtractor = { this._keyExtractor }
                 keyboardShouldPersistTaps = 'handled'
-                renderItem = { this._renderMessageGroup } />
+                renderItem = { this._renderMessageGroup }
+                style = { noMessages && styles.emptyListStyle } />
         );
     }
 

react/features/chat/components/native/PrivateMessageButton.tsx

@@ -67,8 +67,8 @@ class PrivateMessageButton extends AbstractButton<IProps, any> {
             ? navigate(screen.conference.chat, {
                 privateMessageRecipient: this.props._participant
             })
-            : navigate(screen.conference.chatandpolls.main, {
-                screen: screen.conference.chatandpolls.tab.chat,
+            : navigate(screen.conference.chatTabs.main, {
+                screen: screen.conference.chatTabs.tab.chat,
                 params: {
                     privateMessageRecipient: this.props._participant
                 }

react/features/chat/components/native/SubtitleMessage.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, View, ViewStyle } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { getParticipantDisplayName } from '../../../base/participants/functions';
+import { ISubtitle } from '../../../subtitles/types';
+
+import { closedCaptionsStyles } from './styles';
+
+
+interface IProps extends ISubtitle {
+    showDisplayName: boolean;
+}
+
+export default function SubtitleMessage({ participantId, text, timestamp, interim, showDisplayName }: IProps) {
+    const participantName = useSelector((state: IReduxState) =>
+        getParticipantDisplayName(state, participantId));
+
+    const containerStyle: ViewStyle[] = [
+        closedCaptionsStyles.subtitleMessageContainer as ViewStyle
+    ];
+
+    if (interim) {
+        containerStyle.push(closedCaptionsStyles.subtitleMessageInterim as ViewStyle);
+    }
+
+    return (
+        <View style = { containerStyle }>
+            <View style = { closedCaptionsStyles.subtitleMessageContent as ViewStyle }>
+                {
+                    showDisplayName && (
+                        <Text style = { closedCaptionsStyles.subtitleMessageHeader }>
+                            { participantName }
+                        </Text>
+                    )
+                }
+                <Text style = { closedCaptionsStyles.subtitleMessageText }>{ text }</Text>
+                <Text style = { closedCaptionsStyles.subtitleMessageTimestamp }>
+                    { new Date(timestamp).toLocaleTimeString() }
+                </Text>
+            </View>
+        </View>
+    );
+}

react/features/chat/components/native/SubtitlesGroup.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import Avatar from '../../../base/avatar/components/Avatar';
+import { ISubtitle } from '../../../subtitles/types';
+
+import SubtitleMessage from './SubtitleMessage';
+import { closedCaptionsStyles } from './styles';
+
+
+interface IProps {
+    messages: ISubtitle[];
+    senderId: string;
+}
+
+export function SubtitlesGroup({ messages, senderId }: IProps) {
+    if (!messages.length) {
+        return null;
+    }
+
+    return (
+        <View style = { closedCaptionsStyles.subtitlesGroupContainer as ViewStyle }>
+            <View style = { closedCaptionsStyles.subtitlesGroupAvatar as ViewStyle }>
+                <Avatar
+                    participantId = { senderId }
+                    size = { 32 } />
+            </View>
+            <View style = { closedCaptionsStyles.subtitlesGroupMessagesContainer as ViewStyle }>
+                {
+                    messages.map((message, index) => (
+                        <SubtitleMessage
+                            key = { `${message.timestamp}-${message.id}` }
+                            showDisplayName = { index === 0 }
+                            { ...message } />
+                    ))
+                }
+            </View>
+        </View>
+    );
+}

react/features/chat/components/native/SubtitlesMessagesContainer.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, View, ViewStyle } from 'react-native';
+
+import Icon from '../../../base/icons/components/Icon';
+import { IconArrowDown } from '../../../base/icons/svg';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { ISubtitle } from '../../../subtitles/types';
+
+import { SubtitlesGroup } from './SubtitlesGroup';
+import { closedCaptionsStyles } from './styles';
+
+/**
+ * The threshold value used to determine if the user is at the bottom of the scroll view.
+ */
+const SCROLL_THRESHOLD = 50;
+
+interface IProps {
+    groups: Array<{
+        messages: ISubtitle[];
+        senderId: string;
+    }>;
+    messages: ISubtitle[];
+}
+
+export function SubtitlesMessagesContainer({ messages, groups }: IProps) {
+    const [ hasNewMessages, setHasNewMessages ] = useState(false);
+    const [ isScrolledToBottom, setIsScrolledToBottom ] = useState(true);
+    const scrollViewRef = useRef<ScrollView>(null);
+    const previousMessages = useRef(messages);
+
+    const scrollToBottom = useCallback((withAnimation: boolean) => {
+        scrollViewRef.current?.scrollToEnd({ animated: withAnimation });
+    }, []);
+
+    const handleNewMessagesClick = useCallback(() => {
+        scrollToBottom(true);
+    }, [ scrollToBottom ]);
+
+    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+        const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - SCROLL_THRESHOLD;
+
+        setIsScrolledToBottom(isAtBottom);
+        if (isAtBottom) {
+            setHasNewMessages(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        scrollToBottom(false);
+    }, [ scrollToBottom ]);
+
+    useEffect(() => {
+        const newMessages = messages.filter(message => !previousMessages.current.includes(message));
+
+        if (newMessages.length > 0) {
+            if (isScrolledToBottom) {
+                scrollToBottom(false);
+            } else {
+                setHasNewMessages(true);
+            }
+        }
+
+        previousMessages.current = messages;
+    }, [ messages, scrollToBottom ]);
+
+    return (
+        <View style = { closedCaptionsStyles.subtitlesMessagesContainer as ViewStyle }>
+            <ScrollView
+                contentContainerStyle = { closedCaptionsStyles.subtitlesMessagesList as ViewStyle }
+                onScroll = { handleScroll }
+                ref = { scrollViewRef }
+                scrollEventThrottle = { 16 }>
+                {
+                    groups.map(group => (
+                        <SubtitlesGroup
+                            key = { `${group.senderId}-${group.messages[0]?.timestamp}` }
+                            messages = { group.messages }
+                            senderId = { group.senderId } />
+                    ))
+                }
+            </ScrollView>
+            {
+                !isScrolledToBottom && hasNewMessages && (
+                    <View style = { closedCaptionsStyles.newMessagesButtonContainer as ViewStyle }>
+                        <Button
+                            accessibilityLabel = 'chat.newMessages'
+                            // eslint-disable-next-line react/jsx-no-bind
+                            icon = { () => (
+                                <Icon
+                                    color = { BaseTheme.palette.icon04 }
+                                    size = { 20 }
+                                    src = { IconArrowDown } />
+                            ) }
+                            labelKey = 'chat.newMessages'
+                            onClick = { handleNewMessagesClick }
+                            type = { BUTTON_TYPES.SECONDARY } />
+                    </View>
+                )
+            }
+        </View>
+    );
+}

react/features/chat/components/native/styles.ts

@@ -44,7 +44,8 @@ export default {
     },
 
     emptyComponentText: {
-        color: BaseTheme.palette.text03,
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
         textAlign: 'center'
     },
 
@@ -113,13 +114,22 @@ export default {
     },
 
     emptyComponentWrapper: {
-        alignSelf: 'center',
-        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
         padding: BoxModel.padding,
-        paddingTop: '8%',
         maxWidth: '80%'
     },
 
+    emptyListStyle: {
+        flex: 1
+    },
+
+    emptyListContentContainer: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center'
+    },
+
     disabledSendWrapper: {
         alignSelf: 'center',
         flex: 0,
@@ -270,3 +280,128 @@ export default {
         flex: 1
     }
 };
+
+/**
+ * Styles for the ClosedCaptions component.
+ */
+export const closedCaptionsStyles = {
+    container: {
+        backgroundColor: BaseTheme.palette.ui01,
+        flex: 1
+    },
+
+    emptyContentContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+
+    emptyContent: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        padding: BaseTheme.spacing[3]
+    },
+
+    emptyStateText: {
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
+        textAlign: 'center',
+        maxWidth: '80%'
+    },
+
+    transcribingContainer: {
+        flex: 1
+    },
+
+    languageButtonContainer: {
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        padding: BaseTheme.spacing[3]
+    },
+
+    languageButtonText: {
+        ...BaseTheme.typography.bodyShortRegularLarge,
+        color: BaseTheme.palette.text01,
+        marginHorizontal: BaseTheme.spacing[2]
+    },
+
+    languageButtonContent: {
+        flexDirection: 'row'
+    },
+
+    subtitleMessageContainer: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderRadius: BaseTheme.shape.borderRadius,
+        padding: BaseTheme.spacing[2],
+        maxWidth: '100%',
+        marginTop: BaseTheme.spacing[1]
+    },
+
+    subtitleMessageContent: {
+        maxWidth: '100%',
+        flex: 1
+    },
+
+    subtitleMessageHeader: {
+        ...BaseTheme.typography.labelBold,
+        color: BaseTheme.palette.text02,
+        marginBottom: BaseTheme.spacing[1],
+        maxWidth: 130
+    },
+
+    subtitleMessageText: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01
+    },
+
+    subtitleMessageTimestamp: {
+        ...BaseTheme.typography.labelRegular,
+        color: BaseTheme.palette.text03,
+        marginTop: BaseTheme.spacing[1]
+    },
+
+    subtitleMessageInterim: {
+        opacity: 0.7
+    },
+
+    subtitlesGroupContainer: {
+        flexDirection: 'row',
+        marginBottom: BaseTheme.spacing[3]
+    },
+
+    subtitlesGroupAvatar: {
+        marginBottom: BaseTheme.spacing[10],
+        marginRight: BaseTheme.spacing[2],
+        alignSelf: 'flex-start',
+        width: 32
+    },
+
+    subtitlesGroupMessagesContainer: {
+        flexDirection: 'column',
+        flex: 1,
+        maxWidth: '100%'
+    },
+
+    subtitlesMessagesContainer: {
+        flex: 1,
+        position: 'relative',
+        height: '100%'
+    },
+
+    subtitlesMessagesList: {
+        padding: BaseTheme.spacing[4]
+    },
+
+    newMessagesButtonContainer: {
+        position: 'absolute',
+        bottom: BaseTheme.spacing[3],
+        alignSelf: 'center'
+    },
+
+    messagesContainer: {
+        display: 'flex',
+        flex: 1,
+        overflow: 'hidden'
+    }
+};

react/features/chat/components/web/ClosedCaptionsTab.tsx

@@ -1,20 +1,13 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IReduxState } from '../../../app/types';
-import { openDialog } from '../../../base/dialog/actions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconSubtitles } from '../../../base/icons/svg';
 import Button from '../../../base/ui/components/web/Button';
-import { groupMessagesBySender } from '../../../base/util/messageGrouping';
-import { StartRecordingDialog } from '../../../recording/components/Recording';
-import { setRequestingSubtitles } from '../../../subtitles/actions.any';
 import LanguageSelector from '../../../subtitles/components/web/LanguageSelector';
-import { canStartSubtitles } from '../../../subtitles/functions.any';
-import { ISubtitle } from '../../../subtitles/types';
-import { isTranscribing } from '../../../transcribing/functions';
+// @ts-ignore
+import AbstractClosedCaptions, { AbstractProps } from '../AbstractClosedCaptions';
 
 import { SubtitlesMessagesContainer } from './SubtitlesMessagesContainer';
 
@@ -79,72 +72,19 @@ const useStyles = makeStyles()(theme => {
  *
  * @returns {JSX.Element} - The ClosedCaptionsTab component.
  */
-export default function ClosedCaptionsTab() {
+const ClosedCaptionsTab = ({
+    canStartSubtitles,
+    filteredSubtitles,
+    groupedSubtitles,
+    isButtonPressed,
+    isTranscribing,
+    startClosedCaptions
+}: AbstractProps): JSX.Element => {
     const { classes, theme } = useStyles();
-    const dispatch = useDispatch();
     const { t } = useTranslation();
-    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 (isAsyncTranscriptionEnabled) {
-            dispatch(openDialog('StartRecordingDialog', StartRecordingDialog, {
-                recordAudioAndVideo: false
-            }));
-        } else {
-            if (isButtonPressed) {
-                return;
-            }
-            dispatch(setRequestingSubtitles(true, false, null));
-            setButtonPressed(true);
-        }
-
-    }, [ isAsyncTranscriptionEnabled, dispatch, isButtonPressed, openDialog, setButtonPressed ]);
-
-    if (subtitlesError && isButtonPressed && !isAsyncTranscriptionEnabled) {
-        setButtonPressed(false);
-    }
-
-    if (!_isTranscribing) {
-        if (_canStartSubtitles) {
+    if (!isTranscribing) {
+        if (canStartSubtitles) {
             return (
                 <div className = { classes.emptyContent }>
                     <Button
@@ -159,10 +99,6 @@ export default function ClosedCaptionsTab() {
             );
         }
 
-        if (isButtonPressed && !isAsyncTranscriptionEnabled) {
-            setButtonPressed(false);
-        }
-
         return (
             <div className = { classes.emptyContent }>
                 <Icon
@@ -176,10 +112,6 @@ export default function ClosedCaptionsTab() {
         );
     }
 
-    if (isButtonPressed && !isAsyncTranscriptionEnabled) {
-        setButtonPressed(false);
-    }
-
     return (
         <div className = { classes.container }>
             <LanguageSelector />
@@ -190,4 +122,6 @@ export default function ClosedCaptionsTab() {
             </div>
         </div>
     );
-}
+};
+
+export default AbstractClosedCaptions(ClosedCaptionsTab);

react/features/mobile/navigation/components/TabBarLabelCounter.tsx

@@ -4,7 +4,7 @@ import { StyleProp, Text, TextStyle, View } from 'react-native';
 import { navigationStyles } from './styles';
 
 interface ITabBarLabelCounterProps {
-    activeUnreadNr: boolean;
+    activeUnreadNr?: boolean;
     isFocused: boolean;
     label: string;
     unreadCount?: number;

react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigator.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable lines-around-comment */
-
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import {
-    getClientHeight,
-    getClientWidth
-} from '../../../../../base/modal/components/functions';
-import { setFocusedTab } from '../../../../../chat/actions.any';
-import Chat from '../../../../../chat/components/native/Chat';
-import { ChatTabs } from '../../../../../chat/constants';
-import { getFocusedTab } from '../../../../../chat/functions';
-import { resetUnreadPollsCount } from '../../../../../polls/actions';
-import PollsPane from '../../../../../polls/components/native/PollsPane';
-import { screen } from '../../../routes';
-import { chatTabBarOptions } from '../../../screenOptions';
-
-const ChatTab = createMaterialTopTabNavigator();
-
-const ChatAndPolls = () => {
-    const clientHeight = useSelector(getClientHeight);
-    const clientWidth = useSelector(getClientWidth);
-    const dispatch = useDispatch();
-    const currentFocusedTab = useSelector(getFocusedTab);
-    const initialRouteName = currentFocusedTab === ChatTabs.POLLS
-        ? screen.conference.chatandpolls.tab.polls
-        : screen.conference.chatandpolls.tab.chat;
-
-    return (
-        // @ts-ignore
-        <ChatTab.Navigator
-            backBehavior = 'none'
-            initialLayout = {{
-                height: clientHeight,
-                width: clientWidth
-            }}
-            initialRouteName = { initialRouteName }
-            screenOptions = { chatTabBarOptions }>
-            <ChatTab.Screen
-                component = { Chat }
-                listeners = {{
-                    tabPress: () => {
-                        dispatch(setFocusedTab(ChatTabs.CHAT));
-                    }
-                }}
-                name = { screen.conference.chatandpolls.tab.chat } />
-            <ChatTab.Screen
-                component = { PollsPane }
-                listeners = {{
-                    tabPress: () => {
-                        dispatch(setFocusedTab(ChatTabs.POLLS));
-                        dispatch(resetUnreadPollsCount);
-                    }
-                }}
-                name = { screen.conference.chatandpolls.tab.polls } />
-        </ChatTab.Navigator>
-    );
-};
-
-export default ChatAndPolls;

react/features/mobile/navigation/components/chat/components/ChatNavigator.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable lines-around-comment */
+
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+    getClientHeight,
+    getClientWidth
+} from '../../../../../base/modal/components/functions.native';
+import { setFocusedTab } from '../../../../../chat/actions.native';
+import Chat from '../../../../../chat/components/native/Chat';
+import ClosedCaptions from '../../../../../chat/components/native/ClosedCaptions';
+import { ChatTabs } from '../../../../../chat/constants';
+import { getFocusedTab, isChatDisabled } from '../../../../../chat/functions';
+import { arePollsDisabled } from '../../../../../conference/functions.native';
+import { resetUnreadPollsCount } from '../../../../../polls/actions';
+import PollsPane from '../../../../../polls/components/native/PollsPane';
+import { isCCTabEnabled } from '../../../../../subtitles/functions.any';
+import { screen } from '../../../routes';
+import { chatTabBarOptions } from '../../../screenOptions';
+
+const ChatTab = createMaterialTopTabNavigator();
+
+const ChatNavigator = () => {
+    const dispatch = useDispatch();
+
+    const clientHeight = useSelector(getClientHeight);
+    const clientWidth = useSelector(getClientWidth);
+    const currentFocusedTab = useSelector(getFocusedTab);
+    const isPollsTabDisabled = useSelector(arePollsDisabled);
+    const isChatTabDisabled = useSelector(isChatDisabled);
+    const isCCTabDisabled = !useSelector(isCCTabEnabled);
+
+    const initialRouteName
+    = currentFocusedTab === ChatTabs.POLLS ? screen.conference.chatTabs.tab.polls
+        : currentFocusedTab === ChatTabs.CLOSED_CAPTIONS ? screen.conference.chatTabs.tab.closedCaptions
+            : screen.conference.chatTabs.tab.chat;
+
+    return (
+        // @ts-ignore
+        <ChatTab.Navigator
+            backBehavior = 'none'
+            initialLayout = {{
+                height: clientHeight,
+                width: clientWidth
+            }}
+            initialRouteName = { initialRouteName }
+            screenOptions = { chatTabBarOptions }>
+            {
+                !isChatTabDisabled
+                && <ChatTab.Screen
+                    component = { Chat }
+                    listeners = {{
+                        tabPress: () => {
+                            dispatch(setFocusedTab(ChatTabs.CHAT));
+                        }
+                    }}
+                    name = { screen.conference.chatTabs.tab.chat } />
+            }
+            {
+                !isPollsTabDisabled
+                && <ChatTab.Screen
+                    component = { PollsPane }
+                    listeners = {{
+                        tabPress: () => {
+                            dispatch(setFocusedTab(ChatTabs.POLLS));
+                            dispatch(resetUnreadPollsCount);
+                        }
+                    }}
+                    name = { screen.conference.chatTabs.tab.polls } />
+            }
+            {
+                !isCCTabDisabled
+                && <ChatTab.Screen
+                    component = { ClosedCaptions }
+                    listeners = {{
+                        tabPress: () => {
+                            dispatch(setFocusedTab(ChatTabs.CLOSED_CAPTIONS));
+                        }
+                    }}
+                    name = { screen.conference.chatTabs.tab.closedCaptions } />
+            }
+        </ChatTab.Navigator>
+    );
+};
+
+export default ChatNavigator;

react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx

@@ -43,6 +43,7 @@ import SpeakerStats
 import LanguageSelectorDialog
 // @ts-ignore
     from '../../../../../subtitles/components/native/LanguageSelectorDialog';
+import { isCCTabEnabled } from '../../../../../subtitles/functions.any';
 import Whiteboard from '../../../../../whiteboard/components/native/Whiteboard';
 // @ts-ignore
 import { screen } from '../../../routes';
@@ -68,7 +69,7 @@ import {
     // @ts-ignore
 } from '../../../screenOptions';
 // @ts-ignore
-import ChatAndPollsNavigator from '../../chat/components/ChatAndPollsNavigator';
+import ChatNavigator from '../../chat/components/ChatNavigator';
 // @ts-ignore
 import LobbyNavigationContainer from '../../lobby/components/LobbyNavigationContainer';
 // @ts-ignore
@@ -84,20 +85,32 @@ const ConferenceStack = createStackNavigator();
 
 const ConferenceNavigationContainer = () => {
     const isPollsDisabled = useSelector(arePollsDisabled);
+    const _isPollsEnabled = !isPollsDisabled;
+    const _isCCTabEnabled = useSelector(isCCTabEnabled);
+    const { t } = useTranslation();
+
     let ChatScreen;
     let chatScreenName;
-    let chatTitleString;
+    let chatTitle;
 
     if (isPollsDisabled) {
         ChatScreen = Chat;
         chatScreenName = screen.conference.chat;
-        chatTitleString = 'chat.title';
     } else {
-        ChatScreen = ChatAndPollsNavigator;
-        chatScreenName = screen.conference.chatandpolls.main;
-        chatTitleString = 'chat.titleWithPolls';
+        ChatScreen = ChatNavigator;
+        chatScreenName = screen.conference.chatTabs.main;
+    }
+
+    if (_isPollsEnabled || _isCCTabEnabled) {
+        const features = [
+            _isPollsEnabled ? t('chat.titleWithPolls') : '',
+            _isCCTabEnabled ? t('chat.titleWithCC') : ''
+        ].filter(Boolean);
+
+        chatTitle = `${t('chat.titleWithFeatures')} ${features.join(' and ')}`;
+    } else {
+        chatTitle = t('chat.title');
     }
-    const { t } = useTranslation();
 
     return (
         <NavigationContainer
@@ -117,7 +130,7 @@ const ConferenceNavigationContainer = () => {
                     name = { chatScreenName }
                     options = {{
                         ...chatScreenOptions,
-                        title: t(chatTitleString)
+                        title: chatTitle
                     }} />
                 <ConferenceStack.Screen
                     component = { ParticipantsPane }

react/features/mobile/navigation/components/settings/components/SettingsNavigationContainer.tsx

@@ -16,6 +16,7 @@ import {
     welcomeScreenOptions
 } from '../../../screenOptions';
 import {
+    goBack,
     settingsNavigationContainerRef
 } from '../SettingsNavigationContainerRef';
 
@@ -51,6 +52,7 @@ const SettingsNavigationContainer = ({ isInWelcomePage }: IProps) => {
 
     const LanguageSelectScreen = useCallback(() =>
         (<LanguageSelectView
+            goBack = { goBack }
             isInWelcomePage = { isInWelcomePage } />)
     , []);
 

react/features/mobile/navigation/routes.ts

@@ -3,11 +3,12 @@ export const screen = {
         breakoutRooms: 'Breakout Rooms',
         carmode: 'Car Mode',
         chat: 'Chat',
-        chatandpolls: {
-            main: 'Chat and Polls',
+        chatTabs: {
+            main: 'Chat',
             tab: {
                 chat: 'Chat',
-                polls: 'Polls'
+                polls: 'Polls',
+                closedCaptions: 'CC'
             }
         },
         container: 'Conference container',

react/features/polls/components/native/PollsList.tsx

@@ -38,32 +38,36 @@ const PollsList = ({ setCreateMode }: IPollListProps) => {
         scrollToBottom();
     }, [ polls ]);
 
+    const renderEmptyComponent = useCallback(() => (
+        <View style = { pollsStyles.noPollContent as ViewStyle }>
+            <Icon
+                color = { BaseTheme.palette.icon03 }
+                size = { 100 }
+                src = { IconMessage } />
+            <Text
+                id = 'no-polls-text'
+                style = { pollsStyles.noPollText as TextStyle } >
+                {
+                    t('polls.results.empty')
+                }
+            </Text>
+        </View>
+    ), [ t ]);
+
+    const noPolls = listPolls.length === 0;
+
     return (
-        <>
-            {
-                listPolls.length === 0
-                && <View style = { pollsStyles.noPollContent as ViewStyle }>
-                    <Icon
-                        color = { BaseTheme.palette.icon03 }
-                        size = { 160 }
-                        src = { IconMessage } />
-                    <Text
-                        id = 'no-polls-text'
-                        style = { pollsStyles.noPollText as TextStyle } >
-                        {
-                            t('polls.results.empty')
-                        }
-                    </Text>
-                </View>
-            }
-            <FlatList
-                data = { listPolls }
-                extraData = { listPolls }
-                // eslint-disable-next-line react/jsx-no-bind
-                keyExtractor = { (item, index) => index.toString() }
-                ref = { flatlistRef }
-                renderItem = { renderItem } />
-        </>
+        <FlatList
+            ListEmptyComponent = { renderEmptyComponent }
+            // @ts-ignore
+            contentContainerStyle = { noPolls && pollsStyles.emptyListContentContainer as ViewStyle }
+            data = { listPolls }
+            extraData = { listPolls }
+            // eslint-disable-next-line react/jsx-no-bind
+            keyExtractor = { (item, index) => index.toString() }
+            ref = { flatlistRef }
+            renderItem = { renderItem }
+            style = { noPolls && pollsStyles.emptyListStyle as ViewStyle } />
     );
 };
 

react/features/polls/components/native/styles.ts

@@ -117,21 +117,26 @@ export const resultsStyles = createStyleSheet({
 
 export const pollsStyles = createStyleSheet({
 
+    emptyListStyle: {
+        flex: 1
+    },
+
+    emptyListContentContainer: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center'
+    },
+
     noPollContent: {
         alignItems: 'center',
-        justifyContent: 'center',
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        top: '25%'
+        justifyContent: 'center'
     },
 
     noPollText: {
-        flex: 1,
-        color: BaseTheme.palette.text03,
+        ...BaseTheme.typography.bodyLongBold,
+        color: BaseTheme.palette.text02,
         textAlign: 'center',
-        maxWidth: '70%'
+        maxWidth: '80%'
     },
 
     pollItemContainer: {

react/features/settings/components/native/LanguageSelectView.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ScrollView, Text, TouchableHighlight, View, ViewStyle } from 'react-native';
+import { GestureResponderEvent, ScrollView, Text, TouchableHighlight, View, ViewStyle } from 'react-native';
 import { Edge } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
@@ -11,12 +11,13 @@ import { IconArrowLeft } from '../../../base/icons/svg';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import BaseThemeNative from '../../../base/ui/components/BaseTheme.native';
 import HeaderNavigationButton from '../../../mobile/navigation/components/HeaderNavigationButton';
-import { goBack, navigate } from '../../../mobile/navigation/components/settings/SettingsNavigationContainerRef';
-import { screen } from '../../../mobile/navigation/routes';
 
 import styles from './styles';
 
-const LanguageSelectView = ({ isInWelcomePage }: { isInWelcomePage?: boolean; }) => {
+const LanguageSelectView = ({ goBack, isInWelcomePage }: {
+    goBack?: (e?: GestureResponderEvent | React.MouseEvent) => void;
+    isInWelcomePage?: boolean;
+}) => {
     const { t } = useTranslation();
     const navigation = useNavigation();
     const { conference } = useSelector((state: IReduxState) => state['features/base/conference']);
@@ -25,7 +26,7 @@ const LanguageSelectView = ({ isInWelcomePage }: { isInWelcomePage?: boolean; })
     const setLanguage = useCallback(language => () => {
         i18next.changeLanguage(language);
         conference?.setTranscriptionLanguage(language);
-        navigate(screen.settings.main);
+        goBack?.();
     }, [ conference, i18next ]);
 
     const headerLeft = () => (