fix(subtitles): Styles.

 - Move the styles from css to tss-react ones
 - Dynamic fontSize based on the visible area of the page
 - Remove the gaps in the background when a line is wrapped.
 - Change the text color to white.
 - Remove transparency.

css/main.scss

@@ -61,7 +61,6 @@ $flagsImagePath: "../images/";
 @import 'filmstrip/vertical_filmstrip_overrides';
 @import 'unsupported-browser/main';
 @import 'deep-linking/main';
-@import 'transcription-subtitles';
 @import '_meetings_list.scss';
 @import 'navigate_section_list';
 @import 'third-party-branding/google';

react/features/subtitles/components/web/Captions.tsx

@@ -1,25 +1,73 @@
+import { Theme } from '@mui/material';
 import React, { ReactElement } from 'react';
 import { connect } from 'react-redux';
+import { withStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../app/types';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import { getLargeVideoParticipant } from '../../../large-video/functions';
 import { isLayoutTileView } from '../../../video-layout/functions.web';
+import { calculateSubtitlesFontSize } from '../../functions.web';
 import {
     AbstractCaptions,
     type IAbstractCaptionsProps,
     _abstractMapStateToProps
 } from '../AbstractCaptions';
 
-
 interface IProps extends IAbstractCaptionsProps {
 
+    /**
+     * The height of the visible area.
+     */
+    _clientHeight?: number;
+
     /**
      * Whether the subtitles container is lifted above the invite box.
      */
     _isLifted: boolean | undefined;
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
 }
 
+
+const styles = (_theme: Theme, props: IProps) => {
+    const { _isLifted = false, _clientHeight } = props;
+
+    const toolbarSize = 48;
+    const fontSize = calculateSubtitlesFontSize(_clientHeight);
+
+    return {
+        transcriptionSubtitles: {
+            bottom: _isLifted ? `${toolbarSize + 36 + 40}px` : `${toolbarSize + 40}px`,
+            fontSize: `${fontSize}px`,
+            left: '50%',
+            maxWidth: '50vw',
+            overflowWrap: 'break-word' as const,
+            pointerEvents: 'none' as const,
+            position: 'absolute' as const,
+            textShadow: `
+                0px 0px 1px rgba(0,0,0,0.3),
+                0px 1px 1px rgba(0,0,0,0.3),
+                1px 0px 1px rgba(0,0,0,0.3),
+                0px 0px 1px rgba(0,0,0,0.3)`,
+            transform: 'translateX(-50%)',
+            zIndex: 7,
+            lineHeight: 1.2,
+
+            span: {
+                color: '#fff',
+                background: 'black',
+
+                // without this when the text is wrapped on 2+ lines there will be a gap in the background:
+                padding: `${0.2 * fontSize}px 0px`
+            }
+        }
+    };
+};
+
 /**
  * React {@code Component} which can display speech-to-text results from
  * Jigasi as subtitles.
@@ -53,12 +101,10 @@ class Captions extends AbstractCaptions<IProps> {
      * @returns {ReactElement} - The subtitles container.
      */
     _renderSubtitlesContainer(paragraphs: Array<ReactElement>): ReactElement {
-        const className = this.props._isLifted
-            ? 'transcription-subtitles lifted'
-            : 'transcription-subtitles';
+        const classes = withStyles.getClasses(this.props);
 
         return (
-            <div className = { className } >
+            <div className = { classes.transcriptionSubtitles } >
                 { paragraphs }
             </div>
         );
@@ -77,11 +123,13 @@ function mapStateToProps(state: IReduxState) {
     const isTileView = isLayoutTileView(state);
     const largeVideoParticipant = getLargeVideoParticipant(state);
     const localParticipant = getLocalParticipant(state);
+    const { clientHeight } = state['features/base/responsive-ui'];
 
     return {
         ..._abstractMapStateToProps(state),
-        _isLifted: Boolean(largeVideoParticipant && largeVideoParticipant?.id !== localParticipant?.id && !isTileView)
+        _isLifted: Boolean(largeVideoParticipant && largeVideoParticipant?.id !== localParticipant?.id && !isTileView),
+        _clientHeight: clientHeight
     };
 }
 
-export default connect(mapStateToProps)(Captions);
+export default connect(mapStateToProps)(withStyles(Captions, styles));

react/features/subtitles/functions.web.ts

@@ -17,3 +17,17 @@ export const notifyTranscriptionChunkReceived = (transcriptMessageID: string, la
         participant,
         ...text
     });
+
+/**
+ * Calculates the font size for the subtitles.
+ *
+ * @param {number} clientHeight - The height of the visible area of the window.
+ * @returns {number}
+ */
+export function calculateSubtitlesFontSize(clientHeight?: number) {
+    if (typeof clientHeight === 'undefined') {
+        return 16;
+    }
+
+    return Math.max(Math.floor(clientHeight * 0.04), 16);
+}