From 92a463a6913f563a4ed7ee2415a426e7072c8348 Mon Sep 17 00:00:00 2001
From: ilya_razuvaev <ilya.razuvaev@annoto.net>
Date: Wed, 16 Aug 2023 16:15:31 +0300
Subject: [PATCH 1/3] feat: Improved capture seek

---
 src/adaptor.ts | 49 +++++++++++++++++++------------------------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/adaptor.ts b/src/adaptor.ts
index dca6310..607c677 100644
--- a/src/adaptor.ts
+++ b/src/adaptor.ts
@@ -2,6 +2,8 @@ import {
     IMediaDetails,
     IPlayerAdaptorApi,
     PlayerEventCallback,
+    captureUIEvents,
+    Disposable,
     CaptureUIEventCallback,
 } from '@annoto/widget-api';
 import {
@@ -25,7 +27,7 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
         event: string;
         fn: PlaykitListenerType;
     }[] = [];
-    private captureUIDispose?: (() => void);
+    private captureUIDisposable: Disposable | undefined;
 
     constructor(
         private readonly player: IPlaykitPlayer,
@@ -167,6 +169,22 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
         cb();
     }
 
+    onCaptureUIEvent(cb: CaptureUIEventCallback): void {
+        if (this.captureUIDisposable) {
+            this.captureUIDisposable.dispose();
+        }
+        const { element } = this;
+        const progressBarEl = element?.querySelector('.playkit-seek-bar') as HTMLElement;
+        this.captureUIDisposable = captureUIEvents({
+            mouseEventsHolderElements: [ progressBarEl ],
+            keyEventsHolderElements: [ element as HTMLElement ],
+            mouseEvents: ['mousedown'],
+            keyEvents: ['keydown'],
+            getDuration: this.duration.bind(this),
+            cb: cb,
+        });
+    }
+
     onRemove(cb: PlayerEventCallback): void {
         this.on(CustomEventType.PLAYER_DESTROY, () => {
             this.reset();
@@ -174,39 +192,10 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
         });
     }
 
-    onCaptureUIEvent(cb: CaptureUIEventCallback) {
-        if (this.captureUIDispose) {
-            this.captureUIDispose();
-        }
-        const { element } = this;
-        const progressBarEl = element?.querySelector('.playkit-seek-bar') as HTMLElement;
-        const mouseDownHandler = (ev: MouseEvent) => {
-            const { clientX } = ev;
-            const rect = progressBarEl.getBoundingClientRect();
-            const timestamp = (clientX - rect.x) / rect.width * this.duration();
-            cb({ ev, timestamp });
-        };
-        const keyDownHandler = (ev: KeyboardEvent) => {
-            cb({ ev });
-        };
-
-        progressBarEl?.addEventListener('mousedown', mouseDownHandler , { capture: true });
-        progressBarEl?.addEventListener('keydown', keyDownHandler, { capture: true });
-
-        this.captureUIDispose = () => {
-            progressBarEl.removeEventListener('mousedown', mouseDownHandler, { capture: true });
-            progressBarEl.removeEventListener('keydown', keyDownHandler, { capture: true });
-        };
-    }
-
     private reset() {
         for (const ev of this.events) {
             this.player.removeEventListener(ev.event, ev.fn);
         }
-        if (this.captureUIDispose) {
-            this.captureUIDispose();
-        }
-
         this.events = [];
         this.element = undefined;
     }

From 43ccd429ecc0945d4d930a0b20f584a1ca027472 Mon Sep 17 00:00:00 2001
From: ilya_razuvaev <ilya.razuvaev@annoto.net>
Date: Thu, 17 Aug 2023 14:08:09 +0300
Subject: [PATCH 2/3] fix: refactored capture UI

---
 src/adaptor.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/adaptor.ts b/src/adaptor.ts
index 607c677..b8d44cf 100644
--- a/src/adaptor.ts
+++ b/src/adaptor.ts
@@ -45,6 +45,10 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
 
     async remove() {
         this.reset();
+        if (this.captureUIDisposable) {
+            this.captureUIDisposable.dispose();
+            this.captureUIDisposable = undefined;
+        }
         this.logger.debug('remove adaptor');
     }
 
@@ -176,8 +180,8 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
         const { element } = this;
         const progressBarEl = element?.querySelector('.playkit-seek-bar') as HTMLElement;
         this.captureUIDisposable = captureUIEvents({
-            mouseEventsHolderElements: [ progressBarEl ],
-            keyEventsHolderElements: [ element as HTMLElement ],
+            mouseEventsElements: [ progressBarEl ],
+            keyEventsElements: [ element as HTMLElement ],
             mouseEvents: ['mousedown'],
             keyEvents: ['keydown'],
             getDuration: this.duration.bind(this),

From 312951df381c3b5ef72f2bb0f42cfba283c8fa57 Mon Sep 17 00:00:00 2001
From: ilya_razuvaev <ilya.razuvaev@annoto.net>
Date: Thu, 17 Aug 2023 14:14:13 +0300
Subject: [PATCH 3/3] refactor: change place of disposable for capture UI

---
 src/adaptor.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/adaptor.ts b/src/adaptor.ts
index b8d44cf..2f716fd 100644
--- a/src/adaptor.ts
+++ b/src/adaptor.ts
@@ -45,10 +45,6 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
 
     async remove() {
         this.reset();
-        if (this.captureUIDisposable) {
-            this.captureUIDisposable.dispose();
-            this.captureUIDisposable = undefined;
-        }
         this.logger.debug('remove adaptor');
     }
 
@@ -202,6 +198,10 @@ export class PlaykitPlayerAdaptor implements IPlayerAdaptorApi {
         }
         this.events = [];
         this.element = undefined;
+        if (this.captureUIDisposable) {
+            this.captureUIDisposable.dispose();
+            this.captureUIDisposable = undefined;
+        }
     }
 
     private on(event: string, fn: PlaykitListenerType) {