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

update

Browse Source
This commit is contained in:
Harvey authored and Harvey Zack committed 2022-02-11 11:20:54 +08:00
1 parent 548334eb0b
commit 21228216f9
8 files changed
+83 -125
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/aspectRatio.js
+13 -36
View File
@@ -1,38 +1,15 @@
import { inverseClass, queryAll } from '../utils';
export default function aspectRatio(option) {
return (art) => {
const { i18n } = art;
return {
...option,
html: `
<div class="art-setting-header">${i18n.get('Aspect ratio')}</div>
<div class="art-setting-radio">
<div class="art-radio-item current">
<button type="button" data-value="default">${i18n.get('Default')}</button>
</div>
<div class="art-radio-item">
<button type="button" data-value="4:3">4:3</button>
</div>
<div class="art-radio-item">
<button type="button" data-value="16:9">16:9</button>
</div>
</div>
`,
click: (_, event) => {
const { value } = event.target.dataset;
if (value) {
art.aspectRatio = value;
}
},
mounted: ($setting) => {
art.on('aspectRatio', (ratio) => {
const $current = queryAll('button', $setting).find((item) => item.dataset.value === ratio);
if ($current) {
inverseClass($current.parentElement, 'current');
}
});
},
};
export default function aspectRatio(art) {
const { i18n } = art;
return {
width: 150,
html: i18n.get('Aspect ratio'),
items: ['default', '4:3', '16:9'].map((item) => {
return {
html: item === 'default' ? i18n.get('Default') : item,
click() {
art.aspectRatio = item;
},
};
}),
};
}
packages/artplayer/src/setting/flip.js
+19 -35
View File
@@ -1,38 +1,22 @@
import { inverseClass, queryAll } from '../utils';
export default function playbackRate(art) {
const { i18n } = art;
export default function flip(option) {
return (art) => {
const { i18n } = art;
return {
...option,
html: `
<div class="art-setting-header">${i18n.get('Flip')}</div>
<div class="art-setting-radio">
<div class="art-radio-item current">
<button type="button" data-value="normal">${i18n.get('Normal')}</button>
</div>
<div class="art-radio-item">
<button type="button" data-value="horizontal">${i18n.get('Horizontal')}</button>
</div>
<div class="art-radio-item">
<button type="button" data-value="vertical">${i18n.get('Vertical')}</button>
</div>
</div>
`,
click: (_, event) => {
const { value } = event.target.dataset;
if (value) {
art.flip = value;
}
},
mounted: ($setting) => {
art.on('flip', (flip) => {
const $current = queryAll('button', $setting).find((item) => item.dataset.value === flip);
if ($current) {
inverseClass($current.parentElement, 'current');
}
});
},
};
const keys = {
normal: 'Normal',
horizontal: 'Horizontal',
vertical: 'Vertical',
};
return {
width: 150,
html: i18n.get('Flip'),
items: Object.keys(keys).map((key) => {
return {
html: i18n.get(keys[key]),
click() {
art.flip = key;
},
};
}),
};
}
packages/artplayer/src/setting/index.js
+3 -1
View File
@@ -1,6 +1,8 @@
import Component from '../utils/component';
import { append, addClass, setStyle, inverseClass } from '../utils/dom';
import playbackRate from './playbackRate';
import aspectRatio from './aspectRatio';
import flip from './flip';
function makeRecursion(option) {
if (!option) return option;
@@ -35,7 +37,7 @@ export default class Setting extends Component {
this.events = [];
if (option.setting) {
this.option = makeRecursion([playbackRate(art), playbackRate(art), playbackRate(art)]);
this.option = makeRecursion([playbackRate(art), aspectRatio(art), flip(art)]);
art.once('ready', () => {
this.init(this.option);
packages/artplayer/src/setting/rotate.js
-42
View File
@@ -1,42 +0,0 @@
import { query } from '../utils';
export default function rotate(option) {
return (art) => {
const { i18n } = art;
return {
...option,
html: `
<div class="art-setting-header">
${i18n.get('Rotate')}: <span class="art-rotate-value">0°</span>
</div>
<div class="art-setting-radio">
<div class="art-radio-item">
<button type="button" data-value="90">+90°</button>
</div>
<div class="art-radio-item">
<button type="button" data-value="-90">-90°</button>
</div>
</div>
`,
click: (setting, event) => {
const { value } = event.target.dataset;
if (value) {
const deg = art.rotate + Number(value);
if (deg === 360 || deg === -360) {
art.rotate = 0;
} else {
art.rotate = deg;
}
} else {
art.rotate = 0;
}
},
mounted: ($setting) => {
const $value = query('.art-rotate-value', $setting);
art.on('rotate', (rotate) => {
$value.innerText = `${rotate || 0}°`;
});
},
};
};
}