summaryrefslogtreecommitdiff
path: root/apps/web/src/services/storage
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/services/storage')
-rw-r--r--apps/web/src/services/storage/indexeddb-adapter.ts101
-rw-r--r--apps/web/src/services/storage/migrations/base.ts5
-rw-r--r--apps/web/src/services/storage/migrations/index.ts14
-rw-r--r--apps/web/src/services/storage/migrations/runner.ts134
-rw-r--r--apps/web/src/services/storage/migrations/v0-to-v1.ts93
-rw-r--r--apps/web/src/services/storage/migrations/v1-to-v2.ts339
-rw-r--r--apps/web/src/services/storage/migrations/v2-to-v3.ts92
-rw-r--r--apps/web/src/services/storage/migrations/version-manager.ts73
-rw-r--r--apps/web/src/services/storage/opfs-adapter.ts73
-rw-r--r--apps/web/src/services/storage/storage-service.ts475
-rw-r--r--apps/web/src/services/storage/types.ts66
11 files changed, 1465 insertions, 0 deletions
diff --git a/apps/web/src/services/storage/indexeddb-adapter.ts b/apps/web/src/services/storage/indexeddb-adapter.ts
new file mode 100644
index 00000000..cc4d03a0
--- /dev/null
+++ b/apps/web/src/services/storage/indexeddb-adapter.ts
@@ -0,0 +1,101 @@
+import type { StorageAdapter } from "./types";
+
+export class IndexedDBAdapter<T> implements StorageAdapter<T> {
+ private dbName: string;
+ private storeName: string;
+ private version: number;
+
+ constructor(dbName: string, storeName: string, version = 1) {
+ this.dbName = dbName;
+ this.storeName = storeName;
+ this.version = version;
+ }
+
+ private async getDB(): Promise<IDBDatabase> {
+ return new Promise((resolve, reject) => {
+ const request = indexedDB.open(this.dbName, this.version);
+
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve(request.result);
+
+ request.onupgradeneeded = (event) => {
+ const db = (event.target as IDBOpenDBRequest).result;
+ if (!db.objectStoreNames.contains(this.storeName)) {
+ db.createObjectStore(this.storeName, { keyPath: "id" });
+ }
+ };
+ });
+ }
+
+ async get(key: string): Promise<T | null> {
+ const db = await this.getDB();
+ const transaction = db.transaction([this.storeName], "readonly");
+ const store = transaction.objectStore(this.storeName);
+
+ return new Promise((resolve, reject) => {
+ const request = store.get(key);
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve(request.result || null);
+ });
+ }
+
+ async set(key: string, value: T): Promise<void> {
+ const db = await this.getDB();
+ const transaction = db.transaction([this.storeName], "readwrite");
+ const store = transaction.objectStore(this.storeName);
+
+ return new Promise((resolve, reject) => {
+ const request = store.put({ id: key, ...value });
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve();
+ });
+ }
+
+ async remove(key: string): Promise<void> {
+ const db = await this.getDB();
+ const transaction = db.transaction([this.storeName], "readwrite");
+ const store = transaction.objectStore(this.storeName);
+
+ return new Promise((resolve, reject) => {
+ const request = store.delete(key);
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve();
+ });
+ }
+
+ async list(): Promise<string[]> {
+ const db = await this.getDB();
+ const transaction = db.transaction([this.storeName], "readonly");
+ const store = transaction.objectStore(this.storeName);
+
+ return new Promise((resolve, reject) => {
+ const request = store.getAllKeys();
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve(request.result as string[]);
+ });
+ }
+
+ async getAll(): Promise<T[]> {
+ const db = await this.getDB();
+ const transaction = db.transaction([this.storeName], "readonly");
+ const store = transaction.objectStore(this.storeName);
+
+ return new Promise((resolve, reject) => {
+ const request = store.getAll();
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve(request.result || []);
+ });
+ }
+
+ async clear(): Promise<void> {
+ const db = await this.getDB();
+ const transaction = db.transaction([this.storeName], "readwrite");
+ const store = transaction.objectStore(this.storeName);
+
+ return new Promise((resolve, reject) => {
+ const request = store.clear();
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve();
+ });
+ }
+}
diff --git a/apps/web/src/services/storage/migrations/base.ts b/apps/web/src/services/storage/migrations/base.ts
new file mode 100644
index 00000000..c7558264
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/base.ts
@@ -0,0 +1,5 @@
+export abstract class StorageMigration {
+ abstract from: number;
+ abstract to: number;
+ abstract run(): Promise<void>;
+}
diff --git a/apps/web/src/services/storage/migrations/index.ts b/apps/web/src/services/storage/migrations/index.ts
new file mode 100644
index 00000000..2343362f
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/index.ts
@@ -0,0 +1,14 @@
+export { StorageMigration } from "./base";
+export { StorageVersionManager } from "./version-manager";
+export { runStorageMigrations } from "./runner";
+import { V0toV1Migration } from "./v0-to-v1";
+import { V1toV2Migration } from "./v1-to-v2";
+import { V2toV3Migration } from "./v2-to-v3";
+
+export const CURRENT_STORAGE_VERSION = 3;
+
+export const migrations = [
+ new V0toV1Migration(),
+ new V1toV2Migration(),
+ new V2toV3Migration(),
+];
diff --git a/apps/web/src/services/storage/migrations/runner.ts b/apps/web/src/services/storage/migrations/runner.ts
new file mode 100644
index 00000000..d9277cb0
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/runner.ts
@@ -0,0 +1,134 @@
+import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
+import type { StorageMigration } from "./base";
+import { StorageVersionManager } from "./version-manager";
+
+export interface StorageMigrationResult {
+ fromVersion: number;
+ toVersion: number;
+ migrated: boolean;
+}
+
+export type StorageMigrationCallbacks = {
+ onMigrationStart?: ({
+ fromVersion,
+ toVersion,
+ }: {
+ fromVersion: number;
+ toVersion: number;
+ }) => void;
+ onMigrationComplete?: ({
+ fromVersion,
+ toVersion,
+ }: {
+ fromVersion: number;
+ toVersion: number;
+ }) => void;
+};
+
+type ProjectRecord = Record<string, unknown>;
+
+export async function runStorageMigrations({
+ migrations,
+ versionManager = new StorageVersionManager(),
+ callbacks,
+}: {
+ migrations: StorageMigration[];
+ versionManager?: StorageVersionManager;
+ callbacks?: StorageMigrationCallbacks;
+}): Promise<StorageMigrationResult> {
+ const versionRecord = await versionManager.getVersionRecord();
+ const inferredVersion = versionRecord
+ ? null
+ : await inferStorageVersionFromProjects();
+ const fromVersion =
+ versionRecord?.inProgress?.from ??
+ versionRecord?.version ??
+ inferredVersion ??
+ 0;
+
+ if (!versionRecord) {
+ await versionManager.setVersion({ version: fromVersion });
+ }
+
+ const orderedMigrations = [...migrations].sort((a, b) => a.from - b.from);
+ let currentVersion = fromVersion;
+
+ for (const migration of orderedMigrations) {
+ if (migration.from !== currentVersion) {
+ continue;
+ }
+
+ await versionManager.setInProgress({
+ from: migration.from,
+ to: migration.to,
+ });
+ callbacks?.onMigrationStart?.({
+ fromVersion: migration.from,
+ toVersion: migration.to,
+ });
+ await migration.run();
+ currentVersion = migration.to;
+ await versionManager.setVersion({ version: currentVersion });
+ await versionManager.clearInProgress();
+ callbacks?.onMigrationComplete?.({
+ fromVersion: migration.from,
+ toVersion: migration.to,
+ });
+ }
+
+ return {
+ fromVersion,
+ toVersion: currentVersion,
+ migrated: currentVersion !== fromVersion,
+ };
+}
+
+async function inferStorageVersionFromProjects(): Promise<number> {
+ const projectsAdapter = new IndexedDBAdapter<unknown>(
+ "video-editor-projects",
+ "projects",
+ 1,
+ );
+ const projects = await projectsAdapter.getAll();
+
+ if (projects.length === 0) {
+ return 0;
+ }
+
+ let lowestVersion = Number.POSITIVE_INFINITY;
+
+ for (const project of projects) {
+ const projectVersion = checkProjectVersion({ project });
+ if (projectVersion < lowestVersion) {
+ lowestVersion = projectVersion;
+ }
+ }
+
+ if (lowestVersion === Number.POSITIVE_INFINITY) {
+ return 0;
+ }
+
+ return lowestVersion;
+}
+
+function checkProjectVersion({ project }: { project: unknown }): number {
+ if (!isRecord(project)) {
+ return 0;
+ }
+
+ const versionValue = project.version;
+ if (typeof versionValue === "number") {
+ return versionValue;
+ }
+
+ const scenesValue = project.scenes;
+ if (Array.isArray(scenesValue) && scenesValue.length > 0) {
+ return 1;
+ }
+
+ return 0;
+}
+
+function isRecord(value: unknown): value is ProjectRecord {
+ return typeof value === "object" && value !== null;
+}
diff --git a/apps/web/src/services/storage/migrations/v0-to-v1.ts b/apps/web/src/services/storage/migrations/v0-to-v1.ts
new file mode 100644
index 00000000..7ec388f1
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/v0-to-v1.ts
@@ -0,0 +1,93 @@
+import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
+import type { SerializedScene } from "@/services/storage/types";
+import { buildDefaultScene } from "@/lib/scenes";
+import type { TScene } from "@/types/timeline";
+import { StorageMigration } from "./base";
+
+type ProjectRecord = Record<string, unknown>;
+
+export class V0toV1Migration extends StorageMigration {
+ from = 0;
+ to = 1;
+
+ async run(): Promise<void> {
+ const projectsAdapter = new IndexedDBAdapter<unknown>(
+ "video-editor-projects",
+ "projects",
+ 1,
+ );
+ const projects = await projectsAdapter.getAll();
+
+ for (const project of projects) {
+ if (!isRecord(project)) {
+ continue;
+ }
+
+ const scenesValue = project.scenes;
+ if (Array.isArray(scenesValue) && scenesValue.length > 0) {
+ continue;
+ }
+
+ const mainScene = buildDefaultScene({ isMain: true, name: "Main scene" });
+ const serializedScene = serializeScene({ scene: mainScene });
+ const updatedProject: ProjectRecord = {
+ ...project,
+ scenes: [serializedScene],
+ currentSceneId: mainScene.id,
+ version: 1,
+ };
+
+ const updatedAt = new Date().toISOString();
+ if (isRecord(project.metadata)) {
+ updatedProject.metadata = {
+ ...project.metadata,
+ updatedAt,
+ };
+ } else {
+ updatedProject.updatedAt = updatedAt;
+ }
+
+ const projectId = getProjectId({ project: updatedProject });
+ if (!projectId) {
+ continue;
+ }
+
+ await projectsAdapter.set(projectId, updatedProject);
+ }
+ }
+}
+
+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 getProjectId({ project }: { project: ProjectRecord }): string | null {
+ const idValue = project.id;
+ if (typeof idValue === "string" && idValue.length > 0) {
+ return idValue;
+ }
+
+ const metadataValue = project.metadata;
+ if (!isRecord(metadataValue)) {
+ return null;
+ }
+
+ const metadataId = metadataValue.id;
+ if (typeof metadataId === "string" && metadataId.length > 0) {
+ return metadataId;
+ }
+
+ return null;
+}
+
+function isRecord(value: unknown): value is ProjectRecord {
+ return typeof value === "object" && value !== null;
+}
diff --git a/apps/web/src/services/storage/migrations/v1-to-v2.ts b/apps/web/src/services/storage/migrations/v1-to-v2.ts
new file mode 100644
index 00000000..05d302ea
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/v1-to-v2.ts
@@ -0,0 +1,339 @@
+import {
+ DEFAULT_BLUR_INTENSITY,
+ DEFAULT_CANVAS_SIZE,
+ DEFAULT_COLOR,
+ DEFAULT_FPS,
+} from "@/constants/project-constants";
+import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
+import { StorageMigration } from "./base";
+
+type ProjectRecord = Record<string, unknown>;
+
+export class V1toV2Migration extends StorageMigration {
+ from = 1;
+ to = 2;
+
+ async run(): Promise<void> {
+ const projectsAdapter = new IndexedDBAdapter<unknown>(
+ "video-editor-projects",
+ "projects",
+ 1,
+ );
+ const projects = await projectsAdapter.getAll();
+
+ for (const project of projects) {
+ if (!isRecord(project)) {
+ continue;
+ }
+
+ const projectId = getProjectId({ project });
+ if (!projectId) {
+ continue;
+ }
+
+ if (isV2Project({ project })) {
+ continue;
+ }
+
+ const migratedProject = migrateProject({ project, projectId });
+ await projectsAdapter.set(projectId, migratedProject);
+ }
+ }
+}
+
+function migrateProject({
+ project,
+ projectId,
+}: {
+ project: ProjectRecord;
+ projectId: string;
+}): ProjectRecord {
+ const createdAt = normalizeDateString({ value: project.createdAt });
+ const updatedAt = normalizeDateString({ value: project.updatedAt });
+ const metadataValue = project.metadata;
+
+ const metadata = isRecord(metadataValue)
+ ? {
+ id: getStringValue({ value: metadataValue.id, fallback: projectId }),
+ name: getStringValue({ value: metadataValue.name, fallback: "" }),
+ thumbnail: getStringValue({ value: metadataValue.thumbnail }),
+ createdAt: normalizeDateString({ value: metadataValue.createdAt }),
+ updatedAt: normalizeDateString({ value: metadataValue.updatedAt }),
+ }
+ : {
+ id: projectId,
+ name: getStringValue({ value: project.name, fallback: "" }),
+ thumbnail: getStringValue({ value: project.thumbnail }),
+ createdAt,
+ updatedAt,
+ };
+
+ const scenesValue = project.scenes;
+ const scenes = Array.isArray(scenesValue) ? scenesValue : [];
+ const legacyBookmarks = Array.isArray(project.bookmarks)
+ ? project.bookmarks
+ : null;
+ const normalizedScenes = applyLegacyBookmarks({
+ scenes,
+ legacyBookmarks,
+ });
+
+ const settingsValue = project.settings;
+ const settings = isRecord(settingsValue)
+ ? {
+ fps: getNumberValue({
+ value: settingsValue.fps,
+ fallback: DEFAULT_FPS,
+ }),
+ canvasSize: getCanvasSizeValue({
+ value: settingsValue.canvasSize,
+ fallback: DEFAULT_CANVAS_SIZE,
+ }),
+ background: getBackgroundValue({
+ value: settingsValue.background,
+ }),
+ }
+ : {
+ fps: getNumberValue({ value: project.fps, fallback: DEFAULT_FPS }),
+ canvasSize: getCanvasSizeValue({
+ value: project.canvasSize,
+ fallback: DEFAULT_CANVAS_SIZE,
+ }),
+ background: getBackgroundValue({
+ value: project.background,
+ backgroundType: project.backgroundType,
+ backgroundColor: project.backgroundColor,
+ blurIntensity: project.blurIntensity,
+ }),
+ };
+
+ const currentSceneId = getCurrentSceneId({
+ value: project.currentSceneId,
+ scenes: normalizedScenes,
+ });
+
+ return {
+ ...project,
+ metadata,
+ scenes: normalizedScenes,
+ currentSceneId,
+ settings,
+ version: 2,
+ };
+}
+
+function getProjectId({ project }: { project: ProjectRecord }): string | null {
+ const idValue = project.id;
+ if (typeof idValue === "string" && idValue.length > 0) {
+ return idValue;
+ }
+
+ const metadataValue = project.metadata;
+ if (!isRecord(metadataValue)) {
+ return null;
+ }
+
+ const metadataId = metadataValue.id;
+ if (typeof metadataId === "string" && metadataId.length > 0) {
+ return metadataId;
+ }
+
+ return null;
+}
+
+function getCurrentSceneId({
+ value,
+ scenes,
+}: {
+ value: unknown;
+ scenes: unknown[];
+}): string {
+ if (typeof value === "string" && value.length > 0) {
+ return value;
+ }
+
+ const mainSceneId = findMainSceneId({ scenes });
+ if (mainSceneId) {
+ return mainSceneId;
+ }
+
+ return "";
+}
+
+function findMainSceneId({ scenes }: { scenes: unknown[] }): string | null {
+ for (const scene of scenes) {
+ if (!isRecord(scene)) {
+ continue;
+ }
+
+ if (scene.isMain === true && typeof scene.id === "string") {
+ return scene.id;
+ }
+ }
+
+ for (const scene of scenes) {
+ if (!isRecord(scene)) {
+ continue;
+ }
+
+ if (typeof scene.id === "string") {
+ return scene.id;
+ }
+ }
+
+ return null;
+}
+
+function applyLegacyBookmarks({
+ scenes,
+ legacyBookmarks,
+}: {
+ scenes: unknown[];
+ legacyBookmarks: unknown[] | null;
+}): unknown[] {
+ if (!legacyBookmarks || legacyBookmarks.length === 0) {
+ return scenes;
+ }
+
+ const mainSceneId = findMainSceneId({ scenes });
+
+ return scenes.map((scene) => {
+ if (!isRecord(scene)) {
+ return scene;
+ }
+
+ if (mainSceneId && scene.id !== mainSceneId) {
+ return scene;
+ }
+
+ if (Array.isArray(scene.bookmarks) && scene.bookmarks.length > 0) {
+ return scene;
+ }
+
+ return {
+ ...scene,
+ bookmarks: legacyBookmarks,
+ };
+ });
+}
+
+function getBackgroundValue({
+ value,
+ backgroundType,
+ backgroundColor,
+ blurIntensity,
+}: {
+ value: unknown;
+ backgroundType?: unknown;
+ backgroundColor?: unknown;
+ blurIntensity?: unknown;
+}): {
+ type: "color" | "blur";
+ color?: string;
+ blurIntensity?: number;
+} {
+ if (isRecord(value)) {
+ const typeValue = value.type;
+ if (typeValue === "blur") {
+ return {
+ type: "blur",
+ blurIntensity: getNumberValue({
+ value: value.blurIntensity,
+ fallback: DEFAULT_BLUR_INTENSITY,
+ }),
+ };
+ }
+
+ return {
+ type: "color",
+ color: getStringValue({ value: value.color, fallback: DEFAULT_COLOR }),
+ };
+ }
+
+ if (backgroundType === "blur") {
+ return {
+ type: "blur",
+ blurIntensity: getNumberValue({
+ value: blurIntensity,
+ fallback: DEFAULT_BLUR_INTENSITY,
+ }),
+ };
+ }
+
+ return {
+ type: "color",
+ color: getStringValue({ value: backgroundColor, fallback: DEFAULT_COLOR }),
+ };
+}
+
+function getCanvasSizeValue({
+ value,
+ fallback,
+}: {
+ value: unknown;
+ fallback: { width: number; height: number };
+}): { width: number; height: number } {
+ if (isRecord(value)) {
+ const width = getNumberValue({
+ value: value.width,
+ fallback: fallback.width,
+ });
+ const height = getNumberValue({
+ value: value.height,
+ fallback: fallback.height,
+ });
+
+ return { width, height };
+ }
+
+ return fallback;
+}
+
+function getNumberValue({
+ value,
+ fallback,
+}: {
+ value: unknown;
+ fallback: number;
+}): number {
+ return typeof value === "number" ? value : fallback;
+}
+
+function getStringValue({
+ value,
+ fallback,
+}: {
+ value: unknown;
+ fallback?: string;
+}): string | undefined {
+ if (typeof value === "string") {
+ return value;
+ }
+
+ return fallback;
+}
+
+function normalizeDateString({ value }: { value: unknown }): string {
+ if (value instanceof Date) {
+ return value.toISOString();
+ }
+
+ if (typeof value === "string") {
+ return value;
+ }
+
+ return new Date().toISOString();
+}
+
+function isV2Project({ project }: { project: ProjectRecord }): boolean {
+ const versionValue = project.version;
+ if (typeof versionValue === "number" && versionValue >= 2) {
+ return true;
+ }
+
+ return isRecord(project.metadata) && isRecord(project.settings);
+}
+
+function isRecord(value: unknown): value is ProjectRecord {
+ return typeof value === "object" && value !== null;
+}
diff --git a/apps/web/src/services/storage/migrations/v2-to-v3.ts b/apps/web/src/services/storage/migrations/v2-to-v3.ts
new file mode 100644
index 00000000..eb6db26d
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/v2-to-v3.ts
@@ -0,0 +1,92 @@
+import { getProjectDurationFromScenes } from "@/lib/scenes";
+import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
+import type { TScene } from "@/types/timeline";
+import { StorageMigration } from "./base";
+
+type ProjectRecord = Record<string, unknown>;
+
+export class V2toV3Migration extends StorageMigration {
+ from = 2;
+ to = 3;
+
+ async run(): Promise<void> {
+ const projectsAdapter = new IndexedDBAdapter<unknown>(
+ "video-editor-projects",
+ "projects",
+ 1,
+ );
+ const projects = await projectsAdapter.getAll();
+
+ for (const project of projects) {
+ if (!isRecord(project)) {
+ continue;
+ }
+
+ const projectId = getProjectId({ project });
+ if (!projectId) {
+ continue;
+ }
+
+ if (isV3Project({ project })) {
+ continue;
+ }
+
+ const scenes = getScenes({ project });
+ const duration = getProjectDurationFromScenes({ scenes });
+
+ const metadataValue = project.metadata;
+ const metadata = isRecord(metadataValue)
+ ? { ...metadataValue, duration }
+ : { duration };
+
+ const migratedProject = {
+ ...project,
+ metadata,
+ version: 3,
+ };
+
+ await projectsAdapter.set(projectId, migratedProject);
+ }
+ }
+}
+
+function getProjectId({ project }: { project: ProjectRecord }): string | null {
+ const idValue = project.id;
+ if (typeof idValue === "string" && idValue.length > 0) {
+ return idValue;
+ }
+
+ const metadataValue = project.metadata;
+ if (!isRecord(metadataValue)) {
+ return null;
+ }
+
+ const metadataId = metadataValue.id;
+ if (typeof metadataId === "string" && metadataId.length > 0) {
+ return metadataId;
+ }
+
+ return null;
+}
+
+function getScenes({ project }: { project: ProjectRecord }): TScene[] {
+ const scenesValue = project.scenes;
+ if (!Array.isArray(scenesValue)) {
+ return [];
+ }
+
+ return scenesValue.filter(isRecord) as unknown as TScene[];
+}
+
+function isV3Project({ project }: { project: ProjectRecord }): boolean {
+ const versionValue = project.version;
+ if (typeof versionValue === "number" && versionValue >= 3) {
+ return true;
+ }
+
+ return isRecord(project.metadata) && typeof project.metadata.duration === "number";
+}
+
+function isRecord(value: unknown): value is ProjectRecord {
+ return typeof value === "object" && value !== null;
+}
diff --git a/apps/web/src/services/storage/migrations/version-manager.ts b/apps/web/src/services/storage/migrations/version-manager.ts
new file mode 100644
index 00000000..879498ce
--- /dev/null
+++ b/apps/web/src/services/storage/migrations/version-manager.ts
@@ -0,0 +1,73 @@
+import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
+
+type StorageVersionRecord = {
+ version: number;
+ inProgress?: {
+ from: number;
+ to: number;
+ };
+};
+
+const DEFAULT_DB_NAME = "video-editor-meta";
+const DEFAULT_STORE_NAME = "storage-version";
+const DEFAULT_DB_VERSION = 1;
+const STORAGE_VERSION_KEY = "storage-version";
+
+export class StorageVersionManager {
+ private adapter: IndexedDBAdapter<StorageVersionRecord>;
+
+ constructor({
+ dbName = DEFAULT_DB_NAME,
+ storeName = DEFAULT_STORE_NAME,
+ version = DEFAULT_DB_VERSION,
+ }: {
+ dbName?: string;
+ storeName?: string;
+ version?: number;
+ } = {}) {
+ this.adapter = new IndexedDBAdapter<StorageVersionRecord>(
+ dbName,
+ storeName,
+ version,
+ );
+ }
+
+ async getVersion(): Promise<number> {
+ const record = await this.adapter.get(STORAGE_VERSION_KEY);
+ return record?.version ?? 0;
+ }
+
+ async getVersionRecord(): Promise<StorageVersionRecord | null> {
+ return this.adapter.get(STORAGE_VERSION_KEY);
+ }
+
+ async setVersion({ version }: { version: number }): Promise<void> {
+ const record = await this.getVersionRecord();
+ const inProgress = record?.inProgress;
+ await this.adapter.set(STORAGE_VERSION_KEY, {
+ version,
+ ...(inProgress ? { inProgress } : {}),
+ });
+ }
+
+ async setInProgress({
+ from,
+ to,
+ }: {
+ from: number;
+ to: number;
+ }): Promise<void> {
+ const record = await this.getVersionRecord();
+ const version = record?.version ?? 0;
+ await this.adapter.set(STORAGE_VERSION_KEY, {
+ version,
+ inProgress: { from, to },
+ });
+ }
+
+ async clearInProgress(): Promise<void> {
+ const record = await this.getVersionRecord();
+ const version = record?.version ?? 0;
+ await this.adapter.set(STORAGE_VERSION_KEY, { version });
+ }
+}
diff --git a/apps/web/src/services/storage/opfs-adapter.ts b/apps/web/src/services/storage/opfs-adapter.ts
new file mode 100644
index 00000000..879223b5
--- /dev/null
+++ b/apps/web/src/services/storage/opfs-adapter.ts
@@ -0,0 +1,73 @@
+import type { StorageAdapter } from "./types";
+
+export class OPFSAdapter implements StorageAdapter<File> {
+ private directoryName: string;
+
+ constructor(directoryName = "media") {
+ this.directoryName = directoryName;
+ }
+
+ private async getDirectory(): Promise<FileSystemDirectoryHandle> {
+ const opfsRoot = await navigator.storage.getDirectory();
+ return await opfsRoot.getDirectoryHandle(this.directoryName, {
+ create: true,
+ });
+ }
+
+ async get(key: string): Promise<File | null> {
+ try {
+ const directory = await this.getDirectory();
+ const fileHandle = await directory.getFileHandle(key);
+ return await fileHandle.getFile();
+ } catch (error) {
+ if ((error as Error).name === "NotFoundError") {
+ return null;
+ }
+ throw error;
+ }
+ }
+
+ async set(key: string, file: File): Promise<void> {
+ const directory = await this.getDirectory();
+ const fileHandle = await directory.getFileHandle(key, { create: true });
+ const writable = await fileHandle.createWritable();
+
+ await writable.write(file);
+ await writable.close();
+ }
+
+ async remove(key: string): Promise<void> {
+ try {
+ const directory = await this.getDirectory();
+ await directory.removeEntry(key);
+ } catch (error) {
+ if ((error as Error).name !== "NotFoundError") {
+ throw error;
+ }
+ }
+ }
+
+ async list(): Promise<string[]> {
+ const directory = await this.getDirectory();
+ const keys: string[] = [];
+
+ for await (const name of directory.keys()) {
+ keys.push(name);
+ }
+
+ return keys;
+ }
+
+ async clear(): Promise<void> {
+ const directory = await this.getDirectory();
+
+ for await (const name of directory.keys()) {
+ await directory.removeEntry(name);
+ }
+ }
+
+ // Helper method to check OPFS support
+ static isSupported(): boolean {
+ return "storage" in navigator && "getDirectory" in navigator.storage;
+ }
+}
diff --git a/apps/web/src/services/storage/storage-service.ts b/apps/web/src/services/storage/storage-service.ts
new file mode 100644
index 00000000..cb0b2ced
--- /dev/null
+++ b/apps/web/src/services/storage/storage-service.ts
@@ -0,0 +1,475 @@
+import type { TProject, TProjectMetadata } from "@/types/project";
+import { getProjectDurationFromScenes } from "@/lib/scenes";
+import type { MediaAsset } from "@/types/assets";
+import { IndexedDBAdapter } from "./indexeddb-adapter";
+import { OPFSAdapter } from "./opfs-adapter";
+import type {
+ MediaAssetData,
+ StorageConfig,
+ SerializedProject,
+ SerializedScene,
+} from "./types";
+import type { SavedSoundsData, SavedSound, SoundEffect } from "@/types/sounds";
+import {
+ migrations,
+ runStorageMigrations,
+} from "@/services/storage/migrations";
+import type { TimelineTrack, TScene } from "@/types/timeline";
+
+class StorageService {
+ private projectsAdapter: IndexedDBAdapter<SerializedProject>;
+ private savedSoundsAdapter: IndexedDBAdapter<SavedSoundsData>;
+ private config: StorageConfig;
+ private migrationsPromise: Promise<void> | null = null;
+
+ constructor() {
+ this.config = {
+ projectsDb: "video-editor-projects",
+ mediaDb: "video-editor-media",
+ savedSoundsDb: "video-editor-saved-sounds",
+ version: 1,
+ };
+
+ this.projectsAdapter = new IndexedDBAdapter<SerializedProject>(
+ this.config.projectsDb,
+ "projects",
+ this.config.version,
+ );
+
+ this.savedSoundsAdapter = new IndexedDBAdapter<SavedSoundsData>(
+ this.config.savedSoundsDb,
+ "saved-sounds",
+ this.config.version,
+ );
+ }
+
+ private async ensureMigrations(): Promise<void> {
+ if (this.migrationsPromise) {
+ await this.migrationsPromise;
+ return;
+ }
+
+ this.migrationsPromise = runStorageMigrations({ migrations }).then(
+ () => undefined,
+ );
+ await this.migrationsPromise;
+ }
+
+ private getProjectMediaAdapters({ projectId }: { projectId: string }) {
+ const mediaMetadataAdapter = new IndexedDBAdapter<MediaAssetData>(
+ `${this.config.mediaDb}-${projectId}`,
+ "media-metadata",
+ this.config.version,
+ );
+
+ const mediaAssetsAdapter = new OPFSAdapter(`media-files-${projectId}`);
+
+ return { mediaMetadataAdapter, mediaAssetsAdapter };
+ }
+
+ private stripAudioBuffers({
+ tracks,
+ }: {
+ tracks: TimelineTrack[];
+ }): TimelineTrack[] {
+ return tracks.map((track) => {
+ if (track.type !== "audio") return track;
+ return {
+ ...track,
+ elements: track.elements.map((element) => {
+ const { buffer: _buffer, ...rest } = element;
+ return rest;
+ }),
+ };
+ });
+ }
+
+ async saveProject({ project }: { project: TProject }): Promise<void> {
+ const duration =
+ project.metadata.duration ??
+ getProjectDurationFromScenes({ scenes: project.scenes });
+ const serializedScenes: SerializedScene[] = project.scenes.map((scene) => ({
+ id: scene.id,
+ name: scene.name,
+ isMain: scene.isMain,
+ tracks: this.stripAudioBuffers({ tracks: scene.tracks }),
+ bookmarks: scene.bookmarks,
+ createdAt: scene.createdAt.toISOString(),
+ updatedAt: scene.updatedAt.toISOString(),
+ }));
+
+ const serializedProject: SerializedProject = {
+ metadata: {
+ id: project.metadata.id,
+ name: project.metadata.name,
+ thumbnail: project.metadata.thumbnail,
+ duration,
+ createdAt: project.metadata.createdAt.toISOString(),
+ updatedAt: project.metadata.updatedAt.toISOString(),
+ },
+ scenes: serializedScenes,
+ currentSceneId: project.currentSceneId,
+ settings: project.settings,
+ version: project.version,
+ timelineViewState: project.timelineViewState,
+ };
+
+ await this.projectsAdapter.set(project.metadata.id, serializedProject);
+ }
+
+ async loadProject({
+ id,
+ }: {
+ id: string;
+ }): Promise<{ project: TProject } | null> {
+ await this.ensureMigrations();
+ const serializedProject = await this.projectsAdapter.get(id);
+
+ if (!serializedProject) return null;
+
+ const scenes =
+ serializedProject.scenes?.map((scene) => ({
+ id: scene.id,
+ name: scene.name,
+ isMain: scene.isMain,
+ tracks: (scene.tracks ?? []).map((track) =>
+ track.type === "video"
+ ? { ...track, isMain: track.isMain ?? false } // legacy: isMain was optional
+ : track,
+ ),
+ bookmarks: scene.bookmarks ?? [],
+ createdAt: new Date(scene.createdAt),
+ updatedAt: new Date(scene.updatedAt),
+ })) ?? [];
+
+ const project: TProject = {
+ metadata: {
+ id: serializedProject.metadata.id,
+ name: serializedProject.metadata.name,
+ thumbnail: serializedProject.metadata.thumbnail,
+ duration:
+ serializedProject.metadata.duration ??
+ getProjectDurationFromScenes({ scenes }),
+ createdAt: new Date(serializedProject.metadata.createdAt),
+ updatedAt: new Date(serializedProject.metadata.updatedAt),
+ },
+ scenes,
+ currentSceneId: serializedProject.currentSceneId || "",
+ settings: serializedProject.settings,
+ version: serializedProject.version,
+ timelineViewState: serializedProject.timelineViewState,
+ };
+
+ return { project };
+ }
+
+ async loadAllProjects(): Promise<TProject[]> {
+ const projectIds = await this.projectsAdapter.list();
+ const projects: TProject[] = [];
+
+ for (const id of projectIds) {
+ const result = await this.loadProject({ id });
+ if (result?.project) {
+ projects.push(result.project);
+ }
+ }
+
+ return projects.sort(
+ (a, b) => b.metadata.updatedAt.getTime() - a.metadata.updatedAt.getTime(),
+ );
+ }
+
+ async loadAllProjectsMetadata(): Promise<TProjectMetadata[]> {
+ await this.ensureMigrations();
+ const serializedProjects = await this.projectsAdapter.getAll();
+
+ const metadata = serializedProjects.map((serializedProject) => ({
+ id: serializedProject.metadata.id,
+ name: serializedProject.metadata.name,
+ thumbnail: serializedProject.metadata.thumbnail,
+ duration:
+ serializedProject.metadata.duration ??
+ getProjectDurationFromScenes({
+ scenes: (serializedProject.scenes ?? []) as unknown as TScene[],
+ }),
+ createdAt: new Date(serializedProject.metadata.createdAt),
+ updatedAt: new Date(serializedProject.metadata.updatedAt),
+ }));
+
+ return metadata.sort(
+ (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime(),
+ );
+ }
+
+ async deleteProject({ id }: { id: string }): Promise<void> {
+ await this.projectsAdapter.remove(id);
+ }
+
+ async saveMediaAsset({
+ projectId,
+ mediaAsset,
+ }: {
+ projectId: string;
+ mediaAsset: MediaAsset;
+ }): Promise<void> {
+ const { mediaMetadataAdapter, mediaAssetsAdapter } =
+ this.getProjectMediaAdapters({ projectId });
+
+ await mediaAssetsAdapter.set(mediaAsset.id, mediaAsset.file);
+
+ const metadata: MediaAssetData = {
+ id: mediaAsset.id,
+ name: mediaAsset.name,
+ type: mediaAsset.type,
+ size: mediaAsset.file.size,
+ lastModified: mediaAsset.file.lastModified,
+ width: mediaAsset.width,
+ height: mediaAsset.height,
+ duration: mediaAsset.duration,
+ thumbnailUrl: mediaAsset.thumbnailUrl,
+ ephemeral: mediaAsset.ephemeral,
+ };
+
+ await mediaMetadataAdapter.set(mediaAsset.id, metadata);
+ }
+
+ async loadMediaAsset({
+ projectId,
+ id,
+ }: {
+ projectId: string;
+ id: string;
+ }): Promise<MediaAsset | null> {
+ const { mediaMetadataAdapter, mediaAssetsAdapter } =
+ this.getProjectMediaAdapters({ projectId });
+
+ const [file, metadata] = await Promise.all([
+ mediaAssetsAdapter.get(id),
+ mediaMetadataAdapter.get(id),
+ ]);
+
+ if (!file || !metadata) return null;
+
+ let url: string;
+ if (metadata.type === "image" && (!file.type || file.type === "")) {
+ try {
+ const text = await file.text();
+ if (text.trim().startsWith("<svg")) {
+ const svgBlob = new Blob([text], { type: "image/svg+xml" });
+ url = URL.createObjectURL(svgBlob);
+ } else {
+ url = URL.createObjectURL(file);
+ }
+ } catch {
+ url = URL.createObjectURL(file);
+ }
+ } else {
+ url = URL.createObjectURL(file);
+ }
+
+ return {
+ id: metadata.id,
+ name: metadata.name,
+ type: metadata.type,
+ file,
+ url,
+ width: metadata.width,
+ height: metadata.height,
+ duration: metadata.duration,
+ thumbnailUrl: metadata.thumbnailUrl,
+ ephemeral: metadata.ephemeral,
+ };
+ }
+
+ async loadAllMediaAssets({
+ projectId,
+ }: {
+ projectId: string;
+ }): Promise<MediaAsset[]> {
+ const { mediaMetadataAdapter } = this.getProjectMediaAdapters({
+ projectId,
+ });
+
+ const mediaIds = await mediaMetadataAdapter.list();
+ const mediaItems: MediaAsset[] = [];
+
+ for (const id of mediaIds) {
+ const item = await this.loadMediaAsset({ projectId, id });
+ if (item) {
+ mediaItems.push(item);
+ }
+ }
+
+ return mediaItems;
+ }
+
+ async deleteMediaAsset({
+ projectId,
+ id,
+ }: {
+ projectId: string;
+ id: string;
+ }): Promise<void> {
+ const { mediaMetadataAdapter, mediaAssetsAdapter } =
+ this.getProjectMediaAdapters({ projectId });
+
+ await Promise.all([
+ mediaAssetsAdapter.remove(id),
+ mediaMetadataAdapter.remove(id),
+ ]);
+ }
+
+ async deleteProjectMedia({
+ projectId,
+ }: {
+ projectId: string;
+ }): Promise<void> {
+ const { mediaMetadataAdapter, mediaAssetsAdapter } =
+ this.getProjectMediaAdapters({ projectId });
+
+ await Promise.all([
+ mediaMetadataAdapter.clear(),
+ mediaAssetsAdapter.clear(),
+ ]);
+ }
+
+ // Utility methods
+ async clearAllData(): Promise<void> {
+ // Clear all projects
+ await this.projectsAdapter.clear();
+
+ // Note: Project-specific media and timelines will be cleaned up when projects are deleted
+ }
+
+ async getStorageInfo(): Promise<{
+ projects: number;
+ isOPFSSupported: boolean;
+ isIndexedDBSupported: boolean;
+ }> {
+ const projectIds = await this.projectsAdapter.list();
+
+ return {
+ projects: projectIds.length,
+ isOPFSSupported: this.isOPFSSupported(),
+ isIndexedDBSupported: this.isIndexedDBSupported(),
+ };
+ }
+
+ async getProjectStorageInfo({ projectId }: { projectId: string }): Promise<{
+ mediaItems: number;
+ }> {
+ const { mediaMetadataAdapter } = this.getProjectMediaAdapters({
+ projectId,
+ });
+
+ const mediaIds = await mediaMetadataAdapter.list();
+
+ return {
+ mediaItems: mediaIds.length,
+ };
+ }
+
+ async loadSavedSounds(): Promise<SavedSoundsData> {
+ try {
+ const savedSoundsData = await this.savedSoundsAdapter.get("user-sounds");
+ return (
+ savedSoundsData || {
+ sounds: [],
+ lastModified: new Date().toISOString(),
+ }
+ );
+ } catch (error) {
+ console.error("Failed to load saved sounds:", error);
+ return { sounds: [], lastModified: new Date().toISOString() };
+ }
+ }
+
+ async saveSoundEffect({
+ soundEffect,
+ }: {
+ soundEffect: SoundEffect;
+ }): Promise<void> {
+ try {
+ const currentData = await this.loadSavedSounds();
+
+ // Check if sound is already saved
+ if (currentData.sounds.some((sound) => sound.id === soundEffect.id)) {
+ return; // Already saved
+ }
+
+ const savedSound: SavedSound = {
+ id: soundEffect.id,
+ name: soundEffect.name,
+ username: soundEffect.username,
+ previewUrl: soundEffect.previewUrl,
+ downloadUrl: soundEffect.downloadUrl,
+ duration: soundEffect.duration,
+ tags: soundEffect.tags,
+ license: soundEffect.license,
+ savedAt: new Date().toISOString(),
+ };
+
+ const updatedData: SavedSoundsData = {
+ sounds: [...currentData.sounds, savedSound],
+ lastModified: new Date().toISOString(),
+ };
+
+ await this.savedSoundsAdapter.set("user-sounds", updatedData);
+ } catch (error) {
+ console.error("Failed to save sound effect:", error);
+ throw error;
+ }
+ }
+
+ async removeSavedSound({ soundId }: { soundId: number }): Promise<void> {
+ try {
+ const currentData = await this.loadSavedSounds();
+
+ const updatedData: SavedSoundsData = {
+ sounds: currentData.sounds.filter((sound) => sound.id !== soundId),
+ lastModified: new Date().toISOString(),
+ };
+
+ await this.savedSoundsAdapter.set("user-sounds", updatedData);
+ } catch (error) {
+ console.error("Failed to remove saved sound:", error);
+ throw error;
+ }
+ }
+
+ async isSoundSaved({ soundId }: { soundId: number }): Promise<boolean> {
+ try {
+ const currentData = await this.loadSavedSounds();
+ return currentData.sounds.some((sound) => sound.id === soundId);
+ } catch (error) {
+ console.error("Failed to check if sound is saved:", error);
+ return false;
+ }
+ }
+
+ async clearSavedSounds(): Promise<void> {
+ try {
+ await this.savedSoundsAdapter.remove("user-sounds");
+ } catch (error) {
+ console.error("Failed to clear saved sounds:", error);
+ throw error;
+ }
+ }
+
+ // Check browser support
+ isOPFSSupported(): boolean {
+ return OPFSAdapter.isSupported();
+ }
+
+ isIndexedDBSupported(): boolean {
+ return "indexedDB" in window;
+ }
+
+ isFullySupported(): boolean {
+ return this.isIndexedDBSupported() && this.isOPFSSupported();
+ }
+}
+
+// Export singleton instance
+export const storageService = new StorageService();
+export { StorageService };
diff --git a/apps/web/src/services/storage/types.ts b/apps/web/src/services/storage/types.ts
new file mode 100644
index 00000000..e7e045f5
--- /dev/null
+++ b/apps/web/src/services/storage/types.ts
@@ -0,0 +1,66 @@
+import type { MediaType } from "@/types/assets";
+import type {
+ TProject,
+ TProjectMetadata,
+ TTimelineViewState,
+} from "@/types/project";
+import type { TScene } from "@/types/timeline";
+
+export interface StorageAdapter<T> {
+ get(key: string): Promise<T | null>;
+ set(key: string, value: T): Promise<void>;
+ remove(key: string): Promise<void>;
+ list(): Promise<string[]>;
+ clear(): Promise<void>;
+}
+
+export interface MediaAssetData {
+ id: string;
+ name: string;
+ type: MediaType;
+ size: number;
+ lastModified: number;
+ width?: number;
+ height?: number;
+ duration?: number;
+ fps?: number;
+ ephemeral?: boolean;
+ thumbnailUrl?: string;
+ sourceStickerIconName?: string;
+}
+
+export type SerializedScene = Omit<TScene, "createdAt" | "updatedAt"> & {
+ createdAt: string;
+ updatedAt: string;
+};
+
+export type SerializedProjectMetadata = Omit<
+ TProjectMetadata,
+ "createdAt" | "updatedAt"
+> & {
+ createdAt: string;
+ updatedAt: string;
+};
+
+export type SerializedProject = Omit<TProject, "metadata" | "scenes"> & {
+ metadata: SerializedProjectMetadata;
+ scenes: SerializedScene[];
+ timelineViewState?: TTimelineViewState;
+};
+
+export interface StorageConfig {
+ projectsDb: string;
+ mediaDb: string;
+ savedSoundsDb: string;
+ version: number;
+}
+
+// TypeScript type augmentation to add async iterator methods to FileSystemDirectoryHandle
+// These methods are part of the File System Access API spec but may not be in all type definitions
+declare global {
+ interface FileSystemDirectoryHandle {
+ keys(): AsyncIterableIterator<string>;
+ values(): AsyncIterableIterator<FileSystemHandle>;
+ entries(): AsyncIterableIterator<[string, FileSystemHandle]>;
+ }
+}
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 10:51:11 +0000