From 1be111eeef20c8eaa2f0ba36b5b2edfec4c45d1d Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Wed, 8 Jul 2020 14:23:59 +0300 Subject: [PATCH 1/3] Use proper target property --- src/controllers/playback/videoosd.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index 634e4d309..b54d30a38 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -1102,7 +1102,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med var clickedElement; function onKeyDown(e) { - clickedElement = e.srcElement; + clickedElement = e.target; var key = keyboardnavigation.getKeyName(e); @@ -1223,7 +1223,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onWindowMouseDown(e) { - clickedElement = e.srcElement; + clickedElement = e.target; lockOsd(); } @@ -1232,7 +1232,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onWindowTouchStart(e) { - clickedElement = e.srcElement; + clickedElement = e.target; lockOsd(); } From 8843f7cb9301006812b917f8d3c4d5151ad97835 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Thu, 9 Jul 2020 19:05:24 +0300 Subject: [PATCH 2/3] Fix OSD lock --- src/controllers/playback/videoosd.js | 77 +++++++++++++++++----------- 1 file changed, 48 insertions(+), 29 deletions(-) diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index b54d30a38..823d43ee4 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -333,21 +333,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med osdPoster.innerHTML = ''; } - let osdLockCount = 0; + let mouseIsDown = false; function showOsd() { slideDownToShow(headerElement); showMainOsdControls(); - if (!osdLockCount) { + if (!mouseIsDown) { startOsdHideTimer(); } } function hideOsd() { - if (osdLockCount) { - return; - } - slideUpToHide(headerElement); hideMainOsdControls(); } @@ -360,19 +356,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 +427,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 + if (currentVisibleMenu && !mouseIsDown) { + startOsdHideTimer(); + } else { + stopOsdHideTimer(); + } + } + function onPointerMove(e) { if ('mouse' === (e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'))) { var eventX = e.screenX || 0; @@ -1216,28 +1210,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.target; - lockOsd(); + mouseIsDown = true; + resetIdle(); } function onWindowMouseUp() { - unlockOsd(); + mouseIsDown = false; + resetIdle(); } function onWindowTouchStart(e) { 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 +1374,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 +1414,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'); From 60a6023e77cd0ff1bf80f0416e59a6a7f0efcd5a Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Fri, 10 Jul 2020 15:15:46 +0300 Subject: [PATCH 3/3] Keep OSD visible when dialog is open --- src/controllers/playback/videoosd.js | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index 823d43ee4..dd0dc25ef 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; @@ -338,9 +342,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med function showOsd() { slideDownToShow(headerElement); showMainOsdControls(); - if (!mouseIsDown) { - startOsdHideTimer(); - } + resetIdle(); } function hideOsd() { @@ -430,8 +432,8 @@ 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 - if (currentVisibleMenu && !mouseIsDown) { + // Restart hide timer if OSD is currently visible and there is no opened dialog + if (currentVisibleMenu && !mouseIsDown && !getOpenedDialog()) { startOsdHideTimer(); } else { stopOsdHideTimer(); @@ -954,7 +956,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med stats: true, suboffset: showSubOffset, onOption: onSettingsOption + }).finally(() => { + resetIdle(); }); + + setTimeout(resetIdle, 0); } }); } @@ -1023,7 +1029,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (index !== currentIndex) { playbackManager.setAudioStreamIndex(index, player); } + }).finally(() => { + resetIdle(); }); + + setTimeout(resetIdle, 0); }); } @@ -1067,7 +1077,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } toggleSubtitleSync(); + }).finally(() => { + resetIdle(); }); + + setTimeout(resetIdle, 0); }); } @@ -1118,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(); }