feat: add audio control feature to artplayer-plugin-hls-control, include audio.svg and update documentation

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="18"><path fill="#fff" d="M256 80C149.9 80 62.4 159.4 49.6 262c9.4-3.8 19.6-6 30.4-6c26.5 0 48 21.5 48 48l0 128c0 26.5-21.5 48-48 48c-44.2 0-80-35.8-80-80l0-16 0-48 0-48C0 146.6 114.6 32 256 32s256 114.6 256 256l0 48 0 48 0 16c0 44.2-35.8 80-80 80c-26.5 0-48-21.5-48-48l0-128c0-26.5 21.5-48 48-48c10.8 0 21 2.1 30.4 6C449.6 159.4 362.1 80 256 80z"/></svg>

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

@@ -1,4 +1,5 @@
 import $quality from 'bundle-text:./quality.svg';
+import $audio from 'bundle-text:./audio.svg';
 
 export default function artplayerPluginHlsControl(option = {}) {
     return (art) => {
@@ -6,6 +7,8 @@ export default function artplayerPluginHlsControl(option = {}) {
         const { errorHandle } = art.constructor.utils;
 
         function updateQuality(hls) {
+            if (!hls.levels.length) return;
+
             const config = option.quality || {};
             const auto = config.auto || 'Auto';
             const title = config.title || 'Quality';
@@ -17,20 +20,20 @@ export default function artplayerPluginHlsControl(option = {}) {
                 .map((item, index) => {
                     return {
                         html: getName(item, index),
-                        level: item.level || index,
+                        value: index,
                         default: hls.currentLevel === index,
                     };
                 })
-                .sort((a, b) => b.level - a.level);
+                .sort((a, b) => b.value - a.value);
 
             selector.push({
                 html: auto,
-                level: -1,
+                value: -1,
                 default: hls.currentLevel === -1,
             });
 
             const onSelect = (item) => {
-                hls.currentLevel = item.level;
+                hls.currentLevel = item.value;
                 art.loading.show = true;
                 art.notice.show = `${title}: ${item.html}`;
                 return item.html;
@@ -61,7 +64,52 @@ export default function artplayerPluginHlsControl(option = {}) {
         }
 
         function updateAudio(hls) {
-            //
+            if (!hls.audioTracks.length) return;
+
+            const config = option.audio || {};
+            const auto = config.auto || 'Auto';
+            const title = config.title || 'Audio';
+            const getName = config.getName || ((track, index) => track.name || `Track ${index + 1}`);
+            const defaultTrack = hls.audioTracks[hls.audioTrack];
+            const defaultHtml = defaultTrack ? getName(defaultTrack) : auto;
+
+            const selector = hls.audioTracks.map((item, index) => {
+                return {
+                    html: getName(item, index),
+                    value: index,
+                    default: hls.audioTrack === index,
+                };
+            });
+
+            const onSelect = (item) => {
+                hls.audioTrack = item.value;
+                art.loading.show = true;
+                art.notice.show = `${title}: ${item.html}`;
+                return item.html;
+            };
+
+            if (config.control) {
+                art.controls.update({
+                    name: 'hls-audio',
+                    position: 'right',
+                    html: defaultHtml,
+                    style: { padding: '0 10px' },
+                    selector: selector,
+                    onSelect: onSelect,
+                });
+            }
+
+            if (config.setting) {
+                art.setting.update({
+                    name: 'hls-audio',
+                    tooltip: defaultHtml,
+                    html: title,
+                    icon: $audio,
+                    width: 200,
+                    selector: selector,
+                    onSelect: onSelect,
+                });
+            }
         }
 
         function update() {

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

@@ -1,4 +1 @@
-<?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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="18"><path fill="#fff" d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l96 0 32 0 208 0c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>

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

@@ -3,22 +3,16 @@ 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) => {
+type Config = {
+    control?: boolean;
+    setting?: boolean;
+    title?: string;
+    auto?: string;
+    getName?(level: object): String;
+    filter?(levels: object[]): object[];
+};
+
+declare const artplayerPluginHlsControl: (option: { quality?: Config; audio?: Config }) => (art: Artplayer) => {
     name: 'artplayerPluginHlsControl';
     update: () => void;
 };