From 104926190523ba60f29bd6254deec94913dc471c Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Fri, 23 Aug 2024 15:45:19 -0500
Subject: [PATCH] feat(subtitles): Move with toolbar.

---
 .../web/StageParticipantNameLabel.tsx         |  9 +++---
 .../subtitles/components/web/Captions.tsx     | 28 ++++++++++++++++---
 react/features/toolbox/functions.web.ts       | 14 ++++++++++
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/react/features/display-name/components/web/StageParticipantNameLabel.tsx b/react/features/display-name/components/web/StageParticipantNameLabel.tsx
index f8b12f5df8e70..721274bdc9dde 100644
--- a/react/features/display-name/components/web/StageParticipantNameLabel.tsx
+++ b/react/features/display-name/components/web/StageParticipantNameLabel.tsx
@@ -11,7 +11,7 @@ import {
 } from '../../../base/participants/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { getLargeVideoParticipant } from '../../../large-video/functions';
-import { isToolboxVisible } from '../../../toolbox/functions.web';
+import { getTransitionParamsForElementsAboveToolbox, isToolboxVisible } from '../../../toolbox/functions.web';
 import { isLayoutTileView } from '../../../video-layout/functions.web';
 
 import DisplayNameBadge from './DisplayNameBadge';
@@ -23,8 +23,8 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             display: 'inline-flex',
             justifyContent: 'center',
-            marginBottom: theme.spacing(7),
-            transition: 'margin-bottom 0.3s',
+            marginBottom: theme.spacing(6),
+            transition: `margin-bottom ${getTransitionParamsForElementsAboveToolbox(false)}`,
             pointerEvents: 'none',
             position: 'absolute',
             bottom: 0,
@@ -33,7 +33,8 @@ const useStyles = makeStyles()(theme => {
             zIndex: 1
         },
         containerElevated: {
-            marginBottom: theme.spacing(12)
+            marginBottom: theme.spacing(12),
+            transition: `margin-bottom ${getTransitionParamsForElementsAboveToolbox(false)}`
         }
     };
 });
diff --git a/react/features/subtitles/components/web/Captions.tsx b/react/features/subtitles/components/web/Captions.tsx
index 08d92ade7ed79..f88b12e70956c 100644
--- a/react/features/subtitles/components/web/Captions.tsx
+++ b/react/features/subtitles/components/web/Captions.tsx
@@ -6,6 +6,7 @@ import { withStyles } from 'tss-react/mui';
 import { IReduxState } from '../../../app/types';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import { getLargeVideoParticipant } from '../../../large-video/functions';
+import { getTransitionParamsForElementsAboveToolbox, isToolboxVisible } from '../../../toolbox/functions.web';
 import { isLayoutTileView } from '../../../video-layout/functions.web';
 import { calculateSubtitlesFontSize } from '../../functions.web';
 import {
@@ -26,6 +27,11 @@ interface IProps extends IAbstractCaptionsProps {
      */
     _isLifted: boolean | undefined;
 
+    /**
+     * Whether the toolbox is visible or not.
+     */
+    _toolboxVisible: boolean;
+
     /**
      * An object containing the CSS classes.
      */
@@ -34,14 +40,26 @@ interface IProps extends IAbstractCaptionsProps {
 
 
 const styles = (_theme: Theme, props: IProps) => {
-    const { _isLifted = false, _clientHeight } = props;
+    const { _isLifted = false, _clientHeight, _toolboxVisible = false } = props;
 
     const toolbarSize = 48;
     const fontSize = calculateSubtitlesFontSize(_clientHeight);
+    let bottom = 40;
+    const padding = Math.ceil(0.2 * fontSize);
+
+    // This is the case where we display the onstage participant display name
+    // below the subtitles.
+    if (_isLifted) {
+        bottom += 36 + padding; // 36px is the height
+    }
+
+    if (_toolboxVisible) {
+        bottom += toolbarSize;
+    }
 
     return {
         transcriptionSubtitles: {
-            bottom: _isLifted ? `${toolbarSize + 36 + 40}px` : `${toolbarSize + 40}px`,
+            bottom: `${bottom}px`,
             fontSize: `${fontSize}px`,
             left: '50%',
             maxWidth: '50vw',
@@ -56,13 +74,14 @@ const styles = (_theme: Theme, props: IProps) => {
             transform: 'translateX(-50%)',
             zIndex: 7,
             lineHeight: 1.2,
+            transition: `bottom ${getTransitionParamsForElementsAboveToolbox(_toolboxVisible)}`,
 
             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`
+                padding: `${Math.ceil(0.2 * fontSize)}px 0px`
             }
         }
     };
@@ -128,7 +147,8 @@ function mapStateToProps(state: IReduxState) {
     return {
         ..._abstractMapStateToProps(state),
         _isLifted: Boolean(largeVideoParticipant && largeVideoParticipant?.id !== localParticipant?.id && !isTileView),
-        _clientHeight: clientHeight
+        _clientHeight: clientHeight,
+        _toolboxVisible: isToolboxVisible(state)
     };
 }
 
diff --git a/react/features/toolbox/functions.web.ts b/react/features/toolbox/functions.web.ts
index cb6ee90d3aecd..4c7187284f02d 100644
--- a/react/features/toolbox/functions.web.ts
+++ b/react/features/toolbox/functions.web.ts
@@ -249,3 +249,17 @@ export function getVisibleButtons({
 export function getParticipantMenuButtonsWithNotifyClick(state: IReduxState): Map<string, NOTIFY_CLICK_MODE> {
     return state['features/toolbox'].participantMenuButtonsWithNotifyClick;
 }
+
+
+/**
+ * Returns the time, timing function and delay for elements that are position above the toolbar and need to move along
+ * with the toolbar.
+ *
+ * @param {boolean} isToolbarVisible - Whether the toolbar is visible or not.
+ * @returns {string}
+ */
+export function getTransitionParamsForElementsAboveToolbox(isToolbarVisible: boolean) {
+    // The transistion time and delay is different to account for the time when the toolbar is about to hide/show but
+    // the elements don't have to move.
+    return isToolbarVisible ? '0.15s ease-in 0.15s' : '0.24s ease-in 0s';
+}