add art.quality

packages/artplayer/src/control/index.js

@@ -1,4 +1,4 @@
-import { errorHandle, addClass, removeClass, isMobile } from '../utils';
+import { errorHandle, addClass, removeClass, isMobile, sleep } from '../utils';
 import Component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
@@ -10,7 +10,6 @@ import volume from './volume';
 import setting from './setting';
 import thumbnails from './thumbnails';
 import screenshot from './screenshot';
-import quality from './quality';
 import loop from './loop';
 import airplay from './airplay';
 
@@ -104,13 +103,9 @@ export default class Control extends Component {
         }
 
         if (option.quality.length) {
-            this.add(
-                quality({
-                    name: 'quality',
-                    position: 'right',
-                    index: 10,
-                }),
-            );
+            sleep().then(() => {
+                this.art.quality = option.quality;
+            });
         }
 
         if (option.screenshot && !isMobile) {

packages/artplayer/src/control/quality.js

@@ -1,17 +0,0 @@
-export default function quality(option) {
-    return (art) => {
-        const qualityOption = art.option.quality;
-        const qualityDefault = qualityOption.find((item) => item.default) || qualityOption[0];
-        return {
-            ...option,
-            style: {
-                marginRight: '10px',
-            },
-            html: qualityDefault ? qualityDefault.html : '',
-            selector: qualityOption,
-            onSelect(item) {
-                art.switchQuality(item.url, item.html);
-            },
-        };
-    };
-}

packages/artplayer/src/player/index.js

@@ -30,6 +30,7 @@ import typeMix from './typeMix';
 import stateMix from './stateMix';
 import subtitleOffsetMix from './subtitleOffsetMix';
 import airplayMix from './airplayMix';
+import qualityMix from './qualityMix';
 import optionInit from './optionInit';
 import eventInit from './eventInit';
 
@@ -67,6 +68,7 @@ export default class Player {
         stateMix(art);
         subtitleOffsetMix(art);
         airplayMix(art);
+        qualityMix(art);
         eventInit(art);
         optionInit(art);
     }

packages/artplayer/src/player/qualityMix.js

@@ -0,0 +1,24 @@
+import { def } from '../utils';
+
+export default function qualityMix(art) {
+    def(art, 'quality', {
+        set(quality) {
+            const { controls, notice, i18n } = art;
+            const qualityDefault = quality.find((item) => item.default) || quality[0];
+            controls.update({
+                name: 'quality',
+                position: 'right',
+                index: 10,
+                style: {
+                    marginRight: '10px',
+                },
+                html: qualityDefault ? qualityDefault.html : '',
+                selector: quality,
+                async onSelect(item) {
+                    await art.switchQuality(item.url);
+                    notice.show = `${i18n.get('Switch Video')}: ${item.html}`;
+                },
+            });
+        },
+    });
+}

packages/artplayer/src/style/selector.less

@@ -20,6 +20,7 @@
 
         .art-selector-item {
             .art-center();
+            width: 100%;
             padding: 10px 15px;
             flex-shrink: 0;
             line-height: 1;