Don't show play button while seeking video

src/components/audio.ts

@@ -321,7 +321,10 @@ async function wrapAudio(audioEl: AudioElement) {
   const onLoad = () => {
     let launched = false;
 
-    let progressLine = new MediaProgressLine(audioEl.audio, doc.supportsStreaming);
+    let progressLine = new MediaProgressLine({
+      media: audioEl.audio,
+      streamable: doc.supportsStreaming
+    });
 
     audioEl.addAudioListener('ended', () => {
       audioEl.classList.remove('audio-show-progress');

src/components/chat/audio.ts

@@ -110,7 +110,12 @@ export default class ChatAudio extends PinnedContainer {
     const progressWrapper = document.createElement('div');
     progressWrapper.classList.add('pinned-audio-progress-wrapper');
 
-    this.progressLine = new MediaProgressLine(undefined, undefined, true, true);
+    this.progressLine = new MediaProgressLine({
+      media: undefined,
+      streamable: undefined,
+      withTransition: true,
+      useTransform: true
+    });
     this.progressLine.container.classList.add('pinned-audio-progress');
     progressWrapper.append(this.progressLine.container);
     this.wrapper.insertBefore(progressWrapper, this.wrapperUtils);

src/components/mediaProgressLine.ts

@@ -16,17 +16,24 @@ export default class MediaProgressLine extends RangeSelector {
   protected media: HTMLMediaElement;
   protected streamable: boolean;
 
-  constructor(media?: HTMLAudioElement | HTMLVideoElement, streamable?: boolean, withTransition?: boolean, useTransform?: boolean) {
+  constructor(protected options: {
+    media?: HTMLAudioElement | HTMLVideoElement,
+    streamable?: boolean,
+    withTransition?: boolean,
+    useTransform?: boolean,
+    onSeekStart?: () => void,
+    onSeekEnd?: () => void
+  }) {
     super({
       step: 1000 / 60 / 1000,
       min: 0,
       max: 1,
-      withTransition,
-      useTransform
+      withTransition: options.withTransition,
+      useTransform: options.useTransform
     }, 0);
 
-    if(media) {
-      this.setMedia(media, streamable);
+    if(options.media) {
+      this.setMedia(options.media, options.streamable);
     }
   }
 
@@ -57,11 +64,13 @@ export default class MediaProgressLine extends RangeSelector {
       onMouseDown: () => {
         wasPlaying = !this.media.paused;
         wasPlaying && this.media.pause();
+        this.options?.onSeekStart();
       },
 
       onMouseUp: (e) => {
         // cancelEvent(e.event);
         wasPlaying && this.media.play();
+        this.options?.onSeekEnd();
       }
     });
   }

src/helpers/dom/attachGrabListeners.ts

@@ -18,7 +18,7 @@ export default function attachGrabListeners(element: HTMLElement,
   const onMouseUp = (event: MouseEvent) => {
     document.removeEventListener('mousemove', onMouseMove);
     element.addEventListener('mousedown', onMouseDown, {once: true});
-    onEnd && onEnd({x: event.pageX, y: event.pageY, event});
+    onEnd?.({x: event.pageX, y: event.pageY, event});
   };
 
   const onMouseDown = (event: MouseEvent) => {
@@ -45,7 +45,8 @@ export default function attachGrabListeners(element: HTMLElement,
   const onTouchEnd = (event: TouchEvent) => {
     document.removeEventListener('touchmove', onTouchMove);
     element.addEventListener('touchstart', onTouchStart, {passive: false, once: true});
-    onEnd && onEnd({x: event.touches[0].clientX, y: event.touches[0].clientY, isTouch: true, event});
+    const touch = event.touches[0] || event.changedTouches[0];
+    onEnd?.({x: touch.clientX, y: touch.clientY, isTouch: true, event});
   };
 
   const onTouchStart = (event: TouchEvent) => {

src/lib/mediaPlayer.ts

@@ -82,7 +82,16 @@ export default class VideoPlayer extends ControlsHover {
 
     if(this.skin === 'default') {
       const controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement;
-      this.progress = new MediaProgressLine(video, streamable);
+      this.progress = new MediaProgressLine({
+        media: video,
+        streamable,
+        onSeekStart: () => {
+          this.wrapper.classList.add('is-seeking');
+        },
+        onSeekEnd: () => {
+          this.wrapper.classList.remove('is-seeking');
+        }
+      });
       controls.prepend(this.progress.container);
     }
 

src/scss/partials/_ckin.scss

@@ -200,7 +200,9 @@
     }
   }
 
-  &.is-playing, &:not(.played) {
+  &.is-playing,
+  &:not(.played),
+  &.is-seeking {
     .default__button--big {
       opacity: 0;
     }
@@ -212,6 +214,10 @@
     }
   }
 
+  .is-seeking + .default__button--big {
+    opacity: 0;
+  }
+
   .player-volume {
     --icon-size: 2.25rem;
     --icon-margin-right: .5rem;