Refactoring rrweb-player (#26)

* enable drag and drop in controller

* setup svelte v3 workflow and entry point

* add ts eslint config and do compatibility fallbacks in API

* rewrite replayer in svelte v3

* fix css import

* fix fullscreen API

src/utils.ts

@@ -0,0 +1,135 @@
+declare global {
+  interface Document {
+    mozExitFullscreen: Document['exitFullscreen'];
+    webkitExitFullscreen: Document['exitFullscreen'];
+    msExitFullscreen: Document['exitFullscreen'];
+    webkitIsFullScreen: Document['fullscreen'];
+    mozFullScreen: Document['fullscreen'];
+    msFullscreenElement: Document['fullscreen'];
+  }
+
+  interface HTMLElement {
+    mozRequestFullScreen: Element['requestFullscreen'];
+    webkitRequestFullscreen: Element['requestFullscreen'];
+    msRequestFullscreen: Element['requestFullscreen'];
+  }
+}
+
+export function inlineCss(cssObj: Record<string, string>): string {
+  let style = '';
+  Object.keys(cssObj).forEach((key) => {
+    style += `${key}: ${cssObj[key]};`;
+  });
+  return style;
+}
+
+function padZero(num: number, len = 2): string {
+  let str = String(num);
+  const threshold = Math.pow(10, len - 1);
+  if (num < threshold) {
+    while (String(threshold).length > str.length) {
+      str = '0' + num;
+    }
+  }
+  return str;
+}
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+export function formatTime(ms: number): string {
+  if (ms <= 0) {
+    return '00:00';
+  }
+  const hour = Math.floor(ms / HOUR);
+  ms = ms % HOUR;
+  const minute = Math.floor(ms / MINUTE);
+  ms = ms % MINUTE;
+  const second = Math.floor(ms / SECOND);
+  if (hour) {
+    return `${padZero(hour)}:${padZero(minute)}:${padZero(second)}`;
+  }
+  return `${padZero(minute)}:${padZero(second)}`;
+}
+
+export function openFullscreen(el: HTMLElement): Promise<void> {
+  if (el.requestFullscreen) {
+    return el.requestFullscreen();
+  } else if (el.mozRequestFullScreen) {
+    /* Firefox */
+    return el.mozRequestFullScreen();
+  } else if (el.webkitRequestFullscreen) {
+    /* Chrome, Safari and Opera */
+    return el.webkitRequestFullscreen();
+  } else if (el.msRequestFullscreen) {
+    /* IE/Edge */
+    return el.msRequestFullscreen();
+  }
+}
+
+export function exitFullscreen(): Promise<void> {
+  if (document.exitFullscreen) {
+    return document.exitFullscreen();
+  } else if (document.mozExitFullscreen) {
+    /* Firefox */
+    return document.mozExitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    /* Chrome, Safari and Opera */
+    return document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    /* IE/Edge */
+    return document.msExitFullscreen();
+  }
+}
+
+export function isFullscreen(): boolean {
+  return (
+    document.fullscreen ||
+    document.webkitIsFullScreen ||
+    document.mozFullScreen ||
+    document.msFullscreenElement
+  );
+}
+
+export function onFullscreenChange(handler: () => unknown): () => void {
+  document.addEventListener('fullscreenchange', handler);
+  document.addEventListener('webkitfullscreenchange', handler);
+  document.addEventListener('mozfullscreenchange', handler);
+  document.addEventListener('MSFullscreenChange', handler);
+
+  return () => {
+    document.removeEventListener('fullscreenchange', handler);
+    document.removeEventListener('webkitfullscreenchange', handler);
+    document.removeEventListener('mozfullscreenchange', handler);
+    document.removeEventListener('MSFullscreenChange', handler);
+  };
+}
+
+export function typeOf(
+  obj: unknown,
+):
+  | 'boolean'
+  | 'number'
+  | 'string'
+  | 'function'
+  | 'array'
+  | 'date'
+  | 'regExp'
+  | 'undefined'
+  | 'null'
+  | 'object' {
+  const toString = Object.prototype.toString;
+  const map = {
+    '[object Boolean]': 'boolean',
+    '[object Number]': 'number',
+    '[object String]': 'string',
+    '[object Function]': 'function',
+    '[object Array]': 'array',
+    '[object Date]': 'date',
+    '[object RegExp]': 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]': 'null',
+    '[object Object]': 'object',
+  };
+  return map[toString.call(obj)];
+}