add i18n

.eslintrc

@@ -127,7 +127,7 @@
     "no-unused-vars": 2,
     "no-use-before-define": 2,
 
-    "callback-return": 2,
+    "callback-return": 0,
     "global-require": 1,
     "handle-callback-err": 1,
     "no-mixed-requires": [1, { "allowCall": true }],

docs/css/artplayer.css

@@ -1,2 +1,2 @@
-.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon svg{fill:#fff}.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0}.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;box-sizing:border-box}.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-video-player .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:50px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;box-sizing:border-box;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-thumbnails{position:absolute;z-index:50;top:-95px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-indicator.show-indicator{display:block}.artplayer-video-player .artplayer-bottom .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player.controls-show .artplayer-bottom,.artplayer-video-player:hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player .artplayer-notice{display:none;font-size:13px;position:absolute;z-index:60;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;color:#fff;background:rgba(0,0,0,.6)}.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:70;left:0;top:0;width:200px;padding:5px 0;background:rgba(0,0,0,.8)}.artplayer-video-player .artplayer-contextmenu a{font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;text-shadow:0 0 2px rgba(0,0,0,.5)}.artplayer-video-player .artplayer-contextmenu a:hover{bacLine truncated
+.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon svg{fill:#fff}.artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0}.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;box-sizing:border-box}.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;cursor:pointer}.artplayer-video-player .artplayer-mask .art-icon-play{opacity:.8;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50px}.artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center}.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;left:0;right:0;bottom:0;height:100px;padding:50px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;box-sizing:border-box;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;top:-95px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player.controls-show .artplayer-bottom,.artplayer-video-player:hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:60;left:10px;top:10px;height:30px;line-height:30px;padding:0 10px;border-radius:3px;color:#fff;background:rgba(0,0,0,.6)}.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:70;left:0;top:0;width:200px;padding:5px 0;background:rgbaLine truncated
 button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated

docs/js/artplayer.js

@@ -424,20 +424,20 @@
       'Video info': '视频统计信息',
       'Close': '关闭',
       'Video load failed': '视频加载失败',
-      'Fast forward 10 seconds': '快进10秒',
+      'Volume': '音量',
-      'Rewind 10 seconds': '快退10秒',
+      'Start': '开始',
-      '10% increase in volume': '音量增加10%',
+      'Pause': '暂停',
-      '10% reduction in volume': '音量减少10%'
+      'Rate': '速度'
     },
     'zh-tw': {
       'About author': '關於作者',
       'Video info': '影片統計訊息',
       'Close': '關閉',
       'Video load failed': '影片載入失敗',
-      'Fast forward 10 seconds': '快進10秒',
+      'Volume': '音量',
-      'Rewind 10 seconds': '快退10秒',
+      'Start': '開始',
-      '10% increase in volume': '音量增加10%',
+      'Pause': '暫停',
-      '10% reduction in volume': '音量減少10%'
+      'Rate': '速度'
     }
   };
 
@@ -449,14 +449,26 @@
 
       classCallCheck(this, I18n);
 
-      this.language = i18nMap[option.lang.toLowerCase()] || {};
+      this.option = option;
+      this.init();
     }
 
     createClass(I18n, [{
+      key: "init",
+      value: function init() {
+        this.language = i18nMap[this.option.lang.toLowerCase()] || {};
+      }
+    }, {
       key: "get",
       value: function get(key) {
         return this.language[key] || key;
       }
+    }, {
+      key: "update",
+      value: function update(callback) {
+        i18nMap = callback(i18nMap);
+        this.init();
+      }
     }]);
 
     return I18n;
