mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 05:41:20 -08:00
update artplayer-tool-thumbnail
This commit is contained in:
Harvey committed
1 parent
309fb7bf95
commit
bb21e129b8
5 files changed
+173
-151
No files matched your search
@@ -142,13 +142,13 @@
|
||||
this[globalName] = mainExports;
|
||||
}
|
||||
}
|
||||
})({"d19bT":[function(require,module,exports) {
|
||||
})({"gEVO5":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _tinyEmitter = require("tiny-emitter");
|
||||
var _tinyEmitterDefault = parcelHelpers.interopDefault(_tinyEmitter);
|
||||
var _emitter = require("./emitter");
|
||||
var _emitterDefault = parcelHelpers.interopDefault(_emitter);
|
||||
var _utils = require("./utils");
|
||||
class ArtplayerToolThumbnail extends _tinyEmitterDefault.default {
|
||||
class ArtplayerToolThumbnail extends (0, _emitterDefault.default) {
|
||||
constructor(option = {}){
|
||||
super();
|
||||
this.processing = false;
|
||||
@@ -158,9 +158,9 @@ class ArtplayerToolThumbnail extends _tinyEmitterDefault.default {
|
||||
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);
|
||||
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 {
|
||||
@@ -184,40 +184,40 @@ class ArtplayerToolThumbnail extends _tinyEmitterDefault.default {
|
||||
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';
|
||||
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'
|
||||
"number",
|
||||
"width",
|
||||
"column",
|
||||
"begin",
|
||||
"end"
|
||||
].forEach((item)=>{
|
||||
this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
|
||||
this.errorHandle(typeof this.option[item] === "number", `The '${item}' is not a number`);
|
||||
});
|
||||
this.option.number = _utils.clamp(number, 10, 1000);
|
||||
this.option.width = _utils.clamp(width, 10, 1000);
|
||||
this.option.column = _utils.clamp(column, 1, 1000);
|
||||
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';
|
||||
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);
|
||||
@@ -226,38 +226,37 @@ class ArtplayerToolThumbnail extends _tinyEmitterDefault.default {
|
||||
inputChange(event) {
|
||||
const file = this.option.fileInput.files[0];
|
||||
this.loadVideo(file);
|
||||
event.target.value = '';
|
||||
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}`);
|
||||
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.emit("file", this.file);
|
||||
this.video.src = videoUrl;
|
||||
this.emit('video', this.video);
|
||||
this.emit("video", this.video);
|
||||
}
|
||||
}
|
||||
start() {
|
||||
if (!this.video.duration) return _utils.sleep(1000).then(()=>this.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 = _utils.clamp(begin, 0, this.video.duration);
|
||||
this.option.end = _utils.clamp(end || this.video.duration, begin, this.video.duration);
|
||||
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.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 context2D = canvas.getContext("2d");
|
||||
this.emit("canvas", canvas);
|
||||
const promiseList = screenshotDate.map((item, index)=>()=>{
|
||||
return new Promise((resolve)=>{
|
||||
this.video.oncanplay = ()=>{
|
||||
@@ -265,22 +264,21 @@ class ArtplayerToolThumbnail extends _tinyEmitterDefault.default {
|
||||
canvas.toBlob((blob)=>{
|
||||
if (this.thumbnailUrl) URL.revokeObjectURL(this.thumbnailUrl);
|
||||
this.thumbnailUrl = URL.createObjectURL(blob);
|
||||
this.emit('update', this.thumbnailUrl, (index + 1) / number);
|
||||
this.emit("update", this.thumbnailUrl, (index + 1) / number);
|
||||
this.video.oncanplay = null;
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
this.video.currentTime = item.time;
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
this.processing = true;
|
||||
return _utils.runPromisesInSeries(promiseList).then(()=>{
|
||||
return (0, _utils.runPromisesInSeries)(promiseList).then(()=>{
|
||||
this.processing = false;
|
||||
this.emit('done');
|
||||
this.emit("done");
|
||||
}).catch((err)=>{
|
||||
this.processing = false;
|
||||
this.emit('error', err.message);
|
||||
this.emit("error", err.message);
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
@@ -298,144 +296,107 @@ class ArtplayerToolThumbnail extends _tinyEmitterDefault.default {
|
||||
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');
|
||||
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.fillStyle = "black";
|
||||
context2D.fillRect(0, 0, canvas.width, canvas.height);
|
||||
context2D.font = '14px Georgia';
|
||||
context2D.fillStyle = '#fff';
|
||||
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 = `${_utils.getFileName(this.file.name)}.png`;
|
||||
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);
|
||||
this.emit("download", name);
|
||||
return this;
|
||||
}
|
||||
errorHandle(condition, msg) {
|
||||
if (!condition) {
|
||||
this.emit('error', msg);
|
||||
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);
|
||||
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');
|
||||
this.emit("destroy");
|
||||
}
|
||||
}
|
||||
exports.default = ArtplayerToolThumbnail;
|
||||
window['ArtplayerToolThumbnail'] = ArtplayerToolThumbnail;
|
||||
window["ArtplayerToolThumbnail"] = ArtplayerToolThumbnail;
|
||||
|
||||
},{"tiny-emitter":"ltU3o","./utils":"OYkYn","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"ltU3o":[function(require,module,exports) {
|
||||
function E() {
|
||||
// Keep this empty so it's easier to inherit from
|
||||
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
|
||||
}
|
||||
E.prototype = {
|
||||
on: function(name, callback, ctx) {
|
||||
var e = this.e || (this.e = {});
|
||||
(e[name] || (e[name] = [])).push({
|
||||
fn: callback,
|
||||
ctx: ctx
|
||||
});
|
||||
return this;
|
||||
},
|
||||
once: function(name, callback, ctx) {
|
||||
var self = this;
|
||||
function listener() {
|
||||
self.off(name, listener);
|
||||
callback.apply(ctx, arguments);
|
||||
}
|
||||
listener._ = callback;
|
||||
return this.on(name, listener, ctx);
|
||||
},
|
||||
emit: function(name) {
|
||||
var data = [].slice.call(arguments, 1);
|
||||
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
|
||||
var i = 0;
|
||||
var len = evtArr.length;
|
||||
for(; i < len; i++)evtArr[i].fn.apply(evtArr[i].ctx, data);
|
||||
return this;
|
||||
},
|
||||
off: function(name, callback) {
|
||||
var e = this.e || (this.e = {});
|
||||
var evts = e[name];
|
||||
var liveEvents = [];
|
||||
if (evts && callback) {
|
||||
for(var i = 0, len = evts.length; i < len; i++)if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
|
||||
}
|
||||
// Remove event from queue to prevent memory leak
|
||||
// Suggested by https://github.com/lazd
|
||||
// Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
|
||||
liveEvents.length ? e[name] = liveEvents : delete e[name];
|
||||
return this;
|
||||
}
|
||||
};
|
||||
module.exports = E;
|
||||
module.exports.TinyEmitter = E;
|
||||
|
||||
},{}],"OYkYn":[function(require,module,exports) {
|
||||
},{"./emitter":"2ZQK0","./utils":"5vF3n","@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm"}],"2ZQK0":[function(require,module,exports) {
|
||||
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('.');
|
||||
nameArray.pop();
|
||||
return nameArray.join('.');
|
||||
}
|
||||
function clamp(num, a, b) {
|
||||
return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
|
||||
class Emitter {
|
||||
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);
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
exports.default = Emitter;
|
||||
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
|
||||
},{"@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm"}],"8MjWm":[function(require,module,exports) {
|
||||
exports.interopDefault = function(a) {
|
||||
return a && a.__esModule ? a : {
|
||||
default: a
|
||||
};
|
||||
};
|
||||
exports.defineInteropFlag = function(a) {
|
||||
Object.defineProperty(a, '__esModule', {
|
||||
Object.defineProperty(a, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
};
|
||||
exports.exportAll = function(source, dest) {
|
||||
Object.keys(source).forEach(function(key) {
|
||||
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) return;
|
||||
if (key === "default" || key === "__esModule" || dest.hasOwnProperty(key)) return;
|
||||
Object.defineProperty(dest, key, {
|
||||
enumerable: true,
|
||||
get: function() {
|
||||
@@ -452,6 +413,28 @@ exports.export = function(dest, destName, get) {
|
||||
});
|
||||
};
|
||||
|
||||
},{}]},["d19bT"], "d19bT", "parcelRequire4dc0")
|
||||
},{}],"5vF3n":[function(require,module,exports) {
|
||||
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(".");
|
||||
nameArray.pop();
|
||||
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":"8MjWm"}]},["gEVO5"], "gEVO5", "parcelRequire7b4c")
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
Reference in new issue
Block a user