From 551b51341cf518422ae06f4287b69a4fddd8f2dd Mon Sep 17 00:00:00 2001
From: Emma <MarmadileManteater@proton.me>
Date: Sun, 10 Mar 2024 18:00:42 -0400
Subject: [PATCH] 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)
---
 .../ft-video-player/ft-video-player.css       |  6 ++++
 .../ft-video-player/ft-video-player.js        | 28 +++++++++++++++++++
 2 files changed, 34 insertions(+)

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