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

This commit is contained in:
Harvey Zack committed 2024-09-22 14:37:01 +08:00
1 parent 31bd66a33e
commit b9878e43e0
5 files changed
+46 -24

No files matched your search

+1 -1
View File
@@ -6,7 +6,7 @@
var art = new Artplayer({
container: '.artplayer-app',
url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
url: 'https://playertest.longtailvideo.com/adaptive/elephants_dream_v4/index.m3u8',
setting: true,
plugins: [
artplayerPluginHlsControl({
@@ -150,6 +150,14 @@ var _qualitySvg = require("bundle-text:./quality.svg");
var _qualitySvgDefault = parcelHelpers.interopDefault(_qualitySvg);
var _audioSvg = require("bundle-text:./audio.svg");
var _audioSvgDefault = parcelHelpers.interopDefault(_audioSvg);
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);
});
}
function artplayerPluginHlsControl(option = {}) {
return (art)=>{
const { $video } = art.template;
@@ -159,16 +167,16 @@ 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,
value: -1,
@@ -205,16 +213,16 @@ 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)=>{
const selector = uniqBy(hls.audioTracks.map((item, index)=>{
return {
html: getName(item, index),
value: index,
default: hls.audioTrack === index
value: item.id,
default: hls.audioTrack === item.id
};
});
}), "html");
const onSelect = (item)=>{
hls.audioTrack = item.value;
art.loading.show = true;
@@ -1 +1 @@
{"mappings":"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","sources":["packages/artplayer-plugin-hls-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-fcdfb7ede3ffa9c4.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e5365aae8b5bd745.js"],"sourcesContent":["import $quality from 'bundle-text:./quality.svg';\nimport $audio from 'bundle-text:./audio.svg';\n\nexport default function artplayerPluginHlsControl(option = {}) {\n return (art) => {\n const { $video } = art.template;\n const { errorHandle } = art.constructor.utils;\n\n function updateQuality(hls) {\n if (!hls.levels.length) return;\n\n const config = option.quality || {};\n const auto = config.auto || 'Auto';\n const title = config.title || 'Quality';\n const getName = config.getName || ((level) => (level.height || 'Unknown ') + 'P');\n const defaultLevel = hls.levels[hls.currentLevel];\n const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;\n\n const selector = hls.levels\n .map((item, index) => {\n return {\n html: getName(item, index),\n value: index,\n default: hls.currentLevel === index,\n };\n })\n .sort((a, b) => b.value - a.value);\n\n selector.push({\n html: auto,\n value: -1,\n default: hls.currentLevel === -1,\n });\n\n const onSelect = (item) => {\n hls.currentLevel = item.value;\n art.loading.show = true;\n art.notice.show = `${title}: ${item.html}`;\n Line truncated
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAcwB;AAdxB;;AACA;;AAEA,SAAS,OAAO,KAAK,EAAE,QAAQ;IAC3B,MAAM,OAAO,IAAI;IACjB,OAAO,MAAM,MAAM,CAAC,CAAC;QACjB,MAAM,MAAM,IAAI,CAAC,SAAS;QAC1B,IAAI,QAAQ,WACR,OAAO;QAEX,OAAO,CAAC,KAAK,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC,KAAK;IAC3C;AACJ;AAEe,SAAS,0BAA0B,SAAS,CAAC,CAAC;IACzD,OAAO,CAAC;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,QAAQ;QAC/B,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,WAAW,CAAC,KAAK;QAE7C,SAAS,cAAc,GAAG;YACtB,IAAI,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE;YAExB,MAAM,SAAS,OAAO,OAAO,IAAI,CAAC;YAClC,MAAM,OAAO,OAAO,IAAI,IAAI;YAC5B,MAAM,QAAQ,OAAO,KAAK,IAAI;YAC9B,MAAM,UAAU,OAAO,OAAO,IAAK,CAAA,CAAC,QAAU,MAAM,IAAI,IAAI,MAAM,MAAM,GAAG,GAAE;YAC7E,MAAM,eAAe,IAAI,MAAM,CAAC,IAAI,YAAY,CAAC;YACjD,MAAM,cAAc,eAAe,QAAQ,gBAAgB;YAE3D,MAAM,WAAW,OACb,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM;gBAClB,OAAO;oBACH,MAAM,QAAQ,MAAM;oBACpB,OAAO;oBACP,SAAS,IAAI,YAAY,KAAK;gBAClC;YACJ,IACA,QACF,IAAI,CAAC,CAAC,GAAG,IAAM,EAAE,KAAK,GAAG,EAAE,KAAK;YAElC,SAAS,IAAI,CAAC;gBACV,MAAM;gBACN,OAAO;gBACP,SAAS,IAAI,YAAY,KAAK;YAClC;YAEA,MAAM,WAAW,CAAC;gBACd,IAAI,YAAY,GAAG,KAAK,KAAK;gBAC7B,IAAI,OAAO,CAAC,IAAI,GAAG;gBACnB,IAAI,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC,CAAC;gBAC1C,OAAO,KAAK,IAAI;YACpB;YAEA,IAAI,OAAO,OAAO,EACd,IAAI,QAAQ,CAAC,MAAM,CAAC;gBAChB,MAAM;gBACN,UAAU;gBACV,MAAM;gBACN,OAAO;oBAAE,SAAS;gBAAS;gBAC3B,UAAU;gBACV,UAAU;YACd;YAGJ,IAAI,OAAO,OAAO,EACd,IAAI,OAAO,CAAC,MAAM,CAAC;gBACf,MAAM;gBACN,SAAS;gBACT,MAAM;gBACN,MAAM,CAAA,GAAA,0BAAQ,AAAD;gBACb,OAAO;gBACP,UAAU;gBACV,UAAU;YACd;QAER;QAEA,SAAS,YAAY,GAAG;YACpB,IAAI,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE;YAE7B,MAAM,SAAS,OAAO,KAAK,IAAI,CAAC;YAChC,MAAM,OAAO,OAAO,IAAI,IAAI;YAC5B,MAAM,QAAQ,OAAO,KAAK,IAAI;YAC9B,MAAM,UAAU,OAAO,OAAO,IAAK,CAAA,CAAC,QAAU,MAAM,IAAI,IAAI,MAAM,IAAI,IAAI,MAAM,QAAQ,AAAD;YACvF,MAAM,eAAe,IAAI,WAAW,CAAC,IAAI,UAAU,CAAC;YACpD,MAAM,cAAc,eAAe,QAAQ,gBAAgB;YAE3D,MAAM,WAAW,OACb,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM;gBACvB,OAAO;oBACH,MAAM,QAAQ,MAAM;oBACpB,OAAO,KAAK,EAAE;oBACd,SAAS,IAAI,UAAU,KAAK,KAAK,EAAE;gBACvC;YACJ,IACA;YAGJ,MAAM,WAAW,CAAC;gBACd,IAAI,UAAU,GAAG,KAAK,KAAK;gBAC3B,IAAI,OAAO,CAAC,IAAI,GAAG;gBACnB,IAAI,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC,CAAC;gBAC1C,OAAO,KAAK,IAAI;YACpB;YAEA,IAAI,OAAO,OAAO,EACd,IAAI,QAAQ,CAAC,MAAM,CAAC;gBAChB,MAAM;gBACN,UAAU;gBACV,MAAM;gBACN,OAAO;oBAAE,SAAS;gBAAS;gBAC3B,UAAU;gBACV,UAAU;YACd;YAGJ,IAAI,OAAO,OAAO,EACd,IAAI,OAAO,CAAC,MAAM,CAAC;gBACf,MAAM;gBACN,SAAS;gBACT,MAAM;gBACN,MAAM,CAAA,GAAA,wBAAM,AAAD;gBACX,OAAO;gBACP,UAAU;gBACV,UAAU;YACd;QAER;QAEA,SAAS;YACL,MAAM,MAAM,IAAI,GAAG,IAAI,OAAO,GAAG;YACjC,YAAY,OAAO,IAAI,KAAK,KAAK,QAAQ;YACzC,cAAc;YACd,YAAY;QAChB;QAEA,IAAI,EAAE,CAAC,SAAS;QAChB,IAAI,EAAE,CAAC,WAAW;QAElB,OAAO;YACH,MAAM;YACN;QACJ;IACJ;AACJ;AAEA,IAAI,OAAO,WAAW,aAClB,MAAM,CAAC,4BAA4B,GAAG;;;ACnJ1C,OAAO,OAAO,GAAG;;;ACAjB,QAAQ,cAAc,GAAG,SAAU,CAAC;IAClC,OAAO,KAAK,EAAE,UAAU,GAAG,IAAI;QAAC,SAAS;IAAC;AAC5C;AAEA,QAAQ,iBAAiB,GAAG,SAAU,CAAC;IACrC,OAAO,cAAc,CAAC,GAAG,cAAc;QAAC,OAAO;IAAI;AACrD;AAEA,QAAQ,SAAS,GAAG,SAAU,MAAM,EAAE,IAAI;IACxC,OAAO,IAAI,CAAC,QAAQ,OAAO,CAAC,SAAU,GAAG;QACvC,IACE,QAAQ,aACR,QAAQ,gBACR,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,MAE3C;QAGF,OAAO,cAAc,CAAC,MAAM,KAAK;YAC/B,YAAY;YACZ,KAAK;gBACH,OAAO,MAAM,CAAC,IAAI;YACpB;QACF;IACF;IAEA,OAAO;AACT;AAEA,QAAQ,MAAM,GAAG,SAAU,IAAI,EAAE,QAAQ,EAAE,GAAG;IAC5C,OAAO,cAAc,CAAC,MAAM,UAAU;QACpC,YAAY;QACZ,KAAK;IACP;AACF;;;AClCA,OAAO,OAAO,GAAG","sources":["packages/artplayer-plugin-hls-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-fcdfb7ede3ffa9c4.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e5365aae8b5bd745.js"],"sourcesContent":["import $quality from 'bundle-text:./quality.svg';\nimport $audio from 'bundle-text:./audio.svg';\n\nfunction uniqBy(array, property) {\n const seen = new Map();\n return array.filter((item) => {\n const key = item[property];\n if (key === undefined) {\n return true;\n }\n return !seen.has(key) && seen.set(key, 1);\n });\n}\n\nexport default function artplayerPluginHlsControl(option = {}) {\n return (art) => {\n const { $video } = art.template;\n const { errorHandle } = art.constructor.utils;\n\n function updateQuality(hls) {\n if (!hls.levels.length) return;\n\n const config = option.quality || {};\n const auto = config.auto || 'Auto';\n const title = config.title || 'Quality';\n const getName = config.getName || ((level) => level.name || level.height + 'P');\n const defaultLevel = hls.levels[hls.currentLevel];\n const defaultHtml = defaultLevel ? getName(defaultLevel) : auto;\n\n const selector = uniqBy(\n hls.levels.map((item, index) => {\n return {\n html: getName(item, index),\n value: index,\n Line truncated
@@ -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;
@@ -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) => {