External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix thumbnail generation

Browse Source
This commit is contained in:
Maze Winther
2026-01-27 20:19:18 +01:00
parent c71adc1525
commit 1d4aa18036
1 changed files with 27 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/core/managers/project-manager.ts
+27 -42
View File
@@ -7,7 +7,6 @@ import type {
TProjectSettings, TProjectSettings,
} from "@/types/project"; } from "@/types/project";
import type { ExportOptions, ExportResult } from "@/types/export"; import type { ExportOptions, ExportResult } from "@/types/export";
import type { TimelineElement } from "@/types/timeline";
import { storageService } from "@/services/storage/storage-service"; import { storageService } from "@/services/storage/storage-service";
import { toast } from "sonner"; import { toast } from "sonner";
import { generateUUID } from "@/utils/id"; import { generateUUID } from "@/utils/id";
@@ -18,10 +17,8 @@ import {
DEFAULT_COLOR, DEFAULT_COLOR,
} from "@/constants/project-constants"; } from "@/constants/project-constants";
import { buildDefaultScene, getProjectDurationFromScenes } from "@/lib/scenes"; import { buildDefaultScene, getProjectDurationFromScenes } from "@/lib/scenes";
import { import { buildScene } from "@/services/renderer/scene-builder";
generateImageThumbnail, import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
generateThumbnail,
} from "@/lib/media/processing";
import { import {
CURRENT_STORAGE_VERSION, CURRENT_STORAGE_VERSION,
migrations, migrations,
@@ -580,49 +577,37 @@ export class ProjectManager {
const tracks = this.editor.timeline.getTracks(); const tracks = this.editor.timeline.getTracks();
const mediaAssets = this.editor.media.getAssets(); const mediaAssets = this.editor.media.getAssets();
const allElements = tracks.flatMap( const duration = this.editor.timeline.getTotalDuration();
(track): TimelineElement[] => track.elements,
);
const sortedElements = allElements.sort(
(a, b) => a.startTime - b.startTime,
);
const firstElement = sortedElements[0];
if (!firstElement) return false; if (duration === 0) return false;
if (firstElement.type !== "video" && firstElement.type !== "image") {
return false;
}
const mediaAsset = mediaAssets.find( const { canvasSize, background } = this.active.settings;
(asset) => asset.id === firstElement.mediaId,
);
if (!mediaAsset) return false;
let thumbnailDataUrl: string | undefined; const scene = buildScene({
tracks,
mediaAssets,
duration,
canvasSize,
background,
});
if (mediaAsset.type === "video" && mediaAsset.file) { const renderer = new CanvasRenderer({
thumbnailDataUrl = await generateThumbnail({ width: canvasSize.width,
videoFile: mediaAsset.file, height: canvasSize.height,
timeInSeconds: 1, fps: this.active.settings.fps,
}); });
}
if (mediaAsset.type === "image" && mediaAsset.file) { const tempCanvas = document.createElement("canvas");
if ( tempCanvas.width = canvasSize.width;
mediaAsset.thumbnailUrl && tempCanvas.height = canvasSize.height;
!mediaAsset.thumbnailUrl.startsWith("blob:")
) {
thumbnailDataUrl = mediaAsset.thumbnailUrl;
} else {
thumbnailDataUrl = await generateImageThumbnail({
imageFile: mediaAsset.file,
});
}
}
if (!thumbnailDataUrl || thumbnailDataUrl.startsWith("blob:")) { await renderer.renderToCanvas({
return false; node: scene,
} time: 0,
targetCanvas: tempCanvas,
});
const thumbnailDataUrl = tempCanvas.toDataURL("image/png");
await this.updateThumbnail({ thumbnail: thumbnailDataUrl }); await this.updateThumbnail({ thumbnail: thumbnailDataUrl });
return true; return true;