添加更多错误机制

src/controls/thumbnails.js

@@ -1,3 +1,5 @@
+import { errorHandle } from '../utils';
+
 export default class Thumbnails {
   constructor(option) {
     this.option = option;
@@ -53,6 +55,7 @@ export default class Thumbnails {
 
   showThumbnails(event) {
     const { refs: { $progress }, controls } = this.art;
+    errorHandle(controls.progress, '\'thumbnails\' control dependent on \'progress\' control');
     const { width: posWidth } = controls.progress.getPosFromEvent(event);
     const { url, height, width, number, column } = this.art.option.thumbnails;
     const perWidth = $progress.clientWidth / number;

src/notice.js

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

src/player.js

@@ -93,7 +93,7 @@ export default class Player {
 
     this.art.on('video:error', () => {
       if (this.reconnectTime < this.maxReconnectTime) {
-        sleep(100).then(() => {
+        sleep(1000).then(() => {
           this.reconnectTime++;
           $video.src = option.url;
           notice.show(`${i18n.get('Reconnect')}: ${this.reconnectTime}`);

src/style/notice.scss

@@ -4,13 +4,16 @@
         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, 0.6);
+        left: 0;
+        top: 0;
+        padding: 10px;
+        width: 100%;
+        .artplayer-notice-inner {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 3px;
+        }
     }
 }

src/template.js

@@ -20,7 +20,9 @@ export default class Template {
             </div>
           </div>
           <div class="artplayer-loading"></div>
-          <div class="artplayer-notice"></div>
+          <div class="artplayer-notice">
+            <div class="artplayer-notice-inner"></div>
+          </div>
           <div class="artplayer-info">
             <div class="artplayer-info-panel"></div>
             <div class="artplayer-info-close">[x]</div>
@@ -38,6 +40,7 @@ export default class Template {
     refs.$layers = refs.$container.querySelector('.artplayer-layers');
     refs.$loading = refs.$container.querySelector('.artplayer-loading');
     refs.$notice = refs.$container.querySelector('.artplayer-notice');
+    refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');
     refs.$mask = refs.$container.querySelector('.artplayer-mask');
     refs.$info = refs.$container.querySelector('.artplayer-info');
     refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');