Prevent OSD from being hidden when user works with UI

src/controllers/playback/videoosd.js

@@ -333,13 +333,21 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             osdPoster.innerHTML = '';
         }
 
+        let osdLockCount = 0;
+
         function showOsd() {
             slideDownToShow(headerElement);
             showMainOsdControls();
-            startOsdHideTimer();
+            if (!osdLockCount) {
+                startOsdHideTimer();
+            }
         }
 
         function hideOsd() {
+            if (osdLockCount) {
+                return;
+            }
+
             slideUpToHide(headerElement);
             hideMainOsdControls();
         }
@@ -352,6 +360,19 @@ 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);
@@ -1196,10 +1217,20 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
 
         function onWindowMouseDown(e) {
             clickedElement = e.srcElement;
+            lockOsd();
+        }
+
+        function onWindowMouseUp() {
+            unlockOsd();
         }
 
         function onWindowTouchStart(e) {
             clickedElement = e.srcElement;
+            lockOsd();
+        }
+
+        function onWindowTouchEnd() {
+            unlockOsd();
         }
 
         function getImgUrl(item, chapter, index, maxWidth, apiClient) {
@@ -1336,9 +1367,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
                 dom.addEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, {
                     passive: true
                 });
+                dom.addEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, {
+                    passive: true
+                });
                 dom.addEventListener(window, 'touchstart', onWindowTouchStart, {
                     passive: true
                 });
+                ['touchend', 'touchcancel'].forEach((event) => {
+                    dom.addEventListener(window, event, onWindowTouchEnd, {
+                        passive: true
+                    });
+                });
             } catch (e) {
                 require(['appRouter'], function(appRouter) {
                     appRouter.goHome();
@@ -1356,9 +1395,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
             dom.removeEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, {
                 passive: true
             });
+            dom.removeEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, {
+                passive: true
+            });
             dom.removeEventListener(window, 'touchstart', onWindowTouchStart, {
                 passive: true
             });
+            ['touchend', 'touchcancel'].forEach((event) => {
+                dom.removeEventListener(window, event, onWindowTouchEnd, {
+                    passive: true
+                });
+            });
             stopOsdHideTimer();
             headerElement.classList.remove('osdHeader');
             headerElement.classList.remove('osdHeader-hidden');