update demo

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

@@ -44,7 +44,7 @@ art.url = '/assets/sample/video.mpd';
 
 :::tip Tip
 
-If `customType` is used, the previous decoder instance must be destroyed before switching addresses, otherwise memory leakage will occur
+If `customType` is used, the previous decoder instance must be destroyed before switching url, otherwise memory leakage will occur
 
 :::
 
@@ -58,7 +58,7 @@ var art = new Artplayer({
         m3u8: async function (video, url) {
             const { default: Hls } = await import('hls.js');
 
-            // Destroy the last decoder instance before switching addresses
+            // Destroy the last decoder instance before switching url
             if (hls) {
                 hls.destroy();
             }

packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js

@@ -0,0 +1,7 @@
+/*!
+ * artplayer-plugin-hls-quality.js v1.0.0
+ * Github: https://github.com/zhw2590582/ArtPlayer
+ * (c) 2017-2022 Harvey Zack
+ * Released under the MIT License.
+ */
+!function(e,t,n,r,o){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l.parcelRequire4dc0&&l.parcelRequire4dc0,u=i.cache||{},c="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function f(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof l.parcelRequire4dc0&&l.parcelRequire4dc0;if(!n&&r)return r(t,!0);if(i)return i(t,!0);if(c&&"string"==typeof t)return c(t);var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}a.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},a.cache={};var d=u[t]=new f.Module(t);e[t][0].call(d.exports,a,d,d.exports,this)}return u[t].exports;function a(e){var t=a.resolve(e);return!1===t?{}:f(t)}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=u,f.parent=i,f.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(f,"root",{get:function(){return l.parcelRequire4dc0}}),l.parcelRequire4dc0=f;for(var d=0;d<t.length;d++)f(t[d]);var a=f(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=a:"function"==typeof define&&define.amd&&define((function(){return a}))}({eEHR6:[function(e,t,n){var r=e("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(n);var o=e("bundle-text:./image.svg"),l=r.interopDefault(o);function i(e){return t=>{const{$video:n}=t.template,{errorHandle:r}=t.constructor.utils;return t.on("ready",(function(){const o=t.hls||window.hls;r(o&&o.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');const i=e.auto||"Auto",u=e.title||"Quality",c=o.levels[o.currentLevel],f=c?c.height+"P":i;e.control&&t.controls.add({name:"hls-quality",position:"right",html:f,style:{padding:"0 10px"},selector:o.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:c===e}))),onSelect:e=>(o.nextLevel=e.level,e.html)}),e.setting&&t.setting.add({name:"hls-quality",tooltip:f,html:u,icon:l.default,selector:o.levels.map(((e,t)=>({html:e.height+"P",level:e.level||t,default:c===e}))),onSelect:function(e){return o.nextLevel=e.level,e.html}})})),{name:"artplayerPluginHlsQuality"}}}n.default=i,i.env="production",i.version="1.0.0",i.build="2022-10-27 16:10:40","undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"5VXix","@parcel/transformer-js/src/esmodule-helpers.js":"9pCYc"}],"5VXix":[function(e,t,n){t.exports='<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M870.4 176H153.6c-49.472 0-89.6 40.128-89.6 89.6v492.736c0 49.472 40.128 89.6 89.6 89.6h716.8c49.472 0 89.6-40.128 89.6-89.6V265.6c0-49.472-40.128-89.6-89.6-89.6zm0 492.8h-44.8s-29.696-65.792-89.6-89.6-134.4 89.6-134.4 89.6-66.56-71.808-134.4-224S153.6 624 153.6 624V265.6h716.8v403.2zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2-37.12.064-67.2 30.208-67.2 67.264 0 37.12 30.08 67.2 67.2 67.2z" fill="#fff"/></svg>'},{}],"9pCYc":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||t.hasOwnProperty(n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})})),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["eEHR6"],"eEHR6");

packages/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.legacy.js

@@ -0,0 +1,7 @@
+/*!
+ * artplayer-plugin-hls-quality.js v1.0.0
+ * Github: https://github.com/zhw2590582/ArtPlayer
+ * (c) 2017-2022 Harvey Zack
+ * Released under the MIT License.
+ */
+!function(e,t,n,r,o){var l="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof l.parcelRequire4dc0&&l.parcelRequire4dc0,u=i.cache||{},f="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function c(t,n){if(!u[t]){if(!e[t]){var r="function"==typeof l.parcelRequire4dc0&&l.parcelRequire4dc0;if(!n&&r)return r(t,!0);if(i)return i(t,!0);if(f&&"string"==typeof t)return f(t);var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}d.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},d.cache={};var a=u[t]=new c.Module(t);e[t][0].call(a.exports,d,a,a.exports,this)}return u[t].exports;function d(e){var t=d.resolve(e);return!1===t?{}:c(t)}}c.isParcelRequire=!0,c.Module=function(e){this.id=e,this.bundle=c,this.exports={}},c.modules=e,c.cache=u,c.parent=i,c.register=function(t,n){e[t]=[function(e,t){t.exports=n},{}]},Object.defineProperty(c,"root",{get:function(){return l.parcelRequire4dc0}}),l.parcelRequire4dc0=c;for(var a=0;a<t.length;a++)c(t[a]);var d=c(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=d:"function"==typeof define&&define.amd&&define((function(){return d}))}({"3yim4":[function(e,t,n){var r=e("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(n);var o=e("bundle-text:./image.svg"),l=r.interopDefault(o);function i(e){return function(t){var n=t.template.$video,r=t.constructor.utils.errorHandle;return t.on("ready",(function(){var o=t.hls||window.hls;r(o&&o.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');var i=e.auto||"Auto",u=e.title||"Quality",f=o.levels[o.currentLevel],c=f?f.height+"P":i;e.control&&t.controls.add({name:"hls-quality",position:"right",html:c,style:{padding:"0 10px"},selector:o.levels.map((function(e,t){return{html:e.height+"P",level:e.level||t,default:f===e}})),onSelect:function(e){return o.nextLevel=e.level,e.html}}),e.setting&&t.setting.add({name:"hls-quality",tooltip:c,html:u,icon:l.default,selector:o.levels.map((function(e,t){return{html:e.height+"P",level:e.level||t,default:f===e}})),onSelect:function(e){return o.nextLevel=e.level,e.html}})})),{name:"artplayerPluginHlsQuality"}}}n.default=i,i.env="production",i.version="1.0.0",i.build="2022-10-27 16:10:42","undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"9cAMb","@parcel/transformer-js/src/esmodule-helpers.js":"47PTV"}],"9cAMb":[function(e,t,n){t.exports='<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M870.4 176H153.6c-49.472 0-89.6 40.128-89.6 89.6v492.736c0 49.472 40.128 89.6 89.6 89.6h716.8c49.472 0 89.6-40.128 89.6-89.6V265.6c0-49.472-40.128-89.6-89.6-89.6zm0 492.8h-44.8s-29.696-65.792-89.6-89.6-134.4 89.6-134.4 89.6-66.56-71.808-134.4-224S153.6 624 153.6 624V265.6h716.8v403.2zM668.8 489.6c37.056 0 67.2-30.144 67.2-67.264 0-37.056-30.144-67.2-67.2-67.2-37.12.064-67.2 30.208-67.2 67.264 0 37.12 30.08 67.2 67.2 67.2z" fill="#fff"/></svg>'},{}],"47PTV":[function(e,t,n){n.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},n.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.exportAll=function(e,t){return Object.keys(e).forEach((function(n){"default"===n||"__esModule"===n||t.hasOwnProperty(n)||Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[n]}})})),t},n.export=function(e,t,n){Object.defineProperty(e,t,{enumerable:!0,get:n})}},{}]},["3yim4"],"3yim4");

packages/artplayer-plugin-hls-quality/src/image.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-quality/src/index.js

@@ -1,21 +1,17 @@
+import image from 'bundle-text:./image.svg';
+
 export default function artplayerPluginHlsQuality(option) {
     return (art) => {
-        const { errorHandle } = art.constructor.utils;
         const { $video } = art.template;
+        const { errorHandle } = art.constructor.utils;
 
         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;
-
+            errorHandle(hls && hls.media === $video, 'Cannot find instance of HLS from "art.hls" or "window.hls"');
+            const auto = option.auto || 'Auto';
+            const title = option.title || 'Quality';
             const defaultLevel = hls.levels[hls.currentLevel];
-            const defaultHtml = defaultLevel ? defaultLevel.height + 'P' : 'Auto';
+            const defaultHtml = defaultLevel ? defaultLevel.height + 'P' : auto;
 
             if (option.control) {
                 art.controls.add({
@@ -41,7 +37,8 @@ export default function artplayerPluginHlsQuality(option) {
                 art.setting.add({
                     name: 'hls-quality',
                     tooltip: defaultHtml,
-                    html: option.name || 'Quality',
+                    html: title,
+                    icon: image,
                     selector: hls.levels.map((item, index) => {
                         return {
                             html: item.height + 'P',

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

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