Adding responsive to jitsi logo, buttons and hiding some part of the interface (#7380)

* Adding responsive to jitsi logo, buttons and hiding some part of the interface
* moving media types thresholds to variables and apply only to screen
* hide chrome extension banner on very small view
* Hide filmstrip only on desktop narrow windows

css/_responsive.scss

@@ -0,0 +1,70 @@
+@media only screen and (max-width: $smallScreen) {
+    .watermark {
+        width: 20%;
+        height: 20%;
+    }
+
+    .new-toolbox {
+        .toolbox-content {
+            .button-group-center, .button-group-left, .button-group-right {
+                .toolbox-button {
+                    .toolbox-icon {
+                        width: 28px;
+                        height: 28px;
+                        svg {
+                            width: 18px;
+                            height: 18px;
+                        }
+                    }
+
+                    &:nth-child(2) {
+                        .toolbox-icon {
+                            width: 30px;
+                            height: 30px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: $verySmallScreen) {
+    #videoResolutionLabel {
+        display: none;
+    }
+    .desktop-browser {
+        .vertical-filmstrip .filmstrip {
+            display: none;
+        }
+    }
+    .new-toolbox {
+        .toolbox-content {
+            .button-group-center, .button-group-left, .button-group-right {
+                .settings-button-small-icon {
+                    display: none;
+                }
+                .toolbox-button {
+                    .toolbox-icon {
+                        width: 18px;
+                        height: 18px;
+                        svg {
+                            width: 12px;
+                            height: 12px;
+                        }
+                    }
+
+                    &:nth-child(2) {
+                        .toolbox-icon {
+                            width: 20px;
+                            height: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .chrome-extension-banner {
+        display: none;
+    }
+}

css/_variables.scss

@@ -269,3 +269,9 @@ $chromeExtensionBannerTop: 80px;
 $chromeExtensionBannerRight: 16px;
 $chromeExtensionBannerTopInMeeting: 10px;
 $chromeExtensionBannerRightInMeeeting: 10px;
+
+/**
+* media type thresholds
+*/
+$smallScreen: 700px;
+$verySmallScreen: 500px;

css/main.scss

@@ -101,5 +101,6 @@ $flagsImagePath: "../images/";
 @import 'modals/security/security';
 @import 'premeeting-screens';
 @import 'e2ee';
+@import 'responsive';
 
 /* Modules END */

modules/UI/UI.js

@@ -6,6 +6,7 @@ const UI = {};
 import EventEmitter from 'events';
 import Logger from 'jitsi-meet-logger';
 
+import { isMobileBrowser } from '../../react/features/base/environment/utils';
 import { getLocalParticipant } from '../../react/features/base/participants';
 import { toggleChat } from '../../react/features/chat';
 import { setDocumentUrl } from '../../react/features/etherpad';
@@ -154,6 +155,12 @@ UI.start = function() {
 
     sharedVideoManager = new SharedVideoManager(eventEmitter);
 
+    if (isMobileBrowser()) {
+        $('body').addClass('mobile-browser');
+    } else {
+        $('body').addClass('desktop-browser');
+    }
+
     if (interfaceConfig.filmStripOnly) {
         $('body').addClass('filmstrip-only');
         APP.store.dispatch(setNotificationsEnabled(false));

react/features/toolbox/components/web/Toolbox.js

@@ -1209,13 +1209,27 @@ class Toolbox extends Component<Props, State> {
         const buttonsLeft = [];
         const buttonsRight = [];
 
+        const smallThreshold = 700;
+        const verySmallThreshold = 500;
+
+        let minSpaceBetweenButtons = 48;
+        let widthPlusPaddingOfButton = 56;
+
+        if (this.state.windowWidth <= verySmallThreshold) {
+            minSpaceBetweenButtons = 26;
+            widthPlusPaddingOfButton = 28;
+        } else if (this.state.windowWidth <= smallThreshold) {
+            minSpaceBetweenButtons = 36;
+            widthPlusPaddingOfButton = 40;
+        }
+
         const maxNumberOfButtonsPerGroup = Math.floor(
             (
                 this.state.windowWidth
                     - 168 // the width of the central group by design
-                    - 48 // the minimum space between the button groups
+                    - minSpaceBetweenButtons // the minimum space between the button groups
             )
-            / 56 // the width + padding of a button
+            / widthPlusPaddingOfButton // the width + padding of a button
             / 2 // divide by the number of groups(left and right group)
         );
 
@@ -1232,7 +1246,7 @@ class Toolbox extends Component<Props, State> {
         if (this._shouldShowButton('closedcaptions')) {
             buttonsLeft.push('closedcaptions');
         }
-        if (overflowHasItems) {
+        if (overflowHasItems && this.state.windowWidth >= verySmallThreshold) {
             buttonsRight.push('overflowmenu');
         }
         if (this._shouldShowButton('invite')) {
@@ -1255,13 +1269,13 @@ class Toolbox extends Component<Props, State> {
             movedButtons.push(...buttonsLeft.splice(
                 maxNumberOfButtonsPerGroup,
                 buttonsLeft.length - maxNumberOfButtonsPerGroup));
-            if (buttonsRight.indexOf('overflowmenu') === -1) {
+            if (buttonsRight.indexOf('overflowmenu') === -1 && this.state.windowWidth >= verySmallThreshold) {
                 buttonsRight.unshift('overflowmenu');
             }
         }
 
         if (buttonsRight.length > maxNumberOfButtonsPerGroup) {
-            if (buttonsRight.indexOf('overflowmenu') === -1) {
+            if (buttonsRight.indexOf('overflowmenu') === -1 && this.state.windowWidth >= verySmallThreshold) {
                 buttonsRight.unshift('overflowmenu');
             }
 
@@ -1332,7 +1346,7 @@ class Toolbox extends Component<Props, State> {
                             tooltip = { t('toolbar.invite') } /> }
                     { buttonsRight.indexOf('security') !== -1
                         && <SecurityDialogButton customClass = 'security-toolbar-button' /> }
-                    { buttonsRight.indexOf('overflowmenu') !== -1
+                    { buttonsRight.indexOf('overflowmenu') !== -1 && this.state.windowWidth >= verySmallThreshold
                         && <OverflowMenuButton
                             isOpen = { _overflowMenuVisible }
                             onVisibilityChange = { this._onSetOverflowVisible }>