fixed: [BUG] crypto.randomUUID is not a function Runtime Error #205. Added fallback function with manual UUID generation if crypto.randomUUID() was not available.

apps/web/src/stores/media-store.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { storageService } from "@/lib/storage/storage-service";
 import { useTimelineStore } from "./timeline-store";
+import { generateUUID } from "@/lib/utils";
 
 export type MediaType = "image" | "video" | "audio";
 
@@ -161,7 +162,7 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
   addMediaItem: async (projectId, item) => {
     const newItem: MediaItem = {
       ...item,
-      id: crypto.randomUUID(),
+      id: generateUUID(),
     };
 
     // Add to local state immediately for UI responsiveness

apps/web/src/stores/project-store.ts

@@ -4,6 +4,7 @@ import { storageService } from "@/lib/storage/storage-service";
 import { toast } from "sonner";
 import { useMediaStore } from "./media-store";
 import { useTimelineStore } from "./timeline-store";
+import { generateUUID } from "@/lib/utils";
 
 interface ProjectStore {
   activeProject: TProject | null;
@@ -35,7 +36,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
 
   createNewProject: async (name: string) => {
     const newProject: TProject = {
-      id: crypto.randomUUID(),
+      id: generateUUID(),
       name,
       thumbnail: "",
       createdAt: new Date(),
@@ -223,7 +224,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
         existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
 
       const newProject: TProject = {
-        id: crypto.randomUUID(),
+        id: generateUUID(),
         name: `(${nextNumber}) ${baseName}`,
         thumbnail: project.thumbnail,
         createdAt: new Date(),

apps/web/src/stores/timeline-store.ts

@@ -13,6 +13,7 @@ import { useEditorStore } from "./editor-store";
 import { useMediaStore, getMediaAspectRatio } from "./media-store";
 import { storageService } from "@/lib/storage/storage-service";
 import { useProjectStore } from "./project-store";
+import { generateUUID } from "@/lib/utils";
 
 // Helper function to manage element naming with suffixes
 const getElementNameWithSuffix = (
@@ -279,7 +280,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
               : "Track";
 
       const newTrack: TimelineTrack = {
-        id: crypto.randomUUID(),
+        id: generateUUID(),
         name: trackName,
         type,
         elements: [],
@@ -304,7 +305,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
               : "Track";
 
       const newTrack: TimelineTrack = {
-        id: crypto.randomUUID(),
+        id: generateUUID(),
         name: trackName,
         type,
         elements: [],
@@ -363,7 +364,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
 
       const newElement: TimelineElement = {
         ...elementData,
-        id: crypto.randomUUID(),
+        id: generateUUID(),
         startTime: elementData.startTime || 0,
         trimStart: 0,
         trimEnd: 0,
@@ -556,7 +557,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
       const secondDuration =
         element.duration - element.trimStart - element.trimEnd - relativeTime;
 
-      const secondElementId = crypto.randomUUID();
+      const secondElementId = generateUUID();
 
       updateTracksAndSave(
         get()._tracks.map((track) =>
@@ -682,7 +683,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
 
       // Find existing audio track or prepare to create one
       const existingAudioTrack = _tracks.find((t) => t.type === "audio");
-      const audioElementId = crypto.randomUUID();
+      const audioElementId = generateUUID();
 
       if (existingAudioTrack) {
         // Add audio element to existing audio track
@@ -706,7 +707,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
       } else {
         // Create new audio track with the audio element in a single atomic update
         const newAudioTrack: TimelineTrack = {
-          id: crypto.randomUUID(),
+          id: generateUUID(),
           name: "Audio Track",
           type: "audio",
           elements: [