fix(vertical-filmstrip): prevent shared videos from displaying under avatars

- Modify Etherpad and SharedVideo so their resizing takes into account
  the width of the filmstrip in vertical filmstrip mode.
- Modify Filmstrip's getFilmstripWidth to account for when the filmstrip
  is hidden.
- modify VideoContainer so in vertical filmstrip mode it centers the
  shared desktop stream in the middle of the available space not taken
  by filmstrip.
- Also allow clickthrough on the secondary toolbar itself while still
  allowing clicks on the toolbar's buttons. This allows clicks on
  shared videos to go through.

css/_toolbars.scss

@@ -186,6 +186,7 @@
         justify-content: flex-start;
         left: 0;
         padding-top: 24px;
+        pointer-events: none;
         top: 0;
         transform: translateX(-100%);
         width: $defaultToolbarSize;
@@ -197,6 +198,10 @@
             line-height: $secToolbarLineHeight;
         }
 
+        > * {
+            pointer-events: auto
+        }
+
         .button.toggled:not(.icon-raised-hand):not(.button-active) {
             background: $secondaryToolbarBg;
             cursor: pointer;

css/_vertical_filmstrip_overrides.scss

@@ -14,6 +14,11 @@
         min-width: 0;
     }
 
+    #etherpad,
+    #sharedvideo {
+        text-align: left;
+    }
+
     .filmstrip {
         align-items: flex-end;
         box-sizing: border-box;

modules/UI/etherpad/Etherpad.js

@@ -1,4 +1,4 @@
-/* global $ */
+/* global $, interfaceConfig */
 
 import VideoLayout from '../videolayout/VideoLayout';
 import LargeContainer from '../videolayout/LargeContainer';
@@ -123,8 +123,15 @@ class Etherpad extends LargeContainer {
      *
      */
     resize(containerWidth, containerHeight) {
-        const height = containerHeight - Filmstrip.getFilmstripHeight();
+        let height, width;
-        const width = containerWidth;
+
+        if (interfaceConfig.VERTICAL_FILMSTRIP) {
+            height = containerHeight;
+            width = containerWidth - Filmstrip.getFilmstripWidth();
+        } else {
+            height = containerHeight - Filmstrip.getFilmstripHeight();
+            width = containerWidth;
+        }
 
         $(this.iframe)
             .width(width)

modules/UI/shared_video/SharedVideo.js

@@ -1,4 +1,6 @@
-/* global $, APP, YT, onPlayerReady, onPlayerStateChange, onPlayerError */
+/* global $, APP, YT, interfaceConfig, onPlayerReady, onPlayerStateChange,
+onPlayerError */
+
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 import UIUtil from '../util/UIUtil';
@@ -681,9 +683,15 @@ class SharedVideoContainer extends LargeContainer {
      *
      */
     resize(containerWidth, containerHeight) {
-        const height = containerHeight - Filmstrip.getFilmstripHeight();
+        let height, width;
 
-        const width = containerWidth;
+        if (interfaceConfig.VERTICAL_FILMSTRIP) {
+            height = containerHeight;
+            width = containerWidth - Filmstrip.getFilmstripWidth();
+        } else {
+            height = containerHeight - Filmstrip.getFilmstripHeight();
+            width = containerWidth;
+        }
 
         this.$iframe.width(width).height(height);
     }

modules/UI/videolayout/Filmstrip.js

@@ -200,7 +200,18 @@ const Filmstrip = {
         }
 
         return 0;
+    },
 
+    /**
+     * Returns the width of filmstip
+     * @returns {number} width
+     */
+    getFilmstripWidth() {
+        return this.isFilmstripVisible()
+            ? this.filmstrip.outerWidth()
+                - parseInt(this.filmstrip.css('paddingLeft'), 10)
+                - parseInt(this.filmstrip.css('paddingRight'), 10)
+            : 0;
     },
 
     /**

modules/UI/videolayout/VideoContainer.js

@@ -33,8 +33,13 @@ function computeDesktopVideoSize( // eslint-disable-line max-params
     let availableWidth = Math.max(videoWidth, videoSpaceWidth);
     let availableHeight = Math.max(videoHeight, videoSpaceHeight);
 
-    // eslint-disable-next-line no-param-reassign
+    if (interfaceConfig.VERTICAL_FILMSTRIP) {
-    videoSpaceHeight -= Filmstrip.getFilmstripHeight();
+        // eslint-disable-next-line no-param-reassign
+        videoSpaceWidth -= Filmstrip.getFilmstripWidth();
+    } else {
+        // eslint-disable-next-line no-param-reassign
+        videoSpaceHeight -= Filmstrip.getFilmstripHeight();
+    }
 
     if (availableWidth / aspectRatio >= videoSpaceHeight) {
         availableHeight = videoSpaceHeight;
@@ -334,9 +339,15 @@ export class VideoContainer extends LargeContainer {
     getVideoPosition(width, height, containerWidth, containerHeight) {
         /* eslint-enable max-params */
         if (this.stream && this.isScreenSharing()) {
+            let availableContainerWidth = containerWidth;
+
+            if (interfaceConfig.VERTICAL_FILMSTRIP) {
+                availableContainerWidth -= Filmstrip.getFilmstripWidth();
+            }
+
             return getDesktopVideoPosition(width,
                 height,
-                containerWidth,
+                availableContainerWidth,
                 containerHeight);
         }