x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-29 11:11:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Setting class to update and append items

Browse Source
This commit is contained in:
Harvey Zack committed 2024-10-20 12:21:18 +08:00
1 parent 1d191fe658
commit c84157e30b
8 files changed
+217 -115
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/assets/example/setting.test.js
+125
View File
@@ -0,0 +1,125 @@
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
subtitleOffset: true,
settings: [
{
width: 200,
html: 'Subtitle',
tooltip: 'Bilingual',
icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
selector: [
{
html: 'Display',
tooltip: 'Show',
switch: true,
onSwitch: function (item) {
item.tooltip = item.switch ? 'Hide' : 'Show';
art.subtitle.show = !item.switch;
return !item.switch;
},
},
{
default: true,
html: 'Bilingual',
url: '/assets/sample/subtitle.srt',
},
{
html: 'Chinese',
url: '/assets/sample/subtitle.cn.srt',
},
{
html: 'Japanese',
url: '/assets/sample/subtitle.jp.srt',
},
],
onSelect: function (item) {
art.subtitle.switch(item.url, {
name: item.html,
});
return item.html;
},
mounted: function (...args) {
console.info(args);
},
},
{
html: 'Switcher',
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
tooltip: 'OFF',
switch: false,
onSwitch: function (item) {
item.tooltip = item.switch ? 'OFF' : 'ON';
console.info('You clicked on the custom switch', item.switch);
return !item.switch;
},
mounted: function (...args) {
console.info(args);
},
},
{
html: 'Slider',
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
tooltip: '5x',
range: [5, 1, 10, 0.1],
onRange: function (item) {
return item.range + 'x';
},
mounted: function (...args) {
console.info(args);
},
},
],
}, async () => {
const { sleep } = Artplayer.utils;
art.setting.show = true;
await sleep(100);
art.setting.resize();
console.log(art.setting.builtin);
console.log(art.setting.find('aspect-ratio'));
console.log(art.setting.find('aspect-ratio2'));
await sleep(1000);
art.setting.remove('aspect-ratio');
try {
art.setting.remove('aspect-ratio2');
} catch (error) {
console.log(error.message);
}
await sleep(1000);
art.setting.update({
name: 'subtitle-offset',
html: 'new offset',
range: [5, -11, 11, 1],
});
await sleep(1000);
art.setting.find('subtitle-offset').$range.value = -11;
await sleep(1000);
art.setting.update({
name: 'flip',
html: 'new flip',
tooltip: 'OFF',
switch: false,
});
await sleep(1000);
art.setting.update({
name: 'flip2',
html: 'new flip2',
tooltip: 'OFF',
switch: true,
});
await sleep(1000);
try {
art.setting.add({
name: 'flip2',
html: 'new flip2',
tooltip: 'OFF',
switch: true,
});
} catch (error) {
console.log(error.message);
}
});
docs/uncompiled/artplayer/index.js
+43 -47
View File
@@ -4577,7 +4577,6 @@ class Setting extends (0, _componentDefault.default) {
this.id = 0; this.id = 0;
this.active = null; this.active = null;
this.cache = new Map(); this.cache = new Map();
this.symbol = Symbol("setting");
this.option = [ this.option = [
...this.builtin, ...this.builtin,
...option.settings ...option.settings
@@ -4614,11 +4613,11 @@ class Setting extends (0, _componentDefault.default) {
format(option = this.option, parent, parents, names = []) { format(option = this.option, parent, parents, names = []) {
for(let index = 0; index < option.length; index++){ for(let index = 0; index < option.length; index++){
const item = option[index]; const item = option[index];
if (item?.name) {
(0, _utils.errorHandle)(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
names.push(item.name);
} else item.name = `setting-${this.id++}`;
if (!item.$formatted) { if (!item.$formatted) {
if (item?.name) {
(0, _utils.errorHandle)(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
names.push(item.name);
} else item.name = `setting-${this.id++}`;
(0, _utils.def)(item, "$parent", { (0, _utils.def)(item, "$parent", {
get: ()=>parent get: ()=>parent
}); });
@@ -4676,6 +4675,7 @@ class Setting extends (0, _componentDefault.default) {
item.$option.splice(index, 1); item.$option.splice(index, 1);
for(let index = 0; index < item.$events.length; index++)item.$events[index](); for(let index = 0; index < item.$events.length; index++)item.$events[index]();
if (item.$item) (0, _utils.remove)(item.$item); if (item.$item) (0, _utils.remove)(item.$item);
item.$events.length = 0;
this.render(); this.render();
} }
update(target) { update(target) {
@@ -4685,7 +4685,7 @@ class Setting extends (0, _componentDefault.default) {
this.format(); this.format();
this.creatItem(item, true); this.creatItem(item, true);
this.render(); this.render();
} else this.add(item); } else this.add(target);
} }
add(item, option = this.option) { add(item, option = this.option) {
option.push(item); option.push(item);
@@ -4722,8 +4722,8 @@ class Setting extends (0, _componentDefault.default) {
const $item = (0, _utils.createElement)("div"); const $item = (0, _utils.createElement)("div");
(0, _utils.addClass)($item, "art-setting-item"); (0, _utils.addClass)($item, "art-setting-item");
(0, _utils.setStyle)($item, "height", `${constructor.SETTING_ITEM_HEIGHT}px`); (0, _utils.setStyle)($item, "height", `${constructor.SETTING_ITEM_HEIGHT}px`);
if ((0, _utils.isStringOrNumber)(item.name)) $item.dataset.name = item.name; $item.dataset.name = item.name || "";
if ((0, _utils.isStringOrNumber)(item.value)) $item.dataset.value = item.value; $item.dataset.value = item.value || "";
const $left = (0, _utils.append)($item, '<div class="art-setting-item-left"></div>'); const $left = (0, _utils.append)($item, '<div class="art-setting-item-left"></div>');
const $right = (0, _utils.append)($item, '<div class="art-setting-item-right"></div>'); const $right = (0, _utils.append)($item, '<div class="art-setting-item-right"></div>');
const $icon = (0, _utils.createElement)("div"); const $icon = (0, _utils.createElement)("div");
@@ -4731,10 +4731,10 @@ class Setting extends (0, _componentDefault.default) {
switch(type){ switch(type){
case "switch": case "switch":
case "range": case "range":
(0, _utils.append)($icon, (0, _utils.isStringOrNumber)(item.icon) || item.icon instanceof Element ? item.icon : icons.config); (0, _utils.append)($icon, item.icon ?? icons.config);
break; break;
case "selector": case "selector":
if (item.selector && item.selector.length) (0, _utils.append)($icon, (0, _utils.isStringOrNumber)(item.icon) || item.icon instanceof Element ? item.icon : icons.config); if (item.selector && item.selector.length) (0, _utils.append)($icon, item.icon ?? icons.config);
else (0, _utils.append)($icon, icons.check); else (0, _utils.append)($icon, icons.check);
break; break;
default: default:
@@ -4742,6 +4742,7 @@ class Setting extends (0, _componentDefault.default) {
} }
(0, _utils.append)($left, $icon); (0, _utils.append)($left, $icon);
(0, _utils.def)(item, "$icon", { (0, _utils.def)(item, "$icon", {
configurable: true,
get: ()=>$icon get: ()=>$icon
}); });
(0, _utils.def)(item, "icon", { (0, _utils.def)(item, "icon", {
@@ -4750,7 +4751,8 @@ class Setting extends (0, _componentDefault.default) {
return $icon.innerHTML; return $icon.innerHTML;
}, },
set (value) { set (value) {
if ((0, _utils.isStringOrNumber)(value)) $icon.innerHTML = value; $icon.innerHTML = "";
(0, _utils.append)($icon, value);
} }
}); });
const $html = (0, _utils.createElement)("div"); const $html = (0, _utils.createElement)("div");
@@ -4758,6 +4760,7 @@ class Setting extends (0, _componentDefault.default) {
(0, _utils.append)($html, item.html || ""); (0, _utils.append)($html, item.html || "");
(0, _utils.append)($left, $html); (0, _utils.append)($left, $html);
(0, _utils.def)(item, "$html", { (0, _utils.def)(item, "$html", {
configurable: true,
get: ()=>$html get: ()=>$html
}); });
(0, _utils.def)(item, "html", { (0, _utils.def)(item, "html", {
@@ -4766,7 +4769,8 @@ class Setting extends (0, _componentDefault.default) {
return $html.innerHTML; return $html.innerHTML;
}, },
set (value) { set (value) {
if ((0, _utils.isStringOrNumber)(value)) $html.innerHTML = value; $html.innerHTML = "";
(0, _utils.append)($html, value);
} }
}); });
const $tooltip = (0, _utils.createElement)("div"); const $tooltip = (0, _utils.createElement)("div");
@@ -4774,6 +4778,7 @@ class Setting extends (0, _componentDefault.default) {
(0, _utils.append)($tooltip, item.tooltip || ""); (0, _utils.append)($tooltip, item.tooltip || "");
(0, _utils.append)($right, $tooltip); (0, _utils.append)($right, $tooltip);
(0, _utils.def)(item, "$tooltip", { (0, _utils.def)(item, "$tooltip", {
configurable: true,
get: ()=>$tooltip get: ()=>$tooltip
}); });
(0, _utils.def)(item, "tooltip", { (0, _utils.def)(item, "tooltip", {
@@ -4782,7 +4787,8 @@ class Setting extends (0, _componentDefault.default) {
return $tooltip.innerHTML; return $tooltip.innerHTML;
}, },
set (value) { set (value) {
if ((0, _utils.isStringOrNumber)(value)) $tooltip.innerHTML = value; $tooltip.innerHTML = "";
(0, _utils.append)($tooltip, value);
} }
}); });
switch(type){ switch(type){
@@ -4818,23 +4824,15 @@ class Setting extends (0, _componentDefault.default) {
const $state = (0, _utils.createElement)("div"); const $state = (0, _utils.createElement)("div");
(0, _utils.addClass)($state, "art-setting-item-right-icon"); (0, _utils.addClass)($state, "art-setting-item-right-icon");
const $range = (0, _utils.append)($state, '<input type="range">'); const $range = (0, _utils.append)($state, '<input type="range">');
$range.value = item.range[0] || 0; $range.min = item.range[1];
$range.min = item.range[1] || 0; $range.max = item.range[2];
$range.max = item.range[2] || 10; $range.step = item.range[3];
$range.step = item.range[3] || 1; $range.value = item.range[0];
(0, _utils.addClass)($range, "art-setting-range"); (0, _utils.addClass)($range, "art-setting-range");
(0, _utils.append)($right, $state); (0, _utils.append)($right, $state);
(0, _utils.def)(item, "$range", { (0, _utils.def)(item, "$range", {
get: ()=>$range
});
(0, _utils.def)(item, "range", {
configurable: true, configurable: true,
get () { get: ()=>$range
return $range.valueAsNumber;
},
set (value) {
$range.value = Number(value);
}
}); });
} }
break; break;
@@ -4898,10 +4896,8 @@ class Setting extends (0, _componentDefault.default) {
default: default:
break; break;
} }
(0, _utils.def)($item, this.symbol, {
get: ()=>item
});
(0, _utils.def)(item, "$item", { (0, _utils.def)(item, "$item", {
configurable: true,
get: ()=>$item get: ()=>$item
}); });
if (isUpdate) (0, _utils.replaceElement)($item, oldItem); if (isUpdate) (0, _utils.replaceElement)($item, oldItem);
@@ -4922,7 +4918,7 @@ class Setting extends (0, _componentDefault.default) {
(0, _utils.inverseClass)($panel, "art-current"); (0, _utils.inverseClass)($panel, "art-current");
for(let index = 0; index < option.length; index++){ for(let index = 0; index < option.length; index++){
const item = option[index]; const item = option[index];
if (item.mounted) item.mounted.call(this.art, $panel, item); if (item.mounted) item.mounted.call(this.art, item.$item, item);
} }
} }
this.resize(); this.resize();
@@ -4937,9 +4933,9 @@ parcelHelpers.export(exports, "default", ()=>flip);
var _utils = require("../utils"); var _utils = require("../utils");
function flip(art) { function flip(art) {
const { i18n, icons, constructor: { SETTING_ITEM_WIDTH, FLIP } } = art; const { i18n, icons, constructor: { SETTING_ITEM_WIDTH, FLIP } } = art;
function update($panel, $tooltip, value) { function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = i18n.get((0, _utils.capitalize)(value)); if ($tooltip) $tooltip.innerText = i18n.get((0, _utils.capitalize)(value));
const $current = (0, _utils.queryAll)(".art-setting-item", $panel).find((item)=>item.dataset.value === value); const $current = (0, _utils.queryAll)(".art-setting-item", $item).find((item)=>item.dataset.value === value);
if ($current) (0, _utils.inverseClass)($current, "art-current"); if ($current) (0, _utils.inverseClass)($current, "art-current");
} }
return { return {
@@ -4960,10 +4956,10 @@ function flip(art) {
art.flip = item.value; art.flip = item.value;
return item.html; return item.html;
}, },
mounted: ($panel, item)=>{ mounted: ($item, item)=>{
update($panel, item.$tooltip, art.flip); update($item, item.$tooltip, art.flip);
art.on("flip", ()=>{ art.on("flip", ()=>{
update($panel, item.$tooltip, art.flip); update($item, item.$tooltip, art.flip);
}); });
} }
}; };
@@ -4979,9 +4975,9 @@ function aspectRatio(art) {
function getI18n(value) { function getI18n(value) {
return value === "default" ? i18n.get("Default") : value; return value === "default" ? i18n.get("Default") : value;
} }
function update($panel, $tooltip, value) { function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = getI18n(value); if ($tooltip) $tooltip.innerText = getI18n(value);
const $current = (0, _utils.queryAll)(".art-setting-item", $panel).find((item)=>item.dataset.value === value); const $current = (0, _utils.queryAll)(".art-setting-item", $item).find((item)=>item.dataset.value === value);
if ($current) (0, _utils.inverseClass)($current, "art-current"); if ($current) (0, _utils.inverseClass)($current, "art-current");
} }
return { return {
@@ -5002,10 +4998,10 @@ function aspectRatio(art) {
art.aspectRatio = item.value; art.aspectRatio = item.value;
return item.html; return item.html;
}, },
mounted: ($panel, item)=>{ mounted: ($item, item)=>{
update($panel, item.$tooltip, art.aspectRatio); update($item, item.$tooltip, art.aspectRatio);
art.on("aspectRatio", ()=>{ art.on("aspectRatio", ()=>{
update($panel, item.$tooltip, art.aspectRatio); update($item, item.$tooltip, art.aspectRatio);
}); });
} }
}; };
@@ -5021,9 +5017,9 @@ function playbackRate(art) {
function getI18n(value) { function getI18n(value) {
return value === 1.0 ? i18n.get("Normal") : value.toFixed(1); return value === 1.0 ? i18n.get("Normal") : value.toFixed(1);
} }
function update($panel, $tooltip, value) { function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = getI18n(value); if ($tooltip) $tooltip.innerText = getI18n(value);
const $current = (0, _utils.queryAll)(".art-setting-item", $panel).find((item)=>Number(item.dataset.value) === value); const $current = (0, _utils.queryAll)(".art-setting-item", $item).find((item)=>Number(item.dataset.value) === value);
if ($current) (0, _utils.inverseClass)($current, "art-current"); if ($current) (0, _utils.inverseClass)($current, "art-current");
} }
return { return {
@@ -5044,10 +5040,10 @@ function playbackRate(art) {
art.playbackRate = item.value; art.playbackRate = item.value;
return item.html; return item.html;
}, },
mounted: ($panel, item)=>{ mounted: ($item, item)=>{
update($panel, item.$tooltip, art.playbackRate); update($item, item.$tooltip, art.playbackRate);
art.on("video:ratechange", ()=>{ art.on("video:ratechange", ()=>{
update($panel, item.$tooltip, art.playbackRate); update($item, item.$tooltip, art.playbackRate);
}); });
} }
}; };
@@ -5072,8 +5068,8 @@ function subtitleOffset(art) {
0.1 0.1
], ],
onChange (item) { onChange (item) {
art.subtitleOffset = item.range; art.subtitleOffset = item.$range.valueAsNumber;
return item.range + "s"; return item.$range.valueAsNumber + "s";
} }
}; };
} }
docs/uncompiled/artplayer/index.js.map
+1 -1
View File
@@ -1 +1 @@
{"mappings":"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 truncated {"mappings":"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 truncated
packages/artplayer/src/setting/aspectRatio.js
+5 -5
View File
@@ -11,9 +11,9 @@ export default function aspectRatio(art) {
return value === 'default' ? i18n.get('Default') : value; return value === 'default' ? i18n.get('Default') : value;
} }
function update($panel, $tooltip, value) { function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = getI18n(value); if ($tooltip) $tooltip.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value); const $current = queryAll('.art-setting-item', $item).find((item) => item.dataset.value === value);
if ($current) inverseClass($current, 'art-current'); if ($current) inverseClass($current, 'art-current');
} }
@@ -35,10 +35,10 @@ export default function aspectRatio(art) {
art.aspectRatio = item.value; art.aspectRatio = item.value;
return item.html; return item.html;
}, },
mounted: ($panel, item) => { mounted: ($item, item) => {
update($panel, item.$tooltip, art.aspectRatio); update($item, item.$tooltip, art.aspectRatio);
art.on('aspectRatio', () => { art.on('aspectRatio', () => {
update($panel, item.$tooltip, art.aspectRatio); update($item, item.$tooltip, art.aspectRatio);
}); });
}, },
}; };
packages/artplayer/src/setting/flip.js
+5 -5
View File
@@ -7,9 +7,9 @@ export default function flip(art) {
constructor: { SETTING_ITEM_WIDTH, FLIP }, constructor: { SETTING_ITEM_WIDTH, FLIP },
} = art; } = art;
function update($panel, $tooltip, value) { function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = i18n.get(capitalize(value)); if ($tooltip) $tooltip.innerText = i18n.get(capitalize(value));
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value); const $current = queryAll('.art-setting-item', $item).find((item) => item.dataset.value === value);
if ($current) inverseClass($current, 'art-current'); if ($current) inverseClass($current, 'art-current');
} }
@@ -31,10 +31,10 @@ export default function flip(art) {
art.flip = item.value; art.flip = item.value;
return item.html; return item.html;
}, },
mounted: ($panel, item) => { mounted: ($item, item) => {
update($panel, item.$tooltip, art.flip); update($item, item.$tooltip, art.flip);
art.on('flip', () => { art.on('flip', () => {
update($panel, item.$tooltip, art.flip); update($item, item.$tooltip, art.flip);
}); });
}, },
}; };
packages/artplayer/src/setting/index.js
+31 -50
View File
@@ -36,7 +36,6 @@ export default class Setting extends Component {
this.id = 0; this.id = 0;
this.active = null; this.active = null;
this.cache = new Map(); this.cache = new Map();
this.symbol = Symbol('setting');
this.option = [...this.builtin, ...option.settings]; this.option = [...this.builtin, ...option.settings];
if (option.setting) { if (option.setting) {
@@ -89,14 +88,15 @@ export default class Setting extends Component {
format(option = this.option, parent, parents, names = []) { format(option = this.option, parent, parents, names = []) {
for (let index = 0; index < option.length; index++) { for (let index = 0; index < option.length; index++) {
const item = option[index]; const item = option[index];
if (!item.$formatted) {
if (item?.name) {
errorHandle(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
names.push(item.name);
} else {
item.name = `setting-${this.id++}`;
}
if (item?.name) {
errorHandle(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
names.push(item.name);
} else {
item.name = `setting-${this.id++}`;
}
if (!item.$formatted) {
def(item, '$parent', { def(item, '$parent', {
get: () => parent, get: () => parent,
}); });
@@ -176,6 +176,7 @@ export default class Setting extends Component {
if (item.$item) { if (item.$item) {
remove(item.$item); remove(item.$item);
} }
item.$events.length = 0;
this.render(); this.render();
} }
@@ -187,7 +188,7 @@ export default class Setting extends Component {
this.creatItem(item, true); this.creatItem(item, true);
this.render(); this.render();
} else { } else {
this.add(item); this.add(target);
} }
} }
@@ -244,13 +245,8 @@ export default class Setting extends Component {
addClass($item, 'art-setting-item'); addClass($item, 'art-setting-item');
setStyle($item, 'height', `${constructor.SETTING_ITEM_HEIGHT}px`); setStyle($item, 'height', `${constructor.SETTING_ITEM_HEIGHT}px`);
if (isStringOrNumber(item.name)) { $item.dataset.name = item.name || '';
$item.dataset.name = item.name; $item.dataset.value = item.value || '';
}
if (isStringOrNumber(item.value)) {
$item.dataset.value = item.value;
}
const $left = append($item, '<div class="art-setting-item-left"></div>'); const $left = append($item, '<div class="art-setting-item-left"></div>');
const $right = append($item, '<div class="art-setting-item-right"></div>'); const $right = append($item, '<div class="art-setting-item-right"></div>');
@@ -261,14 +257,11 @@ export default class Setting extends Component {
switch (type) { switch (type) {
case 'switch': case 'switch':
case 'range': case 'range':
append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config); append($icon, item.icon ?? icons.config);
break; break;
case 'selector': case 'selector':
if (item.selector && item.selector.length) { if (item.selector && item.selector.length) {
append( append($icon, item.icon ?? icons.config);
$icon,
isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config,
);
} else { } else {
append($icon, icons.check); append($icon, icons.check);
} }
@@ -280,6 +273,7 @@ export default class Setting extends Component {
append($left, $icon); append($left, $icon);
def(item, '$icon', { def(item, '$icon', {
configurable: true,
get: () => $icon, get: () => $icon,
}); });
@@ -289,9 +283,8 @@ export default class Setting extends Component {
return $icon.innerHTML; return $icon.innerHTML;
}, },
set(value) { set(value) {
if (isStringOrNumber(value)) { $icon.innerHTML = '';
$icon.innerHTML = value; append($icon, value);
}
}, },
}); });
@@ -301,6 +294,7 @@ export default class Setting extends Component {
append($left, $html); append($left, $html);
def(item, '$html', { def(item, '$html', {
configurable: true,
get: () => $html, get: () => $html,
}); });
@@ -310,9 +304,8 @@ export default class Setting extends Component {
return $html.innerHTML; return $html.innerHTML;
}, },
set(value) { set(value) {
if (isStringOrNumber(value)) { $html.innerHTML = '';
$html.innerHTML = value; append($html, value);
}
}, },
}); });
@@ -322,6 +315,7 @@ export default class Setting extends Component {
append($right, $tooltip); append($right, $tooltip);
def(item, '$tooltip', { def(item, '$tooltip', {
configurable: true,
get: () => $tooltip, get: () => $tooltip,
}); });
@@ -331,9 +325,8 @@ export default class Setting extends Component {
return $tooltip.innerHTML; return $tooltip.innerHTML;
}, },
set(value) { set(value) {
if (isStringOrNumber(value)) { $tooltip.innerHTML = '';
$tooltip.innerHTML = value; append($tooltip, value);
}
}, },
}); });
@@ -345,8 +338,8 @@ export default class Setting extends Component {
const $switchOff = append($state, icons.switchOff); const $switchOff = append($state, icons.switchOff);
setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none'); setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
append($right, $state); append($right, $state);
item.$switch = item.switch;
item.$switch = item.switch;
def(item, 'switch', { def(item, 'switch', {
configurable: true, configurable: true,
get() { get() {
@@ -370,25 +363,16 @@ export default class Setting extends Component {
const $state = createElement('div'); const $state = createElement('div');
addClass($state, 'art-setting-item-right-icon'); addClass($state, 'art-setting-item-right-icon');
const $range = append($state, '<input type="range">'); const $range = append($state, '<input type="range">');
$range.value = item.range[0] || 0; $range.min = item.range[1];
$range.min = item.range[1] || 0; $range.max = item.range[2];
$range.max = item.range[2] || 10; $range.step = item.range[3];
$range.step = item.range[3] || 1; $range.value = item.range[0];
addClass($range, 'art-setting-range'); addClass($range, 'art-setting-range');
append($right, $state); append($right, $state);
def(item, '$range', { def(item, '$range', {
get: () => $range,
});
def(item, 'range', {
configurable: true, configurable: true,
get() { get: () => $range,
return $range.valueAsNumber;
},
set(value) {
$range.value = Number(value);
},
}); });
} }
break; break;
@@ -469,11 +453,8 @@ export default class Setting extends Component {
break; break;
} }
def($item, this.symbol, {
get: () => item,
});
def(item, '$item', { def(item, '$item', {
configurable: true,
get: () => $item, get: () => $item,
}); });
@@ -508,7 +489,7 @@ export default class Setting extends Component {
for (let index = 0; index < option.length; index++) { for (let index = 0; index < option.length; index++) {
const item = option[index]; const item = option[index];
if (item.mounted) { if (item.mounted) {
item.mounted.call(this.art, $panel, item); item.mounted.call(this.art, item.$item, item);
} }
} }
} }
packages/artplayer/src/setting/playbackRate.js
+5 -5
View File
@@ -11,9 +11,9 @@ export default function playbackRate(art) {
return value === 1.0 ? i18n.get('Normal') : value.toFixed(1); return value === 1.0 ? i18n.get('Normal') : value.toFixed(1);
} }
function update($panel, $tooltip, value) { function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = getI18n(value); if ($tooltip) $tooltip.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $panel).find((item) => Number(item.dataset.value) === value); const $current = queryAll('.art-setting-item', $item).find((item) => Number(item.dataset.value) === value);
if ($current) inverseClass($current, 'art-current'); if ($current) inverseClass($current, 'art-current');
} }
@@ -35,10 +35,10 @@ export default function playbackRate(art) {
art.playbackRate = item.value; art.playbackRate = item.value;
return item.html; return item.html;
}, },
mounted: ($panel, item) => { mounted: ($item, item) => {
update($panel, item.$tooltip, art.playbackRate); update($item, item.$tooltip, art.playbackRate);
art.on('video:ratechange', () => { art.on('video:ratechange', () => {
update($panel, item.$tooltip, art.playbackRate); update($item, item.$tooltip, art.playbackRate);
}); });
}, },
}; };
packages/artplayer/src/setting/subtitleOffset.js
+2 -2
View File
@@ -9,8 +9,8 @@ export default function subtitleOffset(art) {
tooltip: '0s', tooltip: '0s',
range: [0, -5, 5, 0.1], range: [0, -5, 5, 0.1],
onChange(item) { onChange(item) {
art.subtitleOffset = item.range; art.subtitleOffset = item.$range.valueAsNumber;
return item.range + 's'; return item.$range.valueAsNumber + 's';
}, },
}; };
} }