From 096ba054db4dd45a5b82f256914c7d289fe62007 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Mon, 14 Mar 2022 13:11:22 +0200 Subject: [PATCH] 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 | 9 ++++++++ react/features/filmstrip/actions.web.js | 14 +++++++++++ .../filmstrip/components/web/Filmstrip.js | 9 +++++++- react/features/filmstrip/reducer.js | 15 ++++++++++++ .../components/web/SharedVideo.js | 23 +++++++++++++++---- 5 files changed, 64 insertions(+), 6 deletions(-) diff --git a/react/features/filmstrip/actionTypes.js b/react/features/filmstrip/actionTypes.js index 194d66a3a..0ae83cf0b 100644 --- a/react/features/filmstrip/actionTypes.js +++ b/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'; diff --git a/react/features/filmstrip/actions.web.js b/react/features/filmstrip/actions.web.js index d4287129a..774343d60 100644 --- a/react/features/filmstrip/actions.web.js +++ b/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 + }; +} diff --git a/react/features/filmstrip/components/web/Filmstrip.js b/react/features/filmstrip/components/web/Filmstrip.js index e976f6557..25b851bc7 100644 --- a/react/features/filmstrip/components/web/Filmstrip.js +++ b/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 { 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 { this.setState({ isMouseDown: false }); + this.props.dispatch(setUserIsResizing(false)); } } diff --git a/react/features/filmstrip/reducer.js b/react/features/filmstrip/reducer.js index ff299c70a..961e2e4a2 100644 --- a/react/features/filmstrip/reducer.js +++ b/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; diff --git a/react/features/shared-video/components/web/SharedVideo.js b/react/features/shared-video/components/web/SharedVideo.js index cdc1efc58..3bac8ac2a 100644 --- a/react/features/shared-video/components/web/SharedVideo.js +++ b/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 { * }} */ 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 { * @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 (
{ 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 }; }