@@ -550,21 +562,31 @@
         });
         this.art.on('video:error', function () {
           _this.art.isPlaying = false;
+
+          _this.art.loading.hide();
         });
       }
     }, {
       key: "play",
       value: function play() {
-        var $video = this.art.refs.$video;
+        var _this$art2 = this.art,
+            $video = _this$art2.refs.$video,
+            i18n = _this$art2.i18n,
+            notice = _this$art2.notice;
         var promise = $video.play();
+        notice.show(i18n.get('Start'));
         this.art.emit('play', $video);
         return promise;
       }
     }, {
       key: "pause",
       value: function pause() {
-        var $video = this.art.refs.$video;
+        var _this$art3 = this.art,
+            $video = _this$art3.refs.$video,
+            i18n = _this$art3.i18n,
+            notice = _this$art3.notice;
         $video.pause();
+        notice.show(i18n.get('Pause'));
         this.art.emit('pause', $video);
       }
     }, {
@@ -579,7 +601,9 @@
     }, {
       key: "seek",
       value: function seek(time) {
-        var $video = this.art.refs.$video;
+        var _this$art4 = this.art,
+            $video = _this$art4.refs.$video,
+            notice = _this$art4.notice;
         var newTime = Math.max(time, 0);
 
         if ($video.duration) {
@@ -587,41 +611,46 @@
         }
 
         $video.currentTime = newTime;
+        notice.show("".concat(secondToTime(newTime), " / ").concat(secondToTime($video.duration)));
         this.art.emit('seek', newTime);
       }
     }, {
       key: "volume",
       value: function volume(percentage) {
-        var $video = this.art.refs.$video;
+        var _this$art5 = this.art,
+            $video = _this$art5.refs.$video,
+            i18n = _this$art5.i18n,
+            notice = _this$art5.notice;
 
         if (percentage) {
           $video.volume = clamp(percentage, 0, 1);
+          notice.show("".concat(i18n.get('Volume'), ": ").concat(parseInt($video.volume * 100)));
+          this.art.emit('volume', $video.volume);
         }
 
-        this.art.emit('volume', $video.volume);
+        return $video.volume;
       }
     }, {
-      key: "switchVolumeIcon",
+      key: "currentTime",
-      value: function switchVolumeIcon() {//
+      value: function currentTime() {
+        return this.art.refs.$video.currentTime;
       }
     }, {
-      key: "switchVideo",
+      key: "duration",
-      value: function switchVideo() {//
+      value: function duration() {
+        return this.art.refs.$video.duration;
       }
     }, {
-      key: "switchQuality",
+      key: "playbackRate",
-      value: function switchQuality() {//
+      value: function playbackRate(rate) {
-      }
+        var _this$art6 = this.art,
-    }, {
+            $video = _this$art6.refs.$video,
-      key: "resize",
+            i18n = _this$art6.i18n,
-      value: function resize() {//
+            notice = _this$art6.notice;
-      }
+        var newRate = clamp(rate, 0.1, 10);
-    }, {
+        $video.playbackRate = newRate;
-      key: "speed",
+        notice.show("".concat(i18n.get('Rate'), ": ").concat(newRate, "x"));
-      value: function speed(rate) {
+        this.art.emit('playbackRate', newRate);
-        var $video = this.art.refs.$video;
-        $video.playbackRate = rate;
-        this.art.emit('speed', rate);
       }
     }]);
 
@@ -804,7 +833,6 @@
       this.isDroging = false;
       this.getLoaded = this.getLoaded.bind(this);
       this.getPlayed = this.getPlayed.bind(this);
-      this.getPos = this.getPos.bind(this);
       this.set = this.set.bind(this);
       this.init();
     }
@@ -821,11 +849,10 @@
             proxy = _this$art.events.proxy,
             $video = _this$art.refs.$video,
             player = _this$art.player;
-        append(this.option.ref, "\n      <div class=\"art-control-progress-inner\">\n        <div class=\"art-progress-loaded\"></div>\n        <div class=\"art-progress-played\" style=\"background: ".concat(theme, "\"></div>\n        <div class=\"art-progress-highlight\"></div>\n        <div class=\"art-progress-thumbnails\"></div>\n        <div class=\"art-progress-indicator\" style=\"background: ").concat(theme, "\"></div>\n        <div class=\"art-progress-tip art-tip\"></div>\n      </div>\n    "));
+        append(this.option.ref, "\n        <div class=\"art-control-progress-inner\">\n          <div class=\"art-progress-loaded\"></div>\n          <div class=\"art-progress-played\" style=\"background: ".concat(theme, "\"></div>\n          <div class=\"art-progress-highlight\"></div>\n          <div class=\"art-progress-indicator\" style=\"background: ").concat(theme, "\"></div>\n          <div class=\"art-progress-tip art-tip\"></div>\n        </div>\n      "));
         this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
         this.$played = this.option.ref.querySelector('.art-progress-played');
         this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
