From 563add215ea2b664cbf97892d181fad7600a83d3 Mon Sep 17 00:00:00 2001
From: David Steinacher <david.steinacher@bitmovin.com>
Date: Tue, 10 Dec 2024 20:42:31 -0700
Subject: [PATCH] apply common naming scheme to touchcontroloverlay

---
 src/scss/skin-super-modern/_skin.scss         |  2 +-
 ...overlay.scss => _touchcontroloverlay.scss} | 21 +++++--------------
 src/ts/components/touchcontroloverlay.ts      |  4 ++--
 3 files changed, 8 insertions(+), 19 deletions(-)
 rename src/scss/skin-super-modern/components/{_touch-control-overlay.scss => _touchcontroloverlay.scss} (73%)

diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss
index f00982c68..84320f233 100644
--- a/src/scss/skin-super-modern/_skin.scss
+++ b/src/scss/skin-super-modern/_skin.scss
@@ -47,7 +47,7 @@
   @import 'components/spacer';
   @import 'components/subtitlesettings/subtitlesettings';
   @import 'components/subtitlesettingspaneltogglebutton';
-  @import 'components/touch-control-overlay';
+  @import 'components/touchcontroloverlay';
   @import 'components/smallcenteredplaybacktogglebutton';
   @import 'components/loadingicon';
   @import 'skin-ads';
diff --git a/src/scss/skin-super-modern/components/_touch-control-overlay.scss b/src/scss/skin-super-modern/components/_touchcontroloverlay.scss
similarity index 73%
rename from src/scss/skin-super-modern/components/_touch-control-overlay.scss
rename to src/scss/skin-super-modern/components/_touchcontroloverlay.scss
index 7e30a6d39..8b6a6a2c8 100644
--- a/src/scss/skin-super-modern/components/_touch-control-overlay.scss
+++ b/src/scss/skin-super-modern/components/_touchcontroloverlay.scss
@@ -1,12 +1,7 @@
 @import '../variables';
 @import '../mixins';
 
-// sass-lint:disable no-vendor-prefixes
 %opacity-transition {
-  -moz-transition: opacity .25s ease;
-  -ms-transition: opacity .25s ease;
-  -o-transition: opacity .25s ease;
-  -webkit-transition: opacity .25s ease;
   transition:  opacity .25s ease-out;
 }
 
@@ -23,15 +18,15 @@
 
 %seek-label {
   @extend %opacity-transition;
-  font-size: .4em;
-  font-weight: 600;
+  @include hidden-animated;
+  font-weight: 500;
   margin: 0;
   opacity: 1;
   position: absolute;
   text-shadow: $color-shadow-seek-label;
 }
 
-.#{$prefix}-ui-touchcontrol-overlay {
+.#{$prefix}-ui-touch-control-overlay {
   @extend %ui-container;
   @include layout-cover;
 
@@ -47,20 +42,14 @@
 
     .#{$prefix}-seek-forward-label {
       @extend %seek-label;
-      right: 15%;
 
-      &.#{$prefix}-hidden {
-        opacity: 0;
-      }
+      right: 10%;
     }
 
     .#{$prefix}-seek-backward-label {
       @extend %seek-label;
-      left: 15%;
 
-      &.#{$prefix}-hidden {
-        opacity: 0;
-      }
+      left: 10%;
     }
   }
 
diff --git a/src/ts/components/touchcontroloverlay.ts b/src/ts/components/touchcontroloverlay.ts
index efa09b0bb..6e3c970fc 100644
--- a/src/ts/components/touchcontroloverlay.ts
+++ b/src/ts/components/touchcontroloverlay.ts
@@ -83,11 +83,11 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
     this.seekBackwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-backward-label', hidden: true});
 
     this.config = this.mergeConfig(config, {
-      cssClass: 'ui-touchcontrol-overlay',
+      cssClass: 'ui-touch-control-overlay',
       acceptsTouchWithUiHidden: true,
       seekTime: 10,
       seekDoubleTapMargin: 15,
-      components: [this.playbackToggleButton, this.seekForwardLabel, this.seekBackwardLabel],
+      components: [this.seekBackwardLabel, this.playbackToggleButton, this.seekForwardLabel],
     }, this.config);
   }