impl media interactions recording

close #159
close #72
listen to HTMLMediaElement's play/pause events, and replay them
by programmatically play and pause the target element.

src/types.ts

@@ -60,6 +60,7 @@ export enum IncrementalSource {
   ViewportResize,
   Input,
   TouchMove,
+  MediaInteraction,
 }
 
 export type mutationData = {
@@ -88,13 +89,18 @@ export type inputData = {
   id: number;
 } & inputValue;
 
+export type mediaInteractionData = {
+  source: IncrementalSource.MediaInteraction;
+} & mediaInteractionParam;
+
 export type incrementalData =
   | mutationData
   | mousemoveData
   | mouseInteractionData
   | scrollData
   | viewportResizeData
-  | inputData;
+  | inputData
+  | mediaInteractionData;
 
 export type event =
   | domContentLoadedEvent
@@ -130,6 +136,7 @@ export type observerParam = {
   scrollCb: scrollCallback;
   viewportResizeCb: viewportResizeCallback;
   inputCb: inputCallback;
+  mediaInteractionCb: mediaInteractionCallback;
   blockClass: blockClass;
   ignoreClass: string;
   maskAllInputs: boolean;
@@ -144,6 +151,7 @@ export type hooksParam = {
   scroll?: scrollCallback;
   viewportResize?: viewportResizeCallback;
   input?: inputCallback;
+  mediaInteaction?: mediaInteractionCallback;
 };
 
 export type textCursor = {
@@ -245,6 +253,18 @@ export type inputValue = {
 
 export type inputCallback = (v: inputValue & { id: number }) => void;
 
+export const enum MediaInteractions {
+  Play,
+  Pause,
+}
+
+export type mediaInteractionParam = {
+  type: MediaInteractions;
+  id: number;
+};
+
+export type mediaInteractionCallback = (p: mediaInteractionParam) => void;
+
 export type Mirror = {
   map: idNodeMap;
   getId: (n: INode) => number;