fix(Thumbnail, Drawer): Remove hover state; Prevent outside propagation

css/_drawer.scss

@@ -4,16 +4,28 @@
     right: 0;
     bottom: 0;
     z-index: $drawerZ;
-    background-color: #141414;
     border-radius: 16px 16px 0 0;
 }
 
+.drawer-portal::after {
+    content: '';
+    background-color: $participantsPaneBgColor;
+    margin-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.drawer-menu-container {
+    height: 100vh;
+    display: flex;
+    align-items: flex-end;
+}
+
 .drawer-menu {
     max-height: calc(80vh - 64px);
     background: #242528;
     border-radius: 16px 16px 0 0;
     overflow-y: hidden;
     margin-bottom: env(safe-area-inset-bottom, 0);
+    width: 100%;
 
     .drawer-toggle {
         display: flex;

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

@@ -2,10 +2,10 @@
 
 import React, { Component } from 'react';
 
-import { isMobileBrowser } from '../../../../../react/features/base/environment/utils';
 import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics';
 import { AudioLevelIndicator } from '../../../audio-level-indicator';
 import { Avatar } from '../../../base/avatar';
+import { isMobileBrowser } from '../../../base/environment/utils';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
 import {
@@ -139,6 +139,11 @@ export type Props = {|
      */
     _isCurrentlyOnLargeVideo: boolean,
 
+    /**
+     * Whether we are currently running in a mobile browser.
+     */
+    _isMobile: boolean,
+
     /**
      * Indicates whether the participant is screen sharing.
      */
@@ -612,7 +617,7 @@ class Thumbnail extends Component<Props, State> {
      * @returns {ReactElement}
      */
     _renderFakeParticipant() {
-        const { _participant: { avatarURL } } = this.props;
+        const { _isMobile, _participant: { avatarURL } } = this.props;
         const styles = this._getStyles();
         const containerClassName = this._getContainerClassName();
 
@@ -621,8 +626,10 @@ class Thumbnail extends Component<Props, State> {
                 className = { containerClassName }
                 id = 'sharedVideoContainer'
                 onClick = { this._onClick }
-                onMouseEnter = { this._onMouseEnter }
-                onMouseLeave = { this._onMouseLeave }
+                { ...(_isMobile ? {} : {
+                    onMouseEnter: this._onMouseEnter,
+                    onMouseLeave: this._onMouseLeave
+                }) }
                 style = { styles.thumbnail }>
                 {avatarURL ? (
                     <img
@@ -753,6 +760,7 @@ class Thumbnail extends Component<Props, State> {
         const {
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
+            _isMobile,
             _isScreenSharing,
             _localFlipX,
             _disableProfile,
@@ -772,13 +780,17 @@ class Thumbnail extends Component<Props, State> {
                 className = { containerClassName }
                 id = 'localVideoContainer'
                 onClick = { this._onClick }
-                onMouseEnter = { this._onMouseEnter }
-                onMouseLeave = { this._onMouseLeave }
-                { ...(isMobileBrowser() ? {
-                    onTouchEnd: this._onTouchEnd,
-                    onTouchMove: this._onTouchMove,
-                    onTouchStart: this._onTouchStart
-                } : {}) }
+                { ...(_isMobile
+                    ? {
+                        onTouchEnd: this._onTouchEnd,
+                        onTouchMove: this._onTouchMove,
+                        onTouchStart: this._onTouchStart
+                    }
+                    : {
+                        onMouseEnter: this._onMouseEnter,
+                        onMouseLeave: this._onMouseLeave
+                    }
+                ) }
                 style = { styles.thumbnail }>
                 <div className = 'videocontainer__background' />
                 <span id = 'localVideoWrapper'>
@@ -875,6 +887,7 @@ class Thumbnail extends Component<Props, State> {
      */
     _renderRemoteParticipant() {
         const {
+            _isMobile,
             _isTestModeEnabled,
             _participant,
             _startSilent,
@@ -909,13 +922,17 @@ class Thumbnail extends Component<Props, State> {
                 className = { containerClassName }
                 id = { `participant_${id}` }
                 onClick = { this._onClick }
-                onMouseEnter = { this._onMouseEnter }
-                onMouseLeave = { this._onMouseLeave }
-                { ...(isMobileBrowser() ? {
-                    onTouchEnd: this._onTouchEnd,
-                    onTouchMove: this._onTouchMove,
-                    onTouchStart: this._onTouchStart
-                } : {}) }
+                { ...(_isMobile
+                    ? {
+                        onTouchEnd: this._onTouchEnd,
+                        onTouchMove: this._onTouchMove,
+                        onTouchStart: this._onTouchStart
+                    }
+                    : {
+                        onMouseEnter: this._onMouseEnter,
+                        onMouseLeave: this._onMouseLeave
+                    }
+                ) }
                 style = { styles.thumbnail }>
                 {
                     _videoTrack && <VideoTrack
@@ -1031,6 +1048,7 @@ function _mapStateToProps(state, ownProps): Object {
     } = state['features/base/config'];
     const { NORMAL = 8 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
     const { localFlipX } = state['features/base/settings'];
+    const _isMobile = isMobileBrowser();
 
 
     switch (_currentLayout) {
@@ -1072,7 +1090,7 @@ function _mapStateToProps(state, ownProps): Object {
     return {
         _audioTrack,
         _connectionIndicatorAutoHideEnabled: interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
-        _connectionIndicatorDisabled: isMobileBrowser() || interfaceConfig.CONNECTION_INDICATOR_DISABLED,
+        _connectionIndicatorDisabled: _isMobile || interfaceConfig.CONNECTION_INDICATOR_DISABLED,
         _currentLayout,
         _defaultLocalDisplayName: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
         _disableLocalVideoFlip: Boolean(disableLocalVideoFlip),
@@ -1081,6 +1099,7 @@ function _mapStateToProps(state, ownProps): Object {
         _isAudioOnly: Boolean(state['features/base/audio-only'].enabled),
         _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,
         _isDominantSpeakerDisabled: interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR,
+        _isMobile,
         _isScreenSharing: _videoTrack?.videoType === 'desktop',
         _isTestModeEnabled: isTestModeEnabled(state),
         _isVideoPlayable: id && isVideoPlayable(state, id),

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

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback } from 'react';
 
 
 type Props = {
@@ -30,36 +30,38 @@ function Drawer({
     children,
     isOpen,
     onClose }: Props) {
-    const drawerRef: Object = useRef(null);
 
     /**
-     * Closes the drawer when clicking or touching outside of it.
+     * Handles clicks within the menu, preventing the propagation of the click event.
      *
-     * @param {Event} event - Mouse down/start touch event object.
+     * @param {Object} event - The click event.
      * @returns {void}
      */
-    function handleOutsideClickOrTouch(event: Event) {
-        if (drawerRef.current && !drawerRef.current.contains(event.target)) {
-            onClose();
-        }
-    }
+    const handleInsideClick = useCallback(event => {
+        event.stopPropagation();
+    }, []);
 
-    useEffect(() => {
-        window.addEventListener('mousedown', handleOutsideClickOrTouch);
-        window.addEventListener('touchstart', handleOutsideClickOrTouch);
-
-        return () => {
-            window.removeEventListener('mousedown', handleOutsideClickOrTouch);
-            window.removeEventListener('touchstart', handleOutsideClickOrTouch);
-        };
-    }, [ drawerRef ]);
+    /**
+     * Handles clicks outside of the menu, closing it, and also stopping further propagation.
+     *
+     * @param {Object} event - The click event.
+     * @returns {void}
+     */
+    const handleOutsideClick = useCallback(event => {
+        event.stopPropagation();
+        onClose();
+    }, [ onClose ]);
 
     return (
         isOpen ? (
             <div
-                className = 'drawer-menu'
-                ref = { drawerRef }>
-                {children}
+                className = 'drawer-menu-container'
+                onClick = { handleOutsideClick }>
+                <div
+                    className = 'drawer-menu'
+                    onClick = { handleInsideClick }>
+                    {children}
+                </div>
             </div>
         ) : null
     );