fix(prejoin_page) Add labels for video & more UI fixes

css/_atlaskit_overrides.scss

@@ -48,19 +48,3 @@
 .toolbox-button-wth-dialog .eYJELv {
     max-height: initial;
 }
-
-/**
- * Override @atlaskit/InlineDialog styling for the video preview
- */
-.video-preview .eYJELv {
-    outline: none;
-    padding: 16px;
-}
-
-/**
- * Override @atlaskit/InlineDialog styling for the audio preview
- */
-.audio-preview .eYJELv {
-    outline: none;
-    padding: 0;
-}

css/_audio-preview.css

@@ -121,4 +121,10 @@
         right: 16px;
         top: 18px;
     }
+
+   // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
+        padding: 0;
+    }
 }

css/_meter.css

@@ -3,21 +3,21 @@
         display: inline-block;
 
         & > svg {
-            fill: #76CF9C;
+            fill: #4E5E6C;
             width: 38px;
         }
     }
 
     &.metr--disabled {
         & > svg {
-            fill: #5E6D7A;
+            fill: #4E5E6C;
         }
     }
 }
 
 .metr-l-0 {
     rect:first-child {
-        fill: #279255;
+        fill: #31B76A;
     }
 }
 
@@ -26,8 +26,5 @@
         rect:nth-child(-n+#{$i+1}) {
             fill: #31B76A;
         }
-        rect:first-child {
-            fill: #279255;
-        }
     }
 }

css/_settings-button.scss

@@ -50,15 +50,11 @@
         bottom: 0;
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
         cursor: pointer;
-        height: 18px;
+        height: 16px;
         position: absolute;
         text-align: center;