-        this.$thumbnails = this.option.ref.querySelector('.art-progress-thumbnails');
         this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
         this.$tip = this.option.ref.querySelector('.art-progress-tip');
         this.art.on('video:canplay', function () {
@@ -853,25 +880,15 @@
           } else {
             _this.showTime(event);
           }
-
-          if (_this.art.option.thumbnails.url) {
-            _this.$thumbnails.style.display = 'block';
-
-            _this.showThumbnails(event);
-          }
         });
         proxy(this.option.ref, 'mouseout', function () {
           _this.$tip.style.display = 'none';
-
-          if (_this.art.option.thumbnails.url) {
-            _this.$thumbnails.style.display = 'none';
-          }
         });
         proxy(this.option.ref, 'click', function (event) {
           if (event.target !== _this.$indicator) {
-            var _this$getPos = _this.getPos(event),
+            var _this$getPosFromEvent = _this.getPosFromEvent(event),
-                second = _this$getPos.second,
+                second = _this$getPosFromEvent.second,
-                percentage = _this$getPos.percentage;
+                percentage = _this$getPosFromEvent.percentage;
 
             _this.set('played', percentage);
 
@@ -883,9 +900,9 @@
         });
         proxy(document, 'mousemove', function (event) {
           if (_this.isDroging) {
-            var _this$getPos2 = _this.getPos(event),
+            var _this$getPosFromEvent2 = _this.getPosFromEvent(event),
-                second = _this$getPos2.second,
+                second = _this$getPosFromEvent2.second,
-                percentage = _this$getPos2.percentage;
+                percentage = _this$getPosFromEvent2.percentage;
 
             _this.$indicator.classList.add('show-indicator');
 
@@ -916,9 +933,9 @@
     }, {
       key: "showTime",
       value: function showTime(event) {
-        var _this$getPos3 = this.getPos(event),
+        var _this$getPosFromEvent3 = this.getPosFromEvent(event),
-            width = _this$getPos3.width,
+            width = _this$getPosFromEvent3.width,
-            time = _this$getPos3.time;
+            time = _this$getPosFromEvent3.time;
 
         var tipWidth = this.$tip.clientWidth;
         this.$tip.innerHTML = time;
@@ -931,52 +948,6 @@
           this.$tip.style.left = "".concat(width - tipWidth / 2, "px");
         }
       }
-    }, {
-      key: "showThumbnails",
-      value: function showThumbnails(event) {
-        var _this$getPos4 = this.getPos(event),
-            posWidth = _this$getPos4.width;
-
-        var _this$art$option$thum = this.art.option.thumbnails,
-            url = _this$art$option$thum.url,
-            height = _this$art$option$thum.height,
-            width = _this$art$option$thum.width,
-            number = _this$art$option$thum.number;
-        this.$thumbnails.style.backgroundImage = "url(".concat(url, ")");
-        this.$thumbnails.style.height = "".concat(height, "px");
-        this.$thumbnails.style.width = "".concat(width, "px");
-
-        if (posWidth <= width / 2) {
-          this.$thumbnails.style.left = 0;
-        } else if (posWidth > this.option.ref.clientWidth - width / 2) {
-          this.$thumbnails.style.left = "".concat(this.option.ref.clientWidth - width, "px");
-        } else {
-          this.$thumbnails.style.left = "".concat(posWidth - width / 2, "px");
-        }
-
-        var perWidth = this.option.ref.clientWidth / number;
-        var index = Math.ceil(posWidth / perWidth);
-        this.$thumbnails.style.backgroundPosition = "-".concat(index * width, "px 0");
-      }
-    }, {
-      key: "getPos",
-      value: function getPos(event) {
-        var $video = this.art.refs.$video;
-
-        var _this$option$ref$getB = this.option.ref.getBoundingClientRect(),
-            left = _this$option$ref$getB.left;
-
-        var width = clamp(event.x - left, 0, this.option.ref.clientWidth);
-        var second = width / this.option.ref.clientWidth * $video.duration;
-        var time = secondToTime(second);
-        var percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
-        return {
-          second: second,
-          time: time,
-          width: width,
-          percentage: percentage
-        };
-      }
     }, {
       key: "getPlayed",
       value: function getPlayed() {
@@ -1031,6 +1002,67 @@
     this.option = option;
   };
 
+  var Thumbnails =
+  /*#__PURE__*/
+  function () {
+    function Thumbnails(art, option) {
+      classCallCheck(this, Thumbnails);
+
+      this.art = art;
+      this.option = option;
+      this.init();
+    }
+
+    createClass(Thumbnails, [{
+      key: "init",
+      value: function init() {
+        var _this = this;
+
+        var _this$art = this.art,
+            $progress = _this$art.refs.$progress,
+            proxy = _this$art.events.proxy;
+        proxy($progress, 'mousemove', function (event) {
+          _this.option.ref.style.display = 'block';
+
+          _this.showThumbnails(event);
+        });
+        proxy($progress, 'mouseout', function () {
+          _this.option.ref.style.display = 'none';
+        });
+      }
+    }, {
+      key: "showThumbnails",
+      value: function showThumbnails(event) {
+        var $progress = this.art.refs.$progress;
+
+        var _this$getPosFromEvent = this.getPosFromEvent(event),
+            posWidth = _this$getPosFromEvent.width;
+
+        var _this$art$option$thum = this.art.option.thumbnails,
+            url = _this$art$option$thum.url,
+            height = _this$art$option$thum.height,
+            width = _this$art$option$thum.width,
+            number = _this$art$option$thum.number;
+        var perWidth = $progress.clientWidth / number;
+        var index = Math.ceil(posWidth / perWidth);
+        this.option.ref.style.backgroundImage = "url(".concat(url, ")");
+        this.option.ref.style.height = "".concat(height, "px");
+        this.option.ref.style.width = "".concat(width, "px");
+        this.option.ref.style.backgroundPosition = "-".concat(index * width, "px 0");
+
+        if (posWidth <= width / 2) {
+          this.option.ref.style.left = 0;
+        } else if (posWidth > $progress.clientWidth - width / 2) {
+          this.option.ref.style.left = "".concat($progress.clientWidth - width, "px");
+        } else {
+          this.option.ref.style.left = "".concat(posWidth - width / 2, "px");
+        }
+      }
+    }]);
+
+    return Thumbnails;
+  }();
+
   var id = 0;
 
   var Controls =
@@ -1060,6 +1092,12 @@
           position: 'top',
           index: 10
         });
+        this.add({
+          control: Thumbnails,
+          disable: !this.art.option.thumbnails.url,
+          position: 'top',
+          index: 20
+        });
         this.add({
           control: PlayAndPause,
           disable: false,
@@ -1187,9 +1225,25 @@
             _this3.art.emit('control:show', option.ref);
           }
         });
