feat: update HLS control example and improve audio/quality track selection logic

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

@@ -1,6 +1,17 @@
 import $quality from 'bundle-text:./quality.svg';
 import $audio from 'bundle-text:./audio.svg';
 
+function uniqBy(array, property) {
+    const seen = new Map();
+    return array.filter((item) => {
+        const key = item[property];
+        if (key === undefined) {
+            return true;
+        }
+        return !seen.has(key) && seen.set(key, 1);
+    });
+}
+
 export default function artplayerPluginHlsControl(option = {}) {
     return (art) => {
         const { $video } = art.template;
@@ -12,19 +23,20 @@ export default function artplayerPluginHlsControl(option = {}) {
             const config = option.quality || {};
             const auto = config.auto || 'Auto';
             const title = config.title || 'Quality';
-            const getName = config.getName || ((level) => (level.height || 'Unknown ') + 'P');
+            const getName = config.getName || ((level) => level.name || level.height + 'P');
             const defaultLevel = hls.levels[hls.currentLevel];
             const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;
 
-            const selector = hls.levels
-                .map((item, index) => {
+            const selector = uniqBy(
+                hls.levels.map((item, index) => {
                     return {
                         html: getName(item, index),
                         value: index,
                         default: hls.currentLevel === index,
                     };
-                })
-                .sort((a, b) => b.value - a.value);
+                }),
+                'html',
+            ).sort((a, b) => b.value - a.value);
 
             selector.push({
                 html: auto,
@@ -69,17 +81,20 @@ export default function artplayerPluginHlsControl(option = {}) {
             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 getName = config.getName || ((track) => track.name || track.lang || track.language);
             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 selector = uniqBy(
+                hls.audioTracks.map((item, index) => {
+                    return {
+                        html: getName(item, index),
+                        value: item.id,
+                        default: hls.audioTrack === item.id,
+                    };
+                }),
+                'html',
+            );
 
             const onSelect = (item) => {
                 hls.audioTrack = item.value;

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

@@ -9,7 +9,6 @@ type Config = {
     title?: string;
     auto?: string;
     getName?(level: object): String;
-    filter?(levels: object[]): object[];
 };
 
 declare const artplayerPluginHlsControl: (option: { quality?: Config; audio?: Config }) => (art: Artplayer) => {