seek animation works but without label with seeked seconds

bitmovin · Aug 22, 2024 · 67697a8 · 67697a8
1 parent 6c09514
commit 67697a8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/src/scss/skin-super-modern/components/_touch-control-overlay.scss b/src/scss/skin-super-modern/components/_touch-control-overlay.scss
@@ -1,6 +1,21 @@
 @import '../variables';
 @import '../mixins';
 
+%seek-circle {
+  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;
+}
+
 .#{$prefix}-ui-touchcontrol-overlay {
   @extend %ui-container;
   @include layout-cover;
@@ -9,4 +24,24 @@
   display: flex;
   justify-content: center;
   text-align: center;
+
+  &::before {
+    @extend %seek-circle;
+    left: -60%;
+  }
+  &::after {
+    @extend %seek-circle;
+    right: -60%;
+  }
+
+  &.#{$prefix}-seek-forward {
+    &::after {
+      opacity: 1;
+    }
+  }
+  &.#{$prefix}-seek-backward {
+    &::before {
+      opacity: 1;
+    }
+  }
 }
diff --git a/src/ts/components/touchcontroloverlay.ts b/src/ts/components/touchcontroloverlay.ts
@@ -46,6 +46,8 @@ interface ClickPosition {
  * Overlays the player and detects touch input
  */
 export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
+  private readonly SEEK_FORWARD_CLASS = 'seek-forward';
+  private readonly SEEK_BACKWARD_CLASS = 'seek-backward';
 
   private touchControlEvents = {
     onSingleClick: new EventDispatcher<TouchControlOverlay, NoArgs>(),
@@ -83,6 +85,7 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
 
     this.doubleTapTimeout = new Timeout(500, () => {
       this.couldBeDoubleTapping = false;
+      this.removeSeekCssClasses();
     });
 
     uimanager.onControlsHide.subscribe(() => {
@@ -98,11 +101,15 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
     this.touchControlEvents.onSeekBackward.subscribe(() => {
       playerSeekTime -= this.config.seekTime;
       player.seek(playerSeekTime);
+      this.getDomElement().removeClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
+      this.getDomElement().addClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
     });
 
     this.touchControlEvents.onSeekForward.subscribe(() => {
       playerSeekTime += this.config.seekTime;
       player.seek(playerSeekTime);
+      this.getDomElement().removeClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
+      this.getDomElement().addClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
     });
 
     this.touchControlEvents.onSingleClick.subscribe((_, e) => {
@@ -158,6 +165,11 @@ export class TouchControlOverlay extends Container<TouchControlOverlayConfig> {
     };
   }
 
+  private removeSeekCssClasses(): void {
+    this.getDomElement().removeClass(this.prefixCss(this.SEEK_FORWARD_CLASS));
+    this.getDomElement().removeClass(this.prefixCss(this.SEEK_BACKWARD_CLASS));
+  }
+
   protected onDoubleClickEvent(e: Event) {
     this.touchControlEvents.onDoubleClick.dispatch(this, e);
   }