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

Refactor Artplayer class to remove unnecessary CSS transformations in setting.less

Browse Source
This commit is contained in:
Harvey Zack committed 2024-10-21 10:27:26 +08:00
1 parent ed88c73ab2
commit c82e381aa1
10 files changed
+122 -189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/aspectRatio.js
+7 -11
View File
@@ -1,5 +1,3 @@
import Setting from './';
export default function aspectRatio(art) {
const {
i18n,
@@ -11,9 +9,9 @@ export default function aspectRatio(art) {
return value === 'default' ? i18n.get('Default') : value;
}
function update(item) {
const tooltip = getI18n(art.aspectRatio);
Setting.select(item, art.aspectRatio, tooltip);
function update() {
const target = art.setting.find(`aspect-ratio-${art.aspectRatio}`);
art.setting.check(target);
}
return {
@@ -26,9 +24,7 @@ export default function aspectRatio(art) {
return {
value: item,
name: `aspect-ratio-${item}`,
get default() {
return item === art.aspectRatio;
},
default: item === art.aspectRatio,
html: getI18n(item),
};
}),
@@ -36,9 +32,9 @@ export default function aspectRatio(art) {
art.aspectRatio = item.value;
return item.html;
},
mounted: (_, item) => {
update(item);
art.on('aspectRatio', () => update(item));
mounted: () => {
update();
art.on('aspectRatio', () => update());
},
};
}
packages/artplayer/src/setting/flip.js
+10 -13
View File
@@ -1,4 +1,3 @@
import Setting from './';
import { capitalize } from '../utils';
export default function flip(art) {
@@ -12,34 +11,32 @@ export default function flip(art) {
return i18n.get(capitalize(value));
}
function update(item) {
const tooltip = getI18n(art.flip);
Setting.select(item, art.flip, tooltip);
function update() {
const target = art.setting.find(`flip-${art.flip}`);
art.setting.check(target);
}
return {
width: SETTING_ITEM_WIDTH,
name: 'flip',
html: i18n.get('Video Flip'),
tooltip: i18n.get(capitalize(art.flip)),
tooltip: getI18n(art.flip),
icon: icons.flip,
selector: FLIP.map((item) => {
return {
value: item,
name: `aspect-ratio-${item}`,
get default() {
return item === art.flip;
},
html: i18n.get(capitalize(item)),
name: `flip-${item}`,
default: item === art.flip,
html: getI18n(item),
};
}),
onSelect(item) {
art.flip = item.value;
return item.html;
},
mounted: (_, item) => {
update(item);
art.on('flip', () => update(item));
mounted: () => {
update();
art.on('flip', () => update());
},
};
}
packages/artplayer/src/setting/index.js
+32 -35
View File
@@ -9,7 +9,6 @@ import {
remove,
append,
getRect,
isGetter,
addClass,
setStyle,
errorHandle,
@@ -84,10 +83,25 @@ export default class Setting extends Component {
return result;
}
static select(item, value, tooltip) {
if (item.$tooltip && tooltip) item.$tooltip.innerText = tooltip;
const element = item.selector.find((element) => element.$item?.dataset?.value === value);
if (element?.$item) inverseClass(element.$item, 'art-current');
traverse(callback, option = this.option) {
for (let index = 0; index < option.length; index++) {
const item = option[index];
callback(item);
if (item.selector?.length) {
this.traverse.call(this, callback, item.selector);
}
}
}
check(target) {
target.$parent.tooltip = target.html;
this.traverse((item) => {
item.default = item === target;
if (item.default && item.$item) {
inverseClass(item.$item, 'art-current');
}
}, target.$option);
this.render(target.$parents);
}
format(option = this.option, parent, parents, names = []) {
@@ -130,16 +144,14 @@ export default class Setting extends Component {
this.option = option;
}
find(name = '', option = this.option) {
for (let index = 0; index < option.length; index++) {
const item = option[index];
find(name = '') {
let result = null;
this.traverse((item) => {
if (item.name === name) {
return item;
} else {
const result = this.find(name, item.selector || []);
if (result) return result;
result = item;
}
}
});
return result;
}
resize() {
@@ -273,7 +285,7 @@ export default class Setting extends Component {
append($icon, item.icon || icons.config);
break;
case 'selector':
if (item.selector && item.selector.length) {
if (item.selector?.length) {
append($icon, item.icon || icons.config);
} else {
append($icon, icons.check);
@@ -406,7 +418,7 @@ export default class Setting extends Component {
}
break;
case 'selector':
if (item.selector && item.selector.length) {
if (item.selector?.length) {
const $state = createElement('div');
addClass($state, 'art-setting-item-right-icon');
append($state, icons.arrowRight);
@@ -450,27 +462,12 @@ export default class Setting extends Component {
case 'selector':
{
const event = proxy($item, 'click', async (event) => {
if (item.selector && item.selector.length) {
if (item.selector?.length) {
this.render(item.selector);
} else {
inverseClass($item, 'art-current');
for (let index = 0; index < item.$option.length; index++) {
const element = item.$option[index];
if (!isGetter(element, 'default')) {
element.default = element === item;
}
}
if (item.$parents) {
this.render(item.$parents);
}
if (item.$parent && item.$parent.onSelect) {
const result = await item.$parent.onSelect.call(this.art, item, $item, event);
if (item.$parent.$tooltip) {
item.$parent.$tooltip.innerHTML = result;
}
this.check(item);
if (item.$parent.onSelect) {
item.$parent.tooltip = await item.$parent.onSelect.call(this.art, item, $item, event);
}
}
});
@@ -498,7 +495,7 @@ export default class Setting extends Component {
}
if (item.mounted) {
item.mounted.call(this.art, item.$item, item);
setTimeout(() => item.mounted.call(this.art, item.$item, item), 0);
}
}
packages/artplayer/src/setting/playbackRate.js
+8 -12
View File
@@ -1,5 +1,3 @@
import Setting from './';
export default function playbackRate(art) {
const {
i18n,
@@ -11,9 +9,9 @@ export default function playbackRate(art) {
return value === 1.0 ? i18n.get('Normal') : value.toFixed(1);
}
function update(item) {
const tooltip = getI18n(art.playbackRate);
Setting.select(item, art.playbackRate, tooltip);
function update() {
const target = art.setting.find(`playback-rate-${art.playbackRate}`);
art.setting.check(target);
}
return {
@@ -25,10 +23,8 @@ export default function playbackRate(art) {
selector: PLAYBACK_RATE.map((item) => {
return {
value: item,
name: `aspect-ratio-${item}`,
get default() {
return item === art.playbackRate;
},
name: `playback-rate-${item}`,
default: item === art.playbackRate,
html: getI18n(item),
};
}),
@@ -36,9 +32,9 @@ export default function playbackRate(art) {
art.playbackRate = item.value;
return item.html;
},
mounted: (_, item) => {
update(item);
art.on('video:ratechange', () => update(item));
mounted: () => {
update();
art.on('video:ratechange', () => update());
},
};
}
packages/artplayer/src/utils/property.js
-5
View File
@@ -9,11 +9,6 @@ export function get(obj, name) {
return Object.getOwnPropertyDescriptor(obj, name);
}
export function isGetter(obj, prop) {
const descriptor = Object.getOwnPropertyDescriptor(obj, prop);
return descriptor !== undefined && typeof descriptor.get === 'function';
}
export function mergeDeep(...objects) {
const isObject = (item) => item && typeof item === 'object' && !Array.isArray(item);
return objects.reduce((prev, obj) => {