mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 08:42:21 -08:00
build all
Refactor utility functions for improved readability and consistency - Updated compatibility.js to use consistent line endings and formatting. - Refactored component.js for better readability and structure, including consistent use of arrow functions and binding. - Simplified dom.js functions with consistent formatting and improved readability. - Enhanced emitter.js with consistent formatting and arrow function usage. - Streamlined error.js for improved readability and consistency. - Refactored file.js to use consistent formatting and improved readability. - Improved format.js functions for better readability and consistency. - Updated index.js to maintain consistent export formatting. - Refactored property.js for improved readability and consistency. - Enhanced subtitle.js with consistent formatting and improved readability. - Refactored time.js for better readability and consistent formatting. fix: update lint script to target only source files for consistency Revert "fix: restore export statements for various plugins and update type definitions for better clarity" This reverts commit b5e969d81ec765cd8a34b06e6ef4f232ef25087f. fix: restore export statements for various plugins and update type definitions for better clarity Refactor type definitions to use interfaces instead of type aliases for better extensibility and clarity across i18n, icons, option, player, quality, setting, subtitle, template, and utils modules.
This commit is contained in:
Harvey Zack committed
1 parent
532dd67cfd
commit
35ad9883af
447 files changed
+18248
-17946
No files matched your search
@@ -1,42 +1,44 @@
|
||||
export default class Emitter {
|
||||
on(name, fn, ctx) {
|
||||
const e = this.e || (this.e = {});
|
||||
(e[name] || (e[name] = [])).push({ fn, ctx });
|
||||
return this;
|
||||
}
|
||||
on(name, fn, ctx) {
|
||||
const e = this.e || (this.e = {});
|
||||
(e[name] || (e[name] = [])).push({ fn, ctx })
|
||||
return this
|
||||
}
|
||||
|
||||
once(name, fn, ctx) {
|
||||
const self = this;
|
||||
function listener(...args) {
|
||||
self.off(name, listener);
|
||||
fn.apply(ctx, args);
|
||||
}
|
||||
listener._ = fn;
|
||||
return this.on(name, listener, ctx);
|
||||
once(name, fn, ctx) {
|
||||
const self = this
|
||||
function listener(...args) {
|
||||
self.off(name, listener)
|
||||
fn.apply(ctx, args)
|
||||
}
|
||||
listener._ = fn
|
||||
return this.on(name, listener, ctx)
|
||||
}
|
||||
|
||||
emit(name, ...data) {
|
||||
const evtArr = ((this.e || (this.e = {}))[name] || []).slice();
|
||||
for (let i = 0; i < evtArr.length; i += 1) {
|
||||
evtArr[i].fn.apply(evtArr[i].ctx, data);
|
||||
}
|
||||
return this;
|
||||
emit(name, ...data) {
|
||||
const evtArr = ((this.e || (this.e = {}))[name] || []).slice()
|
||||
for (let i = 0; i < evtArr.length; i += 1) {
|
||||
evtArr[i].fn.apply(evtArr[i].ctx, data)
|
||||
}
|
||||
return this
|
||||
}
|
||||
|
||||
off(name, callback) {
|
||||
const e = this.e || (this.e = {});
|
||||
const evts = e[name];
|
||||
const liveEvents = [];
|
||||
if (evts && callback) {
|
||||
for (let i = 0, len = evts.length; i < len; i += 1) {
|
||||
if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
|
||||
}
|
||||
}
|
||||
if (liveEvents.length) {
|
||||
e[name] = liveEvents;
|
||||
} else {
|
||||
delete e[name];
|
||||
}
|
||||
return this;
|
||||
off(name, callback) {
|
||||
const e = this.e || (this.e = {})
|
||||
const evts = e[name]
|
||||
const liveEvents = []
|
||||
if (evts && callback) {
|
||||
for (let i = 0, len = evts.length; i < len; i += 1) {
|
||||
if (evts[i].fn !== callback && evts[i].fn._ !== callback)
|
||||
liveEvents.push(evts[i])
|
||||
}
|
||||
}
|
||||
if (liveEvents.length) {
|
||||
e[name] = liveEvents
|
||||
}
|
||||
else {
|
||||
delete e[name]
|
||||
}
|
||||
return this
|
||||
}
|
||||
}
|
||||
@@ -1,224 +1,225 @@
|
||||
import Emitter from './emitter';
|
||||
import { runPromisesInSeries, sleep, getFileName, clamp } from './utils';
|
||||
import Emitter from './emitter'
|
||||
import { clamp, getFileName, runPromisesInSeries, sleep } from './utils'
|
||||
|
||||
export default class ArtplayerToolThumbnail extends Emitter {
|
||||
constructor(option = {}) {
|
||||
super();
|
||||
this.processing = false;
|
||||
this.option = {};
|
||||
this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
|
||||
this.video = ArtplayerToolThumbnail.creatVideo();
|
||||
this.duration = 0;
|
||||
this.inputChange = this.inputChange.bind(this);
|
||||
this.ondrop = this.ondrop.bind(this);
|
||||
this.option.fileInput.addEventListener('change', this.inputChange);
|
||||
this.option.fileInput.addEventListener('dragover', ArtplayerToolThumbnail.ondragover);
|
||||
this.option.fileInput.addEventListener('drop', ArtplayerToolThumbnail.ondrop);
|
||||
constructor(option = {}) {
|
||||
super()
|
||||
this.processing = false
|
||||
this.option = {}
|
||||
this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option))
|
||||
this.video = ArtplayerToolThumbnail.creatVideo()
|
||||
this.duration = 0
|
||||
this.inputChange = this.inputChange.bind(this)
|
||||
this.ondrop = this.ondrop.bind(this)
|
||||
this.option.fileInput.addEventListener('change', this.inputChange)
|
||||
this.option.fileInput.addEventListener('dragover', ArtplayerToolThumbnail.ondragover)
|
||||
this.option.fileInput.addEventListener('drop', ArtplayerToolThumbnail.ondrop)
|
||||
}
|
||||
|
||||
static get DEFAULTS() {
|
||||
return {
|
||||
number: 60,
|
||||
width: 160,
|
||||
height: 90,
|
||||
column: 10,
|
||||
begin: 0,
|
||||
end: Number.NaN,
|
||||
}
|
||||
}
|
||||
|
||||
static ondragover(event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
ondrop(event) {
|
||||
event.preventDefault()
|
||||
const file = event.dataTransfer.files[0]
|
||||
this.loadVideo(file)
|
||||
}
|
||||
|
||||
setup(option = {}) {
|
||||
this.option = Object.assign({}, this.option, option)
|
||||
const { fileInput, number, width, column } = this.option
|
||||
|
||||
this.errorHandle(fileInput instanceof Element, 'The \'fileInput\' is not a Element')
|
||||
|
||||
if (!(fileInput.tagName === 'INPUT' && fileInput.type === 'file')) {
|
||||
fileInput.style.position = 'relative'
|
||||
const newFileInput = document.createElement('input')
|
||||
newFileInput.type = 'file'
|
||||
newFileInput.style.position = 'absolute'
|
||||
newFileInput.style.width = '100%'
|
||||
newFileInput.style.height = '100%'
|
||||
newFileInput.style.left = '0'
|
||||
newFileInput.style.top = '0'
|
||||
newFileInput.style.right = '0'
|
||||
newFileInput.style.bottom = '0'
|
||||
newFileInput.style.opacity = '0'
|
||||
fileInput.appendChild(newFileInput)
|
||||
this.option.fileInput = newFileInput
|
||||
}
|
||||
|
||||
static get DEFAULTS() {
|
||||
return {
|
||||
number: 60,
|
||||
width: 160,
|
||||
height: 90,
|
||||
column: 10,
|
||||
begin: 0,
|
||||
end: NaN,
|
||||
};
|
||||
['number', 'width', 'column', 'begin', 'end'].forEach((item) => {
|
||||
this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`)
|
||||
})
|
||||
|
||||
this.option.number = clamp(number, 10, 1000)
|
||||
this.option.width = clamp(width, 10, 1000)
|
||||
this.option.column = clamp(column, 1, 1000)
|
||||
return this
|
||||
}
|
||||
|
||||
static creatVideo() {
|
||||
const video = document.createElement('video')
|
||||
video.style.position = 'absolute'
|
||||
video.style.top = '-9999px'
|
||||
video.style.left = '-9999px'
|
||||
video.muted = true
|
||||
video.controls = true
|
||||
document.body.appendChild(video)
|
||||
return video
|
||||
}
|
||||
|
||||
inputChange(event) {
|
||||
const file = this.option.fileInput.files[0]
|
||||
this.loadVideo(file)
|
||||
event.target.value = ''
|
||||
}
|
||||
|
||||
loadVideo(file) {
|
||||
if (file) {
|
||||
const canPlayType = this.video.canPlayType(file.type)
|
||||
this.errorHandle(
|
||||
canPlayType === 'maybe' || canPlayType === 'probably',
|
||||
`Playback of this file format is not supported: ${file.type}`,
|
||||
)
|
||||
const videoUrl = URL.createObjectURL(file)
|
||||
this.videoUrl = videoUrl
|
||||
this.file = file
|
||||
this.emit('file', this.file)
|
||||
this.video.src = videoUrl
|
||||
this.emit('video', this.video)
|
||||
}
|
||||
}
|
||||
|
||||
static ondragover(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
ondrop(event) {
|
||||
event.preventDefault();
|
||||
const file = event.dataTransfer.files[0];
|
||||
this.loadVideo(file);
|
||||
}
|
||||
|
||||
setup(option = {}) {
|
||||
this.option = Object.assign({}, this.option, option);
|
||||
const { fileInput, number, width, column } = this.option;
|
||||
|
||||
this.errorHandle(fileInput instanceof Element, "The 'fileInput' is not a Element");
|
||||
|
||||
if (!(fileInput.tagName === 'INPUT' && fileInput.type === 'file')) {
|
||||
fileInput.style.position = 'relative';
|
||||
const newFileInput = document.createElement('input');
|
||||
newFileInput.type = 'file';
|
||||
newFileInput.style.position = 'absolute';
|
||||
newFileInput.style.width = '100%';
|
||||
newFileInput.style.height = '100%';
|
||||
newFileInput.style.left = '0';
|
||||
newFileInput.style.top = '0';
|
||||
newFileInput.style.right = '0';
|
||||
newFileInput.style.bottom = '0';
|
||||
newFileInput.style.opacity = '0';
|
||||
fileInput.appendChild(newFileInput);
|
||||
this.option.fileInput = newFileInput;
|
||||
start() {
|
||||
if (!this.video.duration)
|
||||
return sleep(1000).then(() => this.start())
|
||||
const { width, number, begin, end } = this.option
|
||||
const height = (this.video.videoHeight / this.video.videoWidth) * width
|
||||
this.option.height = height
|
||||
this.option.begin = clamp(begin, 0, this.video.duration)
|
||||
this.option.end = clamp(end || this.video.duration, begin, this.video.duration)
|
||||
this.errorHandle(this.option.end > this.option.begin, `End time must be greater than the start time`)
|
||||
this.duration = this.option.end - this.option.begin
|
||||
this.density = number / this.duration
|
||||
this.errorHandle(this.file && this.video, 'Please select the video file first')
|
||||
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...')
|
||||
this.errorHandle(this.density <= 1, `The preview density cannot be greater than 1, but got ${this.density}`)
|
||||
const screenshotDate = this.creatScreenshotDate()
|
||||
const canvas = this.creatCanvas()
|
||||
const context2D = canvas.getContext('2d')
|
||||
this.emit('canvas', canvas)
|
||||
const promiseList = screenshotDate.map((item, index) => () => {
|
||||
return new Promise((resolve) => {
|
||||
this.video.oncanplay = () => {
|
||||
context2D.drawImage(this.video, item.x, item.y, width, height)
|
||||
canvas.toBlob((blob) => {
|
||||
if (this.thumbnailUrl) {
|
||||
URL.revokeObjectURL(this.thumbnailUrl)
|
||||
}
|
||||
this.thumbnailUrl = URL.createObjectURL(blob)
|
||||
this.emit('update', this.thumbnailUrl, (index + 1) / number)
|
||||
this.video.oncanplay = null
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
this.video.currentTime = item.time
|
||||
})
|
||||
})
|
||||
this.processing = true
|
||||
return runPromisesInSeries(promiseList)
|
||||
.then(() => {
|
||||
this.processing = false
|
||||
this.emit('done')
|
||||
})
|
||||
.catch((err) => {
|
||||
this.processing = false
|
||||
this.emit('error', err.message)
|
||||
throw err
|
||||
})
|
||||
}
|
||||
|
||||
['number', 'width', 'column', 'begin', 'end'].forEach((item) => {
|
||||
this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
|
||||
});
|
||||
|
||||
this.option.number = clamp(number, 10, 1000);
|
||||
this.option.width = clamp(width, 10, 1000);
|
||||
this.option.column = clamp(column, 1, 1000);
|
||||
return this;
|
||||
creatScreenshotDate() {
|
||||
const { number, width, height, column, begin } = this.option
|
||||
const timeGap = this.duration / number
|
||||
const timePoints = [begin + timeGap]
|
||||
while (timePoints.length < number) {
|
||||
const last = timePoints[timePoints.length - 1]
|
||||
timePoints.push(last + timeGap)
|
||||
}
|
||||
return timePoints.map((item, index) => ({
|
||||
time: item - timeGap / 2,
|
||||
x: (index % column) * width,
|
||||
y: Math.floor(index / column) * height,
|
||||
}))
|
||||
}
|
||||
|
||||
static creatVideo() {
|
||||
const video = document.createElement('video');
|
||||
video.style.position = 'absolute';
|
||||
video.style.top = '-9999px';
|
||||
video.style.left = '-9999px';
|
||||
video.muted = true;
|
||||
video.controls = true;
|
||||
document.body.appendChild(video);
|
||||
return video;
|
||||
}
|
||||
creatCanvas() {
|
||||
const { number, width, height, column } = this.option
|
||||
const canvas = document.createElement('canvas')
|
||||
const context2D = canvas.getContext('2d')
|
||||
canvas.width = width * column
|
||||
canvas.height = Math.ceil(number / column) * height + 30
|
||||
context2D.fillStyle = 'black'
|
||||
context2D.fillRect(0, 0, canvas.width, canvas.height)
|
||||
context2D.font = '14px Georgia'
|
||||
context2D.fillStyle = '#fff'
|
||||
context2D.fillText(
|
||||
`From: https://artplayer.org/, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
|
||||
10,
|
||||
canvas.height - 11,
|
||||
)
|
||||
return canvas
|
||||
}
|
||||
|
||||
inputChange(event) {
|
||||
const file = this.option.fileInput.files[0];
|
||||
this.loadVideo(file);
|
||||
event.target.value = '';
|
||||
}
|
||||
download() {
|
||||
this.errorHandle(
|
||||
this.file && this.thumbnailUrl,
|
||||
'Download does not seem to be ready, please create preview first',
|
||||
)
|
||||
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...')
|
||||
const elink = document.createElement('a')
|
||||
const name = `${getFileName(this.file.name)}.png`
|
||||
elink.download = name
|
||||
elink.href = this.thumbnailUrl
|
||||
document.body.appendChild(elink)
|
||||
elink.click()
|
||||
document.body.removeChild(elink)
|
||||
this.emit('download', name)
|
||||
return this
|
||||
}
|
||||
|
||||
loadVideo(file) {
|
||||
if (file) {
|
||||
const canPlayType = this.video.canPlayType(file.type);
|
||||
this.errorHandle(
|
||||
canPlayType === 'maybe' || canPlayType === 'probably',
|
||||
`Playback of this file format is not supported: ${file.type}`,
|
||||
);
|
||||
const videoUrl = URL.createObjectURL(file);
|
||||
this.videoUrl = videoUrl;
|
||||
this.file = file;
|
||||
this.emit('file', this.file);
|
||||
this.video.src = videoUrl;
|
||||
this.emit('video', this.video);
|
||||
}
|
||||
errorHandle(condition, msg) {
|
||||
if (!condition) {
|
||||
this.emit('error', msg)
|
||||
throw new Error(msg)
|
||||
}
|
||||
}
|
||||
|
||||
start() {
|
||||
if (!this.video.duration) return sleep(1000).then(() => this.start());
|
||||
const { width, number, begin, end } = this.option;
|
||||
const height = (this.video.videoHeight / this.video.videoWidth) * width;
|
||||
this.option.height = height;
|
||||
this.option.begin = clamp(begin, 0, this.video.duration);
|
||||
this.option.end = clamp(end || this.video.duration, begin, this.video.duration);
|
||||
this.errorHandle(this.option.end > this.option.begin, `End time must be greater than the start time`);
|
||||
this.duration = this.option.end - this.option.begin;
|
||||
this.density = number / this.duration;
|
||||
this.errorHandle(this.file && this.video, 'Please select the video file first');
|
||||
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
|
||||
this.errorHandle(this.density <= 1, `The preview density cannot be greater than 1, but got ${this.density}`);
|
||||
const screenshotDate = this.creatScreenshotDate();
|
||||
const canvas = this.creatCanvas();
|
||||
const context2D = canvas.getContext('2d');
|
||||
this.emit('canvas', canvas);
|
||||
const promiseList = screenshotDate.map((item, index) => () => {
|
||||
return new Promise((resolve) => {
|
||||
this.video.oncanplay = () => {
|
||||
context2D.drawImage(this.video, item.x, item.y, width, height);
|
||||
canvas.toBlob((blob) => {
|
||||
if (this.thumbnailUrl) {
|
||||
URL.revokeObjectURL(this.thumbnailUrl);
|
||||
}
|
||||
this.thumbnailUrl = URL.createObjectURL(blob);
|
||||
this.emit('update', this.thumbnailUrl, (index + 1) / number);
|
||||
this.video.oncanplay = null;
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
this.video.currentTime = item.time;
|
||||
});
|
||||
});
|
||||
this.processing = true;
|
||||
return runPromisesInSeries(promiseList)
|
||||
.then(() => {
|
||||
this.processing = false;
|
||||
this.emit('done');
|
||||
})
|
||||
.catch((err) => {
|
||||
this.processing = false;
|
||||
this.emit('error', err.message);
|
||||
throw err;
|
||||
});
|
||||
destroy() {
|
||||
this.option.fileInput.removeEventListener('change', this.inputChange)
|
||||
this.option.fileInput.removeEventListener('dragover', ArtplayerToolThumbnail.ondragover)
|
||||
this.option.fileInput.removeEventListener('drop', ArtplayerToolThumbnail.ondrop)
|
||||
document.body.removeChild(this.video)
|
||||
if (this.videoUrl) {
|
||||
URL.revokeObjectURL(this.videoUrl)
|
||||
}
|
||||
|
||||
creatScreenshotDate() {
|
||||
const { number, width, height, column, begin } = this.option;
|
||||
const timeGap = this.duration / number;
|
||||
const timePoints = [begin + timeGap];
|
||||
while (timePoints.length < number) {
|
||||
const last = timePoints[timePoints.length - 1];
|
||||
timePoints.push(last + timeGap);
|
||||
}
|
||||
return timePoints.map((item, index) => ({
|
||||
time: item - timeGap / 2,
|
||||
x: (index % column) * width,
|
||||
y: Math.floor(index / column) * height,
|
||||
}));
|
||||
}
|
||||
|
||||
creatCanvas() {
|
||||
const { number, width, height, column } = this.option;
|
||||
const canvas = document.createElement('canvas');
|
||||
const context2D = canvas.getContext('2d');
|
||||
canvas.width = width * column;
|
||||
canvas.height = Math.ceil(number / column) * height + 30;
|
||||
context2D.fillStyle = 'black';
|
||||
context2D.fillRect(0, 0, canvas.width, canvas.height);
|
||||
context2D.font = '14px Georgia';
|
||||
context2D.fillStyle = '#fff';
|
||||
context2D.fillText(
|
||||
`From: https://artplayer.org/, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
|
||||
10,
|
||||
canvas.height - 11,
|
||||
);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
download() {
|
||||
this.errorHandle(
|
||||
this.file && this.thumbnailUrl,
|
||||
'Download does not seem to be ready, please create preview first',
|
||||
);
|
||||
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
|
||||
const elink = document.createElement('a');
|
||||
const name = `${getFileName(this.file.name)}.png`;
|
||||
elink.download = name;
|
||||
elink.href = this.thumbnailUrl;
|
||||
document.body.appendChild(elink);
|
||||
elink.click();
|
||||
document.body.removeChild(elink);
|
||||
this.emit('download', name);
|
||||
return this;
|
||||
}
|
||||
|
||||
errorHandle(condition, msg) {
|
||||
if (!condition) {
|
||||
this.emit('error', msg);
|
||||
throw new Error(msg);
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.option.fileInput.removeEventListener('change', this.inputChange);
|
||||
this.option.fileInput.removeEventListener('dragover', ArtplayerToolThumbnail.ondragover);
|
||||
this.option.fileInput.removeEventListener('drop', ArtplayerToolThumbnail.ondrop);
|
||||
document.body.removeChild(this.video);
|
||||
if (this.videoUrl) {
|
||||
URL.revokeObjectURL(this.videoUrl);
|
||||
}
|
||||
if (this.thumbnailUrl) {
|
||||
URL.revokeObjectURL(this.thumbnailUrl);
|
||||
}
|
||||
this.emit('destroy');
|
||||
if (this.thumbnailUrl) {
|
||||
URL.revokeObjectURL(this.thumbnailUrl)
|
||||
}
|
||||
this.emit('destroy')
|
||||
}
|
||||
}
|
||||
|
||||
window['ArtplayerToolThumbnail'] = ArtplayerToolThumbnail;
|
||||
window.ArtplayerToolThumbnail = ArtplayerToolThumbnail
|
||||
@@ -1,17 +1,17 @@
|
||||
export function sleep(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
export function runPromisesInSeries(ps) {
|
||||
return ps.reduce((p, next) => p.then(next), Promise.resolve());
|
||||
return ps.reduce((p, next) => p.then(next), Promise.resolve())
|
||||
}
|
||||
|
||||
export function getFileName(name) {
|
||||
const nameArray = name.split('.');
|
||||
nameArray.pop();
|
||||
return nameArray.join('.');
|
||||
const nameArray = name.split('.')
|
||||
nameArray.pop()
|
||||
return nameArray.join('.')
|
||||
}
|
||||
|
||||
export function clamp(num, a, b) {
|
||||
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
|
||||
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
|
||||
}
|
||||
Reference in new issue
Block a user