-        right: 2px;
-        width: 18px;
-
-        &:hover {
-            background-color: #daebfa;
-        }
+        right: 4px;
+        width: 16px;
 
         &> svg {
             margin-top: 5px;
@@ -67,9 +63,16 @@
         &--disabled {
             background-color: #a4b8d1;
             cursor: default;
+        }
 
-            &:hover {
-                background-color: #a4b8d1;
+        &--hovered {
+            bottom: -1px;
+            height: 20px;
+            right: 2px;
+            width: 20px;
+
+            &> svg {
+                margin-top: 6px;
             }
         }
     }

css/_video-preview.css

@@ -1,4 +1,7 @@
 .video-preview {
+    max-height: 290px;
+    overflow: auto;
+
     &-entry {
         cursor: pointer;
         height: 135px;
@@ -40,4 +43,23 @@
         position: absolute;
         width: 100%;
     }
+
+    &-label {
+        color: #fff;
+        font-size: 13px;
+        line-height: 20px;
+        overflow: hidden;
+        padding: 8px;
+        position: absolute;
+        text-align: center;
+        text-overflow: ellipsis;
+        width: 220px;
+        z-index: 2;
+    }
+
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div > div:nth-child(2) > div > div {
+        outline: none;
+        padding: 16px;
+    }
 }

lang/main.json

@@ -525,6 +525,7 @@
         "followMe": "Everyone follows me",
         "language": "Language",
         "loggedIn": "Logged in as {{name}}",
+        "microphones": "Microphones",
         "moderator": "Moderator",
         "more": "More",
         "name": "Name",

react/features/base/toolbox/components/ToolboxButtonWithIcon.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { Component } from 'react';
 import { Icon } from '../../icons';
 
 type Props = {
@@ -29,38 +29,109 @@ type Props = {
      * Additional styles.
      */
     styles?: Object,
-}
+};
+
+type State = {
+
+    /**
+     * Whether the button is hovered or not.
+     */
+    isHovered: boolean,
+};
 
 /**
  * Displayes the `ToolboxButtonWithIcon` component.
  *
  * @returns {ReactElement}
  */
-export default function ToolboxButtonWithIcon({
-    children,
-    icon,
-    iconDisabled,
-    onIconClick,
-    styles
-}: Props) {
-    const iconProps = {};
+export default class ToolboxButtonWithIcon extends Component<Props, State> {
 
-    if (iconDisabled) {
-        iconProps.className = 'settings-button-small-icon settings-button-small-icon--disabled';
-    } else {
-        iconProps.className = 'settings-button-small-icon';
-        iconProps.onClick = onIconClick;
+    /**
+     * Initializes a new {@code ToolboxButtonWithIcon} instance.
+     *
+     * @param {Props} props - The props of the component.
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            isHovered: false
+        };
+        this._onMouseEnter = this._onMouseEnter.bind(this);
+        this._onMouseLeave = this._onMouseLeave.bind(this);
     }
 
-    return (
-        <div
-            className = 'settings-button-container'
-            styles = { styles }>
-            { children }
-            <Icon
-                { ...iconProps }
-                size = { 9 }
-                src = { icon } />
-        </div>
-    );
+    _onMouseEnter: () => void;
+
+    /**
+     * Handler for when the small button has the mouse over.
+     *
+     * @returns {void}.
+     */
+    _onMouseEnter() {
+        this.setState({
+            isHovered: true
+        });
+    }
+
+    _onMouseLeave: () => void;
+
+    /**
+     * Handler for when the mouse leaves the small button.
+     *
+     * @returns {void}
+     */
+    _onMouseLeave() {
+        this.setState({
+            isHovered: false
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {React$Node}
+     */
+    render() {
+        const {
+            children,
+            icon,
+            iconDisabled,
+            onIconClick,
+            styles
+        } = this.props;
+
+        const iconProps = {};
+        let size = 9;
+
+        if (iconDisabled) {
+            iconProps.className
+                = 'settings-button-small-icon settings-button-small-icon--disabled';
+        } else {
+            iconProps.className = 'settings-button-small-icon';
+            iconProps.onClick = onIconClick;
+
+            if (this.state.isHovered) {
+                iconProps.className = `${iconProps.className} settings-button-small-icon--hovered`;
+                size = 11;
+            }
+        }
+
+        return (
+            <div
+                className = 'settings-button-container'
+                styles = { styles }>
+                {children}
+                <div
+                    onMouseEnter = { this._onMouseEnter }
+                    onMouseLeave = { this._onMouseLeave }>
+                    <Icon
+                        { ...iconProps }
+                        size = { size }
+                        src = { icon } />
+                </div>
+            </div>
+        );
+    }
 }

react/features/settings/components/web/SettingsDialog.js

@@ -127,11 +127,9 @@ class SettingsDialog extends Component<Props> {
 function _mapStateToProps(state) {
     const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
     const jwt = state['features/base/jwt'];
-    const { prejoinPageEnabled } = state['features/base/config'];
 
     // The settings sections to display.
-    const showDeviceSettings = !prejoinPageEnabled
-          && configuredTabs.includes('devices');
+    const showDeviceSettings = configuredTabs.includes('devices');
     const moreTabProps = getMoreTabProps(state);
     const { showModeratorSettings, showLanguageSettings } = moreTabProps;
     const showProfileSettings

react/features/settings/components/web/audio/AudioSettingsContent.js

@@ -243,7 +243,7 @@ class AudioSettingsContent extends Component<Props, State> {
                 <div className = 'audio-preview-content'>
                     <AudioSettingsHeader
                         IconComponent = { IconMicrophoneEmpty }
-                        text = { t('settings.selectMic') } />
+                        text = { t('settings.microphones') } />
                     {microphoneDevices.map((data, i) =>
                         this._renderMicrophoneEntry(data, i),
                     )}

react/features/settings/components/web/video/VideoSettingsContent.js

@@ -153,6 +153,7 @@ class VideoSettingsContent extends Component<Props, State> {
             className,
             key
         };
+        const label = jitsiTrack && jitsiTrack.getTrackLabel();
 
         if (isSelected) {
             props.className = `${className} video-preview-entry--selected`;
@@ -162,6 +163,7 @@ class VideoSettingsContent extends Component<Props, State> {
 
         return (
             <div { ...props }>
+                <div className = 'video-preview-label'>{label}</div>
                 <div className = 'video-preview-overlay' />
                 <Video
                     className = { videoClassName }
@@ -209,7 +211,7 @@ class VideoSettingsContent extends Component<Props, State> {
         const { trackData } = this.state;
 
         return (
-            <div>
+            <div className = 'video-preview'>
                 {trackData.map((data, i) => this._renderPreviewEntry(data, i))}
             </div>
         );