mirror of https://github.com/FreeTubeApp/FreeTube
Improve touch controls for dash quality selector (#4750)
* Improve touch input on dash quality selector - Add `touchstart` event to quality button which toggles the `vjs-lock-showing` class used on other quality selectors - Call `this.handleClick` from touchstart (fixes issue with `e.target` not being correct) MarmadileManteater/FreeTubeCordova#239 * Hide the dash quality selector on `focusout` * Use `classList.*` methods over manually editing the attributes * De-duplicate code * Add back line break * Allow scroll on dash quality selector when screen is narrow * Use flag to determine if user is scrolling or tapping * hide the quality selector on select (just like the other quality selectors do on mobile)
This commit is contained in:
parent
17818ca3db
commit
551b51341c
|
@ -29,3 +29,9 @@
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
/* stylelint-enable liberty/use-logical-spec */
|
/* stylelint-enable liberty/use-logical-spec */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 460px) {
|
||||||
|
:deep(.dash-selector .vjs-menu) {
|
||||||
|
max-block-size: 14em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1817,6 +1817,34 @@ export default defineComponent({
|
||||||
|
|
||||||
// For default auto, it may select a resolution before generating the quality buttons
|
// For default auto, it may select a resolution before generating the quality buttons
|
||||||
button.querySelector('#vjs-current-quality').innerText = defaultIsAuto ? autoQualityLabel : currentQualityLabel
|
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]
|
return button.children[0]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue