implement video seek feature (#593)

* implement video seek feature

* rm attribute from MediaInteractions

* resolve ts warning

* use getEventTarget

src/record/observer.ts

@@ -482,17 +482,22 @@ function initMediaInteractionObserver(
   blockClass: blockClass,
   mirror: Mirror,
 ): listenerHandler {
-  const handler = (type: 'play' | 'pause') => (event: Event) => {
+  const handler = (type: MediaInteractions ) => (event: Event) => {
     const target = getEventTarget(event);
     if (!target || isBlocked(target as Node, blockClass)) {
       return;
     }
     mediaInteractionCb({
-      type: type === 'play' ? MediaInteractions.Play : MediaInteractions.Pause,
+      type,
       id: mirror.getId(target as INode),
+      currentTime: (target as HTMLMediaElement).currentTime
     });
   };
-  const handlers = [on('play', handler('play')), on('pause', handler('pause'))];
+  const handlers = [
+    on('play', handler(MediaInteractions.Play)), 
+    on('pause', handler(MediaInteractions.Pause)), 
+    on('seeked', handler(MediaInteractions.Seeked))
+  ];
   return () => {
     handlers.forEach((h) => h());
   };

src/replay/index.ts

@@ -906,17 +906,18 @@ export class Replayer {
         }
         const mediaEl = (target as Node) as HTMLMediaElement;
         try {
+          if (d.currentTime) {
+            mediaEl.currentTime = d.currentTime;
+          }
           if (d.type === MediaInteractions.Pause) {
             mediaEl.pause();
           }
           if (d.type === MediaInteractions.Play) {
-            if (mediaEl.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            // remove listener for 'canplay' event because play() is async and returns a promise
-              mediaEl.play();
+            // i.e. media will evntualy start to play when data is loaded
-            } else {
+            // 'canplay' event fires even when currentTime attribute changes which may lead to 
-              mediaEl.addEventListener('canplay', () => {
+            // unexpeted behavior
-                mediaEl.play();
+            mediaEl.play();
-              });
-            }
           }
         } catch (error) {
           if (this.config.showWarning) {

src/types.ts

@@ -474,11 +474,13 @@ export type inputCallback = (v: inputValue & { id: number }) => void;
 export const enum MediaInteractions {
   Play,
   Pause,
+  Seeked,
 }
 
 export type mediaInteractionParam = {
   type: MediaInteractions;
   id: number;
+  currentTime?: number
 };
 
 export type mediaInteractionCallback = (p: mediaInteractionParam) => void;

typings/types.d.ts

@@ -334,11 +334,13 @@ export declare type inputCallback = (v: inputValue & {
 }) => void;
 export declare const enum MediaInteractions {
     Play = 0,
-    Pause = 1
+    Pause = 1,
+    Seeked = 2
 }
 export declare type mediaInteractionParam = {
     type: MediaInteractions;
     id: number;
+    currentTime?: number;
 };
 export declare type mediaInteractionCallback = (p: mediaInteractionParam) => void;
 export declare type DocumentDimension = {