mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-16 01:26:16 -08:00
update
This commit is contained in:
Harvey authored and Harvey Zack committed
1 parent
dabfb2b8c8
commit
fedbf3b6f7
10 files changed
+1
-480
No files matched your search
@@ -22,7 +22,6 @@ import rectMix from './rectMix';
|
||||
import flipMix from './flipMix';
|
||||
import miniMix from './miniMix';
|
||||
import loopMix from './loopMix';
|
||||
import rotateMix from './rotateMix';
|
||||
import posterMix from './posterMix';
|
||||
import autoHeightMix from './autoHeightMix';
|
||||
import themeMix from './themeMix';
|
||||
@@ -58,7 +57,6 @@ export default class Player {
|
||||
flipMix(art);
|
||||
miniMix(art);
|
||||
loopMix(art);
|
||||
rotateMix(art);
|
||||
posterMix(art);
|
||||
autoHeightMix(art);
|
||||
themeMix(art);
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import { setStyle, errorHandle, def } from '../utils';
|
||||
|
||||
export default function rotateMix(art) {
|
||||
const {
|
||||
template: { $video, $player },
|
||||
i18n,
|
||||
notice,
|
||||
} = art;
|
||||
|
||||
def(art, 'rotate', {
|
||||
get: () => Number($player.dataset.rotate) || 0,
|
||||
set: (deg) => {
|
||||
if (!deg) deg = 0;
|
||||
|
||||
const degList = [-270, -180, -90, 0, 90, 180, 270];
|
||||
errorHandle(degList.includes(deg), `'rotate' only accept ${degList.toString()} as parameters`);
|
||||
|
||||
if (deg === 0) {
|
||||
delete $player.dataset.rotate;
|
||||
setStyle($video, 'transform', null);
|
||||
} else {
|
||||
art.flip = false;
|
||||
art.autoSize = true;
|
||||
$player.dataset.rotate = deg;
|
||||
|
||||
const getScaleValue = () => {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
return videoWidth > videoHeight ? videoHeight / videoWidth : videoWidth / videoHeight;
|
||||
};
|
||||
|
||||
let degValue = 0;
|
||||
let scaleValue = 1;
|
||||
switch (deg) {
|
||||
case -270:
|
||||
degValue = 90;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
case -180:
|
||||
degValue = 180;
|
||||
break;
|
||||
case -90:
|
||||
degValue = 270;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
case 90:
|
||||
degValue = 90;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
case 180:
|
||||
degValue = 180;
|
||||
break;
|
||||
case 270:
|
||||
degValue = 270;
|
||||
scaleValue = getScaleValue();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
setStyle($video, 'transform', `rotate(${degValue}deg) scale(${scaleValue})`);
|
||||
}
|
||||
|
||||
notice.show = `${i18n.get('Rotate')}: ${deg}°`;
|
||||
art.emit('rotate', deg);
|
||||
},
|
||||
});
|
||||
|
||||
def(art, 'rotateReset', {
|
||||
set(value) {
|
||||
if (value && art.rotate) {
|
||||
const { rotate } = art;
|
||||
art.rotate = rotate;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
import { errorHandle, has, def } from '../utils';
|
||||
import localVideo from './localVideo';
|
||||
import localSubtitle from './localSubtitle';
|
||||
import miniProgressBar from './miniProgressBar';
|
||||
|
||||
export default class Plugins {
|
||||
@@ -14,14 +12,6 @@ export default class Plugins {
|
||||
this.add(miniProgressBar);
|
||||
}
|
||||
|
||||
if (option.localVideo) {
|
||||
this.add(localVideo);
|
||||
}
|
||||
|
||||
if (option.localSubtitle) {
|
||||
this.add(localSubtitle);
|
||||
}
|
||||
|
||||
for (let index = 0; index < option.plugins.length; index++) {
|
||||
this.add(option.plugins[index]);
|
||||
}
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import { query, append, setStyle, setStyles, errorHandle, getExt } from '../utils';
|
||||
|
||||
export default function localSubtitle(art) {
|
||||
const {
|
||||
events: { proxy },
|
||||
subtitle,
|
||||
setting,
|
||||
i18n,
|
||||
} = art;
|
||||
|
||||
function loadSubtitle(file) {
|
||||
if (file) {
|
||||
const type = getExt(file.name);
|
||||
if (['ass', 'vtt', 'srt'].includes(type)) {
|
||||
subtitle.switch(URL.createObjectURL(file), {
|
||||
name: file.name,
|
||||
ext: type,
|
||||
});
|
||||
art.emit('localSubtitle', file);
|
||||
} else {
|
||||
errorHandle(false, 'Only supports subtitle files in .ass, .vtt and .srt format');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function attach(target) {
|
||||
const $input = append(target, '<input type="file">');
|
||||
setStyle(target, 'position', 'relative');
|
||||
setStyles($input, {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0',
|
||||
top: '0',
|
||||
opacity: '0',
|
||||
});
|
||||
proxy($input, 'change', () => {
|
||||
const file = $input.files[0];
|
||||
loadSubtitle(file);
|
||||
});
|
||||
}
|
||||
|
||||
art.once('ready', () => {
|
||||
setting.add({
|
||||
title: 'Local Subtitle',
|
||||
name: 'localSubtitle',
|
||||
index: 40,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Local Subtitle')}
|
||||
</div>
|
||||
<div class="art-setting-upload">
|
||||
<div class="art-upload-btn">${i18n.get('Open')}</div>
|
||||
<div class="art-upload-value"></div>
|
||||
</div>
|
||||
`,
|
||||
mounted: ($setting) => {
|
||||
const $btn = query('.art-upload-btn', $setting);
|
||||
const $value = query('.art-upload-value', $setting);
|
||||
art.on('localSubtitle', (file) => {
|
||||
$value.textContent = file.name;
|
||||
$value.title = file.name;
|
||||
});
|
||||
attach($btn);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'localSubtitle',
|
||||
attach,
|
||||
};
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import { append, query, setStyle, setStyles, errorHandle } from '../utils';
|
||||
|
||||
export default function localVideo(art) {
|
||||
const {
|
||||
events: { proxy },
|
||||
template: { $video, $player },
|
||||
option,
|
||||
setting,
|
||||
i18n,
|
||||
} = art;
|
||||
|
||||
function loadVideo(file) {
|
||||
if (file) {
|
||||
const canPlayType = $video.canPlayType(file.type);
|
||||
if (canPlayType === 'maybe' || canPlayType === 'probably') {
|
||||
const url = URL.createObjectURL(file);
|
||||
option.title = file.name;
|
||||
art.switchUrl(url, file.name);
|
||||
art.emit('localVideo', file);
|
||||
} else {
|
||||
errorHandle(false, 'Playback of this file format is not supported');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
proxy($player, 'dragover', (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
proxy($player, 'drop', (event) => {
|
||||
event.preventDefault();
|
||||
const file = event.dataTransfer.files[0];
|
||||
loadVideo(file);
|
||||
});
|
||||
|
||||
function attach(target) {
|
||||
const $input = append(target, '<input type="file">');
|
||||
setStyle(target, 'position', 'relative');
|
||||
setStyles($input, {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0',
|
||||
top: '0',
|
||||
opacity: '0',
|
||||
});
|
||||
proxy($input, 'change', () => {
|
||||
const file = $input.files[0];
|
||||
loadVideo(file);
|
||||
});
|
||||
}
|
||||
|
||||
art.once('ready', () => {
|
||||
setting.add({
|
||||
title: 'Local Video',
|
||||
name: 'localVideo',
|
||||
index: 30,
|
||||
html: `
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Local Video')}
|
||||
</div>
|
||||
<div class="art-setting-upload">
|
||||
<div class="art-upload-btn">${i18n.get('Open')}</div>
|
||||
<div class="art-upload-value"></div>
|
||||
</div>
|
||||
`,
|
||||
mounted: ($setting) => {
|
||||
const $btn = query('.art-upload-btn', $setting);
|
||||
const $value = query('.art-upload-value', $setting);
|
||||
art.on('localVideo', (file) => {
|
||||
$value.textContent = file.name;
|
||||
$value.title = file.name;
|
||||
});
|
||||
attach($btn);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
name: 'localVideo',
|
||||
attach,
|
||||
};
|
||||
}
|
||||
@@ -41,7 +41,6 @@ export default {
|
||||
autoMini: b,
|
||||
loop: b,
|
||||
flip: b,
|
||||
rotate: b,
|
||||
playbackRate: b,
|
||||
aspectRatio: b,
|
||||
screenshot: b,
|
||||
|
||||
-5
@@ -222,11 +222,6 @@ type Option = {
|
||||
*/
|
||||
flip?: boolean;
|
||||
|
||||
/**
|
||||
* Whether show video rotate button
|
||||
*/
|
||||
rotate?: boolean;
|
||||
|
||||
/**
|
||||
* Whether show video playback rate button
|
||||
*/
|
||||
|
||||
Reference in new issue
Block a user