mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-20 04:01:20 -08:00
Remove unused source map for Artplayer Tool Thumbnail
This commit is contained in:
Harvey Zhao committed
1 parent
1dc8e9a4ff
commit
78e9cc74f8
43 files changed
+58546
-102588
No files matched your search
@@ -1,505 +1,259 @@
|
||||
// modules are defined as an array
|
||||
// [ module function, map of requires ]
|
||||
//
|
||||
// map of requires is short require name -> numeric require
|
||||
//
|
||||
// anything defined in a previous bundle is accessed via the
|
||||
// orig method which is the require for previous bundles
|
||||
|
||||
(function (
|
||||
modules,
|
||||
entry,
|
||||
mainEntry,
|
||||
parcelRequireName,
|
||||
externals,
|
||||
distDir,
|
||||
publicUrl,
|
||||
devServer
|
||||
) {
|
||||
/* eslint-disable no-undef */
|
||||
var globalObject =
|
||||
typeof globalThis !== 'undefined'
|
||||
? globalThis
|
||||
: typeof self !== 'undefined'
|
||||
? self
|
||||
: typeof window !== 'undefined'
|
||||
? window
|
||||
: typeof global !== 'undefined'
|
||||
? global
|
||||
: {};
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
// Save the require from previous bundle to this closure if any
|
||||
var previousRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
|
||||
var importMap = previousRequire.i || {};
|
||||
var cache = previousRequire.cache || {};
|
||||
// Do not use `require` to prevent Webpack from trying to bundle this call
|
||||
var nodeRequire =
|
||||
typeof module !== 'undefined' &&
|
||||
typeof module.require === 'function' &&
|
||||
module.require.bind(module);
|
||||
|
||||
function newRequire(name, jumped) {
|
||||
if (!cache[name]) {
|
||||
if (!modules[name]) {
|
||||
if (externals[name]) {
|
||||
return externals[name];
|
||||
}
|
||||
// if we cannot find the module within our internal map or
|
||||
// cache jump to the current global require ie. the last bundle
|
||||
// that was added to the page.
|
||||
var currentRequire =
|
||||
typeof globalObject[parcelRequireName] === 'function' &&
|
||||
globalObject[parcelRequireName];
|
||||
if (!jumped && currentRequire) {
|
||||
return currentRequire(name, true);
|
||||
}
|
||||
|
||||
// If there are other bundles on this page the require from the
|
||||
// previous one is saved to 'previousRequire'. Repeat this as
|
||||
// many times as there are bundles until the module is found or
|
||||
// we exhaust the require chain.
|
||||
if (previousRequire) {
|
||||
return previousRequire(name, true);
|
||||
}
|
||||
|
||||
// Try the node require function if it exists.
|
||||
if (nodeRequire && typeof name === 'string') {
|
||||
return nodeRequire(name);
|
||||
}
|
||||
|
||||
var err = new Error("Cannot find module '" + name + "'");
|
||||
err.code = 'MODULE_NOT_FOUND';
|
||||
throw err;
|
||||
}
|
||||
|
||||
localRequire.resolve = resolve;
|
||||
localRequire.cache = {};
|
||||
|
||||
var module = (cache[name] = new newRequire.Module(name));
|
||||
|
||||
modules[name][0].call(
|
||||
module.exports,
|
||||
localRequire,
|
||||
module,
|
||||
module.exports,
|
||||
globalObject
|
||||
);
|
||||
}
|
||||
|
||||
return cache[name].exports;
|
||||
|
||||
function localRequire(x) {
|
||||
var res = localRequire.resolve(x);
|
||||
if (res === false) {
|
||||
return {};
|
||||
}
|
||||
// Synthesize a module to follow re-exports.
|
||||
if (Array.isArray(res)) {
|
||||
var m = {__esModule: true};
|
||||
res.forEach(function (v) {
|
||||
var key = v[0];
|
||||
var id = v[1];
|
||||
var exp = v[2] || v[0];
|
||||
var x = newRequire(id);
|
||||
if (key === '*') {
|
||||
Object.keys(x).forEach(function (key) {
|
||||
if (
|
||||
key === 'default' ||
|
||||
key === '__esModule' ||
|
||||
Object.prototype.hasOwnProperty.call(m, key)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return x[key];
|
||||
},
|
||||
});
|
||||
});
|
||||
} else if (exp === '*') {
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
value: x,
|
||||
});
|
||||
} else {
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
if (exp === 'default') {
|
||||
return x.__esModule ? x.default : x;
|
||||
}
|
||||
return x[exp];
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
return m;
|
||||
}
|
||||
return newRequire(res);
|
||||
}
|
||||
|
||||
function resolve(x) {
|
||||
var id = modules[name][1][x];
|
||||
return id != null ? id : x;
|
||||
}
|
||||
}
|
||||
|
||||
function Module(moduleName) {
|
||||
this.id = moduleName;
|
||||
this.bundle = newRequire;
|
||||
this.require = nodeRequire;
|
||||
this.exports = {};
|
||||
}
|
||||
|
||||
newRequire.isParcelRequire = true;
|
||||
newRequire.Module = Module;
|
||||
newRequire.modules = modules;
|
||||
newRequire.cache = cache;
|
||||
newRequire.parent = previousRequire;
|
||||
newRequire.distDir = distDir;
|
||||
newRequire.publicUrl = publicUrl;
|
||||
newRequire.devServer = devServer;
|
||||
newRequire.i = importMap;
|
||||
newRequire.register = function (id, exports) {
|
||||
modules[id] = [
|
||||
function (require, module) {
|
||||
module.exports = exports;
|
||||
},
|
||||
{},
|
||||
];
|
||||
};
|
||||
|
||||
// Only insert newRequire.load when it is actually used.
|
||||
// The code in this file is linted against ES5, so dynamic import is not allowed.
|
||||
// INSERT_LOAD_HERE
|
||||
|
||||
Object.defineProperty(newRequire, 'root', {
|
||||
get: function () {
|
||||
return globalObject[parcelRequireName];
|
||||
},
|
||||
});
|
||||
|
||||
globalObject[parcelRequireName] = newRequire;
|
||||
|
||||
for (var i = 0; i < entry.length; i++) {
|
||||
newRequire(entry[i]);
|
||||
}
|
||||
|
||||
if (mainEntry) {
|
||||
// Expose entry point to Node, AMD or browser globals
|
||||
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
|
||||
var mainExports = newRequire(mainEntry);
|
||||
|
||||
// CommonJS
|
||||
if (typeof exports === 'object' && typeof module !== 'undefined') {
|
||||
module.exports = mainExports;
|
||||
|
||||
// RequireJS
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(function () {
|
||||
return mainExports;
|
||||
});
|
||||
}
|
||||
}
|
||||
})({"e0Gq7":[function(require,module,exports,__globalThis) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _emitter = require("./emitter");
|
||||
var _emitterDefault = parcelHelpers.interopDefault(_emitter);
|
||||
var _utils = require("./utils");
|
||||
class ArtplayerToolThumbnail extends (0, _emitterDefault.default) {
|
||||
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;
|
||||
}
|
||||
[
|
||||
'number',
|
||||
'width',
|
||||
'column',
|
||||
'begin',
|
||||
'end'
|
||||
].forEach((item)=>{
|
||||
this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
|
||||
});
|
||||
this.option.number = (0, _utils.clamp)(number, 10, 1000);
|
||||
this.option.width = (0, _utils.clamp)(width, 10, 1000);
|
||||
this.option.column = (0, _utils.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);
|
||||
}
|
||||
}
|
||||
start() {
|
||||
if (!this.video.duration) return (0, _utils.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 = (0, _utils.clamp)(begin, 0, this.video.duration);
|
||||
this.option.end = (0, _utils.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 (0, _utils.runPromisesInSeries)(promiseList).then(()=>{
|
||||
this.processing = false;
|
||||
this.emit('done');
|
||||
}).catch((err)=>{
|
||||
this.processing = false;
|
||||
this.emit('error', err.message);
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
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 = `${(0, _utils.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');
|
||||
}
|
||||
}
|
||||
exports.default = ArtplayerToolThumbnail;
|
||||
window.ArtplayerToolThumbnail = ArtplayerToolThumbnail;
|
||||
|
||||
},{"./emitter":"7Kk4W","./utils":"kMCcV","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"7Kk4W":[function(require,module,exports,__globalThis) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
class Emitter {
|
||||
var ArtplayerToolThumbnail = (function() {
|
||||
"use strict";
|
||||
class Emitter {
|
||||
on(name, fn, ctx) {
|
||||
const e = this.e || (this.e = {});
|
||||
(e[name] || (e[name] = [])).push({
|
||||
fn,
|
||||
ctx
|
||||
});
|
||||
return this;
|
||||
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);
|
||||
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;
|
||||
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]);
|
||||
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;
|
||||
}
|
||||
if (liveEvents.length) {
|
||||
e[name] = liveEvents;
|
||||
} else {
|
||||
delete e[name];
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}
|
||||
exports.default = Emitter;
|
||||
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"8oCsH":[function(require,module,exports,__globalThis) {
|
||||
exports.interopDefault = function(a) {
|
||||
return a && a.__esModule ? a : {
|
||||
default: a
|
||||
};
|
||||
};
|
||||
exports.defineInteropFlag = function(a) {
|
||||
Object.defineProperty(a, '__esModule', {
|
||||
value: true
|
||||
});
|
||||
};
|
||||
exports.exportAll = function(source, dest) {
|
||||
Object.keys(source).forEach(function(key) {
|
||||
if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) return;
|
||||
Object.defineProperty(dest, key, {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
return source[key];
|
||||
}
|
||||
});
|
||||
});
|
||||
return dest;
|
||||
};
|
||||
exports.export = function(dest, destName, get) {
|
||||
Object.defineProperty(dest, destName, {
|
||||
enumerable: true,
|
||||
get: get
|
||||
});
|
||||
};
|
||||
|
||||
},{}],"kMCcV":[function(require,module,exports,__globalThis) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "sleep", ()=>sleep);
|
||||
parcelHelpers.export(exports, "runPromisesInSeries", ()=>runPromisesInSeries);
|
||||
parcelHelpers.export(exports, "getFileName", ()=>getFileName);
|
||||
parcelHelpers.export(exports, "clamp", ()=>clamp);
|
||||
function sleep(ms) {
|
||||
return new Promise((resolve)=>setTimeout(resolve, ms));
|
||||
}
|
||||
function runPromisesInSeries(ps) {
|
||||
return ps.reduce((p, next)=>p.then(next), Promise.resolve());
|
||||
}
|
||||
function getFileName(name) {
|
||||
const nameArray = name.split('.');
|
||||
}
|
||||
function sleep(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
function runPromisesInSeries(ps) {
|
||||
return ps.reduce((p, next) => p.then(next), Promise.resolve());
|
||||
}
|
||||
function getFileName(name) {
|
||||
const nameArray = name.split(".");
|
||||
nameArray.pop();
|
||||
return nameArray.join('.');
|
||||
}
|
||||
function clamp(num, a, b) {
|
||||
return nameArray.join(".");
|
||||
}
|
||||
function clamp(num, a, b) {
|
||||
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
|
||||
}
|
||||
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}]},["e0Gq7"], "e0Gq7", "parcelRequire4dc0", {})
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
}
|
||||
class ArtplayerToolThumbnail2 extends Emitter {
|
||||
constructor(option = {}) {
|
||||
super();
|
||||
this.processing = false;
|
||||
this.option = {};
|
||||
this.setup(Object.assign({}, ArtplayerToolThumbnail2.DEFAULTS, option));
|
||||
this.video = ArtplayerToolThumbnail2.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", ArtplayerToolThumbnail2.ondragover);
|
||||
this.option.fileInput.addEventListener("drop", ArtplayerToolThumbnail2.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;
|
||||
}
|
||||
["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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
start() {
|
||||
if (!this.video.duration)
|
||||
return sleep(1e3).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;
|
||||
});
|
||||
}
|
||||
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", ArtplayerToolThumbnail2.ondragover);
|
||||
this.option.fileInput.removeEventListener("drop", ArtplayerToolThumbnail2.ondrop);
|
||||
document.body.removeChild(this.video);
|
||||
if (this.videoUrl) {
|
||||
URL.revokeObjectURL(this.videoUrl);
|
||||
}
|
||||
if (this.thumbnailUrl) {
|
||||
URL.revokeObjectURL(this.thumbnailUrl);
|
||||
}
|
||||
this.emit("destroy");
|
||||
}
|
||||
}
|
||||
return ArtplayerToolThumbnail2;
|
||||
})();
|
||||
@@ -1 +0,0 @@
|
||||
{"mappings":"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 truncated
|
||||
Reference in new issue
Block a user