seeking time label and linter fixes

src/scss/skin-super-modern/_skin-modern-smallscreen.scss

@@ -2,7 +2,6 @@
 @import 'mixins';
 
 &.#{$prefix}-ui-skin-modern-smallscreen {
-  font-size: 1.2em;
 
   .#{$prefix}-ui-fullscreentogglebutton {
     background-image: url('../../assets/skin-super-modern/images/fullscreensmall.svg');

src/scss/skin-super-modern/_variables.scss

@@ -15,6 +15,8 @@ $color-focus: #1b7fcc;
 
 $color-item-hover: #54565a !default;
 $color-background-menu: #212226 !default;
+$color-background-seek-circle: rgba(124, 124, 124, .3) !default;
+$color-shadow-seek-label: 0 0 30px 0 rgba(0, 0, 0, .75) !default;
 
 $font-family: sans-serif !default;
 $font-size: 1em !default;

src/scss/skin-super-modern/components/_button.scss

@@ -3,7 +3,6 @@
 %ui-button {
   @extend %ui-component;
 
-  transition: transform 0.15s ease;
   background-color: transparent;
   background-origin: content-box;
   background-position: center;
@@ -16,6 +15,7 @@
   height: 1.5em;
   min-width: 1.5em;
   padding: .25em;
+  transition: transform .15s ease;
 
   .#{$prefix}-label {
     color: $color-primary;
@@ -38,7 +38,7 @@
   }
 
   &:active {
-    transform: scale(0.9);
+    transform: scale(.9);
   }
 
   @include hidden;

src/scss/skin-super-modern/components/_smallcenteredplaybacktogglebutton.scss

@@ -3,16 +3,16 @@
 .#{$prefix}-ui-smallcenteredplaybacktogglebutton {
   @extend %ui-button;
 
-  &:hover {
-    @include svg-icon-shadow;
-  }
-
   cursor: default;
   height: 2.5em;
   outline: none;
   overflow: hidden; // hide overflow from scale animation
   width: 2.5em;
 
+  &:hover {
+    @include svg-icon-shadow;
+  }
+
   .#{$prefix}-image {
     background-position: center;
     background-repeat: no-repeat;

src/scss/skin-super-modern/components/_touch-control-overlay.scss

@@ -1,19 +1,34 @@
 @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;
+}
+
 %seek-circle {
+  @extend %opacity-transition;
+  background-color: $color-background-seek-circle;
+  border-radius: 50%;
   content: '';
-  position: absolute;
   height: 200%;
-  width: 100%;
-  background-color: rgba(156, 156, 156, .35);
-  border-radius: 50%;
   opacity: 0;
-  -webkit-transition: opacity .2s ease;
-  -moz-transition: opacity .2s ease;
-  -ms-transition: opacity .2s ease;
-  -o-transition: opacity .2s ease;
-  transition:  opacity .2s ease-out;
+  position: absolute;
+  width: 100%;
+}
+
+%seek-label {
+  @extend %opacity-transition;
+  font-size: .4em;
+  font-weight: 600;
+  margin: 0;
+  opacity: 1;
+  position: absolute;
+  text-shadow: $color-shadow-seek-label;
 }
 
 .#{$prefix}-ui-touchcontrol-overlay {
@@ -25,10 +40,35 @@
   justify-content: center;
   text-align: center;
 
+  // sass-lint:disable nesting-depth
+  > .#{$prefix}-container-wrapper {
+    align-items: center;
+    display: flex;
+
+    .#{$prefix}-seek-forward-label {
+      @extend %seek-label;
+      right: 15%;
+
+      &.#{$prefix}-hidden {
+        opacity: 0;
+      }
+    }
+
+    .#{$prefix}-seek-backward-label {
+      @extend %seek-label;
+      left: 15%;
+
+      &.#{$prefix}-hidden {
+        opacity: 0;
+      }
+    }
+  }
+
   &::before {
     @extend %seek-circle;
     left: -60%;
   }
+
   &::after {
     @extend %seek-circle;
     right: -60%;
@@ -39,6 +79,7 @@
       opacity: 1;
     }
   }
