feature(layout) viewers layout

Add a button for viewers to change the layout.

bigbluebutton-html5/client/stylesheets/bbb-icons.css

@@ -194,6 +194,10 @@
   content: "\e963";
 }
 
+/*temporary icon for viwers layout button*/
+.icon-bbb-layouts:before {
+  content: "\e921";
+}
 
 /* Aliases for emoji status */
 .icon-bbb-time:before {

bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

@@ -13,6 +13,7 @@ import { colorPrimary } from '/imports/ui/stylesheets/styled-components/palette'
 import { PANELS, ACTIONS, LAYOUT_TYPE } from '../../layout/enums';
 import { isPresentationEnabled } from '/imports/ui/services/features';
 import {isLayoutsEnabled} from '/imports/ui/services/features';
+import Button from '/imports/ui/components/common/button/component';
 
 const propTypes = {
   amIPresenter: PropTypes.bool.isRequired,
@@ -97,6 +98,10 @@ const intlMessages = defineMessages({
     id: 'app.actionsBar.actionsDropdown.layoutModal',
     description: 'Label for layouts selection button',
   },
+  layoutBtnLabel: {
+    id: 'app.actionsBar.actionsDropdown.layouts',
+    description: 'Label for layouts button',
+  },
 });
 
 const handlePresentationClick = () => Session.set('showUploadPresentationView', true);
@@ -289,6 +294,7 @@ class ActionsDropdown extends PureComponent {
       isMeteorConnected,
       isDropdownOpen,
       isMobile,
+      mountModal,
       isRTL,
     } = this.props;
 
@@ -297,12 +303,29 @@ class ActionsDropdown extends PureComponent {
     const children = availablePresentations.length > 1 && amIPresenter
       ? availablePresentations.concat(availableActions) : availableActions;
 
-    if ((!amIPresenter && !amIModerator)
-      || availableActions.length === 0
+    const customStyles = { top: '-1rem' };
+
+    if (availableActions.length === 0
       || !isMeteorConnected) {
       return null;
     }
-    const customStyles = { top: '-1rem' };
+
+    if (!amIPresenter && !amIModerator) {
+      return (
+        <Button
+          customStyles={!isMobile ? customStyles : null}
+          accessKey={OPEN_ACTIONS_AK}
+          hideLabel
+          aria-label={intl.formatMessage(intlMessages.layoutBtnLabel)}
+          label={intl.formatMessage(intlMessages.layoutBtnLabel)}
+          icon="layouts"
+          color="primary"
+          size="lg"
+          circle
+          onClick={() => mountModal(<LayoutModalContainer />)}
+        />
+      );
+    }
 
     return (
       <BBBMenu

bigbluebutton-html5/public/locales/en.json

@@ -566,6 +566,7 @@
     "app.talkingIndicator.moreThanMaxIndicatorsWereTalking" : "{0}+ were talking",
     "app.talkingIndicator.wasTalking" : "{0} stopped talking",
     "app.actionsBar.actionsDropdown.actionsLabel": "Actions",
+    "app.actionsBar.actionsDropdown.layouts": "Layouts",
     "app.actionsBar.actionsDropdown.presentationLabel": "Upload/Manage presentations",
     "app.actionsBar.actionsDropdown.initPollLabel": "Initiate a poll",
     "app.actionsBar.actionsDropdown.desktopShareLabel": "Share your screen",