RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

generate thumbnails for videos 

usin a helper function
This commit is contained in:
JovannMC 2025-02-08 21:24:45 +03:00
parent 5ec93ab8b3
commit f7d58047c7
No known key found for this signature in database
1 changed files with 58 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/lib/store/index.svelte.ts
View File

@ -23,12 +23,15 @@ class Files {
); );
private _addThumbnail = async (file: VertFile) => { private _addThumbnail = async (file: VertFile) => {
const isAudio = converters
.find((c) => c.name === "ffmpeg")
?.supportedFormats?.includes(file.from.toLowerCase());
const isVideo = converters
.find((c) => c.name === "vertd")
?.supportedFormats?.includes(file.from.toLowerCase());
try { try {
if ( if (isAudio) {
converters
.find((c) => c.name === "ffmpeg")
?.supportedFormats?.includes(file.from.toLowerCase())
) {
// try to get the thumbnail from the audio via jsmmediatags // try to get the thumbnail from the audio via jsmmediatags
const tags = await new Promise<TagType>((resolve, reject) => { const tags = await new Promise<TagType>((resolve, reject) => {
jsmediatags.read(file.file, { jsmediatags.read(file.file, {
@ -46,32 +49,62 @@ class Files {
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
file.blobUrl = url; file.blobUrl = url;
} }
} else { } else if (isVideo) {
const img = new Image(); // video
img.src = URL.createObjectURL(file.file); file.blobUrl = await this._generateThumbnailFromMedia(
await new Promise((resolve) => { file.file,
img.onload = resolve; true,
}); );
const canvas = document.createElement("canvas"); } else {
const ctx = canvas.getContext("2d"); // image
if (!ctx) return; file.blobUrl = await this._generateThumbnailFromMedia(
const maxSize = 180; file.file,
const scale = Math.max( false,
maxSize / img.width,
maxSize / img.height,
); );
canvas.width = img.width * scale;
canvas.height = img.height * scale;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const url = canvas.toDataURL();
file.blobUrl = url;
canvas.remove();
} }
} catch (e) { } catch (e) {
error(["files"], e); error(["files"], e);
} }
}; };
private async _generateThumbnailFromMedia(
file: File,
isVideo: boolean,
): Promise<string | undefined> {
const maxSize = 180;
const mediaElement = isVideo
? document.createElement("video")
: new Image();
mediaElement.src = URL.createObjectURL(file);
await new Promise((resolve) => {
if (isVideo) {
(mediaElement as HTMLVideoElement).onloadeddata = resolve;
} else {
(mediaElement as HTMLImageElement).onload = resolve;
}
});
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return undefined;
const width = isVideo
? (mediaElement as HTMLVideoElement).videoWidth
: (mediaElement as HTMLImageElement).width;
const height = isVideo
? (mediaElement as HTMLVideoElement).videoHeight
: (mediaElement as HTMLImageElement).height;
const scale = Math.max(maxSize / width, maxSize / height);
canvas.width = width * scale;
canvas.height = height * scale;
ctx.drawImage(mediaElement, 0, 0, canvas.width, canvas.height);
const url = canvas.toDataURL();
canvas.remove();
return url;
}
private _add(file: VertFile | File) { private _add(file: VertFile | File) {
if (file instanceof VertFile) { if (file instanceof VertFile) {
this.files.push(file); this.files.push(file);
@ -199,4 +232,4 @@ export const gradientColor = writable("");
export const isMobile = writable(false); export const isMobile = writable(false);
export const motion = writable(true); export const motion = writable(true);
export const theme = writable<"light" | "dark">("light"); export const theme = writable<"light" | "dark">("light");