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

优化字幕结构

Browse Source
This commit is contained in:
Harvey committed 2019-11-15 10:17:11 +08:00
1 parent 3965132252
commit 9f2038539e
12 files changed
+137 -257
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/index.js
+1 -1
View File
@@ -155,7 +155,7 @@ class Artplayer extends Emitter {
};
}
destroy(removeHtml = false) {
destroy(removeHtml = true) {
this.events.destroy();
this.template.destroy(removeHtml);
Artplayer.instances.splice(Artplayer.instances.indexOf(this), 1);
packages/artplayer/src/mask.js
+2 -3
View File
@@ -3,9 +3,8 @@ import { append, addClass, removeClass } from './utils';
export default class Mask {
constructor(art) {
this.art = art;
const { $mask } = art.template;
const $playBig = append($mask, '<div class="art-state"></div>');
append($playBig, art.icons.state);
const { $state } = art.template;
append($state, art.icons.state);
}
set show(value) {
packages/artplayer/src/plugins/subtitleOffset.js
+2
View File
@@ -3,6 +3,7 @@ import { query } from '../utils';
function settingMix(art) {
const {
i18n,
subtitle,
events: { proxy },
} = art;
@@ -33,6 +34,7 @@ function settingMix(art) {
});
art.on('artplayerPluginSubtitleOffset', value => {
subtitle.update();
if ($range.value !== value) {
$range.value = value;
$value.innerText = value;
packages/artplayer/src/storage.js
+1 -4
View File
@@ -2,11 +2,8 @@ export default class Storage {
constructor(art) {
this.art = art;
this.name = 'artplayer_settings';
this.init();
}
const { option } = art;
init() {
const { option } = this.art;
const volume = this.get('volume');
if (volume) {
option.volume = volume;
packages/artplayer/src/style/mask.scss
+3 -3
View File
@@ -13,8 +13,8 @@
height: 100%;
overflow: hidden;
pointer-events: none;
.art-state {
.artplayer-state {
display: flex;
justify-content: center;
align-items: center;
@@ -23,7 +23,7 @@
bottom: 55px;
width: 60px;
height: 60px;
opacity: .6;
opacity: 0.6;
}
}
packages/artplayer/src/subtitle.js
+46 -64
View File
@@ -4,85 +4,60 @@ export default class Subtitle {
constructor(art) {
this.art = art;
this.state = true;
this.isInit = false;
const { url } = this.art.option.subtitle;
if (url) {
this.init(url);
const {
events: { proxy },
option: { subtitle },
template: { $subtitle },
} = art;
setStyles($subtitle, subtitle.style);
proxy(this.textTrack, 'cuechange', this.update.bind(this));
if (subtitle.url) {
this.init(subtitle.url);
}
}
get url() {
const { $track } = this.art.template;
if ($track) {
return $track.src;
return this.art.template.$track.src;
}
get textTrack() {
return this.art.template.$video.textTracks[0];
}
get activeCue() {
return this.textTrack.activeCues[0];
}
update() {
const { $subtitle } = this.art.template;
$subtitle.innerHTML = '';
if (this.activeCue) {
$subtitle.innerHTML = this.activeCue.text
.split(/\r?\n/)
.map(item => `<p>${item}</p>`)
.join('');
}
return '';
this.art.emit('subtitle:update', $subtitle);
}
switch(url, name = 'unknown') {
const { i18n, notice } = this.art;
return this.init(url).then(blobUrl => {
return this.init(url).then(subUrl => {
notice.show(`${i18n.get('Switch subtitle')}: ${name}`);
return blobUrl;
this.art.emit('subtitle:switch', subUrl);
return subUrl;
});
}
init(url) {
return new Promise(resolve => {
const {
events: { proxy },
option: { subtitle },
template: { $video, $subtitle, $track },
} = this.art;
const {
notice,
template: { $subtitle, $track },
} = this.art;
setStyles($subtitle, subtitle.style || {});
if (!$track) {
const $newTrack = document.createElement('track');
$newTrack.default = true;
$newTrack.kind = 'metadata';
$video.appendChild($newTrack);
this.art.template.$track = $newTrack;
}
this.load(url).then(blobUrl => {
$subtitle.innerHTML = '';
const { $track } = this.art.template;
const lastUrl = $track.src;
if (lastUrl === blobUrl) return;
URL.revokeObjectURL(lastUrl);
$track.src = blobUrl;
if ($video.textTracks && $video.textTracks[0]) {
const [track] = $video.textTracks;
// eslint-disable-next-line no-inner-declarations
function updateSubtitle() {
const [cue] = track.activeCues;
$subtitle.innerHTML = '';
if (cue) {
$subtitle.innerHTML = cue.text
.split(/\r?\n/)
.map(item => `<p>${item}</p>`)
.join('');
}
this.art.emit('subtitle:update', $subtitle);
}
if (!this.isInit) {
this.isInit = true;
proxy(track, 'cuechange', updateSubtitle.bind(this));
}
this.art.on('artplayerPluginSubtitleOffset', updateSubtitle.bind(this));
}
resolve(blobUrl);
});
});
}
load(url) {
const { notice } = this.art;
return fetch(url)
.then(response => {
return response.text();
@@ -99,6 +74,13 @@ export default class Subtitle {
return url;
}
})
.then(subUrl => {
$subtitle.innerHTML = '';
if (this.url === subUrl) return subUrl;
URL.revokeObjectURL(this.url);
$track.src = subUrl;
return subUrl;
})
.catch(err => {
notice.show(err);
throw err;
packages/artplayer/src/template.js
+8 -2
View File
@@ -34,11 +34,15 @@ export default class Template {
initDesktop() {
this.$container.innerHTML = `
<div class="artplayer-video-player" style="--theme: ${this.art.option.theme}">
<video class="artplayer-video"></video>
<video class="artplayer-video">
<track default kind="metadata"></track>
</video>
<div class="artplayer-subtitle"></div>
<div class="artplayer-danmuku"></div>
<div class="artplayer-layers"></div>
<div class="artplayer-mask"></div>
<div class="artplayer-mask">
<div class="artplayer-state"></div>
</div>
<div class="artplayer-bottom">
<div class="artplayer-progress"></div>
<div class="artplayer-controls">
@@ -68,6 +72,7 @@ export default class Template {
`;
this.$player = this.query('.artplayer-video-player');
this.$video = this.query('.artplayer-video');
this.$track = this.query('.artplayer-video track');
this.$subtitle = this.query('.artplayer-subtitle');
this.$danmuku = this.query('.artplayer-danmuku');
this.$bottom = this.query('.artplayer-bottom');
@@ -80,6 +85,7 @@ export default class Template {
this.$notice = this.query('.artplayer-notice');
this.$noticeInner = this.query('.artplayer-notice-inner');
this.$mask = this.query('.artplayer-mask');
this.$state = this.query('.artplayer-state');
this.$setting = this.query('.artplayer-setting');
this.$settingInner = this.query('.artplayer-setting-inner');
this.$settingBody = this.query('.artplayer-setting-body');
packages/artplayer/src/utils/component.js
+3 -7
View File
@@ -1,4 +1,6 @@
import { append, setStyles, setStyle, remove, errorHandle, hasOwnProperty, tooltip } from './index';
import { append, setStyles, setStyle, tooltip } from './dom';
import { errorHandle } from './error';
import { hasOwnProperty } from './property';
export default function component(art, parent, target, getOption, callback, title) {
const option = typeof getOption === 'function' ? getOption(art) : getOption;
@@ -66,12 +68,6 @@ export default function component(art, parent, target, getOption, callback, titl
art.emit(`${title}:hide`, $element);
}
},
set remove(value) {
if (value) {
remove($element);
art.emit(`${title}:remove`, $element);
}
},
},
});