diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css index 8cb9950aa..1eb804c1b 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.css +++ b/src/renderer/components/ft-video-player/ft-video-player.css @@ -29,3 +29,9 @@ background-color: #000; } /* stylelint-enable liberty/use-logical-spec */ + +@media only screen and (max-width: 460px) { + :deep(.dash-selector .vjs-menu) { + max-block-size: 14em; + } +} diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index a3e7f19da..90e2965b7 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -1817,6 +1817,34 @@ export default defineComponent({ // For default auto, it may select a resolution before generating the quality buttons button.querySelector('#vjs-current-quality').innerText = defaultIsAuto ? autoQualityLabel : currentQualityLabel + const vjsMenu = button.querySelector('.vjs-menu') + let isTapping = false + button.addEventListener('touchstart', () => { + isTapping = true + }) + button.addEventListener('touchmove', () => { + // if they are moving, they cannot be tapping + isTapping = false + }) + button.addEventListener('touchend', (e) => { + if (isTapping) { + button.focus() + // make it easier to toggle the vjs-menu on touch (hover css is inconsistent w/ touch) + if (!e.target.classList.contains('quality-item') && !e.target.classList.contains('vjs-menu-item-text')) { + vjsMenu.classList.toggle('vjs-lock-showing') + } else { + // hide the quality selector on select (just like the other quality selectors do on mobile) + vjsMenu.classList.remove('vjs-lock-showing') + } + this.handleClick(e) + isTapping = false + } + }) + button.addEventListener('focusout', () => { + // remove class which shows the selector + vjsMenu.classList.remove('vjs-lock-showing') + }) + button.classList.add('dash-selector') return button.children[0] }