From 2a8d0b6e334519a8898d5226011f022bbabc8d39 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Wed, 2 Feb 2022 14:33:30 -0600
Subject: [PATCH] fix(thumbnail): mouse enter is not triggered

Workaround for the issue when the mouse enter event is not triggered in
the use case where the layout changes and the mouse appears onn top of the
thumbnail. Example: Closing the participant pane.
---
 .../filmstrip/components/web/Thumbnail.js     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index 792d3f848..c4535e063 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -2,6 +2,7 @@
 
 import { withStyles } from '@material-ui/styles';
 import clsx from 'clsx';
+import debounce from 'lodash/debounce';
 import React, { Component } from 'react';
 
 import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics';
@@ -316,6 +317,10 @@ class Thumbnail extends Component<Props, State> {
         this._onCanPlay = this._onCanPlay.bind(this);
         this._onClick = this._onClick.bind(this);
         this._onMouseEnter = this._onMouseEnter.bind(this);
+        this._onMouseMove = debounce(this._onMouseMove.bind(this), 100, {
+            leading: true,
+            trailing: false
+        });
         this._onMouseLeave = this._onMouseLeave.bind(this);
         this._onTestingEvent = this._onTestingEvent.bind(this);
         this._onTouchStart = this._onTouchStart.bind(this);
@@ -561,6 +566,20 @@ class Thumbnail extends Component<Props, State> {
         this.setState({ isHovered: true });
     }
 
+    /**
+     * Mouse move handler.
+     *
+     * @returns {void}
+     */
+    _onMouseMove() {
+        if (!this.state.isHovered) {
+            // Workaround for the use case where the layout changes (for example the participant pane is closed)
+            // and as a result the mouse appears on top of the thumbnail. In these use cases the mouse enter
+            // event on the thumbnail is not triggered in Chrome.
+            this.setState({ isHovered: true });
+        }
+    }
+
     _onMouseLeave: () => void;
 
     /**
@@ -634,6 +653,7 @@ class Thumbnail extends Component<Props, State> {
                 onClick = { this._onClick }
                 { ...(_isMobile ? {} : {
                     onMouseEnter: this._onMouseEnter,
+                    onMouseMove: this._onMouseMove,
                     onMouseLeave: this._onMouseLeave
                 }) }
                 style = { styles.thumbnail }>
@@ -810,6 +830,7 @@ class Thumbnail extends Component<Props, State> {
                     : {
                         onClick: this._onClick,
                         onMouseEnter: this._onMouseEnter,
+                        onMouseMove: this._onMouseMove,
                         onMouseLeave: this._onMouseLeave
                     }
                 ) }