mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 16:11:20 -08:00
fix(thumbnail): [PKG-TOOL-THUMB-03] own input resources and separate sheet export
This commit is contained in:
Harvey Zhao committed
1 parent
1cb7779192
commit
426c0c5d42
22 files changed
+13724
-256
No files matched your search
@@ -58,19 +58,166 @@ function getFileName(name) {
|
||||
function clamp(num, a, b) {
|
||||
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
|
||||
}
|
||||
const inputs = /* @__PURE__ */ new WeakMap();
|
||||
function release(record) {
|
||||
let failure;
|
||||
for (const [name, callback] of record.listeners.splice(0)) {
|
||||
try {
|
||||
record.input.removeEventListener(name, callback);
|
||||
} catch (error) {
|
||||
failure || (failure = error);
|
||||
}
|
||||
}
|
||||
if (record.wrapper) {
|
||||
try {
|
||||
if (record.input.parentNode)
|
||||
record.input.parentNode.removeChild(record.input);
|
||||
} catch (error) {
|
||||
failure || (failure = error);
|
||||
}
|
||||
if (record.wrapper.style.position === "relative")
|
||||
record.wrapper.style.position = record.position;
|
||||
}
|
||||
if (failure)
|
||||
throw failure;
|
||||
}
|
||||
function connect(record, callbacks) {
|
||||
try {
|
||||
for (const [name, callback] of callbacks) {
|
||||
record.listeners.push([name, callback]);
|
||||
record.input.addEventListener(name, callback);
|
||||
}
|
||||
} catch (error) {
|
||||
try {
|
||||
release(record);
|
||||
} catch {
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
function setupInput(tool, patch) {
|
||||
const option = Object.assign({}, tool.option, patch);
|
||||
const target = option.fileInput;
|
||||
tool.errorHandle(target instanceof Element, "The 'fileInput' is not a Element");
|
||||
for (const name of ["number", "width", "column", "begin", "end"])
|
||||
tool.errorHandle(typeof option[name] === "number", `The '${name}' is not a number`);
|
||||
option.number = clamp(option.number, 10, 1e3);
|
||||
option.width = clamp(option.width, 10, 1e3);
|
||||
option.column = clamp(option.column, 1, 1e3);
|
||||
const previous = inputs.get(tool);
|
||||
if (previous && (target === previous.input || target === previous.wrapper)) {
|
||||
option.fileInput = previous.input;
|
||||
return option;
|
||||
}
|
||||
const record = { input: target, wrapper: null, position: "", listeners: [], callbacks: previous?.callbacks || null };
|
||||
try {
|
||||
if (!(target.tagName === "INPUT" && target.type === "file")) {
|
||||
record.wrapper = target;
|
||||
record.position = target.style.position;
|
||||
record.input = document.createElement("input");
|
||||
record.input.type = "file";
|
||||
Object.assign(record.input.style, { position: "absolute", width: "100%", height: "100%", left: "0", top: "0", right: "0", bottom: "0", opacity: "0" });
|
||||
target.style.position = "relative";
|
||||
target.appendChild(record.input);
|
||||
}
|
||||
if (record.callbacks)
|
||||
connect(record, record.callbacks);
|
||||
} catch (error) {
|
||||
try {
|
||||
release(record);
|
||||
} catch {
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
option.fileInput = record.input;
|
||||
inputs.set(tool, record);
|
||||
tool.option = option;
|
||||
if (previous)
|
||||
release(previous);
|
||||
return option;
|
||||
}
|
||||
function connectInput(tool, dragover) {
|
||||
const record = inputs.get(tool);
|
||||
record.callbacks = [["change", tool.inputChange], ["dragover", dragover], ["drop", tool.ondrop]];
|
||||
connect(record, record.callbacks);
|
||||
}
|
||||
function releaseInput(tool) {
|
||||
const record = inputs.get(tool);
|
||||
if (!record)
|
||||
return;
|
||||
inputs.delete(tool);
|
||||
release(record);
|
||||
}
|
||||
function screenshotPoints(option, duration) {
|
||||
const { number, width, height, column, begin } = option;
|
||||
const timeGap = 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
|
||||
}));
|
||||
}
|
||||
function createSheet(option) {
|
||||
const { number, width, height, column } = option;
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
canvas.width = width * column;
|
||||
canvas.height = Math.ceil(number / column) * height + 30;
|
||||
context.fillStyle = "black";
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
context.font = "14px Georgia";
|
||||
context.fillStyle = "#fff";
|
||||
context.fillText(
|
||||
`From: https://artplayer.org/, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
|
||||
10,
|
||||
canvas.height - 11
|
||||
);
|
||||
return canvas;
|
||||
}
|
||||
function downloadSheet(file, url) {
|
||||
const link = document.createElement("a");
|
||||
const name = `${getFileName(file.name)}.png`;
|
||||
link.download = name;
|
||||
link.href = url;
|
||||
try {
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
} finally {
|
||||
if (link.parentNode)
|
||||
link.parentNode.removeChild(link);
|
||||
}
|
||||
return name;
|
||||
}
|
||||
const destroyed = /* @__PURE__ */ new WeakSet();
|
||||
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);
|
||||
try {
|
||||
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);
|
||||
connectInput(this, ArtplayerToolThumbnail.ondragover);
|
||||
} catch (error) {
|
||||
try {
|
||||
releaseInput(this);
|
||||
} catch {
|
||||
}
|
||||
try {
|
||||
if (this.video?.parentNode)
|
||||
this.video.parentNode.removeChild(this.video);
|
||||
} catch {
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
static get DEFAULTS() {
|
||||
return {
|
||||
@@ -86,35 +233,15 @@ class ArtplayerToolThumbnail extends Emitter {
|
||||
event.preventDefault();
|
||||
}
|
||||
ondrop(event) {
|
||||
if (destroyed.has(this))
|
||||
return;
|
||||
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;
|
||||
}
|
||||
["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, 1e3);
|
||||
this.option.width = clamp(width, 10, 1e3);
|
||||
this.option.column = clamp(column, 1, 1e3);
|
||||
if (!destroyed.has(this))
|
||||
this.option = setupInput(this, option);
|
||||
return this;
|
||||
}
|
||||
static creatVideo() {
|
||||
@@ -124,16 +251,24 @@ class ArtplayerToolThumbnail extends Emitter {
|
||||
video.style.left = "-9999px";
|
||||
video.muted = true;
|
||||
video.controls = true;
|
||||
document.body.appendChild(video);
|
||||
try {
|
||||
document.body.appendChild(video);
|
||||
} catch (error) {
|
||||
if (video.parentNode)
|
||||
video.parentNode.removeChild(video);
|
||||
throw error;
|
||||
}
|
||||
return video;
|
||||
}
|
||||
inputChange(event) {
|
||||
if (destroyed.has(this))
|
||||
return;
|
||||
const file = this.option.fileInput.files[0];
|
||||
this.loadVideo(file);
|
||||
event.target.value = "";
|
||||
}
|
||||
loadVideo(file) {
|
||||
if (file) {
|
||||
if (file && !destroyed.has(this)) {
|
||||
const canPlayType = this.video.canPlayType(file.type);
|
||||
this.errorHandle(
|
||||
canPlayType === "maybe" || canPlayType === "probably",
|
||||
@@ -193,35 +328,10 @@ class ArtplayerToolThumbnail extends Emitter {
|
||||
});
|
||||
}
|
||||
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
|
||||
}));
|
||||
return screenshotPoints(this.option, this.duration);
|
||||
}
|
||||
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;
|
||||
return createSheet(this.option);
|
||||
}
|
||||
download() {
|
||||
this.errorHandle(
|
||||
@@ -229,13 +339,7 @@ class ArtplayerToolThumbnail extends Emitter {
|
||||
"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);
|
||||
const name = downloadSheet(this.file, this.thumbnailUrl);
|
||||
this.emit("download", name);
|
||||
return this;
|
||||
}
|
||||
@@ -246,17 +350,25 @@ class ArtplayerToolThumbnail extends Emitter {
|
||||
}
|
||||
}
|
||||
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 (destroyed.has(this))
|
||||
return;
|
||||
destroyed.add(this);
|
||||
let failure;
|
||||
for (const cleanup of [
|
||||
() => releaseInput(this),
|
||||
() => this.video.parentNode?.removeChild(this.video),
|
||||
() => this.videoUrl && URL.revokeObjectURL(this.videoUrl),
|
||||
() => this.thumbnailUrl && URL.revokeObjectURL(this.thumbnailUrl),
|
||||
() => this.emit("destroy")
|
||||
]) {
|
||||
try {
|
||||
cleanup();
|
||||
} catch (error) {
|
||||
failure || (failure = error);
|
||||
}
|
||||
}
|
||||
if (this.thumbnailUrl) {
|
||||
URL.revokeObjectURL(this.thumbnailUrl);
|
||||
}
|
||||
this.emit("destroy");
|
||||
if (failure)
|
||||
throw failure;
|
||||
}
|
||||
}
|
||||
export {
|
||||
|
||||
Reference in new issue
Block a user