Merge pull request #13015 from KDSBrowne/bbb-media-menu

Update Media Selection Dropdown to Menu

bigbluebutton-html5/imports/ui/components/audio/audio-controls/input-stream-live-selector/component.jsx

@@ -5,9 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import Button from '/imports/ui/components/button/component';
 import ButtonEmoji from '/imports/ui/components/button/button-emoji/ButtonEmoji';
-import Dropdown from '/imports/ui/components/dropdown/component';
+import BBBMenu from '/imports/ui/components/menu/component';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
-import cx from 'classnames';
 
 import { styles } from '../styles';
 
@@ -62,7 +61,6 @@ class InputStreamLiveSelector extends Component {
     if (deviceName && (deviceName.length <= DEVICE_LABEL_MAX_LENGTH)) {
       return deviceName;
     }
-
     return `${deviceName.substring(0, DEVICE_LABEL_MAX_LENGTH - 3)}...`;
   }
 
@@ -214,45 +212,37 @@ class InputStreamLiveSelector extends Component {
     const {
       intl,
     } = this.props;
-
-    const listLenght = list ? list.length : -1;
-
+    const listLength = list ? list.length : -1;
     const listTitle = [
-      <Dropdown.DropdownListTitle key={`audioDeviceList-${deviceKind}`}>
-        {title}
-      </Dropdown.DropdownListTitle>,
+      {
+        key: `audioDeviceList-${deviceKind}`,
+        label: title,
+        disabled: true,
+        dividerTop: (!renderSeparator),
+        onClick: () => {},
+      },
     ];
-
-    const deviceList = (listLenght > 0)
+    const deviceList = (listLength > 0)
       ? list.map((device) => (
-        <Dropdown.DropdownListItem
-          key={`${device.deviceId}-${deviceKind}`}
-          label={InputStreamLiveSelector.truncateDeviceName(device.label)}
-          onClick={() => this.onDeviceListClick(device.deviceId, deviceKind,
-            callback)}
-          className={(device.deviceId === currentDeviceId)
-            ? styles.selectedDevice : ''}
-        />
+        {
+          key: `${device.deviceId}-${deviceKind}`,
+          label: InputStreamLiveSelector.truncateDeviceName(device.label),
+          className: (device.deviceId === currentDeviceId) ? styles.selectedDevice : '',
+          iconRight: (device.deviceId === currentDeviceId) ? 'check' : null,
+          onClick: () => this.onDeviceListClick(device.deviceId, deviceKind, callback),
+        }
       ))
       : [
-        <Dropdown.DropdownListItem
-          key={`noDeviceFoundKey-${deviceKind}-`}
-          className={styles.disableDeviceSelection}
-          label={
-            listLenght < 0
-              ? intl.formatMessage(intlMessages.loading)
-              : intl.formatMessage(intlMessages.noDeviceFound)
-          }
-        />,
+        {
+          key: `noDeviceFoundKey-${deviceKind}-`,
+          label: listLength < 0
+            ? intl.formatMessage(intlMessages.loading)
+            : intl.formatMessage(intlMessages.noDeviceFound),
+          className: styles.disableDeviceSelection,
+          onClick: () => {},
+        },
       ];
-
-    const listSeparator = [
-      <Dropdown.DropdownListSeparator key={`audioDeviceListSeparator-${deviceKind}`} />,
-    ];
-
-    return listTitle.concat(deviceList).concat(
-      renderSeparator ? listSeparator : [],
-    );
+    return listTitle.concat(deviceList);
   }
 
   render() {
@@ -295,33 +285,33 @@ class InputStreamLiveSelector extends Component {
     const dropdownListComplete = inputDeviceList.concat(outputDeviceList);
 
     return (
-      <Dropdown>
-        <Dropdown.DropdownTrigger>
-          <Button
-            aria-label={intl.formatMessage(intlMessages.leaveAudio)}
-            label={intl.formatMessage(intlMessages.leaveAudio)}
-            accessKey={shortcuts.leaveaudio}
-            hideLabel
-            color="primary"
-            icon={isListenOnly ? 'listen' : 'audio_on'}
-            size="lg"
-            circle
-            onClick={() => handleLeaveAudio()}
-          >
+      <BBBMenu
+        trigger={(
+          <>
+            <Button
+              aria-label={intl.formatMessage(intlMessages.leaveAudio)}
+              label={intl.formatMessage(intlMessages.leaveAudio)}
+              accessKey={shortcuts.leaveaudio}
+              hideLabel
+              color="primary"
+              icon={isListenOnly ? 'listen' : 'audio_on'}
+              size="lg"
+              circle
+              onClick={(e) => {
+                e.stopPropagation();
+                handleLeaveAudio();
+              }}
+            />
             <ButtonEmoji
               emoji="device_list_selector"
               label={intl.formatMessage(intlMessages.changeAudioDevice)}
+              hideLabel
+              tabIndex={0}
             />
-          </Button>
-        </Dropdown.DropdownTrigger>
-        <Dropdown.DropdownContent className={styles.dropdownContent}>
-          <Dropdown.DropdownList
-            className={cx(styles.scrollableList, styles.dropdownListContainer)}
-          >
-            {dropdownListComplete}
-          </Dropdown.DropdownList>
-        </Dropdown.DropdownContent>
-      </Dropdown>
+          </>
+        )}
+        actions={dropdownListComplete}
+      />
     );
   }
 }

bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss

@@ -4,6 +4,11 @@
 .container {
   display: flex;
   flex-flow: row;
+  position: relative;
+
+  > div {
+    position: relative;
+  }
 
   .muteToggle {
     margin-right: var(--sm-padding-x);
@@ -94,5 +99,5 @@
 }
 
 .selectedDevice {
-  font-weight: bold;
+  font-weight: bold !important;
 }

bigbluebutton-html5/imports/ui/components/button/button-emoji/ButtonEmoji.jsx

@@ -19,21 +19,34 @@ const propTypes = {
   onKeyDown: PropTypes.func,
 
   onFocus: PropTypes.func,
+
+  tabIndex: PropTypes.number,
+
+  hideLabel: PropTypes.bool,
 };
 
 const defaultProps = {
   emoji: '',
   label: '',
-  onClick: null,
   onKeyDown: null,
   onFocus: null,
+  tabIndex: -1,
+  hideLabel: false,
+  onClick: null,
 };
 
 const ButtonEmoji = (props) => {
+  const {
+    hideLabel,
+    ...newProps
+  } = props;
+
   const {
     emoji,
     label,
-  } = props;
+    tabIndex,
+    onClick,
+  } = newProps;
 
   const IconComponent = (
     <Icon
@@ -45,16 +58,19 @@ const ButtonEmoji = (props) => {
   return (
     <span>
       <TooltipContainer title={label}>
-        <div
-          tabIndex={-1}
-          {...props}
+        <button
+          type="button"
+          tabIndex={tabIndex}
+          {...newProps}
           className={styles.emojiButton}
+          aria-label={label}
+          onClick={onClick}
         >
           <span className={styles.label}>
-            {label}
+            { !hideLabel && label }
             { IconComponent }
           </span>
-        </div>
+        </button>
       </TooltipContainer>
     </span>
   );

bigbluebutton-html5/imports/ui/components/button/styles.scss

@@ -219,7 +219,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 0;
 }
 
 .emojiButton {
@@ -232,6 +232,7 @@
   background-color: var(--btn-default-bg);
   overflow: hidden;
   z-index: 2;
+  border: none;
 
   &:hover {
     transform: scale(1.5);

bigbluebutton-html5/imports/ui/components/menu/component.jsx

@@ -93,7 +93,7 @@ class BBBMenu extends React.Component {
     if (wide) menuClasses.push(styles.wide);
 
     return (
-      <div>
+      <>
         <div onClick={this.handleClick} accessKey={this.props?.accessKey}>{trigger}</div>
         <Menu
           {...opts}
@@ -113,7 +113,7 @@ class BBBMenu extends React.Component {
             />
           }
         </Menu>
-      </div>
+      </>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx

@@ -134,6 +134,7 @@ class MutedAlert extends Component {
     const { visible } = this.state;
     const style = {};
     style[styles.alignForMod] = !isViewer || isPresenter;
+    style[styles.alignForViewer] = isViewer;
 
     return visible && muted ? (
       <TooltipContainer

bigbluebutton-html5/imports/ui/components/muted-alert/styles.scss

@@ -1,7 +1,7 @@
 @import "../../stylesheets/variables/breakpoints";
 
 .muteWarning {
-  position: absolute;
+  position: absolute !important;
   color: var(--color-white);
   background-color: var(--color-tip-bg);
   text-align: center;
@@ -9,10 +9,10 @@
   font-size: var(--font-size-xl);
   padding: var(--md-padding-x);
   border-radius: var(--border-radius);
-  top: -50%;
+  top: -100%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 1;
+  z-index: 100;
   cursor: pointer;
 
   > span {
@@ -25,5 +25,18 @@
 }
 
 .alignForMod {
-  left: 52.25%;
+  left: 72.25%;
 }
+
+.alignForViewer {
+  left: 80%;  
+}
+
+.alignForMod, .alignForViewer {
+  [dir="rtl"] & {
+    left: 20%;
+  }  
+  @include mq($medium-only) {
+    font-size: var(--font-size-sm);
+  }
+}