Hls quality (#409)

* update docs

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';
+};