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

CHANGELOG_CN.md

@@ -7,7 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 
 -   新增 `option.proxy` 选项，用于代理第三方的 `video` 和 `canvas`
--   新增 `artplayer-proxy-canvas` 代理
+-   新增 `artplayer-proxy-canvas` 代理，可以使用 `canvas` 播放视频
 -   新增 `artplayer-proxy-webav` 代理，来自 [bilibili/WebAV](https://github.com/bilibili/WebAV)
 -   新增 `option.thumbnails.scale`, 用于预览图缩放
 -   修复更改 `art.url` 不能触发 `autoPlayBack` 的 `bug`: [#797](https://github.com/zhw2590582/ArtPlayer/issues/797)
@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 -   修改 `subtitleUpdate` 事件为 `subtitleAfterUpdate`, 在字幕元素渲染后触发
 -   优化 `subtitleLoad` 事件的触发时机和回调参数
 -   删除 `subtitleSwitch` 事件，请使用 `subtitleLoad` 代替
+-   升级 `artplayer-plugin-hls-quality` 为 `artplayer-plugin-hls-control`
 
 ## [5.1.7] - 2024-8-15
 

README.md

@@ -98,7 +98,7 @@ var art = new Artplayer({
 -   [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku)
 -   [artplayer-plugin-ads](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads) (WIP)
 -   [artplayer-plugin-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
--   [artplayer-plugin-hls-quality](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)
+-   [artplayer-plugin-hls-control](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)
 -   [artplayer-plugin-dash-quality](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-quality/index.js&example=dash.quality)
 -   [artplayer-plugin-vtt-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail)
 -   [artplayer-plugin-multiple-subtitles](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles)

docs/assets/example/hls.control.js

@@ -0,0 +1,53 @@
+// npm i hls.js
+// npm i artplayer-plugin-hls-control
+
+// import Hls from 'hls.js';
+// import artplayerPluginHlsControl from 'artplayer-plugin-hls-control';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    setting: true,
+    plugins: [
+        artplayerPluginHlsControl({
+            quality: {
+                // Show qualitys in control
+                control: true,
+                // Show qualitys in setting
+                setting: true,
+                // Get the quality name from level
+                getName: (level) => level.height + 'P',
+                // I18n
+                title: 'Quality',
+                auto: 'Auto',
+            },
+            audio: {
+                // Show audios in control
+                control: true,
+                // Show audios in setting
+                setting: true,
+                // Get the audio name from track
+                getName: (track) => track.name,
+                // I18n
+                title: 'Audio',
+                auto: 'Auto',
+            }
+        }),
+    ],
+    customType: {
+        m3u8: function playM3u8(video, url, art) {
+            if (Hls.isSupported()) {
+				if (art.hls) art.hls.destroy();
+				const hls = new Hls();
+				hls.loadSource(url);
+				hls.attachMedia(video);
+				art.hls = hls;
+				art.on('destroy', () => hls.destroy());
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = url;
+            } else {
+                art.notice.show = 'Unsupported playback format: m3u8';
+            }
+        }
+    },
+});

docs/assets/example/hls.quality.js

@@ -1,43 +0,0 @@
-// npm i hls.js
-// npm i artplayer-plugin-hls-quality
-
-// import Hls from 'hls.js';
-// import artplayerPluginHlsQuality from 'artplayer-plugin-hls-quality';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    setting: true,
-    plugins: [
-        artplayerPluginHlsQuality({
-            // Show quality in control
-            control: true,
-
-            // Show quality in setting
-            setting: true,
-
-            // Get the resolution text from level
-			getResolution: (level) => level.height + 'P',
-
-            // I18n
-            title: 'Quality',
-            auto: 'Auto',
-        }),
-    ],
-    customType: {
-        m3u8: function playM3u8(video, url, art) {
-            if (Hls.isSupported()) {
-				if (art.hls) art.hls.destroy();
-				const hls = new Hls();
-				hls.loadSource(url);
-				hls.attachMedia(video);
-				art.hls = hls;
-				art.on('destroy', () => hls.destroy());
-            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-                video.src = url;
-            } else {
-                art.notice.show = 'Unsupported playback format: m3u8';
-            }
-        }
-    },
-});

docs/index.html

@@ -65,7 +65,7 @@
                         </li>
                         <li>
                             <a
-                                href="/?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">artplayer-plugin-hls-quality</a>
+                                href="/?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">artplayer-plugin-hls-control</a>
                         </li>
                         <li>
                             <a

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

@@ -1,10 +1,10 @@
-# artplayer-plugin-hls-quality
+# artplayer-plugin-hls-control
 
-Hls quality plugin for ArtPlayer
+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-quality/index.js&example=hls.quality)
+[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
 

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

@@ -1,11 +1,11 @@
 {
     "license": "MIT",
     "version": "3.0.0",
-    "name": "artplayer-plugin-hls-quality",
-    "types": "types/artplayer-plugin-hls-quality.d.ts",
+    "name": "artplayer-plugin-hls-control",
+    "types": "types/artplayer-plugin-hls-control.d.ts",
     "description": "Iframe plugin for ArtPlayer",
-    "main": "dist/artplayer-plugin-hls-quality.js",
-    "legacy": "dist/artplayer-plugin-hls-quality.legacy.js",
+    "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",

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

@@ -1,24 +1,24 @@
 import $quality from 'bundle-text:./quality.svg';
 
-export default function artplayerPluginHlsQuality(option) {
+export default function artplayerPluginHlsControl(option = {}) {
     return (art) => {
         const { $video } = art.template;
         const { errorHandle } = art.constructor.utils;
 
         function updateQuality(hls) {
-            const auto = option.auto || 'Auto';
-            const title = option.title || 'Quality';
-
-            const getResolution = option.getResolution || ((level) => (level.height || 'Unknown ') + 'P');
+            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 ? getResolution(defaultLevel) : auto;
+            const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;
 
             const selector = hls.levels
                 .map((item, index) => {
                     return {
-                        html: getResolution(item),
+                        html: getName(item, index),
                         level: item.level || index,
-                        default: defaultLevel === item,
+                        default: hls.currentLevel === index,
                     };
                 })
                 .sort((a, b) => b.level - a.level);
@@ -26,7 +26,7 @@ export default function artplayerPluginHlsQuality(option) {
             selector.push({
                 html: auto,
                 level: -1,
-                default: defaultLevel === -1,
+                default: hls.currentLevel === -1,
             });
 
             const onSelect = (item) => {
@@ -36,7 +36,7 @@ export default function artplayerPluginHlsQuality(option) {
                 return item.html;
             };
 
-            if (option.control) {
+            if (config.control) {
                 art.controls.update({
                     name: 'hls-quality',
                     position: 'right',
@@ -47,7 +47,7 @@ export default function artplayerPluginHlsQuality(option) {
                 });
             }
 
-            if (option.setting) {
+            if (config.setting) {
                 art.setting.update({
                     name: 'hls-quality',
                     tooltip: defaultHtml,
@@ -75,12 +75,12 @@ export default function artplayerPluginHlsQuality(option) {
         art.on('restart', update);
 
         return {
-            name: 'artplayerPluginHlsQuality',
+            name: 'artplayerPluginHlsControl',
             update,
         };
     };
 }
 
 if (typeof window !== 'undefined') {
-    window['artplayerPluginHlsQuality'] = artplayerPluginHlsQuality;
+    window['artplayerPluginHlsControl'] = artplayerPluginHlsControl;
 }

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

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

@@ -1 +0,0 @@
-/*! * artplayer-plugin-hls-quality.js v2.0.0 * Github:https://github.com/zhw2590582/ArtPlayer * (c) 2017-2024 Harvey Zack * Released under the MIT License. */ !function(e,t,n,o,l){var r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},i="function"==typeof r[o]&&r[o],u=i.cache||{},a="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function f(t,n){if(!u[t]){if(!e[t]){var l="function"==typeof r[o]&&r[o];if(!n&&l)return l(t,!0);if(i)return i(t,!0);if(a&&"string"==typeof t)return a(t);var s=Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}d.resolve=function(n){var o=e[t][1][n];return null!=o?o:n},d.cache={};var c=u[t]=new f.Module(t);e[t][0].call(c.exports,d,c,c.exports,this)}return u[t].exports;function d(e){var t=d.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 r[o]}}),r[o]=f;for(var s=0;s<t.length;s++)f(t[s]);if(n){var c=f(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define(function(){return c})}}({eEHR6:[function(e,t,n){var o=e("@parcel/transformer-js/src/esmodule-helpers.js");o.defineInteropFlag(n),o.export(n,"default",()=>i);var l=e("bundle-text:./image.svg"),r=o.interopDefault(l);function i(e){return t=>{!function(e){let{version:t,utils:{errorHandle:n}}=e.constructor,o=t.split(".").map(Number);n(o[0]+o[1]/100>=5,`Artplayer.js@${t}is not compatible the artplayerPluginHlsQuality@${i.version}. Please update it to version Artplayer.js@5.x.x`)}(t);let{$video:n}=t.template,{errorHandle:o}=t.constructor.utils;function l(){let l=t.hls||window.hls;o(l&&l.media===n,'Cannot find instance of HLS from "art.hls" or "window.hls"');let i=e.auto||"Auto",u=e.title||"Quality",a=e.getResolution||(e=>(e.height||"Unknown ")+"P"),f=l.levels[l.currentLevel],s=f?a(f):i;e.control&&t.controls.update({name:"hls-quality",position:"right",html:s,style:{padding:"0 10px"},selector:l.levels.map((e,t)=>({html:a(e),level:e.level||t,default:f===e})),onSelect:e=>(l.currentLevel=e.level,t.loading.show=!0,e.html)}),e.setting&&t.setting.update({name:"hls-quality",tooltip:s,html:u,icon:r.default,width:200,selector:l.levels.map((e,t)=>({html:a(e),level:e.level||t,default:f===e})),onSelect:function(e){return l.currentLevel=e.level,t.loading.show=!0,e.html}})}return t.on("ready",l),t.on("restart",l),{name:"artplayerPluginHlsQuality"}}}"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||Object.prototype.hasOwnProperty.call(t,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","parcelRequire4dc0");

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

@@ -1 +0,0 @@
-/*! * artplayer-plugin-hls-quality.js v2.0.0 * Github:https://github.com/zhw2590582/ArtPlayer * (c) 2017-2024 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[r]&&l[r],u=i.cache||{},a="undefined"!=typeof module&&"function"==typeof module.require&&module.require.bind(module);function f(t,n){if(!u[t]){if(!e[t]){var o="function"==typeof l[r]&&l[r];if(!n&&o)return o(t,!0);if(i)return i(t,!0);if(a&&"string"==typeof t)return a(t);var s=Error("Cannot find module '"+t+"'");throw s.code="MODULE_NOT_FOUND",s}d.resolve=function(n){var r=e[t][1][n];return null!=r?r:n},d.cache={};var c=u[t]=new f.Module(t);e[t][0].call(c.exports,d,c,c.exports,this)}return u[t].exports;function d(e){var t=d.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[r]}}),l[r]=f;for(var s=0;s<t.length;s++)f(t[s]);if(n){var c=f(n);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd&&define(function(){return c})}}({"34JKw":[function(e,t,n){var r=e("@parcel/transformer-js/src/esmodule-helpers.js");r.defineInteropFlag(n),r.export(n,"default",function(){return i});var o=e("bundle-text:./image.svg"),l=r.interopDefault(o);function i(e){return function(t){r=(n=t.constructor).version,(0,n.utils.errorHandle)((o=r.split(".").map(Number))[0]+o[1]/100>=5,"Artplayer.js@".concat(r," is not compatible the artplayerPluginHlsQuality@").concat(i.version,". Please update it to version Artplayer.js@5.x.x"));var n,r,o,u=t.template.$video,a=t.constructor.utils.errorHandle;function f(){var n=t.hls||window.hls;a(n&&n.media===u,'Cannot find instance of HLS from "art.hls" or "window.hls"');var r=e.auto||"Auto",o=e.title||"Quality",i=e.getResolution||function(e){return(e.height||"Unknown ")+"P"},f=n.levels[n.currentLevel],s=f?i(f):r;e.control&&t.controls.update({name:"hls-quality",position:"right",html:s,style:{padding:"0 10px"},selector:n.levels.map(function(e,t){return{html:i(e),level:e.level||t,default:f===e}}),onSelect:function(e){return n.currentLevel=e.level,t.loading.show=!0,e.html}}),e.setting&&t.setting.update({name:"hls-quality",tooltip:s,html:o,icon:l.default,width:200,selector:n.levels.map(function(e,t){return{html:i(e),level:e.level||t,default:f===e}}),onSelect:function(e){return n.currentLevel=e.level,t.loading.show=!0,e.html}})}return t.on("ready",f),t.on("restart",f),{name:"artplayerPluginHlsQuality"}}}"undefined"!=typeof window&&(window.artplayerPluginHlsQuality=i)},{"bundle-text:./image.svg":"jPEUe","@parcel/transformer-js/src/esmodule-helpers.js":"iWrD0"}],jPEUe:[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>'},{}],iWrD0:[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||Object.prototype.hasOwnProperty.call(t,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})}},{}]},["34JKw"],"34JKw","parcelRequire4dc0");

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

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