From ad91c9c75b566e11b427f157522f60af0beb8fe1 Mon Sep 17 00:00:00 2001
From: David Steinacher <david.steinacher@bitmovin.com>
Date: Thu, 16 Jan 2025 15:04:26 +0100
Subject: [PATCH 1/3] only use hover on devices where supported

* use active otherwise
---
 src/scss/components/settings/_settingspanelitem.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/scss/components/settings/_settingspanelitem.scss b/src/scss/components/settings/_settingspanelitem.scss
index 9b854a4d8..cfa29cd0e 100644
--- a/src/scss/components/settings/_settingspanelitem.scss
+++ b/src/scss/components/settings/_settingspanelitem.scss
@@ -10,7 +10,13 @@
     cursor: pointer;
   }
 
-  &:hover {
+  @media (hover: hover) {
+    &:hover {
+      background-color: transparentize($color-item-hover, .15);
+    }
+  }
+
+  &:active {
     background-color: transparentize($color-item-hover, .15);
   }
 

From c5b5d51877d35aaff58c8bab0ed468f9a0c6f0e1 Mon Sep 17 00:00:00 2001
From: David Steinacher <david.steinacher@bitmovin.com>
Date: Thu, 16 Jan 2025 15:16:52 +0100
Subject: [PATCH 2/3] improve click handling on touch devices by adding the
 touchend listener to buttons

---
 src/ts/components/buttons/Button.ts                     | 3 ++-
 src/ts/components/settings/DynamicSettingsPanelItem.ts  | 3 ++-
 src/ts/components/settings/SettingsPanelSelectOption.ts | 6 +++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/ts/components/buttons/Button.ts b/src/ts/components/buttons/Button.ts
index 6c32a6eb6..86316962b 100644
--- a/src/ts/components/buttons/Button.ts
+++ b/src/ts/components/buttons/Button.ts
@@ -71,7 +71,8 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     }).html(i18n.performLocalization(this.config.text)));
 
     // Listen for the click event on the button element and trigger the corresponding event on the button component
-    buttonElement.on('click', (e) => {
+    buttonElement.on('click touchend', (e) => {
+      e.preventDefault();
       e.stopPropagation();
       this.onClickEvent();
     });
diff --git a/src/ts/components/settings/DynamicSettingsPanelItem.ts b/src/ts/components/settings/DynamicSettingsPanelItem.ts
index 035b15658..b6ac54896 100644
--- a/src/ts/components/settings/DynamicSettingsPanelItem.ts
+++ b/src/ts/components/settings/DynamicSettingsPanelItem.ts
@@ -102,7 +102,8 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
     const handleItemClick = () => {
       this.displayItemsSubPage();
     };
-    this.getDomElement().on('click', (e) => {
+    this.getDomElement().on('click touchend', (e) => {
+      e.preventDefault();
       e.stopPropagation();
       handleItemClick();
     });
diff --git a/src/ts/components/settings/SettingsPanelSelectOption.ts b/src/ts/components/settings/SettingsPanelSelectOption.ts
index bb92abefe..042b5dbad 100644
--- a/src/ts/components/settings/SettingsPanelSelectOption.ts
+++ b/src/ts/components/settings/SettingsPanelSelectOption.ts
@@ -57,7 +57,11 @@ export class SettingsPanelSelectOption extends SettingsPanelItem<SettingsPanelSe
     const handleItemClick = () => {
       this.settingComponent.selectItem(this.settingsValue);
     };
-    this.getDomElement().on('click', () => handleItemClick());
+    this.getDomElement().on('click touchend', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handleItemClick();
+    });
 
     // Initial state
     handleSelectedOptionChanged();

From d596dbfa16efed555da83b45962ea694210d97fe Mon Sep 17 00:00:00 2001
From: David Steinacher <david.steinacher@bitmovin.com>
Date: Mon, 27 Jan 2025 14:11:07 +0100
Subject: [PATCH 3/3] remove touchend listeners

---
 src/ts/components/buttons/Button.ts                     | 2 +-
 src/ts/components/settings/DynamicSettingsPanelItem.ts  | 2 +-
 src/ts/components/settings/SettingsPanelSelectOption.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ts/components/buttons/Button.ts b/src/ts/components/buttons/Button.ts
index 86316962b..4338e2397 100644
--- a/src/ts/components/buttons/Button.ts
+++ b/src/ts/components/buttons/Button.ts
@@ -71,7 +71,7 @@ export class Button<Config extends ButtonConfig> extends Component<Config> {
     }).html(i18n.performLocalization(this.config.text)));
 
     // Listen for the click event on the button element and trigger the corresponding event on the button component
-    buttonElement.on('click touchend', (e) => {
+    buttonElement.on('click', (e) => {
       e.preventDefault();
       e.stopPropagation();
       this.onClickEvent();
diff --git a/src/ts/components/settings/DynamicSettingsPanelItem.ts b/src/ts/components/settings/DynamicSettingsPanelItem.ts
index b6ac54896..98c5d20b0 100644
--- a/src/ts/components/settings/DynamicSettingsPanelItem.ts
+++ b/src/ts/components/settings/DynamicSettingsPanelItem.ts
@@ -102,7 +102,7 @@ export class DynamicSettingsPanelItem extends SettingsPanelItem<DynamicSettingsP
     const handleItemClick = () => {
       this.displayItemsSubPage();
     };
-    this.getDomElement().on('click touchend', (e) => {
+    this.getDomElement().on('click', (e) => {
       e.preventDefault();
       e.stopPropagation();
       handleItemClick();
diff --git a/src/ts/components/settings/SettingsPanelSelectOption.ts b/src/ts/components/settings/SettingsPanelSelectOption.ts
index 042b5dbad..4562144de 100644
--- a/src/ts/components/settings/SettingsPanelSelectOption.ts
+++ b/src/ts/components/settings/SettingsPanelSelectOption.ts
@@ -57,7 +57,7 @@ export class SettingsPanelSelectOption extends SettingsPanelItem<SettingsPanelSe
     const handleItemClick = () => {
       this.settingComponent.selectItem(this.settingsValue);
     };
-    this.getDomElement().on('click touchend', (e) => {
+    this.getDomElement().on('click', (e) => {
       e.preventDefault();
       e.stopPropagation();
       handleItemClick();