feat: migrate from artplayer-plugin-hls-quality to artplayer-plugin-hls-control, update configurations and documentation

packages/artplayer-plugin-hls-control/.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-control/.npmrc

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

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

@@ -0,0 +1,11 @@
+# artplayer-plugin-hls-control
+
+Hls control 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-control/index.js&example=hls.control)
+
+## License
+
+MIT © Harvey Zack

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

@@ -0,0 +1,24 @@
+{
+    "license": "MIT",
+    "version": "3.0.0",
+    "name": "artplayer-plugin-hls-control",
+    "types": "types/artplayer-plugin-hls-control.d.ts",
+    "description": "Iframe plugin for ArtPlayer",
+    "main": "dist/artplayer-plugin-hls-control.js",
+    "legacy": "dist/artplayer-plugin-hls-control.legacy.js",
+    "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+    "browserslist": "last 1 Chrome version",
+    "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-control/src/index.js

@@ -0,0 +1,86 @@
+import $quality from 'bundle-text:./quality.svg';
+
+export default function artplayerPluginHlsControl(option = {}) {
+    return (art) => {
+        const { $video } = art.template;
+        const { errorHandle } = art.constructor.utils;
+
+        function updateQuality(hls) {
+            const config = option.quality || {};
+            const auto = config.auto || 'Auto';
+            const title = config.title || 'Quality';
+            const getName = config.getName || ((level) => (level.height || 'Unknown ') + 'P');
+            const defaultLevel = hls.levels[hls.currentLevel];
+            const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;
+
+            const selector = hls.levels
+                .map((item, index) => {
+                    return {
+                        html: getName(item, index),
+                        level: item.level || index,
+                        default: hls.currentLevel === index,
+                    };
+                })
+                .sort((a, b) => b.level - a.level);
+
+            selector.push({
+                html: auto,
+                level: -1,
+                default: hls.currentLevel === -1,
+            });
+
+            const onSelect = (item) => {
+                hls.currentLevel = item.level;
+                art.loading.show = true;
+                art.notice.show = `${title}: ${item.html}`;
+                return item.html;
+            };
+
+            if (config.control) {
+                art.controls.update({
+                    name: 'hls-quality',
+                    position: 'right',
+                    html: defaultHtml,
+                    style: { padding: '0 10px' },
+                    selector: selector,
+                    onSelect: onSelect,
+                });
+            }
+
+            if (config.setting) {
+                art.setting.update({
+                    name: 'hls-quality',
+                    tooltip: defaultHtml,
+                    html: title,
+                    icon: $quality,
+                    width: 200,
+                    selector: selector,
+                    onSelect: onSelect,
+                });
+            }
+        }
+
+        function updateAudio(hls) {
+            //
+        }
+
+        function update() {
+            const hls = art.hls || window.hls;
+            errorHandle(hls && hls.media === $video, 'Cannot find instance of HLS from "art.hls" or "window.hls"');
+            updateQuality(hls);
+            updateAudio(hls);
+        }
+
+        art.on('ready', update);
+        art.on('restart', update);
+
+        return {
+            name: 'artplayerPluginHlsControl',
+            update,
+        };
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerPluginHlsControl'] = artplayerPluginHlsControl;
+}

packages/artplayer-plugin-hls-control/src/quality.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1666857514489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2580" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M870.4 176 153.6 176C104.128 176 64 216.128 64 265.6l0 492.736c0 49.472 40.128 89.6 89.6 89.6L870.4 847.936c49.472 0 89.6-40.128 89.6-89.6L960 265.6C960 216.128 919.872 176 870.4 176zM870.4 668.8 825.6 668.8c0 0-29.696-65.792-89.6-89.6s-134.4 89.6-134.4 89.6S535.04 596.992 467.2 444.8C399.36 292.608 153.6 624 153.6 624l0-358.4L870.4 265.6 870.4 668.8zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2C631.68 355.2 601.6 385.344 601.6 422.4 601.6 459.52 631.68 489.6 668.8 489.6z" p-id="2581" fill="#ffffff"></path>
+</svg>

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

@@ -0,0 +1,24 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerPluginHlsControl;
+export as namespace artplayerPluginHlsControl;
+
+declare const artplayerPluginHlsControl: (option: {
+    quality?: {
+        control?: boolean;
+        setting?: boolean;
+        title?: string;
+        auto?: string;
+        getName?(level: object): String;
+    };
+    audio?: {
+        control?: boolean;
+        setting?: boolean;
+        title?: string;
+        auto?: string;
+        getName?(level: object): String;
+    };
+}) => (art: Artplayer) => {
+    name: 'artplayerPluginHlsControl';
+    update: () => void;
+};