add tooltip

src/controls/playAndPause.js

@@ -1,4 +1,4 @@
-import { append } from '../utils';
+import { append, tooltip } from '../utils';
 import icons from '../icons';
 
 export default class PlayAndPause {
@@ -12,10 +12,12 @@ export default class PlayAndPause {
   }
 
   init() {
-    const { events: { proxy }, player } = this.art;
+    const { events: { proxy }, player, i18n } = this.art;
 
     this.$play = append(this.option.$control, icons.play);
     this.$pause = append(this.option.$control, icons.pause);
+    tooltip(this.$play, i18n.get('Pause'));
+    tooltip(this.$pause, i18n.get('Play'));
     this.$pause.style.display = 'none';
 
     proxy(this.$play, 'click', () => {

src/controls/volume.js

@@ -1,4 +1,4 @@
-import { append, setStorage, getStorage, clamp } from '../utils';
+import { append, setStorage, getStorage, clamp, tooltip } from '../utils';
 import icons from '../icons';
 
 export default class Volume {
@@ -13,11 +13,12 @@ export default class Volume {
   }
 
   init() {
-    const { events: { proxy }, player } = this.art;
+    const { events: { proxy }, player, i18n } = this.art;
     this.$volume = append(this.option.$control, icons.volume);
     this.$volumeClose = append(this.option.$control, icons.volumeClose);
     this.$volumePanel = append(this.option.$control, '<div class="art-volume-panel"></div>');
     this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
+    tooltip(this.$volume, i18n.get('Mute'));
     this.$volumeClose.style.display = 'none';
 
     const volume = getStorage('volume');

src/i18n.js

@@ -5,9 +5,10 @@ let i18nMap = {
     'Close': '关闭',
     'Video load failed': '视频加载失败',
     'Volume': '音量',
-    'Start': '开始',
+    'Play': '开始',
     'Pause': '暂停',
-    'Rate': '速度'
+    'Rate': '速度',
+    'Mute': '静音'
   },
   'zh-tw': {
     'About author': '關於作者',
@@ -15,9 +16,10 @@ let i18nMap = {
     'Close': '關閉',
     'Video load failed': '影片載入失敗',
     'Volume': '音量',
-    'Start': '開始',
+    'Play': '開始',
     'Pause': '暫停',
-    'Rate': '速度'
+    'Rate': '速度',
+    'Mute': '靜音'
   }
 };
 

src/index.js

@@ -1,4 +1,5 @@
 import './style';
+import 'balloon-css/balloon.min.css';
 import { deepMerge } from './utils';
 import validOption from './verification/player';
 import config from './config';

src/style/bottom.scss

@@ -132,7 +132,7 @@
                 float: left;
                 font-size: 12px;
                 height: 36px;
-                line-height: 36px;
+                // line-height: 36px;
                 cursor: pointer;
                 .art-icon {
                     display: flex;
@@ -192,6 +192,7 @@
             }
     
             .art-control-time {
+                line-height: 36px;
                 padding: 0 10px;
             }
         }

src/utils/index.js

@@ -100,3 +100,8 @@ export function getType(val) {
   const type = toString.call(val).slice(8, -1).toLowerCase().replace(/\s/g, '');
   return type;
 }
+
+export function tooltip(target, msg, pos = 'up') {
+  target.setAttribute('data-balloon', msg);
+  target.setAttribute('data-balloon-pos', pos);
+}

src/verification/player.js

@@ -6,10 +6,18 @@ export default function validOption(DEFAULTS, option, path = ['option']) {
     const value = option[key];
     const defaultType = getType(defaultValue);
     const type = getType(value);
-    errorHandle(
-      defaultType === type,
-      `'${path.join('.')}.${key}' require '${defaultType}' type, but got '${type}'`
-    );
+
+    if (key === 'container' || key === 'html') {
+      errorHandle(
+        type === 'string' || value instanceof Element,
+        `'${path.join('.')}.${key}' require 'string' or 'Element' type, but got '${type}'`
+      );
+    } else {
+      errorHandle(
+        defaultType === type,
+        `'${path.join('.')}.${key}' require '${defaultType}' type, but got '${type}'`
+      );
+    }
 
     if (type === 'object') {
       validOption(defaultValue, value, path.concat(key));