Hls quality (#409)

* update docs

packages/artplayer-document/docs/en/Libraries.mdx

@@ -63,6 +63,13 @@ var art = new Artplayer({
                 hls.destroy();
             }
 
+            // When the player is destroyed, the decoder instance must also be destroyed
+            art.on('destroy', () => {
+                if (hls) {
+                    hls.destroy();
+                }
+            });
+
             hls = new Hls();
             hls.loadSource(url);
             hls.attachMedia(video);

packages/artplayer-document/docs/en/Plugins/hls-quality.mdx

@@ -0,0 +1,41 @@
+---
+title: Hls Quality Plugin
+sidebar_position: 4
+---
+
+## Overview
+
+With this plugin, you can add the `Hls` video quality list to the control or the settings panel
+
+## Demo
+
+👉 [View Demo](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
+
+## Install
+
+### Install from `npm`:
+
+```bash
+$ npm install artplayer-plugin-hls-quality
+```
+
+### Install from `yarn`:
+
+```bash
+$ yarn add artplayer-plugin-hls-quality
+```
+
+### Install from `script`:
+
+```html
+<!-- local -->
+<script src="path/to/artplayer-plugin-hls-quality.js"></script>
+
+<!-- jsdelivr -->
+<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
+
+<!-- unpkg -->
+<script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
+```
+
+Then you can access the plugin function through `window.artplayerPluginHlsQuality`

packages/artplayer-document/docs/en/Plugins/iframe.mdx

@@ -5,7 +5,7 @@ sidebar_position: 3
 
 ## Overview
 
-With this plug-in, you can easily control the player in the `iframe` page in the `main page`.
+With this plugin, you can easily control the player in the `iframe` page in the `main page`.
 
 For example, you can control the functions of the `iframe` player through code in the `main page`, or get the value of the `iframe` player.
 

packages/artplayer-document/docs/zh-cn/Libraries.mdx

@@ -61,6 +61,13 @@ var art = new Artplayer({
                 hls.destroy();
             }
 
+            // 播放器销毁时，也要销毁解码器实例
+            art.on('destroy', () => {
+                if (hls) {
+                    hls.destroy();
+                }
+            });
+
             hls = new Hls();
             hls.loadSource(url);
             hls.attachMedia(video);

packages/artplayer-document/docs/zh-cn/Plugins/hls-quality.mdx

@@ -0,0 +1,41 @@
+---
+title: Hls 画质插件
+sidebar_position: 4
+---
+
+## 说明
+
+通过该插件，可以添加 `Hls` 画质列表到控制栏或者设置面板里
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
+
+## 安装
+
+### 通过 `npm` 安装：
+
+```bash
+$ npm install artplayer-plugin-hls-quality
+```
+
+### 通过 `yarn` 安装：
+
+```bash
+$ yarn add artplayer-plugin-hls-quality
+```
+
+### 通过 `script` 安装：
+
+```html
+<!-- 本地 -->
+<script src="path/to/artplayer-plugin-hls-quality.js"></script>
+
+<!-- jsdelivr -->
+<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
+
+<!-- unpkg -->
+<script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>
+```
+
+然后你可以通过 `window.artplayerPluginHlsQuality` 访问到插件函数

packages/artplayer-plugin-hls-quality/.npmignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+test
+coverage
+.nyc_output
+.parcel-cache
+.cache
+docs

packages/artplayer-plugin-hls-quality/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/artplayer-plugin-hls-quality/README.md

@@ -0,0 +1,15 @@
+# artplayer-plugin-hls-quality
+
+Hls quality plugin for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
+
+## Usage
+
+[https://artplayer.org/document/en/Plugins/hls-quality](https://artplayer.org/document/en/Plugins/hls-quality)
+
+## License
+
+MIT © Harvey Zack

packages/artplayer-plugin-hls-quality/package.json

@@ -0,0 +1,24 @@
+{
+  "license": "MIT",
+  "version": "1.0.0",
+  "name": "artplayer-plugin-hls-quality",
+  "types": "types/artplayer-plugin-hls-quality.d.ts",
+  "description": "Iframe plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-hls-quality.js",
+  "legacy": "dist/artplayer-plugin-hls-quality.legacy.js",
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "homepage": "https://artplayer.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
+  "keywords": [
+    "html5",
+    "video",
+    "player"
+  ]
+}

packages/artplayer-plugin-hls-quality/src/index.js

@@ -0,0 +1,74 @@
+export default function artplayerPluginHlsQuality(option) {
+    return (art) => {
+        const { errorHandle } = art.constructor.utils;
+        const { $video } = art.template;
+
+        function update() {
+            const hls = art.hls || window.hls;
+
+            errorHandle(
+                hls && hls.media === $video,
+                'Cannot find instance of HLS from "option.hls", "art.hls" or "window.hls"',
+            );
+
+            // https://github.com/video-dev/hls.js/blob/master/docs/API.md#runtime-events
+            // const Hls = hls.constructor;
+
+            const defaultLevel = hls.levels[hls.currentLevel];
+            const defaultHtml = defaultLevel ? defaultLevel.height + 'P' : 'Auto';
+
+            if (option.control) {
+                art.controls.add({
+                    name: 'hls-quality',
+                    position: 'right',
+                    html: defaultHtml,
+                    style: { padding: '0 10px' },
+                    selector: hls.levels.map((item, index) => {
+                        return {
+                            html: item.height + 'P',
+                            level: item.level || index,
+                            default: defaultLevel === item,
+                        };
+                    }),
+                    onSelect(item) {
+                        hls.nextLevel = item.level;
+                        return item.html;
+                    },
+                });
+            }
+
+            if (option.setting) {
+                art.setting.add({
+                    name: 'hls-quality',
+                    tooltip: defaultHtml,
+                    html: option.name || 'Quality',
+                    selector: hls.levels.map((item, index) => {
+                        return {
+                            html: item.height + 'P',
+                            level: item.level || index,
+                            default: defaultLevel === item,
+                        };
+                    }),
+                    onSelect: function (item) {
+                        hls.nextLevel = item.level;
+                        return item.html;
+                    },
+                });
+            }
+        }
+
+        art.on('ready', update);
+
+        return {
+            name: 'artplayerPluginHlsQuality',
+        };
+    };
+}
+
+artplayerPluginHlsQuality.env = process.env.NODE_ENV;
+artplayerPluginHlsQuality.version = process.env.APP_VER;
+artplayerPluginHlsQuality.build = process.env.BUILD_DATE;
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginHlsQuality'] = artplayerPluginHlsQuality;
+}

packages/artplayer-plugin-hls-quality/types/artplayer-plugin-hls-quality.d.ts

@@ -0,0 +1,10 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginHlsQuality;
+export as namespace artplayerPluginHlsQuality;
+
+declare const artplayerPluginHlsQuality: (option: { control?: boolean; setting?: boolean; name?: string }) => (
+    art: Artplayer,
+) => {
+    name: 'artplayerPluginHlsQuality';
+};

packages/artplayer/src/setting/index.js

@@ -88,13 +88,13 @@ export default class Setting extends Component {
         this.$parent.innerHTML = '';
         this.option = makeRecursion(this.option);
         this.init(this.option);
-        return this;
+        return this.option;
     }
 
     add(setting) {
         this.option.push(setting);
         this.update();
-        return this;
+        return setting;
     }
 
     creatHeader(item) {

packages/artplayer/types/artplayer.d.ts

@@ -7,7 +7,7 @@ import { Subtitle } from './subtitle';
 import { Icons } from './icons';
 import { Template } from './template';
 import { I18n } from './i18n';
-import { Setting } from './setting';
+import { Setting, SettingOption } from './setting';
 import { Component } from './component';
 
 export = Artplayer;
@@ -145,8 +145,8 @@ declare class Artplayer extends Player {
 
     readonly setting: {
         option: Setting[];
-        add(setting: Setting): Artplayer['setting'];
-        update(): Artplayer['setting'];
+        add(setting: Setting): SettingOption;
+        update(): SettingOption[];
     } & Component;
 
     readonly plugins: {

packages/artplayer/types/setting.d.ts

@@ -13,6 +13,8 @@ type Props<T> = {
     $parentList: Setting[];
 } & Omit<T, 'html' | 'icon' | 'tooltip'>;
 
+export type SettingOption = Props<Setting>;
+
 export type Setting = {
     /**
      * Html string or html element of setting name
@@ -52,7 +54,7 @@ export type Setting = {
     /**
      * When selector item click
      */
-    onSelect?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
+    onSelect?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
 
     /**
      * Custom switch item
@@ -62,7 +64,7 @@ export type Setting = {
     /**
      * When switch item click
      */
-    onSwitch?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
+    onSwitch?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
 
     /**
      * Custom range item
@@ -72,12 +74,12 @@ export type Setting = {
     /**
      * When range item change
      */
-    onRange?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
+    onRange?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
 
     /**
      * When range item change in real time
      */
-    onChange?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
+    onChange?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
 
     [key: string]: any;
 };