fix(filmstrip) Fix resizable filmstrip with shared video (#11124)

Calculate shared video width with the filmstrip width
Make resizable filmstrip mouseup event work with shared video iframe

react/features/filmstrip/actionTypes.js

@@ -109,3 +109,12 @@ export const SET_FILMSTRIP_WIDTH = 'SET_FILMSTRIP_WIDTH';
  * }
  */
 export const SET_USER_FILMSTRIP_WIDTH = 'SET_USER_FILMSTRIP_WIDTH';
+
+/**
+ * The type of action which sets whether the user is resizing or not.
+ * {
+ *      type: SET_USER_IS_RESIZING,
+ *      resizing: boolean
+ * }
+ */
+export const SET_USER_IS_RESIZING = 'SET_USER_IS_RESIZING';

react/features/filmstrip/actions.web.js

@@ -10,6 +10,7 @@ import {
     SET_HORIZONTAL_VIEW_DIMENSIONS,
     SET_TILE_VIEW_DIMENSIONS,
     SET_USER_FILMSTRIP_WIDTH,
+    SET_USER_IS_RESIZING,
     SET_VERTICAL_VIEW_DIMENSIONS,
     SET_VOLUME
 } from './actionTypes';
@@ -242,3 +243,16 @@ export function setUserFilmstripWidth(width: number) {
         width
     };
 }
+
+/**
+ * Sets whether the user is resizing or not.
+ *
+ * @param {boolean} resizing - Whether the user is resizing or not.
+ * @returns {Object}
+ */
+export function setUserIsResizing(resizing: boolean) {
+    return {
+        type: SET_USER_IS_RESIZING,
+        resizing
+    };
+}

react/features/filmstrip/components/web/Filmstrip.js

@@ -21,7 +21,12 @@ import { shouldHideSelfView } from '../../../base/settings/functions.any';
 import { showToolbox } from '../../../toolbox/actions.web';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';
 import { LAYOUTS, getCurrentLayout } from '../../../video-layout';
-import { setFilmstripVisible, setVisibleRemoteParticipants, setUserFilmstripWidth } from '../../actions';
+import {
+    setFilmstripVisible,
+    setVisibleRemoteParticipants,
+    setUserFilmstripWidth,
+    setUserIsResizing
+} from '../../actions';
 import {
     ASPECT_RATIO_BREAKPOINT,
     DEFAULT_FILMSTRIP_WIDTH,
@@ -378,6 +383,7 @@ class Filmstrip extends PureComponent <Props, State> {
             mousePosition: e.clientX,
             dragFilmstripWidth: this.props._verticalFilmstripWidth || DEFAULT_FILMSTRIP_WIDTH
         });
+        this.props.dispatch(setUserIsResizing(true));
     }
 
     _onDragMouseUp: () => void;
@@ -392,6 +398,7 @@ class Filmstrip extends PureComponent <Props, State> {
             this.setState({
                 isMouseDown: false
             });
+            this.props.dispatch(setUserIsResizing(false));
         }
     }
 

react/features/filmstrip/reducer.js

@@ -11,6 +11,7 @@ import {
     SET_REMOTE_PARTICIPANTS,
     SET_TILE_VIEW_DIMENSIONS,
     SET_USER_FILMSTRIP_WIDTH,
+    SET_USER_IS_RESIZING,
     SET_VERTICAL_VIEW_DIMENSIONS,
     SET_VISIBLE_REMOTE_PARTICIPANTS,
     SET_VOLUME
@@ -33,6 +34,14 @@ const DEFAULT_STATE = {
      */
     horizontalViewDimensions: {},
 
+    /**
+     * Whether or not the user is actively resizing the filmstrip.
+     *
+     * @public
+     * @type {boolean}
+     */
+    isResizing: false,
+
     /**
      * The custom audio volume levels per participant.
      *
@@ -208,6 +217,12 @@ ReducerRegistry.register(
                 }
             };
         }
+        case SET_USER_IS_RESIZING: {
+            return {
+                ...state,
+                isResizing: action.resizing
+            };
+        }
         }
 
         return state;

react/features/shared-video/components/web/SharedVideo.js

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import Filmstrip from '../../../../../modules/UI/videolayout/Filmstrip';
 import { getLocalParticipant } from '../../../base/participants';
 import { connect } from '../../../base/redux';
+import { getVerticalViewMaxWidth } from '../../../filmstrip/functions.web';
 import { getToolboxHeight } from '../../../toolbox/functions.web';
 
 import VideoManager from './VideoManager';
@@ -29,11 +30,21 @@ type Props = {
      */
     filmstripVisible: boolean,
 
+    /**
+     * The width of the vertical filmstrip.
+     */
+    filmstripWidth: number,
+
     /**
      * Is the video shared by the local user.
      */
     isOwner: boolean,
 
+    /**
+     * Whether or not the user is actively resizing the filmstrip.
+     */
+    isResizing: boolean,
+
     /**
      * The shared video url.
      */
@@ -56,14 +67,14 @@ class SharedVideo extends Component<Props> {
      * }}
      */
     getDimensions() {
-        const { clientHeight, clientWidth, filmstripVisible } = this.props;
+        const { clientHeight, clientWidth, filmstripVisible, filmstripWidth } = this.props;
 
         let width;
         let height;
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             if (filmstripVisible) {
-                width = `${clientWidth - Filmstrip.getVerticalFilmstripWidth()}px`;
+                width = `${clientWidth - filmstripWidth}px`;
             } else {
                 width = `${clientWidth}px`;
             }
@@ -109,8 +120,8 @@ class SharedVideo extends Component<Props> {
      * @returns {React$Element}
      */
     render() {
-        const { isOwner } = this.props;
-        const className = isOwner ? '' : 'disable-pointer';
+        const { isOwner, isResizing } = this.props;
+        const className = !isResizing && isOwner ? '' : 'disable-pointer';
 
         return (
             <div
@@ -134,7 +145,7 @@ class SharedVideo extends Component<Props> {
 function _mapStateToProps(state) {
     const { ownerId, videoUrl } = state['features/shared-video'];
     const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
-    const { visible } = state['features/filmstrip'];
+    const { visible, isResizing } = state['features/filmstrip'];
 
     const localParticipant = getLocalParticipant(state);
 
@@ -142,7 +153,9 @@ function _mapStateToProps(state) {
         clientHeight,
         clientWidth,
         filmstripVisible: visible,
+        filmstripWidth: getVerticalViewMaxWidth(state),
         isOwner: ownerId === localParticipant?.id,
+        isResizing,
         videoUrl
     };
 }