:feat add tips (#23)

Co-authored-by: jinwentao <jinwentao@huya.com>

public/index.html

@@ -19,6 +19,10 @@
         target: document.body,
         data: {
           events,
+          skipInactive: true,
+          showDebug: false,
+          autoPlay: false,
+          showWarning: false,
         },
       });
       component.addEventListener('finish', () => console.log('finish'));

src/Controller.html

@@ -55,7 +55,7 @@
       </svg>
       {/if}
     </button>
-    {#each [1, 2, 4, 8] as s}
+    {#each speedOption as s}
     <button
       class:active="s === speed && !isSkipping"
       on:click="setSpeed(s)"
@@ -97,6 +97,7 @@
         isSkipping: false,
         skipInactive: true,
         speed: 1,
+        speedOption: [],
       };
     },
     computed: {
@@ -171,7 +172,7 @@
       },
       play() {
         const { replayer, currentTime } = this.get();
-  
+
         if (currentTime > 0) {
           replayer.resume(currentTime);
         } else {

src/Player.html

@@ -9,6 +9,8 @@
     {autoPlay}
     {skipInactive}
     {tags}
+    {speedOption}
+    {speed}
     on:fullscreen="fullscreen()"
   />
   {/if}
@@ -23,6 +25,7 @@
     exitFullscreen,
     isFullscreen,
     onFullscreenChange,
+    typeOf,
   } from './utils.js';
 
   const controllerHeight = 80;
@@ -38,10 +41,12 @@
         height: 576,
         events: [],
         autoPlay: true,
-        skipInactive: true,
         replayer: null,
         triggerFocus: true,
         tags: {},
+        skipInactive: true,
+        speedOption: [1, 2, 3],
+        speed: 1,
       };
     },
     computed: {
@@ -81,12 +86,36 @@
       },
     },
     oncreate() {
-      const { events, triggerFocus } = this.get();
+      const { events, triggerFocus, showWarning, showDebug, speedOption } = this.get();
+      let { skipInactive, speed } = this.get();
+      skipInactive = skipInactive === undefined ? true : !!skipInactive;
+      speed = speed === undefined ? 1 : speed;
+      // 类型检查
+      if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
+        throw new Error('speedOption must be array');
+      }
+      speedOption.forEach(item => {
+        if (typeOf(item) !== 'number') {
+          throw new Error('item of speedOption must be number');
+        }
+      });
+      if (speedOption.indexOf(speed) < 0) {
+        throw new Error(`speed must be one of speedOption,
+        current config:
+        {
+          ...
+          speed: ${speed},
+          speedOption: [${speedOption.toString()}]
+          ...
+        }
+        `);
+      }
       const replayer = new Replayer(events, {
-        speed: 1,
+        speed: speed === undefined ? 1 : speed,
         root: this.refs.frame,
-        skipInactive: true,
+        skipInactive,
-        showWarning: true,
+        showWarning: showWarning === undefined ? true : !!showWarning,
+        showDebug: showDebug === undefined ? true : !!showDebug,
         triggerFocus,
         unpackFn: unpack,
       });
@@ -96,6 +125,8 @@
 
       this.set({
         replayer,
+        skipInactive,
+        speed,
       });
       this.fullscreenListener = onFullscreenChange(() => {
         if (isFullscreen()) {

src/utils.js

@@ -87,3 +87,20 @@ export function onFullscreenChange(handler) {
     document.removeEventListener('MSFullscreenChange', handler);
   };
 }
+
+export function typeOf(obj) {
+  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)];
+}