-        Object.defineProperty(option.control.prototype, 'addMenu', {
+        Object.defineProperty(option.control.prototype, 'getPosFromEvent', {
-          value: function value(menus) {
+          value: function value(event) {
-            console.log(menus);
+            var _this3$art$refs = _this3.art.refs,
+                $video = _this3$art$refs.$video,
+                $progress = _this3$art$refs.$progress;
+
+            var _$progress$getBoundin = $progress.getBoundingClientRect(),
+                left = _$progress$getBoundin.left;
+
+            var width = clamp(event.x - left, 0, $progress.clientWidth);
+            var second = width / $progress.clientWidth * $video.duration;
+            var time = secondToTime(second);
+            var percentage = clamp(width / $progress.clientWidth, 0, 1);
+            return {
+              second: second,
+              time: time,
+              width: width,
+              percentage: percentage
+            };
           }
         });
       }
@@ -1578,8 +1632,6 @@
 
         var _this$art = this.art,
             player = _this$art.player,
-            notice = _this$art.notice,
-            i18n = _this$art.i18n,
             $player = _this$art.refs.$player,
             proxy = _this$art.events.proxy;
         proxy(document, 'click', function (event) {
@@ -1591,33 +1643,25 @@
             var editable = document.activeElement.getAttribute('contenteditable');
 
             if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {
-              var percentage;
-
               switch (event.keyCode) {
                 case 39:
                   event.preventDefault();
                   player.seek(player.currentTime() + 10);
-                  notice.show(i18n.get('Fast forward 10 seconds'), true);
                   break;
 
                 case 37:
                   event.preventDefault();
                   player.seek(player.currentTime() - 10);
-                  notice.show(i18n.get('Rewind 10 seconds'), true);
                   break;
 
                 case 38:
                   event.preventDefault();
-                  percentage = player.volume() + 0.1;
+                  player.volume(player.volume() + 0.05);
-                  player.volume(percentage);
-                  notice.show(i18n.get('10% increase in volume'), true);
                   break;
 
                 case 40:
                   event.preventDefault();
-                  percentage = player.volume() - 0.1;
+                  player.volume(player.volume() - 0.05);
-                  player.volume(percentage);
-                  notice.show(i18n.get('10% reduction in volume'), true);
                   break;
 
                 case 32:
@@ -1771,9 +1815,11 @@
 
     createClass(Notice, [{
       key: "show",
-      value: function show(msg, autoHide) {
+      value: function show(msg) {
         var _this = this;
 
+        var autoHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
         var $notice = this.art.refs.$notice;
         $notice.style.display = 'block';
         $notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
@@ -1782,7 +1828,7 @@
           clearTimeout(this.timer);
           this.timer = setTimeout(function () {
             _this.hide();
-          }, 1000);
+          }, time);
         }
 
         this.art.emit('notice:show', $notice);

docs/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/verification/player.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/mse.js","../../src/verification/control.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/verification/player.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/mse.js","../../src/verification/control.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"SuperLine truncated

src/controls/index.js

@@ -1,3 +1,4 @@
+import { secondToTime, clamp } from '../utils';
 import validControl from '../verification/control';
 import Danmu from './danmu';
 import Fullscreen from './fullscreen';
@@ -8,6 +9,7 @@ import Subtitle from './subtitle';
 import Time from './time';
 import Volume from './volume';
 import Setting from './setting';
+import Thumbnails from './thumbnails';
 
 let id = 0;
 export default class Controls {
@@ -30,6 +32,13 @@ export default class Controls {
       index: 10
     });
 
+    this.add({
+      control: Thumbnails,
+      disable: !this.art.option.thumbnails.url,
+      position: 'top',
+      index: 20
+    });
+
     this.add({
       control: PlayAndPause,
       disable: false,
@@ -155,9 +164,15 @@ export default class Controls {
       }
     });
 
-    Object.defineProperty(option.control.prototype, 'addMenu', {
+    Object.defineProperty(option.control.prototype, 'getPosFromEvent', {
-      value: menus => {
+      value: event => {
-        console.log(menus);
+        const { $video, $progress } = this.art.refs;
+        const { left } = $progress.getBoundingClientRect();
+        const width = clamp(event.x - left, 0, $progress.clientWidth);
+        const second = width / $progress.clientWidth * $video.duration;
+        const time = secondToTime(second);
+        const percentage = clamp(width / $progress.clientWidth, 0, 1);
+        return { second, time, width, percentage };
       }
     });
   }

src/controls/progress.js

@@ -1,4 +1,4 @@
-import { append, secondToTime, clamp } from '../utils';
+import { append } from '../utils';
 
 export default class Progress {
   constructor(art, option) {
@@ -7,7 +7,6 @@ export default class Progress {
     this.isDroging = false;
     this.getLoaded = this.getLoaded.bind(this);
     this.getPlayed = this.getPlayed.bind(this);
-    this.getPos = this.getPos.bind(this);
     this.set = this.set.bind(this);
     this.init();
   }
@@ -23,21 +22,19 @@ export default class Progress {
     append(
       this.option.ref,
       `
-      <div class="art-control-progress-inner">
+        <div class="art-control-progress-inner">
-        <div class="art-progress-loaded"></div>
+          <div class="art-progress-loaded"></div>
-        <div class="art-progress-played" style="background: ${theme}"></div>
+          <div class="art-progress-played" style="background: ${theme}"></div>
-        <div class="art-progress-highlight"></div>
+          <div class="art-progress-highlight"></div>
-        <div class="art-progress-thumbnails"></div>
+          <div class="art-progress-indicator" style="background: ${theme}"></div>
-        <div class="art-progress-indicator" style="background: ${theme}"></div>
+          <div class="art-progress-tip art-tip"></div>
-        <div class="art-progress-tip art-tip"></div>
+        </div>
-      </div>
+      `
-    `
     );
 
     this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
     this.$played = this.option.ref.querySelector('.art-progress-played');
     this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
-    this.$thumbnails = this.option.ref.querySelector('.art-progress-thumbnails');
     this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
     this.$tip = this.option.ref.querySelector('.art-progress-tip');
 
@@ -71,23 +68,15 @@ export default class Progress {
       } else {
         this.showTime(event);
       }
-
-      if (this.art.option.thumbnails.url) {
-        this.$thumbnails.style.display = 'block';
-        this.showThumbnails(event);
-      }
     });
 
     proxy(this.option.ref, 'mouseout', () => {
       this.$tip.style.display = 'none';
-      if (this.art.option.thumbnails.url) {
-        this.$thumbnails.style.display = 'none';
-      }
     });
 
     proxy(this.option.ref, 'click', event => {
       if (event.target !== this.$indicator) {
-        const { second, percentage } = this.getPos(event);
+        const { second, percentage } = this.getPosFromEvent(event);
         this.set('played', percentage);
         player.seek(second);
       }
@@ -99,7 +88,7 @@ export default class Progress {
 
     proxy(document, 'mousemove', event => {
       if (this.isDroging) {
-        const { second, percentage } = this.getPos(event);
+        const { second, percentage } = this.getPosFromEvent(event);
         this.$indicator.classList.add('show-indicator');
         this.set('played', percentage);
         player.seek(second);
@@ -126,7 +115,7 @@ export default class Progress {
   }
 
   showTime(event) {
-    const { width, time } = this.getPos(event);
+    const { width, time } = this.getPosFromEvent(event);
     const tipWidth = this.$tip.clientWidth;
     this.$tip.innerHTML = time;
     if (width <= tipWidth / 2) {
@@ -138,36 +127,6 @@ export default class Progress {
     }
   }
 
-  showThumbnails(event) {
-    const { width: posWidth } = this.getPos(event);
-    const { url, height, width, number } = this.art.option.thumbnails;
-    this.$thumbnails.style.backgroundImage = `url(${url})`;
-    this.$thumbnails.style.height = `${height}px`;
-    this.$thumbnails.style.width = `${width}px`;
-
-    if (posWidth <= width / 2) {
-      this.$thumbnails.style.left = 0;
-    } else if (posWidth > this.option.ref.clientWidth - width / 2) {
-      this.$thumbnails.style.left = `${this.option.ref.clientWidth - width}px`;
-    } else {
-      this.$thumbnails.style.left = `${posWidth - width / 2}px`;
-    }
-
-    const perWidth = this.option.ref.clientWidth / number;
-    const index = Math.ceil(posWidth / perWidth);
-    this.$thumbnails.style.backgroundPosition = `-${index * width}px 0`;
-  }
-
-  getPos(event) {
-    const { $video } = this.art.refs;
-    const { left } = this.option.ref.getBoundingClientRect();
-    const width = clamp(event.x - left, 0, this.option.ref.clientWidth);
-    const second = width / this.option.ref.clientWidth * $video.duration;
-    const time = secondToTime(second);
-    const percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
-    return { second, time, width, percentage };
-  }
-
   getPlayed() {
     const { $video } = this.art.refs;
     return $video.currentTime / $video.duration;

src/controls/thumbnails.js

@@ -0,0 +1,43 @@
+export default class Thumbnails {
+  constructor(art, option) {
+    this.art = art;
+    this.option = option;
+    this.init();
+  }
+
+  init() {
+    const {
+      refs: { $progress },
+      events: { proxy }
+    } = this.art;
+
+    proxy($progress, 'mousemove', event => {
+      this.option.ref.style.display = 'block';
+      this.showThumbnails(event);
+    });
+
+    proxy($progress, 'mouseout', () => {
+      this.option.ref.style.display = 'none';
+    });
+  }
+
+  showThumbnails(event) {
+    const { $progress } = this.art.refs;
+    const { width: posWidth } = this.getPosFromEvent(event);
+    const { url, height, width, number } = this.art.option.thumbnails;
+    const perWidth = $progress.clientWidth / number;
+    const index = Math.ceil(posWidth / perWidth);
+    this.option.ref.style.backgroundImage = `url(${url})`;
+    this.option.ref.style.height = `${height}px`;
+    this.option.ref.style.width = `${width}px`;
+    this.option.ref.style.backgroundPosition = `-${index * width}px 0`;
+
+    if (posWidth <= width / 2) {
+      this.option.ref.style.left = 0;
+    } else if (posWidth > $progress.clientWidth - width / 2) {
+      this.option.ref.style.left = `${$progress.clientWidth - width}px`;
+    } else {
+      this.option.ref.style.left = `${posWidth - width / 2}px`;
+    }
+  }
+}

src/hotkey.js

@@ -9,8 +9,6 @@ export default class Hotkey {
   init() {
     const {
       player,
-      notice,
-      i18n,
       refs: { $player },
       events: { proxy }
     } = this.art;
@@ -29,29 +27,22 @@ export default class Hotkey {
           editable !== '' &&
           editable !== 'true'
         ) {
-          let percentage;
           switch (event.keyCode) {
             case 39:
               event.preventDefault();
               player.seek(player.currentTime() + 10);
-              notice.show(i18n.get('Fast forward 10 seconds'), true);
               break;
             case 37:
               event.preventDefault();
               player.seek(player.currentTime() - 10);
-              notice.show(i18n.get('Rewind 10 seconds'), true);
               break;
             case 38:
               event.preventDefault();
-              percentage = player.volume() + 0.1;
+              player.volume(player.volume() + 0.05);
-              player.volume(percentage);
-              notice.show(i18n.get('10% increase in volume'), true);
               break;
             case 40:
               event.preventDefault();
-              percentage = player.volume() - 0.1;
+              player.volume(player.volume() - 0.05);
-              player.volume(percentage);
-              notice.show(i18n.get('10% reduction in volume'), true);
               break;
             case 32:
               event.preventDefault();

src/i18n.js

@@ -1,32 +1,42 @@
-const i18nMap = {
+let i18nMap = {
   'zh-cn': {
     'About author': '关于作者',
     'Video info': '视频统计信息',
     'Close': '关闭',
     'Video load failed': '视频加载失败',
-    'Fast forward 10 seconds': '快进10秒',
+    'Volume': '音量',
-    'Rewind 10 seconds': '快退10秒',
+    'Start': '开始',
-    '10% increase in volume': '音量增加10%',
+    'Pause': '暂停',
-    '10% reduction in volume': '音量减少10%'
+    'Rate': '速度'
   },
   'zh-tw': {
     'About author': '關於作者',
     'Video info': '影片統計訊息',
     'Close': '關閉',
     'Video load failed': '影片載入失敗',
-    'Fast forward 10 seconds': '快進10秒',
+    'Volume': '音量',
-    'Rewind 10 seconds': '快退10秒',
+    'Start': '開始',
-    '10% increase in volume': '音量增加10%',
+    'Pause': '暫停',
-    '10% reduction in volume': '音量減少10%'
+    'Rate': '速度'
   }
 };
 
 export default class I18n {
   constructor({ option }) {
-    this.language = i18nMap[option.lang.toLowerCase()] || {};
+    this.option = option;
+    this.init();
+  }
+
+  init() {
+    this.language = i18nMap[this.option.lang.toLowerCase()] || {};
   }
 
   get(key) {
     return this.language[key] || key;
   }
+
+  update(callback) {
+    i18nMap = callback(i18nMap);
+    this.init();
+  }
 }

src/notice.js

@@ -4,7 +4,7 @@ export default class Notice {
     this.timer = null;
   }
 
-  show(msg, autoHide) {
+  show(msg, autoHide = true, time = 1000) {
     const { $notice } = this.art.refs;
     $notice.style.display = 'block';
     $notice.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
@@ -12,7 +12,7 @@ export default class Notice {
       clearTimeout(this.timer);
       this.timer = setTimeout(() => {
         this.hide();
-      }, 1000);
+      }, time);
     }
     this.art.emit('notice:show', $notice);
   }

src/player.js

@@ -1,4 +1,4 @@
-import { clamp } from './utils';
+import { clamp, secondToTime } from './utils';
 import config from './config';
 
 export default class Player {
@@ -78,19 +78,22 @@ export default class Player {
 
     this.art.on('video:error', () => {
       this.art.isPlaying = false;
+      this.art.loading.hide();
     });
   }
 
   play() {
-    const { $video } = this.art.refs;
+    const { refs: { $video }, i18n, notice } = this.art;
     const promise = $video.play();
+    notice.show(i18n.get('Start'));
     this.art.emit('play', $video);
     return promise;
   }
 
   pause() {
-    const { $video } = this.art.refs;
+    const { refs: { $video }, i18n, notice } = this.art;
     $video.pause();
+    notice.show(i18n.get('Pause'));
     this.art.emit('pause', $video);
   }
 
@@ -103,43 +106,39 @@ export default class Player {
   }
 
   seek(time) {
-    const { $video } = this.art.refs;
+    const { refs: { $video }, notice } = this.art;
     let newTime = Math.max(time, 0);
     if ($video.duration) {
       newTime = Math.min(newTime, $video.duration);
     }
-
     $video.currentTime = newTime;
+    notice.show(`${secondToTime(newTime)} / ${secondToTime($video.duration)}`);
     this.art.emit('seek', newTime);
   }
 
   volume(percentage) {
-    const { $video } = this.art.refs;
+    const { refs: { $video }, i18n, notice } = this.art;
     if (percentage) {
       $video.volume = clamp(percentage, 0, 1);
+      notice.show(`${i18n.get('Volume')}: ${parseInt($video.volume * 100)}`);
+      this.art.emit('volume', $video.volume);
     }
-    this.art.emit('volume', $video.volume);
+    return $video.volume;
   }
 
-  switchVolumeIcon() {
+  currentTime() {
-    //
+    return this.art.refs.$video.currentTime;
   }
 
-  switchVideo() {
+  duration() {
-    //
+    return this.art.refs.$video.duration;
   }
 
-  switchQuality() {
+  playbackRate(rate) {
-    //
+    const { refs: { $video }, i18n, notice } = this.art;
-  }
+    const newRate = clamp(rate, 0.1, 10);
-
+    $video.playbackRate = newRate;
-  resize() {
+    notice.show(`${i18n.get('Rate')}: ${newRate}x`);
-    //
+    this.art.emit('playbackRate', newRate);
-  }
-
-  speed(rate) {
-    const { $video } = this.art.refs;
-    $video.playbackRate = rate;
-    this.art.emit('speed', rate);
   }
 }

src/style/index.scss

@@ -118,107 +118,109 @@
         box-sizing: border-box;
         background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
     
-        .art-control-progress {
+        .artplayer-progress {
             position: relative;
-            height: 5px;
+            .art-control-progress {
-            padding: 1px 0;
-            cursor: pointer;
-
-            .art-control-progress-inner {
                 position: relative;
-                height: 100%;
+                height: 5px;
-                background: rgba(255,255,255,.2);
+                padding: 1px 0;
-                .art-progress-loaded {
+                cursor: pointer;
-                    position: absolute;
-                    z-index: 10;
-                    left: 0;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    height: 100%;
-                    width: 0;
-                    background: rgba(255,255,255,.4);
-                }
     
-                .art-progress-played {
+                .art-control-progress-inner {
-                    position: absolute;
+                    position: relative;
-                    z-index: 20;
-                    left: 0;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
                     height: 100%;
-                    width: 0;
+                    background: rgba(255,255,255,.2);
-                }
+                    .art-progress-loaded {
-
-                .art-progress-highlight {
-                    position: absolute;
-                    z-index: 30;
-                    left: 0;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    height: 0;
-
-                    span {
-                        display: inline-block;
                         position: absolute;
+                        z-index: 10;
                         left: 0;
                         top: 0;
-                        width: 7px;
+                        right: 0;
-                        height: 3px;
+                        bottom: 0;
-                        background: #fff;
+                        height: 100%;
+                        width: 0;
+                        background: rgba(255,255,255,.4);
+                    }
+        
+                    .art-progress-played {
+                        position: absolute;
+                        z-index: 20;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        height: 100%;
+                        width: 0;
+                    }
+    
+                    .art-progress-highlight {
+                        position: absolute;
+                        z-index: 30;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        height: 0;
+    
+                        span {
+                            display: inline-block;
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            width: 7px;
+                            height: 3px;
+                            background: #fff;
+                            border-radius: 3px;
+                        }
+                    }
+        
+                    .art-progress-indicator {
+                        display: none;
+                        position: absolute;
+                        z-index: 40;
+                        top: -5px;
+                        left: -6.5px;
+                        width: 13px;
+                        height: 13px;
+                        border-radius: 50%;
+    
+                        &.show-indicator {
+                            display: block;
+                        }
+                    }
+        
+                    .art-progress-tip {
+                        display: none;
+                        position: absolute;
+                        z-index: 50;
+                        top: -25px;
+                        left: 0;
+                        height: 20px;
+                        padding: 0 5px;
+                        line-height: 20px;
+                        color: #fff;
+                        font-size: 12px;
+                        text-align: center;
+                        background: rgba(0,0,0,.7);
                         border-radius: 3px;
+                        font-weight: bold;
                     }
                 }
-
-                .art-progress-thumbnails {
-                    // display: none;
-                    position: absolute;
-                    z-index: 50;
-                    top: -95px;
-                    left: 0;
-                    pointer-events: none;
-                    background-color: rgba(0,0,0,.7);
-                }
     
-                .art-progress-indicator {
+                &:hover {
-                    display: none;
+                    .art-progress-indicator, .art-progress-tip {
-                    position: absolute;
-                    z-index: 40;
-                    top: -5px;
-                    left: -6.5px;
-                    width: 13px;
-                    height: 13px;
-                    border-radius: 50%;
-
-                    &.show-indicator {
                         display: block;
                     }
                 }
-    
-                .art-progress-tip {
-                    display: none;
-                    position: absolute;
-                    z-index: 50;
-                    top: -25px;
-                    left: 0;
-                    height: 20px;
-                    padding: 0 5px;
-                    line-height: 20px;
-                    color: #fff;
-                    font-size: 12px;
-                    text-align: center;
-                    background: rgba(0,0,0,.7);
-                    border-radius: 3px;
-                    font-weight: bold;
-                }
             }
-
+    
-            &:hover {
+            .art-control-thumbnails {
-                .art-progress-indicator, .art-progress-tip {
+                display: none;
-                    display: block;
+                position: absolute;
-                }
+                top: -95px;
+                left: 0;
+                pointer-events: none;
+                background-color: rgba(0,0,0,.7);
             }
         }
     }
@@ -232,7 +234,7 @@
 
     .artplayer-notice {
         display: none;
-        font-size: 13px;
+        font-size: 14px;
         position: absolute;
         z-index: 60;
         left: 10px;
@@ -240,6 +242,7 @@
         height: 30px;
         line-height: 30px;
         padding: 0 10px;
+        border-radius: 3px;
         color: #fff;
         background: rgba(0, 0, 0, 0.6);
     }