4 files changed, 69 insertions, 13 deletions

diff --git a/apps/web/src/lib/media-processing.ts b/apps/web/src/lib/media-processing.ts
index 4c1294ae..353c3113 100644
--- a/apps/web/src/lib/media-processing.ts
+++ b/apps/web/src/lib/media-processing.ts
@@ -6,7 +6,7 @@ import {
   getImageDimensions,
   type MediaItem,
 } from "@/stores/media-store";
-// import { generateThumbnail, getVideoInfo } from "./ffmpeg-utils"; // Temporarily disabled
+import { generateThumbnail, getVideoInfo } from "./ffmpeg-utils";
 
 export interface ProcessedMediaItem extends Omit<MediaItem, "id"> {}
 
@@ -33,6 +33,7 @@ export async function processMediaFiles(
     let duration: number | undefined;
     let width: number | undefined;
     let height: number | undefined;
+    let fps: number | undefined;
 
     try {
       if (fileType === "image") {
@@ -41,17 +42,31 @@ export async function processMediaFiles(
         width = dimensions.width;
         height = dimensions.height;
       } else if (fileType === "video") {
-        // Use basic thumbnail generation for now
-        const videoResult = await generateVideoThumbnail(file);
-        thumbnailUrl = videoResult.thumbnailUrl;
-        width = videoResult.width;
-        height = videoResult.height;
-      } else if (fileType === "audio") {
-        // For audio, we don't set width/height (they'll be undefined)
-      }
+        try {
+          // Use FFmpeg for comprehensive video info extraction
+          const videoInfo = await getVideoInfo(file);
+          duration = videoInfo.duration;
+          width = videoInfo.width;
+          height = videoInfo.height;
+          fps = videoInfo.fps;
 
-      // Get duration for videos and audio (if not already set by FFmpeg)
-      if ((fileType === "video" || fileType === "audio") && !duration) {
+          // Generate thumbnail using FFmpeg
+          thumbnailUrl = await generateThumbnail(file, 1);
+        } catch (error) {
+          console.warn(
+            "FFmpeg processing failed, falling back to basic processing:",
+            error
+          );
+          // Fallback to basic processing
+          const videoResult = await generateVideoThumbnail(file);
+          thumbnailUrl = videoResult.thumbnailUrl;
+          width = videoResult.width;
+          height = videoResult.height;
+          duration = await getMediaDuration(file);
+          // FPS will remain undefined for fallback
+        }
+      } else if (fileType === "audio") {
+        // For audio, we don't set width/height/fps (they'll be undefined)
         duration = await getMediaDuration(file);
       }
 
@@ -64,6 +79,7 @@ export async function processMediaFiles(
         duration,
         width,
         height,
+        fps,
       });
 
       // Yield back to the event loop to keep the UI responsive
diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts
index 79e932bd..0037dbdb 100644
--- a/apps/web/src/lib/storage/storage-service.ts
+++ b/apps/web/src/lib/storage/storage-service.ts
@@ -60,6 +60,9 @@ class StorageService {
       thumbnail: project.thumbnail,
       createdAt: project.createdAt.toISOString(),
       updatedAt: project.updatedAt.toISOString(),
+      backgroundColor: project.backgroundColor,
+      backgroundType: project.backgroundType,
+      blurIntensity: project.blurIntensity,
     };
 
     await this.projectsAdapter.set(project.id, serializedProject);
@@ -77,6 +80,9 @@ class StorageService {
       thumbnail: serializedProject.thumbnail,
       createdAt: new Date(serializedProject.createdAt),
       updatedAt: new Date(serializedProject.updatedAt),
+      backgroundColor: serializedProject.backgroundColor,
+      backgroundType: serializedProject.backgroundType,
+      blurIntensity: serializedProject.blurIntensity,
     };
   }
 
diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts
index e2db28c2..b3147946 100644
--- a/apps/web/src/lib/time.ts
+++ b/apps/web/src/lib/time.ts
@@ -1,14 +1,16 @@
 // Time-related utility functions

 

-// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS)

+// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS, HH:MM:SS:FF)

 export const formatTimeCode = (

   timeInSeconds: number,

-  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" = "HH:MM:SS:CS"

+  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",

+  fps: number = 30

 ): string => {

   const hours = Math.floor(timeInSeconds / 3600);

   const minutes = Math.floor((timeInSeconds % 3600) / 60);

   const seconds = Math.floor(timeInSeconds % 60);

   const centiseconds = Math.floor((timeInSeconds % 1) * 100);

+  const frames = Math.floor((timeInSeconds % 1) * fps);

 

   switch (format) {

     case "MM:SS":

@@ -17,5 +19,7 @@ export const formatTimeCode = (
       return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

     case "HH:MM:SS:CS":

       return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${centiseconds.toString().padStart(2, "0")}`;

+    case "HH:MM:SS:FF":

+      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${frames.toString().padStart(2, "0")}`;

   }

 };

diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index ae939698..dd73059f 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -5,4 +5,34 @@ import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
+}
+
+/**
+ * Generates a UUID v4 string
+ * Uses crypto.randomUUID() if available, otherwise falls back to a custom implementation
+ */
+export function generateUUID(): string {
+  // Use the native crypto.randomUUID if available
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  // Secure fallback using crypto.getRandomValues
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+
+  // Set version 4 (UUIDv4)
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  // Set variant 10xxxxxx
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+
+  const hex = [...bytes].map(b => b.toString(16).padStart(2, '0'));
+
+  return (
+    hex.slice(0, 4).join('') + '-' +
+    hex.slice(4, 6).join('') + '-' +
+    hex.slice(6, 8).join('') + '-' +
+    hex.slice(8, 10).join('') + '-' +
+    hex.slice(10, 16).join('')
+  );
 }
\ No newline at end of file