Playback rate (#411)

* update
This commit is contained in:
Harvey Zack authored and GitHub committed 2022-10-29 21:14:17 +08:00
1 parent efc9cf7362
commit 6715bc457a
16 files changed
+268 -267

No files matched your search

@@ -1,14 +1,17 @@
import { inverseClass, queryAll } from '../utils';
import { inverseClass, query, queryAll } from '../utils';
export default function aspectRatio(option) {
return (art) => {
const { i18n } = art;
const {
i18n,
constructor: { ASPECT_RATIO },
} = art;
return {
...option,
html: `${i18n.get('Aspect Ratio')}:
<span data-value="default" class="art-current">${i18n.get('Default')}</span>
<span data-value="4:3">4:3</span>
<span data-value="16:9">16:9</span>
${ASPECT_RATIO.map(
(item) => `<span data-value="${item}">${item === 'default' ? i18n.get('Default') : item}</span>`,
).join('')}
`,
click: (contextmenu, event) => {
const { value } = event.target.dataset;
@@ -18,6 +21,8 @@ export default function aspectRatio(option) {
}
},
mounted: ($panel) => {
const $default = query('[data-value="default"]', $panel);
if ($default) inverseClass($default, 'art-current');
art.on('aspectRatio', (value) => {
const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
if ($current) {
+10 -6
View File
@@ -1,23 +1,27 @@
import { inverseClass, queryAll } from '../utils';
import { inverseClass, query, queryAll, capitalize } from '../utils';
export default function flip(option) {
return (art) => {
const { i18n } = art;
const {
i18n,
constructor: { FLIP },
} = art;
return {
...option,
html: `${i18n.get('Video Flip')}:
<span data-value="normal" class="art-current">${i18n.get('Normal')}</span>
<span data-value="horizontal">${i18n.get('Horizontal')}</span>
<span data-value="vertical">${i18n.get('Vertical')}</span>
${FLIP.map((item) => `<span data-value="${item}">${i18n.get(capitalize(item))}</span>`).join('')}
`,
click: (contextmenu, event) => {
const { value } = event.target.dataset;
if (value) {
art.flip = value;
art.flip = value.toLowerCase();
contextmenu.show = false;
}
},
mounted: ($panel) => {
const $default = query('[data-value="normal"]', $panel);
if ($default) inverseClass($default, 'art-current');
art.on('flip', (value) => {
const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
if ($current) {
@@ -1,17 +1,18 @@
import { inverseClass, queryAll } from '../utils';
import { inverseClass, query, queryAll } from '../utils';
export default function playbackRate(option) {
return (art) => {
const { i18n } = art;
const {
i18n,
constructor: { PLAYBACK_RATE },
} = art;
return {
...option,
html: `${i18n.get('Play Speed')}:
<span data-value="0.5">0.5</span>
<span data-value="0.75">0.75</span>
<span data-value="1.0" class="art-current">${i18n.get('Normal')}</span>
<span data-value="1.25">1.25</span>
<span data-value="1.5">1.5</span>
<span data-value="2.0">2.0</span>
${PLAYBACK_RATE.map(
(item) => `<span data-value="${item}">${item === 1 ? i18n.get('Normal') : item}</span>`,
).join('')}
`,
click: (contextmenu, event) => {
const { value } = event.target.dataset;
@@ -21,6 +22,8 @@ export default function playbackRate(option) {
}
},
mounted: ($panel) => {
const $default = query('[data-value="1"]', $panel);
if ($default) inverseClass($default, 'art-current');
art.on('playbackRate', (value) => {
const $current = queryAll('span', $panel).find((item) => Number(item.dataset.value) === value);
if ($current) {