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;

packages/artplayer/types/option.d.ts

@@ -3,6 +3,7 @@ import { Setting } from './setting';
 import { Icons } from './icons';
 import { I18n } from './i18n';
 import { CssVar } from './cssVar';
+import { quality } from './quality';
 import { ComponentOption } from './component';
 import Artplayer = require('./artplayer');
 
@@ -207,22 +208,7 @@ export type Option = {
     /**
      * Custom video quality list
      */
-    quality?: {
-        /**
-         * Whether the default is selected
-         */
-        default?: boolean;
-
-        /**
-         * Html string of quality
-         */
-        html: string | HTMLElement;
-
-        /**
-         * Video quality url
-         */
-        url: string;
-    }[];
+    quality?: quality[];
 
     /**
      * Custom highlight list

packages/artplayer/types/player.d.ts

@@ -1,5 +1,6 @@
 import { CssVar } from './cssVar';
 import { CustomType } from './option';
+import { quality } from './quality';
 
 export type AspectRatio = 'default' | '4:3' | '16:9' | (`${number}:${number}` & Record<never, never>);
 export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>);
@@ -63,6 +64,7 @@ export declare class Player {
     get subtitleOffset(): number;
     set subtitleOffset(time: number);
     set switch(url: string);
+    set quality(quality: quality[]);
     pause(): void;
     play(): Promise<void>;
     toggle(): void;

packages/artplayer/types/quality.d.ts

@@ -0,0 +1,16 @@
+export type quality = {
+    /**
+     * Whether the default is selected
+     */
+    default?: boolean;
+
+    /**
+     * Html string of quality
+     */
+    html: string | HTMLElement;
+
+    /**
+     * Video quality url
+     */
+    url: string;
+};