fix: convert media asset duration to ticks on insert

This commit is contained in:
Maze Winther
2026-04-13 05:01:51 +02:00
parent 532f050a64
commit f06a930fc1
3 changed files with 20 additions and 8 deletions
@@ -26,6 +26,7 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { DEFAULT_NEW_ELEMENT_DURATION } from "@/lib/timeline/creation"; import { DEFAULT_NEW_ELEMENT_DURATION } from "@/lib/timeline/creation";
import { TICKS_PER_SECOND } from "@/lib/wasm";
import { useEditor } from "@/hooks/use-editor"; import { useEditor } from "@/hooks/use-editor";
import { useFileUpload } from "@/hooks/use-file-upload"; import { useFileUpload } from "@/hooks/use-file-upload";
import { invokeAction } from "@/lib/actions"; import { invokeAction } from "@/lib/actions";
@@ -257,7 +258,9 @@ function MediaAssetDraggable({
startTime: number; startTime: number;
}) => { }) => {
const duration = const duration =
asset.duration ?? DEFAULT_NEW_ELEMENT_DURATION; asset.duration != null
? Math.round(asset.duration * TICKS_PER_SECOND)
: DEFAULT_NEW_ELEMENT_DURATION;
const element = buildElementFromMedia({ const element = buildElementFromMedia({
mediaId: asset.id, mediaId: asset.id,
mediaType: asset.type, mediaType: asset.type,
@@ -4,6 +4,7 @@ import { processMediaAssets } from "@/lib/media/processing";
import { toast } from "sonner"; import { toast } from "sonner";
import { showMediaUploadToast } from "@/lib/media/upload-toast"; import { showMediaUploadToast } from "@/lib/media/upload-toast";
import { DEFAULT_NEW_ELEMENT_DURATION } from "@/lib/timeline/creation"; import { DEFAULT_NEW_ELEMENT_DURATION } from "@/lib/timeline/creation";
import { TICKS_PER_SECOND } from "@/lib/wasm";
import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale"; import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale";
import { roundToFrame } from "opencut-wasm"; import { roundToFrame } from "opencut-wasm";
import { import {
@@ -87,7 +88,9 @@ export function useTimelineDragDrop({
if (mediaId) { if (mediaId) {
const mediaAssets = editor.media.getAssets(); const mediaAssets = editor.media.getAssets();
const media = mediaAssets.find((m) => m.id === mediaId); const media = mediaAssets.find((m) => m.id === mediaId);
return media?.duration ?? DEFAULT_NEW_ELEMENT_DURATION; return media?.duration != null
? Math.round(media.duration * TICKS_PER_SECOND)
: DEFAULT_NEW_ELEMENT_DURATION;
} }
return DEFAULT_NEW_ELEMENT_DURATION; return DEFAULT_NEW_ELEMENT_DURATION;
}, },
@@ -342,7 +345,9 @@ export function useTimelineDragDrop({
dragData.mediaType === "audio" ? "audio" : "video"; dragData.mediaType === "audio" ? "audio" : "video";
const duration = const duration =
mediaAsset.duration ?? DEFAULT_NEW_ELEMENT_DURATION; mediaAsset.duration != null
? Math.round(mediaAsset.duration * TICKS_PER_SECOND)
: DEFAULT_NEW_ELEMENT_DURATION;
const element = buildElementFromMedia({ const element = buildElementFromMedia({
mediaId: mediaAsset.id, mediaId: mediaAsset.id,
mediaType: mediaAsset.type, mediaType: mediaAsset.type,
@@ -464,8 +469,9 @@ export function useTimelineDragDrop({
if (!createdAsset) continue; if (!createdAsset) continue;
const duration = const duration =
createdAsset.duration ?? createdAsset.duration != null
DEFAULT_NEW_ELEMENT_DURATION; ? Math.round(createdAsset.duration * TICKS_PER_SECOND)
: DEFAULT_NEW_ELEMENT_DURATION;
const sceneTracks = editor.scenes.getActiveScene().tracks; const sceneTracks = editor.scenes.getActiveScene().tracks;
const currentTime = editor.playback.getCurrentTime(); const currentTime = editor.playback.getCurrentTime();
const reuseMainTrackId = const reuseMainTrackId =
+4 -1
View File
@@ -8,6 +8,7 @@ import { AddMediaAssetCommand } from "@/lib/commands/media";
import { InsertElementCommand } from "@/lib/commands/timeline"; import { InsertElementCommand } from "@/lib/commands/timeline";
import { BatchCommand } from "@/lib/commands"; import { BatchCommand } from "@/lib/commands";
import { DEFAULT_NEW_ELEMENT_DURATION } from "@/lib/timeline/creation"; import { DEFAULT_NEW_ELEMENT_DURATION } from "@/lib/timeline/creation";
import { TICKS_PER_SECOND } from "@/lib/wasm";
import { isTypableDOMElement } from "@/utils/browser"; import { isTypableDOMElement } from "@/utils/browser";
import type { MediaType } from "@/lib/media/types"; import type { MediaType } from "@/lib/media/types";
@@ -74,7 +75,9 @@ export function usePasteMedia() {
); );
const assetId = addMediaCmd.getAssetId(); const assetId = addMediaCmd.getAssetId();
const duration = const duration =
asset.duration ?? DEFAULT_NEW_ELEMENT_DURATION; asset.duration != null
? Math.round(asset.duration * TICKS_PER_SECOND)
: DEFAULT_NEW_ELEMENT_DURATION;
const trackType = asset.type === "audio" ? "audio" : "video"; const trackType = asset.type === "audio" ? "audio" : "video";
const element = buildElementFromMedia({ const element = buildElementFromMedia({