添加画质控制器

src/controls/index.js

@@ -168,11 +168,11 @@ export default class Controls {
 
   show() {
     const { $player } = this.art.refs;
-    $player.classList.add('controls-show');
+    $player.classList.add('artplayer-controls-show');
   }
 
   hide() {
     const { $player } = this.art.refs;
-    $player.classList.remove('controls-show');
+    $player.classList.remove('artplayer-controls-show');
   }
 }

src/controls/quality.js

@@ -1,3 +1,5 @@
+import { append } from '../utils';
+
 export default class Quality {
   constructor(option) {
     this.option = option;
@@ -5,5 +7,24 @@ export default class Quality {
 
   apply(art) {
     this.art = art;
+    const { option, events: { proxy, hover }, player } = this.art;
+    const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
+    const $qualityName = append(this.option.$control, `<div class="art-quality-name">${defaultQuality.name}</div>`);
+    const qualityList = option.quality.map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`).join('');
+    const $qualitys = append(this.option.$control, `<div class="art-qualitys">${qualityList}</div>`);
+
+    hover(this.option.$control, () => {
+      this.option.$control.classList.add('hover');
+    }, () => {
+      this.option.$control.classList.remove('hover');
+    });
+
+    proxy($qualitys, 'click', event => {
+      const { url, name } = option.quality[event.target.dataset.index];
+      if (url && name) {
+        player.switch(url, name);
+        $qualityName.innerHTML = name;
+      }
+    });
   }
 }

src/events.js

@@ -3,6 +3,7 @@ export default class Events {
     this.art = art;
     this.destroyEvents = [];
     this.proxy = this.proxy.bind(this);
+    this.hover = this.hover.bind(this);
   }
 
   proxy(target, name, callback, option = {}) {
@@ -16,6 +17,11 @@ export default class Events {
     });
   }
 
+  hover(target, mouseenter, mouseleave) {
+    this.proxy(target, 'mouseenter', mouseenter);
+    this.proxy(target, 'mouseleave', mouseleave);
+  }
+
   destroy() {
     this.destroyEvents.forEach(event => event());
   }

src/player.js

@@ -26,7 +26,7 @@ export default class Player {
   }
 
   eventBind() {
-    const { option, events: { proxy }, refs: { $player, $video }, i18n, notice } = this.art;
+    const { option, events: { proxy, hover }, refs: { $player, $video }, i18n, notice } = this.art;
 
     config.video.events.forEach(eventName => {
       proxy($video, eventName, event => {
@@ -105,6 +105,14 @@ export default class Player {
         });
       }
     });
+
+    hover($player, () => {
+      $player.classList.add('artplayer-hover');
+      this.art.emit('hoverenter');
+    }, () => {
+      $player.classList.remove('artplayer-hover');
+      this.art.emit('hoverleave');
+    });
   }
 
   play() {

src/style/bottom.scss

@@ -194,10 +194,43 @@
                 line-height: 36px;
                 padding: 0 10px;
             }
+
+            .art-control-quality {
+                position: relative;
+                z-index: 30;
+                line-height: 36px;
+                padding: 0 10px;
+                .art-qualitys {
+                    display: none;
+                    position: absolute;
+                    left: -15px;
+                    bottom: 35px;
+                    width: 100px;
+                    padding: 5px 0;
+                    text-align: center;
+                    color: #fff;
+                    background: rgba(0,0,0,.7);
+                    border-radius: 3px;
+                    .art-quality-item {
+                        height: 30px;
+                        line-height: 30px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+                        &:hover {
+                            background-color: rgba(255,255,255,.1);
+                        }
+                    }
+                }
+                &.hover .art-qualitys{
+                    display: block;
+                }
+            }
         }
     }
     
-    &.controls-show, &:hover {
+    &.artplayer-controls-show, &.artplayer-hover {
         .artplayer-bottom {
             opacity: 1;
             visibility: visible;