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

Refactor Artplayer class to add isGetter utility function

Browse Source
This commit is contained in:
Harvey Zack committed 2024-10-20 21:57:44 +08:00
1 parent b6df6a6148
commit 3cece10f9e
7 files changed
+101 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/aspectRatio.js
+10 -11
View File
@@ -1,4 +1,4 @@
import { inverseClass, queryAll } from '../utils';
import Setting from './';
export default function aspectRatio(art) {
const {
@@ -11,10 +11,9 @@ export default function aspectRatio(art) {
return value === 'default' ? i18n.get('Default') : value;
}
function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $item).find((item) => item.dataset.value === value);
if ($current) inverseClass($current, 'art-current');
function update(item) {
const tooltip = getI18n(art.aspectRatio);
Setting.select(item, art.aspectRatio, tooltip);
}
return {
@@ -27,7 +26,9 @@ export default function aspectRatio(art) {
return {
value: item,
name: `aspect-ratio-${item}`,
default: item === art.aspectRatio,
get default() {
return item === art.aspectRatio;
},
html: getI18n(item),
};
}),
@@ -35,11 +36,9 @@ export default function aspectRatio(art) {
art.aspectRatio = item.value;
return item.html;
},
mounted: ($item, item) => {
update($item, item.$tooltip, art.aspectRatio);
art.on('aspectRatio', () => {
update($item, item.$tooltip, art.aspectRatio);
});
mounted: (_, item) => {
update(item);
art.on('aspectRatio', () => update(item));
},
};
}
packages/artplayer/src/setting/flip.js
+15 -11
View File
@@ -1,4 +1,5 @@
import { inverseClass, queryAll, capitalize } from '../utils';
import Setting from './';
import { capitalize } from '../utils';
export default function flip(art) {
const {
@@ -7,10 +8,13 @@ export default function flip(art) {
constructor: { SETTING_ITEM_WIDTH, FLIP },
} = art;
function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = i18n.get(capitalize(value));
const $current = queryAll('.art-setting-item', $item).find((item) => item.dataset.value === value);
if ($current) inverseClass($current, 'art-current');
function getI18n(value) {
return i18n.get(capitalize(value));
}
function update(item) {
const tooltip = getI18n(art.flip);
Setting.select(item, art.flip, tooltip);
}
return {
@@ -23,7 +27,9 @@ export default function flip(art) {
return {
value: item,
name: `aspect-ratio-${item}`,
default: item === art.flip,
get default() {
return item === art.flip;
},
html: i18n.get(capitalize(item)),
};
}),
@@ -31,11 +37,9 @@ export default function flip(art) {
art.flip = item.value;
return item.html;
},
mounted: ($item, item) => {
update($item, item.$tooltip, art.flip);
art.on('flip', () => {
update($item, item.$tooltip, art.flip);
});
mounted: (_, item) => {
update(item);
art.on('flip', () => update(item));
},
};
}
packages/artplayer/src/setting/index.js
+10 -1
View File
@@ -9,6 +9,7 @@ import {
remove,
append,
getRect,
isGetter,
addClass,
setStyle,
isMobile,
@@ -84,6 +85,12 @@ 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');
}
format(option = this.option, parent, parents, names = []) {
for (let index = 0; index < option.length; index++) {
const item = option[index];
@@ -445,7 +452,9 @@ export default class Setting extends Component {
for (let index = 0; index < item.$option.length; index++) {
const element = item.$option[index];
element.default = element === item;
if (!isGetter(element, 'default')) {
element.default = element === item;
}
}
if (item.$parents) {
packages/artplayer/src/setting/playbackRate.js
+10 -11
View File
@@ -1,4 +1,4 @@
import { inverseClass, queryAll } from '../utils';
import Setting from './';
export default function playbackRate(art) {
const {
@@ -11,10 +11,9 @@ export default function playbackRate(art) {
return value === 1.0 ? i18n.get('Normal') : value.toFixed(1);
}
function update($item, $tooltip, value) {
if ($tooltip) $tooltip.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $item).find((item) => Number(item.dataset.value) === value);
if ($current) inverseClass($current, 'art-current');
function update(item) {
const tooltip = getI18n(art.playbackRate);
Setting.select(item, art.playbackRate, tooltip);
}
return {
@@ -27,7 +26,9 @@ export default function playbackRate(art) {
return {
value: item,
name: `aspect-ratio-${item}`,
default: item === art.playbackRate,
get default() {
return item === art.playbackRate;
},
html: getI18n(item),
};
}),
@@ -35,11 +36,9 @@ export default function playbackRate(art) {
art.playbackRate = item.value;
return item.html;
},
mounted: ($item, item) => {
update($item, item.$tooltip, art.playbackRate);
art.on('video:ratechange', () => {
update($item, item.$tooltip, art.playbackRate);
});
mounted: (_, item) => {
update(item);
art.on('video:ratechange', () => update(item));
},
};
}
packages/artplayer/src/utils/property.js
+5
View File
@@ -9,6 +9,11 @@ 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) => {