修改本地预览插件

This commit is contained in:
Harvey committed 2019-11-22 09:52:56 +08:00
1 parent 7c5d0f7385
commit 042745f001
15 files changed
+296 -129

No files matched your search

+2 -2
View File
@@ -7,10 +7,10 @@ export default function autoPip(art) {
const { top, height } = template.$player.getBoundingClientRect();
if (top + height <= 0 && !player.pip) {
player.pip = true;
art.emit('artplayerPluginAutoPip', true);
art.emit('autoPip', true);
} else if (player.pip) {
player.pip = false;
art.emit('artplayerPluginAutoPip', false);
art.emit('autoPip', false);
}
}, 300);
+57 -17
View File
@@ -1,11 +1,22 @@
import { append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
import { query, append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
export default function localSubtitle(art) {
const {
events: { proxy },
subtitle,
setting,
i18n,
} = art;
i18n.update({
'zh-cn': {
'Local Subtitle': '本地字幕',
},
'zh-tw': {
'Local Subtitle': '本地字幕',
},
});
function loadSubtitle(file) {
if (file) {
const type = getExt(file.name);
@@ -32,6 +43,7 @@ export default function localSubtitle(art) {
default:
break;
}
art.emit('localSubtitle', file);
});
reader.readAsText(file);
} else {
@@ -40,23 +52,51 @@ export default function localSubtitle(art) {
}
}
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.on('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(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);
});
},
attach,
};
}
+57 -17
View File
@@ -1,4 +1,4 @@
import { append, setStyle, setStyles, errorHandle } from '../utils';
import { append, query, setStyle, setStyles, errorHandle } from '../utils';
export default function localVideo(art) {
const {
@@ -6,8 +6,19 @@ export default function localVideo(art) {
template,
player,
option,
setting,
i18n,
} = art;
i18n.update({
'zh-cn': {
'Local Video': '本地视频',
},
'zh-tw': {
'Local Video': '本地視頻',
},
});
function loadVideo(file) {
if (file) {
const canPlayType = template.$video.canPlayType(file.type);
@@ -15,6 +26,7 @@ export default function localVideo(art) {
const url = URL.createObjectURL(file);
option.title = file.name;
player.switchUrl(url, file.name);
art.emit('localVideo', file);
} else {
errorHandle(false, 'Playback of this file format is not supported');
}
@@ -31,23 +43,51 @@ export default function localVideo(art) {
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.on('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(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);
});
},
attach,
};
}
@@ -9,7 +9,7 @@ function settingMix(art) {
return {
title: 'Subtitle',
name: 'subtitle',
name: 'subtitleOffset',
index: 20,
html: `
<div class="art-setting-header">
@@ -33,7 +33,7 @@ function settingMix(art) {
$value.innerText = 0;
});
art.on('artplayerPluginSubtitleOffset', value => {
art.on('subtitleOffset', value => {
subtitle.update();
if ($range.value !== value) {
$range.value = value;
@@ -82,10 +82,10 @@ export default function subtitleOffset(art) {
cue.endTime = clamp(cuesCache[index].endTime + time, 0, player.duration);
});
notice.show(`${i18n.get('Subtitle offset time')}: ${value}s`);
art.emit('artplayerPluginSubtitleOffset', value);
art.emit('subtitleOffset', value);
} else {
notice.show(`${i18n.get('No subtitles found')}`);
art.emit('artplayerPluginSubtitleOffset', 0);
art.emit('subtitleOffset', 0);
}
},
};