Merge pull request #1542 from dmitrylyzo/fix-osd-lock

Fix OSD lock

(cherry picked from commit 04b2763447)
Signed-off-by: Joshua M. Boniface <joshua@boniface.me>

src/controllers/playback/videoosd.js

@@ -45,6 +45,10 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
         return null;
     }
 
+    function getOpenedDialog() {
+        return document.querySelector('.dialogContainer .dialog.opened');
+    }
+
     return function (view, params) {
         function onVerticalSwipe(e, elem, data) {
             var player = currentPlayer;
@@ -333,21 +337,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             osdPoster.innerHTML = '';
         }
 
-        let osdLockCount = 0;
+        let mouseIsDown = false;
 
         function showOsd() {
             slideDownToShow(headerElement);
             showMainOsdControls();
-            if (!osdLockCount) {
+            resetIdle();
-                startOsdHideTimer();
-            }
         }
 
         function hideOsd() {
-            if (osdLockCount) {
-                return;
-            }
-
             slideUpToHide(headerElement);
             hideMainOsdControls();
         }
@@ -360,19 +358,6 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             }
         }
 
-        function lockOsd() {
-            osdLockCount++;
-            stopOsdHideTimer();
-        }
-
-        function unlockOsd() {
-            osdLockCount--;
-            // Restart hide timer if OSD is currently visible
-            if (currentVisibleMenu && !osdLockCount) {
-                startOsdHideTimer();
-            }
-        }
-
         function startOsdHideTimer() {
             stopOsdHideTimer();
             osdHideTimeout = setTimeout(hideOsd, 3e3);
@@ -444,6 +429,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             }
         }
 
+        // TODO: Move all idle-related code to `inputManager` or `idleManager` or `idleHelper` (per dialog thing) and listen event from there.
+
+        function resetIdle() {
+            // Restart hide timer if OSD is currently visible and there is no opened dialog
+            if (currentVisibleMenu && !mouseIsDown && !getOpenedDialog()) {
+                startOsdHideTimer();
+            } else {
+                stopOsdHideTimer();
+            }
+        }
+
         function onPointerMove(e) {
             if ('mouse' === (e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'))) {
                 var eventX = e.screenX || 0;
@@ -960,7 +956,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                         stats: true,
                         suboffset: showSubOffset,
                         onOption: onSettingsOption
+                    }).finally(() => {
+                        resetIdle();
                     });
+
+                    setTimeout(resetIdle, 0);
                 }
             });
         }
@@ -1029,7 +1029,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                     if (index !== currentIndex) {
                         playbackManager.setAudioStreamIndex(index, player);
                     }
+                }).finally(() => {
+                    resetIdle();
                 });
+
+                setTimeout(resetIdle, 0);
             });
         }
 
@@ -1073,7 +1077,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                     }
 
                     toggleSubtitleSync();
+                }).finally(() => {
+                    resetIdle();
                 });
+
+                setTimeout(resetIdle, 0);
             });
         }
 
@@ -1102,7 +1110,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
         var clickedElement;
 
         function onKeyDown(e) {
-            clickedElement = e.srcElement;
+            clickedElement = e.target;
 
             var key = keyboardnavigation.getKeyName(e);
 
@@ -1124,7 +1132,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                 case 'Escape':
                 case 'Back':
                     // Ignore key when some dialog is opened
-                    if (currentVisibleMenu === 'osd' && !document.querySelector('.dialogContainer')) {
+                    if (currentVisibleMenu === 'osd' && !getOpenedDialog()) {
                         hideOsd();
                         e.stopPropagation();
                     }
@@ -1216,28 +1224,35 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
         }
 
         function onKeyDownCapture() {
-            // Restart hide timer if OSD is currently visible
+            resetIdle();
-            if (currentVisibleMenu) {
-                showOsd();
-            }
         }
 
         function onWindowMouseDown(e) {
-            clickedElement = e.srcElement;
+            clickedElement = e.target;
-            lockOsd();
+            mouseIsDown = true;
+            resetIdle();
         }
 
         function onWindowMouseUp() {
-            unlockOsd();
+            mouseIsDown = false;
+            resetIdle();
         }
 
         function onWindowTouchStart(e) {
-            clickedElement = e.srcElement;
+            clickedElement = e.target;
-            lockOsd();
+            mouseIsDown = true;
+            resetIdle();
         }
 
         function onWindowTouchEnd() {
-            unlockOsd();
+            mouseIsDown = false;
+            resetIdle();
+        }
+
+        function onWindowDragEnd() {
+            // mousedown -> dragstart -> dragend !!! no mouseup :(
+            mouseIsDown = false;
+            resetIdle();
         }
 
         function getImgUrl(item, chapter, index, maxWidth, apiClient) {
@@ -1373,24 +1388,33 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                 inputManager.on(window, onInputCommand);
                 document.addEventListener('keydown', onKeyDown);
                 dom.addEventListener(document, 'keydown', onKeyDownCapture, {
-                    capture: true
+                    capture: true,
+                    passive: true
                 });
                 /* eslint-disable-next-line compat/compat */
                 dom.addEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, {
+                    capture: true,
                     passive: true
                 });
                 /* eslint-disable-next-line compat/compat */
                 dom.addEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, {
+                    capture: true,
                     passive: true
                 });
                 dom.addEventListener(window, 'touchstart', onWindowTouchStart, {
+                    capture: true,
                     passive: true
                 });
                 ['touchend', 'touchcancel'].forEach((event) => {
                     dom.addEventListener(window, event, onWindowTouchEnd, {
+                        capture: true,
                         passive: true
                     });
                 });
+                dom.addEventListener(window, 'dragend', onWindowDragEnd, {
+                    capture: true,
+                    passive: true
+                });
             } catch (e) {
                 require(['appRouter'], function(appRouter) {
                     appRouter.goHome();
@@ -1404,24 +1428,33 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
 
             document.removeEventListener('keydown', onKeyDown);
             dom.removeEventListener(document, 'keydown', onKeyDownCapture, {
-                capture: true
+                capture: true,
+                passive: true
             });
             /* eslint-disable-next-line compat/compat */
             dom.removeEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, {
+                capture: true,
                 passive: true
             });
             /* eslint-disable-next-line compat/compat */
             dom.removeEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, {
+                capture: true,
                 passive: true
             });
             dom.removeEventListener(window, 'touchstart', onWindowTouchStart, {
+                capture: true,
                 passive: true
             });
             ['touchend', 'touchcancel'].forEach((event) => {
                 dom.removeEventListener(window, event, onWindowTouchEnd, {
+                    capture: true,
                     passive: true
                 });
             });
+            dom.removeEventListener(window, 'dragend', onWindowDragEnd, {
+                capture: true,
+                passive: true
+            });
             stopOsdHideTimer();
             headerElement.classList.remove('osdHeader');
             headerElement.classList.remove('osdHeader-hidden');