+
   &.#{$prefix}-seek-backward {
     &::before {
       opacity: 1;

src/ts/components/touchcontroloverlay.ts

@@ -5,6 +5,8 @@ import { UIInstanceManager } from '../uimanager';
 import { EventDispatcher, NoArgs, Event as EDEvent } from '../eventdispatcher';
 import { Timeout } from '../timeout';
 import { HTMLElementWithComponent } from '../dom';
+import { Label, LabelConfig } from './label';
+import { i18n } from '../main';
 
 export interface TouchControlOverlayConfig extends ContainerConfig {
   /**
@@ -57,6 +59,8 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
   };
 
   private playbackToggleButton: SmallCenteredPlaybackToggleButton;
+  private seekForwardLabel: Label<LabelConfig>;
+  private seekBackwardLabel: Label<LabelConfig>;
 
   // true if the last tap on the overlay was less than 500msec ago
   private couldBeDoubleTapping: Boolean;
@@ -71,21 +75,28 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
       enterFullscreenOnInitialPlayback: Boolean(config.enterFullscreenOnInitialPlayback),
     });
 
+    this.seekForwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-forward-label', hidden: true});
+    this.seekBackwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-backward-label', hidden: true});
+
     this.config = this.mergeConfig(config, {
       cssClass: 'ui-touchcontrol-overlay',
       acceptsTouchWithUiHidden: true,
       seekTime: 10,
       seekDoubleTapMargin: 15,
-      components: [this.playbackToggleButton],
+      components: [this.playbackToggleButton, this.seekForwardLabel, this.seekBackwardLabel],
     }, this.config);
   }
 
   configure(player: PlayerAPI, uimanager: UIInstanceManager): void {
     super.configure(player, uimanager);
 
+    let playerSeekTime = 0;
+    let startSeekTime = 0;
+
     this.doubleTapTimeout = new Timeout(500, () => {
       this.couldBeDoubleTapping = false;
-      this.removeSeekCssClasses();
+      startSeekTime = 0;
+      setTimeout(() => this.hideSeekAnimationElements(), 150);
     });
 
     uimanager.onControlsHide.subscribe(() => {
@@ -96,25 +107,33 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
       this.playbackToggleButton.show();
     });
 
-    let playerSeekTime = 0;
 
     this.touchControlEvents.onSeekBackward.subscribe(() => {
       playerSeekTime -= this.config.seekTime;
       player.seek(playerSeekTime);
-      this.getDomElement().removeClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
+
+      this.seekBackwardLabel.setText(Math.abs(Math.round(playerSeekTime - startSeekTime)) + ' ' + i18n.performLocalization(i18n.getLocalizer('settings.time.seconds')));
+      this.seekBackwardLabel.show();
       this.getDomElement().addClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
+      this.seekForwardLabel.hide();
+      this.getDomElement().removeClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
     });
 
     this.touchControlEvents.onSeekForward.subscribe(() => {
       playerSeekTime += this.config.seekTime;
       player.seek(playerSeekTime);
-      this.getDomElement().removeClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
+
+      this.seekForwardLabel.setText(Math.abs(Math.round(playerSeekTime - startSeekTime)) + ' ' + i18n.performLocalization(i18n.getLocalizer('settings.time.seconds')));
+      this.seekForwardLabel.show();
       this.getDomElement().addClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
+      this.seekBackwardLabel.hide();
+      this.getDomElement().removeClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
     });
 
     this.touchControlEvents.onSingleClick.subscribe((_, e) => {
       uimanager.getUI().toggleUiShown();
       playerSeekTime = player.getCurrentTime();
+      startSeekTime = playerSeekTime;
 
       const eventTarget = (e as Event).target as HTMLElementWithComponent;
       const rect = eventTarget.getBoundingClientRect();
@@ -165,9 +184,11 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
     };
   }
 
-  private removeSeekCssClasses(): void {
+  private hideSeekAnimationElements(): void {
     this.getDomElement().removeClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
     this.getDomElement().removeClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
+    this.seekForwardLabel.hide();
+    this.seekBackwardLabel.hide();
   }
 
   protected onDoubleClickEvent(e: Event) {