diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index 634e4d3093..dd0dc25efd 100644 --- a/src/controllers/playback/videoosd.js +++ b/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) { - startOsdHideTimer(); - } + resetIdle(); } 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 - if (currentVisibleMenu) { - showOsd(); - } + resetIdle(); } function onWindowMouseDown(e) { - clickedElement = e.srcElement; - lockOsd(); + clickedElement = e.target; + mouseIsDown = true; + resetIdle(); } function onWindowMouseUp() { - unlockOsd(); + mouseIsDown = false; + resetIdle(); } function onWindowTouchStart(e) { - clickedElement = e.srcElement; - lockOsd(); + clickedElement = e.target; + 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');