feat: Fixed saving timelines on project

Added activeTimeline to storage. Fixed loading timeline actually returning a timeline (lol). Added immediately saving when creating a project. Changed selectedTimeline to be an ID instead of an index

packages/safelight/src/stores/currentProject.ts

@@ -44,7 +44,21 @@ export class CurrentProject {
         ).default;
         Storage.setStorage(new IndexedDbStorageController());
         const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
-        this.setProject(new SimpleProject());
+
+        const proj = new SimpleProject();
+
+        // TODO: Make configurable
+        proj.createTimeline({
+            framerate: 60,
+            width: 1920,
+            height: 1080,
+            name: 'Main'
+        });
+
+        this.setProject(proj);
+
+        await proj.Save();
+        this.setSessionProject(proj);
 
         if (goToEditor) await this.toEditor();
     }

packages/shared/src/Project/SimpleProject.ts

@@ -22,9 +22,12 @@ export default class SimpleProject
 
     public media = shallowReactive<Media[]>([]);
 
-    public selectedTimelineIndex = ref(0);
+    public selectedTimeline = ref<string>();
     public timelines = shallowReactive<SimpleTimeline[]>([]);
-    public timeline = computed(() => this.timelines.at(this.selectedTimelineIndex.value)!);
+    // public timeline = computed(() => this.timelines.find(this.selectedTimelineIndex.value)!);
+    public timeline = computed(() =>
+        this.timelines.find(({ id }) => id == this.selectedTimeline.value)
+    );
 
     constructor() {
         super();
@@ -48,10 +51,7 @@ export default class SimpleProject
     }
 
     public selectTimeline(timeline: SimpleTimeline) {
-        const timelineIndex = this.timelines.indexOf(timeline);
-        if (timelineIndex >= 0) {
-            this.selectedTimelineIndex.value = timelineIndex;
-        }
+        this.selectedTimeline.value = timeline.id;
     }
 
     public createTimeline(config: SimpleTimelineConfig, selectWhenCreated = true): SimpleTimeline {

packages/shared/src/Storage/IndexedDbStorage.ts

@@ -21,24 +21,28 @@ export default class IndexedDbStorageController extends BaseStorageController {
 
     private db = new SafelightIndexedDB();
 
-    async SaveProject(project: BaseProject | StoredProject): Promise<SaveResults> {
+    async SaveProject(project: BaseProject, includeTimelines = true): Promise<SaveResults> {
         const existingProject = await this.db.project.get({ id: project.id });
 
-        const storableProject: StoredProject =
-            'updated' in project
-                ? project
-                : {
-                      id: project.id,
-                      name: project.name.value,
-                      type: project.type,
-                      media: project.media.map((m) => m.id).filter((id) => id !== undefined),
-                      timelines: project.timelines.map((m) => m.id),
-                      updated: DateTime.now().toISO(),
-                      created: existingProject?.created ?? DateTime.now().toISO()
-                  };
+        const storableProject: StoredProject = {
+            id: project.id,
+            name: project.name.value,
+            type: project.type,
+            media: project.media.map((m) => m.id).filter((id) => id !== undefined),
+            timelines: project.timelines.map((m) => m.id),
+            activeTimeline: project.timeline.value?.id,
+            updated: DateTime.now().toISO(),
+            created: existingProject?.created ?? DateTime.now().toISO()
+        };
 
         try {
             await this.db.project.put(storableProject, project.id);
+
+            if (includeTimelines) {
+                const proms = project.timelines.map((timeline) => this.SaveTimeline(timeline));
+                await Promise.allSettled(proms);
+            }
+
             return 'Success';
         } catch (error: any) {
             return error.toString();
@@ -71,11 +75,15 @@ export default class IndexedDbStorageController extends BaseStorageController {
                         );
                         if (timeline) {
                             proj.timelines.push(timeline);
+                            if (timeline.id == project.activeTimeline) {
+                                proj.selectTimeline(timeline);
+                            }
                         }
                     });
 
                     // Load all timelines and media
-                    await Promise.allSettled([...timelineFetches, ...mediaFetches]);
+                    await Promise.allSettled(mediaFetches);
+                    await Promise.allSettled(timelineFetches);
                     proj.name.value = project.name;
                     return proj;
                 } else {
@@ -277,6 +285,8 @@ export default class IndexedDbStorageController extends BaseStorageController {
             });
 
             await Promise.allSettled(promises);
+
+            return timeline as unknown as Timeline;
         }
     }
 }

packages/shared/src/base/Project.ts

@@ -2,8 +2,8 @@ import { Subject } from 'rxjs';
 import { isReactive, isRef, ref, type ComputedRef, type Ref, type ShallowReactive } from 'vue';
 import type Media from '../Media/Media';
 import type SimpleProject from '../Project/SimpleProject';
+import type SimpleTimeline from '../Timeline/SimpleTimeline';
 import type { SaveResults } from './Storage';
-import type BaseTimeline from './Timeline';
 
 export default abstract class BaseProject {
     public abstract id: string;
@@ -12,9 +12,9 @@ export default abstract class BaseProject {
 
     public abstract media: ShallowReactive<Media[]>;
 
-    public abstract selectedTimelineIndex: Ref<number>;
-    public abstract timelines: ShallowReactive<BaseTimeline[]>;
-    public abstract timeline: ComputedRef<BaseTimeline>;
+    public abstract selectedTimeline: Ref<string | undefined>;
+    public abstract timelines: ShallowReactive<SimpleTimeline[]>;
+    public abstract timeline: ComputedRef<SimpleTimeline | undefined>;
 
     /**
      * Triggered when this class has been changed

packages/shared/src/base/Storage.ts

@@ -95,6 +95,7 @@ export interface StoredProject {
      * Array of timeline id's
      */
     timelines: string[];
+    activeTimeline?: string;
     created: string;
     updated: string;
 }