feat(conference-info-header) Make conference info header configurable. (

jitsi#9638)

config.js

@@ -901,15 +901,32 @@ var config = {
     // If true, tile view will not be enabled automatically when the participants count threshold is reached.
     // disableTileView: true,
 
+    // Controls the visibility and behavior of the top header conference info labels.
+    // If a label's id is not in any of the 2 arrays, it will not be visible at all on the header.
+    // conferenceInfo: {
+    //     // those labels will not be hidden in tandem with the toolbox.
+    //     alwaysVisible: ['recording', 'local-recording'],
+    //     // those labels will be auto-hidden in tandem with the toolbox buttons.
+    //     autoHide: [
+    //         'subject',
+    //         'conference-timer',
+    //         'participants-count',
+    //         'e2ee',
+    //         'transcribing',
+    //         'video-quality',
+    //         'insecure-room'
+    //     ]
+    // },
+
     // Hides the conference subject
     // hideConferenceSubject: true,
 
-    // Hides the recording label
-    // hideRecordingLabel: false,
-
     // Hides the conference timer.
     // hideConferenceTimer: true,
 
+    // Hides the recording label
+    // hideRecordingLabel: false,
+
     // Hides the participants stats
     // hideParticipantsStats: true,
 

css/_subject.scss

@@ -1,54 +1,22 @@
 .subject {
-    box-sizing: border-box;
     color: #fff;
-    margin-top: 20px;
-    position: absolute;
-    top: -120px;
-    transition: top .3s ease-in;
-    width: 100%;
+    margin-top: -120px;
+    transition: margin-top .3s ease-in;
     z-index: $zindex3;
 
     &.visible {
-        top: 0;
-    }
-
-    &.recording {
-        top: 0;
-
-        .subject-details-container {
-            opacity: 0;
-            transition: opacity .3s ease-in;
-        }
-
-        .subject-info-container .show-always {
-            transition: margin-left .3s ease-in;
-        }
-
-        &.visible {
-            .subject-details-container {
-                opacity: 1;
-            }
-        }
+        margin-top: 20px;
     }
 }
 
-.subject-details-container {
-    display: flex;
-}
-
 .subject-info-container {
     display: flex;
     justify-content: center;
-    max-width: calc(100% - 280px);
     margin: 0 auto;
-
-    &--full-width {
-        max-width: 100%;
-    }
+    height: 28px;
 
     @media (max-width: 500px) {
         flex-wrap: wrap;
-        max-width: 100%;
     }
 }
 
@@ -63,21 +31,47 @@
 .subject-text {
     background: rgba(0, 0, 0, 0.6);
     border-radius: 3px 0px 0px 3px;
+    box-sizing: border-box;
     font-size: 14px;
-    line-height: 24px;
-    padding: 2px 16px;
-    height: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    line-height: 28px;
+    padding: 0 16px;
+    height: 28px;
+
+    @media (max-width: 700px) {
+        max-width: 100px;
+    }
+
+    @media (max-width: 300px) {
+        display: none;
+    }
+
+    &--content {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .subject-timer {
     background: rgba(0, 0, 0, 0.8);
     border-radius: 0px 3px 3px 0px;
-    display: inline-block;
+    box-sizing: border-box;
     font-size: 12px;
-    line-height: 16px;
+    line-height: 28px;
     min-width: 34px;
-    padding: 6px 8px;
+    padding: 0 8px;
+    height: 28px;
+
+    @media (max-width: 300px) {
+        display: none;
+    }
+}
+
+.details-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    height: 48px;
 }

react/features/base/config/configWhitelist.js

@@ -70,6 +70,7 @@ export default [
      */
     'callUUID',
 
+    'conferenceInfo',
     'channelLastN',
     'connectionIndicators',
     'constraints',

react/features/base/config/reducer.js

@@ -2,6 +2,7 @@
 
 import _ from 'lodash';
 
+import { CONFERENCE_INFO } from '../../conference/components/constants';
 import { equals, ReducerRegistry } from '../redux';
 
 import {
@@ -56,6 +57,17 @@ const INITIAL_RN_STATE = {
     }
 };
 
+/**
+ * Mapping between old configs controlling the conference info headers visibility and the
+ * new configs. Needed in order to keep backwards compatibility.
+ */
+const CONFERENCE_HEADER_MAPPING = {
+    hideConferenceTimer: [ 'conference-timer' ],
+    hideConferenceSubject: [ 'subject' ],
+    hideParticipantsStats: [ 'participants-count' ],
+    hideRecordingLabel: [ 'recording', 'local-recording' ]
+};
+
 ReducerRegistry.register('features/base/config', (state = _getInitialState(), action) => {
     switch (action.type) {
     case UPDATE_CONFIG:
@@ -172,6 +184,27 @@ function _setConfig(state, { config }) {
     return equals(state, newState) ? state : newState;
 }
 
+/**
+ * Processes the conferenceInfo object against the defaults.
+ *
+ * @param {Object} config - The old config.
+ * @returns {Object} The processed conferenceInfo object.
+ */
+function _getConferenceInfo(config) {
+    const { conferenceInfo } = config;
+
+    if (conferenceInfo) {
+        return {
+            alwaysVisible: conferenceInfo.alwaysVisible ?? [ ...CONFERENCE_INFO.alwaysVisible ],
+            autoHide: conferenceInfo.autoHide ?? [ ...CONFERENCE_INFO.autoHide ]
+        };
+    }
+
+    return {
+        ...CONFERENCE_INFO
+    };
+}
+
 /**
  * Constructs a new config {@code Object}, if necessary, out of a specific
  * config {@code Object} which is in the latest format supported by jitsi-meet.
@@ -194,6 +227,27 @@ function _translateLegacyConfig(oldValue: Object) {
         newValue.toolbarButtons = interfaceConfig.TOOLBAR_BUTTONS;
     }
 
+    const filteredConferenceInfo = Object.keys(CONFERENCE_HEADER_MAPPING).filter(key => oldValue[key]);
+
+    if (filteredConferenceInfo.length) {
+        newValue.conferenceInfo = _getConferenceInfo(oldValue);
+
+        filteredConferenceInfo.forEach(key => {
+            // hideRecordingLabel does not mean not render it at all, but autoHide it
+            if (key === 'hideRecordingLabel') {
+                newValue.conferenceInfo.alwaysVisible
+                    = newValue.conferenceInfo.alwaysVisible.filter(c => !CONFERENCE_HEADER_MAPPING[key].includes(c));
+                newValue.conferenceInfo.autoHide
+                    = _.union(newValue.conferenceInfo.autoHide, CONFERENCE_HEADER_MAPPING[key]);
+            } else {
+                newValue.conferenceInfo.alwaysVisible
+                    = newValue.conferenceInfo.alwaysVisible.filter(c => !CONFERENCE_HEADER_MAPPING[key].includes(c));
+                newValue.conferenceInfo.autoHide
+                    = newValue.conferenceInfo.autoHide.filter(c => !CONFERENCE_HEADER_MAPPING[key].includes(c));
+            }
+        });
+    }
+
     if (!oldValue.connectionIndicators
             && typeof interfaceConfig === 'object'
             && (interfaceConfig.hasOwnProperty('CONNECTION_INDICATOR_DISABLED')

react/features/conference/components/constants.js

@@ -0,0 +1,12 @@
+export const CONFERENCE_INFO = {
+    alwaysVisible: [ 'recording', 'local-recording' ],
+    autoHide: [
+        'subject',
+        'conference-timer',
+        'participants-count',
+        'e2ee',
+        'transcribing',
+        'video-quality',
+        'insecure-room'
+    ]
+};

react/features/conference/components/functions.js

@@ -0,0 +1,22 @@
+// @flow
+
+import { CONFERENCE_INFO } from './constants';
+
+/**
+ * Retrieves the conference info labels based on config values and defaults.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {Object} The conferenceInfo object.
+ */
+export const getConferenceInfo = (state: Object) => {
+    const { conferenceInfo } = state['features/base/config'];
+
+    if (conferenceInfo) {
+        return {
+            alwaysVisible: conferenceInfo.alwaysVisible ?? CONFERENCE_INFO.alwaysVisible,
+            autoHide: conferenceInfo.autoHide ?? CONFERENCE_INFO.autoHide
+        };
+    }
+
+    return CONFERENCE_INFO;
+};