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)

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;
+  }
+}

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]
         }