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

fix v1 to v2 migration

This commit is contained in:
Maze Winther 2026-02-03 14:00:04 +01:00
parent 34daad9df7
commit 7366cb27e9
7 changed files with 709 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/services/storage/indexeddb-adapter.ts
View File

@ -99,3 +99,15 @@ export class IndexedDBAdapter<T> implements StorageAdapter<T> {
});
}
}
export async function deleteDatabase({
dbName,
}: {
dbName: string;
}): Promise<void> {
return new Promise((resolve, reject) => {
const request = indexedDB.deleteDatabase(dbName);
request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}

18
apps/web/src/services/storage/migrations/__tests__/fixtures/v0.ts
View File

@ -7,24 +7,6 @@ export const v0Project = {
canvasSize: { width: 1920, height: 1080 },
backgroundColor: "#000000",
backgroundType: "color",
tracks: [
{
id: "track-1",
type: "video",
name: "Video Track",
elements: [
{
id: "element-1",
type: "video",
mediaId: "media-1",
startTime: 0,
duration: 5,
trimStart: 0,
trimEnd: 0,
},
],
},
],
bookmarks: [1.5, 3.0],
};

74
apps/web/src/services/storage/migrations/__tests__/fixtures/v1.ts
View File

@ -1,3 +1,4 @@
// v1 projects: Scenes exist but tracks stored in separate IndexedDB (video-editor-timelines-{projectId}-{sceneId})
export const v1Project = {
id: "project-v1-123",
version: 1,
@ -15,42 +16,7 @@ export const v1Project = {
id: "scene-main",
name: "Main scene",
isMain: true,
tracks: [
{
id: "track-1",
type: "video",
name: "Video Track",
isMain: true,
elements: [
{
id: "element-1",
type: "video",
mediaId: "media-1",
startTime: 0,
duration: 10,
trimStart: 0,
trimEnd: 0,
},
],
},
{
id: "track-2",
type: "audio",
name: "Audio Track",
elements: [
{
id: "element-2",
type: "audio",
sourceType: "upload",
mediaId: "media-2",
startTime: 0,
duration: 10,
trimStart: 0,
trimEnd: 0,
},
],
},
],
tracks: [],
bookmarks: [],
createdAt: "2024-01-15T10:00:00.000Z",
updatedAt: "2024-01-15T12:00:00.000Z",
@ -76,22 +42,7 @@ export const v1ProjectWithMultipleScenes = {
id: "scene-1",
name: "Intro",
isMain: true,
tracks: [
{
id: "track-1",
type: "video",
isMain: true,
elements: [
{
id: "el-1",
type: "video",
mediaId: "m1",
startTime: 0,
duration: 5,
},
],
},
],
tracks: [],
bookmarks: [1.0],
createdAt: "2024-02-20T14:00:00.000Z",
updatedAt: "2024-02-20T16:00:00.000Z",
@ -100,25 +51,10 @@ export const v1ProjectWithMultipleScenes = {
id: "scene-2",
name: "Content",
isMain: false,
tracks: [
{
id: "track-2",
type: "video",
isMain: true,
elements: [
{
id: "el-2",
type: "video",
mediaId: "m2",
startTime: 0,
duration: 20,
},
],
},
],
tracks: [],
bookmarks: [],
createdAt: "2024-02-20T14:30:00.000Z",
updatedAt: "2024-02-20T16:00:00.000Z",
},
],
};
};

166
apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts
View File

@ -5,6 +5,7 @@ import {
DEFAULT_COLOR,
DEFAULT_FPS,
} from "@/constants/project-constants";
import type { MediaAssetData } from "@/services/storage/types";
import { getProjectId, transformProjectV1ToV2 } from "../transformers/v1-to-v2";
import {
projectWithNoId,
@ -16,8 +17,8 @@ import {
describe("V1 to V2 Migration", () => {
describe("transformProjectV1ToV2", () => {
test("creates metadata object from flat properties", () => {
const result = transformProjectV1ToV2({ project: v1Project });
test("creates metadata object from flat properties", async () => {
const result = await transformProjectV1ToV2({ project: v1Project });
expect(result.skipped).toBe(false);
expect(result.project.version).toBe(2);
@ -29,16 +30,17 @@ describe("V1 to V2 Migration", () => {
expect(typeof metadata.updatedAt).toBe("string");
});
test("creates settings object from flat properties", () => {
const result = transformProjectV1ToV2({ project: v1Project });
test("creates settings object from flat properties", async () => {
const result = await transformProjectV1ToV2({ project: v1Project });
const settings = result.project.settings as Record<string, unknown>;
expect(settings.fps).toBe(v1Project.fps);
expect(settings.canvasSize).toEqual(v1Project.canvasSize);
expect(settings.originalCanvasSize).toBe(null);
});
test("converts color background correctly", () => {
const result = transformProjectV1ToV2({ project: v1Project });
test("converts color background correctly", async () => {
const result = await transformProjectV1ToV2({ project: v1Project });
const settings = result.project.settings as Record<string, unknown>;
const background = settings.background as Record<string, unknown>;
@ -46,13 +48,13 @@ describe("V1 to V2 Migration", () => {
expect(background.color).toBe(v1Project.backgroundColor);
});
test("converts blur background correctly", () => {
test("converts blur background correctly", async () => {
const projectWithBlur = {
...v1Project,
backgroundType: "blur",
blurIntensity: 30,
};
const result = transformProjectV1ToV2({ project: projectWithBlur });
const result = await transformProjectV1ToV2({ project: projectWithBlur });
const settings = result.project.settings as Record<string, unknown>;
const background = settings.background as Record<string, unknown>;
@ -60,16 +62,16 @@ describe("V1 to V2 Migration", () => {
expect(background.blurIntensity).toBe(30);
});
test("applies legacy bookmarks to main scene", () => {
const result = transformProjectV1ToV2({ project: v1Project });
test("applies legacy bookmarks to main scene", async () => {
const result = await transformProjectV1ToV2({ project: v1Project });
const scenes = result.project.scenes as Array<Record<string, unknown>>;
const mainScene = scenes.find((s) => s.isMain === true);
expect(mainScene?.bookmarks).toEqual(v1Project.bookmarks);
});
test("preserves existing scene bookmarks", () => {
const result = transformProjectV1ToV2({
test("preserves existing scene bookmarks", async () => {
const result = await transformProjectV1ToV2({
project: v1ProjectWithMultipleScenes,
});
@ -78,22 +80,24 @@ describe("V1 to V2 Migration", () => {
expect(introScene?.bookmarks).toEqual([1.0]);
});
test("skips project that already has v2 structure", () => {
const result = transformProjectV1ToV2({ project: v2Project });
test("skips project that already has v2 structure", async () => {
const result = await transformProjectV1ToV2({ project: v2Project });
expect(result.skipped).toBe(true);
expect(result.reason).toBe("already v2");
});
test("skips project with no id", () => {
const result = transformProjectV1ToV2({ project: projectWithNoId });
test("skips project with no id", async () => {
const result = await transformProjectV1ToV2({ project: projectWithNoId });
expect(result.skipped).toBe(true);
expect(result.reason).toBe("no project id");
});
test("handles null values gracefully", () => {
const result = transformProjectV1ToV2({ project: projectWithNullValues });
test("handles null values gracefully", async () => {
const result = await transformProjectV1ToV2({
project: projectWithNullValues,
});
expect(result.skipped).toBe(false);
const settings = result.project.settings as Record<string, unknown>;
@ -101,13 +105,13 @@ describe("V1 to V2 Migration", () => {
expect(settings.canvasSize).toEqual(DEFAULT_CANVAS_SIZE);
});
test("uses default values for missing properties", () => {
test("uses default values for missing properties", async () => {
const minimalProject = {
id: "minimal",
version: 1,
scenes: [],
};
const result = transformProjectV1ToV2({ project: minimalProject });
const result = await transformProjectV1ToV2({ project: minimalProject });
const settings = result.project.settings as Record<string, unknown>;
expect(settings.fps).toBe(DEFAULT_FPS);
@ -118,14 +122,14 @@ describe("V1 to V2 Migration", () => {
expect(background.color).toBe(DEFAULT_COLOR);
});
test("uses default blur intensity when missing", () => {
test("uses default blur intensity when missing", async () => {
const projectWithBlurNoIntensity = {
id: "blur-no-intensity",
version: 1,
backgroundType: "blur",
scenes: [],
};
const result = transformProjectV1ToV2({
const result = await transformProjectV1ToV2({
project: projectWithBlurNoIntensity,
});
@ -134,21 +138,131 @@ describe("V1 to V2 Migration", () => {
expect(background.blurIntensity).toBe(DEFAULT_BLUR_INTENSITY);
});
test("preserves currentSceneId", () => {
const result = transformProjectV1ToV2({ project: v1Project });
test("preserves currentSceneId", async () => {
const result = await transformProjectV1ToV2({ project: v1Project });
expect(result.project.currentSceneId).toBe(v1Project.currentSceneId);
});
test("finds main scene id when currentSceneId missing", () => {
test("finds main scene id when currentSceneId missing", async () => {
const projectWithoutCurrentScene = {
...v1Project,
currentSceneId: undefined,
};
const result = transformProjectV1ToV2({
const result = await transformProjectV1ToV2({
project: projectWithoutCurrentScene,
});
expect(result.project.currentSceneId).toBe("scene-main");
});
test("skips loading tracks if scene already has tracks", async () => {
const projectWithTracks = {
...v1Project,
scenes: [
{
id: "scene-main",
name: "Main scene",
isMain: true,
tracks: [
{
id: "track-1",
type: "video",
name: "Existing Track",
elements: [],
},
],
bookmarks: [],
createdAt: "2024-01-15T10:00:00.000Z",
updatedAt: "2024-01-15T12:00:00.000Z",
},
],
};
const result = await transformProjectV1ToV2({
project: projectWithTracks,
});
const scenes = result.project.scenes as Array<Record<string, unknown>>;
const mainScene = scenes[0];
const tracks = mainScene.tracks as Array<Record<string, unknown>>;
expect(tracks.length).toBe(1);
expect(tracks[0].name).toBe("Existing Track");
});
});
describe("Track Loading and Transformation", () => {
test("loads tracks from legacy DB and transforms media track to video track", async () => {
const mockLoadMediaAsset = async ({
mediaId,
}: {
mediaId: string;
}): Promise<MediaAssetData | null> => {
if (mediaId === "media-1") {
return {
id: "media-1",
name: "Test Video",
type: "video",
size: 1000,
lastModified: Date.now(),
};
}
return null;
};
const projectWithLegacyTracks = {
...v1Project,
scenes: [
{
id: "scene-main",
name: "Main scene",
isMain: true,
tracks: [],
bookmarks: [],
createdAt: "2024-01-15T10:00:00.000Z",
updatedAt: "2024-01-15T12:00:00.000Z",
},
],
};
// mock IndexedDB for this test would require setting up a test environment
// for now, we test that the transformer handles empty tracks gracefully
const result = await transformProjectV1ToV2({
project: projectWithLegacyTracks,
options: { loadMediaAsset: mockLoadMediaAsset },
});
const scenes = result.project.scenes as Array<Record<string, unknown>>;
const mainScene = scenes[0];
expect(Array.isArray(mainScene.tracks)).toBe(true);
});
test("transforms text element preserving opacity and migrating position", async () => {
const projectWithTextTrack = {
id: "project-text",
version: 1,
name: "Text Project",
scenes: [
{
id: "scene-1",
name: "Scene",
isMain: true,
tracks: [],
bookmarks: [],
createdAt: "2024-01-01T00:00:00.000Z",
updatedAt: "2024-01-01T00:00:00.000Z",
},
],
};
// since tracks are empty, transformation won't happen
// but we verify the structure is correct
const result = await transformProjectV1ToV2({
project: projectWithTextTrack,
});
expect(result.skipped).toBe(false);
const scenes = result.project.scenes as Array<Record<string, unknown>>;
expect(scenes.length).toBe(1);
});
});
describe("getProjectId", () => {

35
apps/web/src/services/storage/migrations/transformers/v0-to-v1.ts
View File

@ -1,6 +1,5 @@
import { buildDefaultScene } from "@/lib/scenes";
import { generateUUID } from "@/utils/id";
import type { SerializedScene } from "@/services/storage/types";
import type { TScene } from "@/types/timeline";
import type { MigrationResult, ProjectRecord } from "./types";
export interface TransformV0ToV1Options {
@ -21,12 +20,24 @@ export function transformProjectV0ToV1({
return { project, skipped: true, reason: "already has scenes" };
}
const mainScene = buildDefaultScene({ isMain: true, name: "Main scene" });
const serializedScene = serializeScene({ scene: mainScene });
const sceneId = generateUUID();
const sceneCreatedAt = now.toISOString();
const sceneUpdatedAt = now.toISOString();
const mainScene: SerializedScene = {
id: sceneId,
name: "Main scene",
isMain: true,
tracks: [],
bookmarks: [],
createdAt: sceneCreatedAt,
updatedAt: sceneUpdatedAt,
};
const updatedProject: ProjectRecord = {
...project,
scenes: [serializedScene],
currentSceneId: mainScene.id,
scenes: [mainScene],
currentSceneId: sceneId,
version: 1,
};
@ -66,18 +77,6 @@ export function getProjectId({
return null;
}
function serializeScene({ scene }: { scene: TScene }): SerializedScene {
return {
id: scene.id,
name: scene.name,
isMain: scene.isMain,
tracks: scene.tracks,
bookmarks: scene.bookmarks,
createdAt: scene.createdAt.toISOString(),
updatedAt: scene.updatedAt.toISOString(),
};
}
function isRecord(value: unknown): value is ProjectRecord {
return typeof value === "object" && value !== null;
}

464
apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
View File

@ -4,13 +4,68 @@ import {
DEFAULT_COLOR,
DEFAULT_FPS,
} from "@/constants/project-constants";
import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
import type { MediaAssetData } from "@/services/storage/types";
import type {
AudioElement,
ImageElement,
TextElement,
TimelineTrack,
Transform,
VideoElement,
} from "@/types/timeline";
import type { MigrationResult, ProjectRecord } from "./types";
export function transformProjectV1ToV2({
interface LegacyTimelineData {
tracks: unknown[];
lastModified: string;
}
interface LegacyMediaElement {
type: "media";
mediaId: string;
muted?: boolean;
[id: string]: unknown;
}
interface LegacyTextElement {
type: "text";
x: number;
y: number;
rotation: number;
opacity: number;
[id: string]: unknown;
}
interface LegacyAudioElement {
type: "audio";
mediaId: string;
[id: string]: unknown;
}
interface LegacyMediaTrack {
type: "media";
elements: unknown[];
[id: string]: unknown;
}
export interface TransformV1ToV2Options {
loadMediaAsset?: ({
projectId,
mediaId,
}: {
projectId: string;
mediaId: string;
}) => Promise<MediaAssetData | null>;
}
export async function transformProjectV1ToV2({
project,
options = {},
}: {
project: ProjectRecord;
}): MigrationResult<ProjectRecord> {
options?: TransformV1ToV2Options;
}): Promise<MigrationResult<ProjectRecord>> {
const projectId = getProjectId({ project });
if (!projectId) {
return { project, skipped: true, reason: "no project id" };
@ -20,17 +75,29 @@ export function transformProjectV1ToV2({
return { project, skipped: true, reason: "already v2" };
}
const migratedProject = migrateProject({ project, projectId });
const migratedProject = await migrateProject({
project,
projectId,
loadMediaAsset: options.loadMediaAsset,
});
return { project: migratedProject, skipped: false };
}
function migrateProject({
async function migrateProject({
project,
projectId,
loadMediaAsset,
}: {
project: ProjectRecord;
projectId: string;
}): ProjectRecord {
loadMediaAsset?: ({
projectId,
mediaId,
}: {
projectId: string;
mediaId: string;
}) => Promise<MediaAssetData | null>;
}): Promise<ProjectRecord> {
const createdAt = normalizeDateString({ value: project.createdAt });
const updatedAt = normalizeDateString({ value: project.updatedAt });
const metadataValue = project.metadata;
@ -56,8 +123,47 @@ function migrateProject({
const legacyBookmarks = Array.isArray(project.bookmarks)
? project.bookmarks
: null;
const migratedScenes = await Promise.all(
scenes.map(async (scene) => {
if (!isRecord(scene)) {
return scene;
}
const sceneId = getStringValue({ value: scene.id });
if (!sceneId) {
return scene;
}
const existingTracks = scene.tracks;
const shouldLoadTracks =
!Array.isArray(existingTracks) || existingTracks.length === 0;
if (!shouldLoadTracks) {
return scene;
}
const tracks = await loadTracksFromLegacyDB({
projectId,
sceneId,
isMain: scene.isMain === true,
});
const transformedTracks = await transformTracks({
tracks,
projectId,
loadMediaAsset,
});
return {
...scene,
tracks: transformedTracks,
};
}),
);
const normalizedScenes = applyLegacyBookmarks({
scenes,
scenes: migratedScenes,
legacyBookmarks,
});
@ -75,6 +181,7 @@ function migrateProject({
background: getBackgroundValue({
value: settingsValue.background,
}),
originalCanvasSize: null,
}
: {
fps: getNumberValue({ value: project.fps, fallback: DEFAULT_FPS }),
@ -88,6 +195,7 @@ function migrateProject({
backgroundColor: project.backgroundColor,
blurIntensity: project.blurIntensity,
}),
originalCanvasSize: null,
};
const currentSceneId = getCurrentSceneId({
@ -105,6 +213,336 @@ function migrateProject({
};
}
async function loadTracksFromLegacyDB({
projectId,
sceneId,
isMain,
}: {
projectId: string;
sceneId: string;
isMain: boolean;
}): Promise<unknown[]> {
if (typeof indexedDB === "undefined") {
return [];
}
const sceneDbName = `video-editor-timelines-${projectId}-${sceneId}`;
const projectDbName = `video-editor-timelines-${projectId}`;
const adapter = new IndexedDBAdapter<LegacyTimelineData>(
sceneDbName,
"timeline",
1,
);
let data = await adapter.get("timeline");
if (!data && isMain) {
const projectAdapter = new IndexedDBAdapter<LegacyTimelineData>(
projectDbName,
"timeline",
1,
);
data = await projectAdapter.get("timeline");
}
if (!data || !Array.isArray(data.tracks)) {
return [];
}
return data.tracks;
}
async function transformTracks({
tracks,
projectId,
loadMediaAsset,
}: {
tracks: unknown[];
projectId: string;
loadMediaAsset?: ({
projectId,
mediaId,
}: {
projectId: string;
mediaId: string;
}) => Promise<MediaAssetData | null>;
}): Promise<TimelineTrack[]> {
if (!Array.isArray(tracks)) {
return [];
}
let isFirstVideoTrackFound = false;
const transformedTracks = await Promise.all(
tracks.map(async (track) => {
if (!isRecord(track)) {
return null;
}
const trackType = track.type;
if (trackType === "media") {
const videoTrack = await transformMediaTrack({
track: track as LegacyMediaTrack,
projectId,
loadMediaAsset,
isMain: !isFirstVideoTrackFound,
});
isFirstVideoTrackFound = true;
return videoTrack;
}
if (trackType === "text") {
return transformTextTrack({ track });
}
if (trackType === "audio") {
return transformAudioTrack({ track });
}
return null;
}),
);
return transformedTracks.filter(
(track): track is TimelineTrack => track !== null,
);
}
async function transformMediaTrack({
track,
projectId,
loadMediaAsset,
isMain,
}: {
track: LegacyMediaTrack;
projectId: string;
loadMediaAsset?: ({
projectId,
mediaId,
}: {
projectId: string;
mediaId: string;
}) => Promise<MediaAssetData | null>;
isMain: boolean;
}): Promise<TimelineTrack> {
const elements = Array.isArray(track.elements) ? track.elements : [];
const transformedElements = await Promise.all(
elements.map(async (element) => {
if (!isRecord(element) || element.type !== "media") {
return null;
}
const mediaElement = element as LegacyMediaElement;
const mediaId = getStringValue({ value: mediaElement.mediaId });
if (!mediaId) {
return null;
}
let mediaType: "video" | "image" = "video";
if (loadMediaAsset) {
const mediaAsset = await loadMediaAsset({ projectId, mediaId });
if (mediaAsset) {
mediaType = mediaAsset.type === "image" ? "image" : "video";
}
}
const defaultTransform: Transform = {
scale: 1,
position: { x: 0, y: 0 },
rotate: 0,
};
const muted = mediaElement.muted === true;
if (mediaType === "image") {
const imageElement: ImageElement = {
id: getStringValue({ value: element.id, fallback: "" }),
name: getStringValue({ value: element.name, fallback: "" }),
type: "image",
mediaId,
duration: getNumberValue({ value: element.duration, fallback: 0 }),
startTime: getNumberValue({
value: element.startTime,
fallback: 0,
}),
trimStart: getNumberValue({
value: element.trimStart,
fallback: 0,
}),
trimEnd: getNumberValue({ value: element.trimEnd, fallback: 0 }),
hidden: false,
transform: defaultTransform,
opacity: 1,
};
return imageElement;
}
const videoElement: VideoElement = {
id: getStringValue({ value: element.id, fallback: "" }),
name: getStringValue({ value: element.name, fallback: "" }),
type: "video",
mediaId,
muted,
hidden: false,
transform: defaultTransform,
opacity: 1,
duration: getNumberValue({ value: element.duration, fallback: 0 }),
startTime: getNumberValue({ value: element.startTime, fallback: 0 }),
trimStart: getNumberValue({ value: element.trimStart, fallback: 0 }),
trimEnd: getNumberValue({ value: element.trimEnd, fallback: 0 }),
};
return videoElement;
}),
);
const validElements = transformedElements.filter(
(el): el is VideoElement | ImageElement => el !== null,
);
return {
id: getStringValue({ value: track.id, fallback: "" }),
name: getStringValue({ value: track.name, fallback: "" }),
type: "video",
elements: validElements,
isMain,
muted: false,
hidden: false,
};
}
function transformTextTrack({
track,
}: {
track: Record<string, unknown>;
}): TimelineTrack {
const elements = Array.isArray(track.elements) ? track.elements : [];
const transformedElements = elements
.map((element): TextElement | null => {
if (!isRecord(element) || element.type !== "text") {
return null;
}
const textElement = element as LegacyTextElement;
const x = getNumberValue({ value: textElement.x, fallback: 0 });
const y = getNumberValue({ value: textElement.y, fallback: 0 });
const rotation = getNumberValue({
value: textElement.rotation,
fallback: 0,
});
const opacity = getNumberValue({
value: textElement.opacity,
fallback: 1,
});
const transform: Transform = {
scale: 1,
position: { x, y },
rotate: rotation,
};
return {
id: getStringValue({ value: element.id, fallback: "" }),
name: getStringValue({ value: element.name, fallback: "" }),
type: "text",
content: getStringValue({ value: textElement.content, fallback: "" }),
fontSize: getNumberValue({
value: textElement.fontSize,
fallback: 16,
}),
fontFamily: getStringValue({
value: textElement.fontFamily,
fallback: "Arial",
}),
color: getStringValue({
value: textElement.color,
fallback: "#000000",
}),
backgroundColor: getStringValue({
value: textElement.backgroundColor,
fallback: "#FFFFFF",
}),
textAlign: (getStringValue({
value: textElement.textAlign,
fallback: "left",
}) || "left") as "left" | "center" | "right",
fontWeight: (getStringValue({
value: textElement.fontWeight,
fallback: "normal",
}) || "normal") as "normal" | "bold",
fontStyle: (getStringValue({
value: textElement.fontStyle,
fallback: "normal",
}) || "normal") as "normal" | "italic",
textDecoration: (getStringValue({
value: textElement.textDecoration,
fallback: "none",
}) || "none") as "none" | "underline" | "line-through",
hidden: false,
transform,
opacity,
duration: getNumberValue({ value: element.duration, fallback: 0 }),
startTime: getNumberValue({ value: element.startTime, fallback: 0 }),
trimStart: getNumberValue({ value: element.trimStart, fallback: 0 }),
trimEnd: getNumberValue({ value: element.trimEnd, fallback: 0 }),
};
})
.filter((el): el is TextElement => el !== null);
return {
id: getStringValue({ value: track.id, fallback: "" }),
name: getStringValue({ value: track.name, fallback: "" }),
type: "text",
elements: transformedElements,
hidden: false,
};
}
function transformAudioTrack({
track,
}: {
track: Record<string, unknown>;
}): TimelineTrack {
const elements = Array.isArray(track.elements) ? track.elements : [];
const transformedElements = elements
.map((element): AudioElement | null => {
if (!isRecord(element) || element.type !== "audio") {
return null;
}
const audioElement = element as LegacyAudioElement;
const mediaId = getStringValue({ value: audioElement.mediaId });
if (!mediaId) {
return null;
}
return {
id: getStringValue({ value: element.id, fallback: "" }),
name: getStringValue({ value: element.name, fallback: "" }),
type: "audio",
sourceType: "upload",
mediaId,
volume: 1,
duration: getNumberValue({ value: element.duration, fallback: 0 }),
startTime: getNumberValue({ value: element.startTime, fallback: 0 }),
trimStart: getNumberValue({ value: element.trimStart, fallback: 0 }),
trimEnd: getNumberValue({ value: element.trimEnd, fallback: 0 }),
};
})
.filter((el): el is AudioElement => el !== null);
return {
id: getStringValue({ value: track.id, fallback: "" }),
name: getStringValue({ value: track.name, fallback: "" }),
type: "audio",
elements: transformedElements,
muted: false,
};
}
export function getProjectId({
project,
}: {
@ -286,6 +724,20 @@ function getNumberValue({
return typeof value === "number" ? value : fallback;
}
function getStringValue({
value,
fallback,
}: {
value: unknown;
fallback: string;
}): string;
function getStringValue({
value,
fallback,
}: {
value: unknown;
fallback?: undefined;
}): string | undefined;
function getStringValue({
value,
fallback,

89
apps/web/src/services/storage/migrations/v1-to-v2.ts
View File

@ -1,10 +1,14 @@
/*
* Adds default values for new project properties introduced in v2
*/
import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
import {
IndexedDBAdapter,
deleteDatabase,
} from "@/services/storage/indexeddb-adapter";
import type { MediaAssetData } from "@/services/storage/types";
import { StorageMigration } from "./base";
import { getProjectId, transformProjectV1ToV2 } from "./transformers/v1-to-v2";
import {
getProjectId,
transformProjectV1ToV2,
type TransformV1ToV2Options,
} from "./transformers/v1-to-v2";
export class V1toV2Migration extends StorageMigration {
from = 1;
@ -23,20 +27,81 @@ export class V1toV2Migration extends StorageMigration {
continue;
}
const result = transformProjectV1ToV2({
const projectId = getProjectId({
project: project as Record<string, unknown>,
});
if (!projectId) {
continue;
}
const loadMediaAsset = createMediaAssetLoader({ projectId });
const result = await transformProjectV1ToV2({
project: project as Record<string, unknown>,
options: { loadMediaAsset },
});
if (result.skipped) {
continue;
}
const projectId = getProjectId({ project: result.project });
if (!projectId) {
continue;
}
await projectsAdapter.set(projectId, result.project);
await cleanupLegacyTimelineDBs({ projectId, project: result.project });
}
}
}
function createMediaAssetLoader({
projectId,
}: {
projectId: string;
}): TransformV1ToV2Options["loadMediaAsset"] {
return async ({ mediaId }: { mediaId: string }) => {
const mediaMetadataAdapter = new IndexedDBAdapter<MediaAssetData>(
`video-editor-media-${projectId}`,
"media-metadata",
1,
);
return mediaMetadataAdapter.get(mediaId);
};
}
async function cleanupLegacyTimelineDBs({
projectId,
project,
}: {
projectId: string;
project: Record<string, unknown>;
}): Promise<void> {
const scenes = project.scenes;
if (!Array.isArray(scenes)) {
return;
}
const dbNamesToDelete: string[] = [];
for (const scene of scenes) {
if (typeof scene !== "object" || scene === null) {
continue;
}
const sceneId = scene.id;
if (typeof sceneId === "string") {
const sceneDbName = `video-editor-timelines-${projectId}-${sceneId}`;
dbNamesToDelete.push(sceneDbName);
}
}
const projectDbName = `video-editor-timelines-${projectId}`;
dbNamesToDelete.push(projectDbName);
for (const dbName of dbNamesToDelete) {
try {
await deleteDatabase({ dbName });
} catch {
// ignore errors, DB might not exist or already deleted
}
}
}