From 856e1e89f95c029f3a75eeb14c42eb579bb1112f Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Tue, 16 Apr 2024 21:44:51 +0200
Subject: [PATCH] Separated out project list to other component. Opened project
 is saved using session storage. Added a message for when no project could be
 loaded when going into /editor route. Fixed library not showing images
 correctly and a type error. Moved creating and opening projects to project
 store. Fixed projects not being able to load when a media item associated
 with it is unavailable. Added more functionality to library items.

---
 .../src/components/Editor/Library/Library.vue |  69 +++++-----
 .../components/Editor/Library/LibraryItem.vue | 113 ++++++++++++++++
 .../Menu/ProjectList/ProjectList.vue          |  74 +++++++++++
 packages/safelight/src/main.ts                |   6 +-
 packages/safelight/src/stores/useProject.ts   |  51 +++++++-
 packages/safelight/src/style.scss             |  10 ++
 .../safelight/src/views/Editor/Editor.vue     | 123 +++++++++++-------
 packages/safelight/src/views/projects.vue     | 108 +--------------
 .../shared/src/Storage/IndexedDbStorage.ts    |  37 ++++--
 .../helpers/Video/GenerateMediaThumbnail.ts   |   1 +
 10 files changed, 382 insertions(+), 210 deletions(-)
 create mode 100644 packages/safelight/src/components/Editor/Library/LibraryItem.vue
 create mode 100644 packages/safelight/src/components/Menu/ProjectList/ProjectList.vue

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index 0680745c..20baf034 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -5,7 +5,6 @@
         scroll-height="400px"
         class="flex h-full flex-col"
         data-key="id"
-        @dblclick="fileDialog.open()"
     >
         <template #header>
             <Toolbar class="border-none p-0">
@@ -38,66 +37,56 @@
                         />
                     </InputGroup>
                 </template>
+                <template #end>
+                    <Button title="Load file" rounded @click="fileDialog.open()">
+                        <template #icon>
+                            <PhUpload />
+                        </template>
+                    </Button>
+                </template>
             </Toolbar>
         </template>
-        <template #list="{ items }: { items: UnwrapRef<Media>[] }">
+        <template #list="{ items }: { items: Media[] }">
             <div
-                class="grid-nogutter grid"
+                class="grid-nogutter grid h-full select-none"
                 role="grid"
-                style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))"
+                style="
+                    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                    grid-template-rows: min-content;
+                "
+                @dblclick.self="fileDialogOpenDblClick"
             >
                 <div
                     v-for="item in items"
                     :key="item.id"
                     role="gridcell"
-                    class="border-round m-1 flex min-h-32 flex-col rounded-md border-solid border-white/10"
+                    class="border-round m-1 flex min-h-32 select-text flex-col rounded-md border-solid border-white/10"
                     style="border-width: 1px"
-                    :aria-label="item.name"
+                    :aria-label="item.name.value"
                 >
-                    <div
-                        class="bg-checkerboard flex aspect-video w-full items-center justify-center"
-                    >
-                        <img
-                            v-if="item.previewImage"
-                            class="max-h-full max-w-full rounded-t-md"
-                            :aria-label="'Preview image for ' + item.name"
-                            :src="item.previewImage"
-                        />
-                        <Skeleton
-                            v-else
-                            class="max-h-full max-w-full rounded-none rounded-t-md"
-                            height="100%"
-                            width="100%"
-                        />
-                    </div>
-                    <p
-                        v-tooltip.bottom="{ value: item.name.value, showDelay: 1000 }"
-                        class="m-0 mt-1 max-w-full overflow-x-hidden overflow-ellipsis text-base"
-                    >
-                        {{ item.name.value }}
-                    </p>
-                    <p v-if="item.duration > 0">
-                        {{ item.duration }}
-                    </p>
+                    <LibraryItem :item="item" />
                 </div>
             </div>
         </template>
         <template #empty>
-            <div class="grid h-full place-items-center" @dblclick="fileDialog.open()">
-                <label class="select-none opacity-60">No media imported</label>
+            <div
+                class="grid h-full select-none place-items-center opacity-60"
+                @dblclick="fileDialogOpenDblClick"
+            >
+                <label v-if="media.length == 0"> No media imported </label>
+                <label v-else>No media found</label>
             </div>
         </template>
     </DataView>
 </template>
 
 <script setup lang="ts">
-import { PhMagnifyingGlass, PhSortDescending } from '@phosphor-icons/vue';
+import { PhMagnifyingGlass, PhSortDescending, PhUpload } from '@phosphor-icons/vue';
 import Media from '@safelight/shared/Media/Media';
 import fuzzysearch from 'fuzzysearch';
 import MimeMatcher from 'mime-matcher';
 import InputGroup from 'primevue/inputgroup';
 import InputGroupAddon from 'primevue/inputgroupaddon';
-import type { UnwrapRef } from 'vue';
 
 useDropZone(document.body, {
     onDrop(files) {
@@ -164,6 +153,8 @@ function sortAndFilter() {
                 return item1.duration.value - item2.duration.value;
             case 'File type':
                 return collator.compare(ext1, ext2);
+            case 'Media type':
+                return collator.compare(item1.type.toString(), item1.type.toString());
             default:
                 return collator.compare(item1.name.value, item2.name.value);
         }
@@ -172,7 +163,13 @@ function sortAndFilter() {
     sortedAndFiltered.value = filtered;
 }
 
-type sortOptions = 'Name' | 'Duration' | 'File type';
+function fileDialogOpenDblClick(event: MouseEvent) {
+    event.preventDefault();
+    document.getSelection()?.removeAllRanges();
+    fileDialog.open();
+}
+
+type sortOptions = 'Name' | 'Duration' | 'File type' | 'Media type';
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/safelight/src/components/Editor/Library/LibraryItem.vue b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
new file mode 100644
index 00000000..3ca3e555
--- /dev/null
+++ b/packages/safelight/src/components/Editor/Library/LibraryItem.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="bg-checkerboard flex aspect-video w-full items-center justify-center">
+        <img
+            v-if="$props.item.previewImage.value"
+            class="max-h-full max-w-full rounded-t-md"
+            :aria-label="'Preview image for ' + $props.item.name.value"
+            :src="$props.item.previewImage.value"
+        />
+        <Skeleton
+            v-else
+            class="max-h-full max-w-full rounded-none rounded-t-md"
+            height="100%"
+            width="100%"
+        />
+    </div>
+    <div class="flex items-center gap-1 px-1">
+        <p
+            v-tooltip.bottom="{ value: $props.item.name.value, showDelay: 500 }"
+            class="flex-1 overflow-x-hidden overflow-ellipsis whitespace-nowrap text-base"
+        >
+            {{ $props.item.name.value }}
+        </p>
+        <Button
+            title="Options"
+            text
+            rounded
+            severity="secondary"
+            aria-haspopup="true"
+            aria-controls="library_item_menu"
+            @click="overlay?.show"
+        >
+            <template #icon>
+                <PhDotsThreeVertical size="20" />
+            </template>
+        </Button>
+    </div>
+    <OverlayPanel id="library_item_menu" ref="overlay">
+        <Toolbar>
+            <template #center>
+                <Button
+                    v-tooltip.bottom="{ value: 'Delete', showDelay: 500 }"
+                    severity="contrast"
+                    text
+                    :disabled="hasItemInTimeline"
+                    @click="alertt('yea no')"
+                >
+                    <template #icon>
+                        <PhTrash />
+                    </template>
+                </Button>
+            </template>
+        </Toolbar>
+        <Menu :model="menuItems" />
+    </OverlayPanel>
+</template>
+<script setup lang="ts">
+import { PhTrash, type PhDotsThreeVertical } from '@phosphor-icons/vue';
+import type Media from '@safelight/shared/Media/Media';
+import type Menu from 'primevue/menu';
+import type { MenuItem } from 'primevue/menuitem';
+import type OverlayPanel from 'primevue/overlaypanel';
+
+const props = defineProps<{
+    item: Media;
+}>();
+
+const project = useProject();
+
+const menuItems = ref<MenuItem[]>([
+    {
+        label: 'Temp'
+    }
+]);
+
+// My god
+// TODO: Not this
+const hasItemInTimeline = computed(() => {
+    console.log('A');
+    return project.project
+        ? project.project.timelines.some(
+              (t) =>
+                  t.isSimpleTimeline() &&
+                  t.items.some(
+                      (i) =>
+                          i.isBaseTimelineItem() &&
+                          i.isVideo() &&
+                          i.media.value?.id == props.item.id
+                  )
+          )
+        : false;
+});
+
+const alertt = (text: string) => window.alert(text);
+
+const overlay = ref<OverlayPanel>();
+</script>
+
+<style lang="scss">
+#library_item_menu .p-overlaypanel-content {
+    padding: 0 !important;
+
+    > .p-menu {
+        border: none;
+    }
+    > .p-toolbar {
+        @apply border-surface-100/10 rounded-b-none p-1;
+
+        border-top-width: 0;
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+}
+</style>
diff --git a/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
new file mode 100644
index 00000000..38a154ae
--- /dev/null
+++ b/packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
@@ -0,0 +1,74 @@
+<template>
+    <DataTable :value="projects" :loading>
+        <template #header>
+            <div class="align-items-center justify-content-between flex flex-wrap gap-2">
+                <h2 class="m-0 flex-1">Projects</h2>
+                <Button rounded title="Refresh list" @click="loadList()">
+                    <template #icon>
+                        <PhArrowsClockwise size="18" />
+                    </template>
+                </Button>
+                <SplitButton
+                    label="New project"
+                    rounded
+                    :model="projectTypes"
+                    @click="project.new.newSimpleProject()"
+                />
+            </div>
+        </template>
+        <Column field="name" header="Project" />
+        <Column field="type" header="Type" />
+        <Column header="Modified">
+            <template #body="slotProps">
+                {{ formatDateTime((slotProps.data as StoredProject).updated) }}
+            </template>
+        </Column>
+        <Column>
+            <template #body="slotProps">
+                <Button @click="project.openProject(slotProps.data)">Open</Button>
+            </template>
+        </Column>
+    </DataTable>
+</template>
+
+<script setup lang="ts">
+import { Storage, type StoredProject } from '@safelight/shared/base/Storage';
+import { DateTime } from 'luxon';
+import type { MenuItem } from 'primevue/menuitem';
+
+const project = useProject();
+
+const projectTypes: MenuItem[] = [
+    {
+        label: 'Simple',
+        command: project.new.newSimpleProject
+    },
+    { label: 'Test', command() {} }
+] as const;
+
+const projects = ref<StoredProject[]>([]);
+
+const loading = ref(true);
+
+onMounted(() => {
+    loadList();
+});
+function loadList() {
+    loading.value = true;
+    Storage.getProjects()
+        .then((p) => {
+            projects.value = p;
+        })
+        .catch((err) => {
+            console.error(err);
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+}
+
+function formatDateTime(dt: string) {
+    const date = DateTime.fromISO(dt).toLocal();
+    return date.toLocaleString({ dateStyle: 'long', timeStyle: 'short' });
+}
+</script>
diff --git a/packages/safelight/src/main.ts b/packages/safelight/src/main.ts
index 2a37149a..fb68d4c8 100644
--- a/packages/safelight/src/main.ts
+++ b/packages/safelight/src/main.ts
@@ -4,12 +4,10 @@ import { createRouter, createWebHistory } from 'vue-router/auto';
 import App from './App.vue';
 
 import PrimeVue, { type PrimeVueConfiguration } from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
 import 'primevue/resources/primevue.min.css';
 import 'primevue/resources/themes/aura-dark-amber/theme.css';
 import Tooltip from 'primevue/tooltip';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-ignore
-// import SafelightTheme from '@/@core/Safelight';
 
 import './style.scss';
 
@@ -24,10 +22,10 @@ export const pinia = createPinia();
 app.use(pinia);
 app.use(router);
 app.use(PrimeVue, {
-    // pt: SafelightTheme,
     inputStyle: 'outlined',
     ripple: false
 } as PrimeVueConfiguration);
+app.use(ConfirmationService);
 
 // Directives
 app.directive('tooltip', Tooltip);
diff --git a/packages/safelight/src/stores/useProject.ts b/packages/safelight/src/stores/useProject.ts
index 8b4e2e68..9a1d9b20 100644
--- a/packages/safelight/src/stores/useProject.ts
+++ b/packages/safelight/src/stores/useProject.ts
@@ -1,5 +1,6 @@
+import { router } from '@/main';
 import type BaseProject from '@safelight/shared/base/Project';
-import { Storage } from '@safelight/shared/base/Storage';
+import { Storage, type StoredProject } from '@safelight/shared/base/Storage';
 import MediaManager from '@safelight/shared/Storage/MediaManager';
 
 export const useProject = defineStore('Project', () => {
@@ -8,9 +9,13 @@ export const useProject = defineStore('Project', () => {
     const timelineViewEnd = ref(0);
 
     const project = shallowRef<BaseProject>();
+    const isLoaded = ref(false);
 
     function setProject(newProject: BaseProject) {
         project.value = newProject;
+        isLoaded.value = true;
+
+        useSessionStorage<string>('project', '').value = newProject.id;
     }
 
     function loadFile(file: File) {
@@ -26,7 +31,6 @@ export const useProject = defineStore('Project', () => {
                         (m) => m.id == storingProcessing.value!.id
                     );
 
-                    console.log(existingMedia);
                     if (!existingMedia) {
                         const media = await Storage.getStorage().LoadMedia(
                             storingProcessing.value.id!
@@ -36,7 +40,6 @@ export const useProject = defineStore('Project', () => {
                             project.value!.media.push(media);
                             save();
                         }
-                        // project.activeTimeline.createTimelineItem(media);
                     }
 
                     resolve();
@@ -53,9 +56,49 @@ export const useProject = defineStore('Project', () => {
         project,
         setProject,
         loadFile,
+        isLoaded,
         cursor,
         timelineViewStart,
         timelineViewEnd,
-        save
+        save,
+        openProject,
+        new: {
+            newSimpleProject
+        }
     };
 });
+
+async function newSimpleProject() {
+    const IndexedDbStorageController = (await import('@safelight/shared/Storage/IndexedDbStorage'))
+        .default;
+    Storage.setStorage(new IndexedDbStorageController());
+    const projectStore = useProject();
+    const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
+    projectStore.setProject(new SimpleProject());
+}
+
+async function openProject(selectedProject: StoredProject) {
+    if (selectedProject.type == 'Simple') {
+        const IndexedDbStorageController = (
+            await import('@safelight/shared/Storage/IndexedDbStorage')
+        ).default;
+
+        const projectStore = useProject();
+        Storage.setStorage(new IndexedDbStorageController());
+
+        const project = await Storage.getStorage().LoadProject(selectedProject.id);
+
+        if (project) {
+            projectStore.setProject(project);
+            await toEditor();
+        } else {
+            console.error('Could not load project');
+        }
+    } else {
+        console.error('Project type not supported');
+    }
+}
+
+async function toEditor() {
+    await router.push('/editor');
+}
diff --git a/packages/safelight/src/style.scss b/packages/safelight/src/style.scss
index cf60635c..238997d0 100644
--- a/packages/safelight/src/style.scss
+++ b/packages/safelight/src/style.scss
@@ -65,8 +65,18 @@ body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+
+    // Might wanna change this in the future
+    display: flex;
+    min-height: 100vh;
+
+    #app {
+        flex-grow: 1;
+        min-height: 100%;
+    }
 }
 
 html {
     font-size: 14px;
+    min-height: 100%;
 }
\ No newline at end of file
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 9b959113..7a9e4c23 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -1,68 +1,97 @@
 <template>
-    <Splitter layout="vertical" class="vertSlitter">
-        <SplitterPanel>
-            <Splitter>
+    <Suspense v-if="project.isLoaded">
+        <template #default>
+            <Splitter layout="vertical" class="vertSlitter" @resize="clearSelection()">
                 <SplitterPanel>
-                    <TabView class="flex h-full flex-col">
-                        <TabPanel>
-                            <template #header>
-                                <div class="flex items-center gap-2">
-                                    <PhFolders size="20" />
-                                    <span class="white-space-nowrap font-bold"> Library </span>
-                                </div>
-                            </template>
-                            <!-- Dont break highlighting -->
-                            <!-- eslint-disable-next-line prettier/prettier -->
-                            <!-- prettier-ignore -->
-                            <Library />
-                        </TabPanel>
-                    </TabView>
+                    <Splitter @resize="clearSelection()">
+                        <SplitterPanel>
+                            <TabView class="flex h-full flex-col">
+                                <TabPanel>
+                                    <template #header>
+                                        <div class="flex items-center gap-2">
+                                            <PhFolders size="20" />
+                                            <span class="white-space-nowrap font-bold">
+                                                Library
+                                            </span>
+                                        </div>
+                                    </template>
+                                    <Library />
+                                </TabPanel>
+                            </TabView>
+                        </SplitterPanel>
+                        <SplitterPanel>
+                            <Monitor
+                                v-if="project.project?.timeline"
+                                :timeline="project.project?.timeline"
+                                class="min-h-100 w-full"
+                            />
+                        </SplitterPanel>
+                    </Splitter>
                 </SplitterPanel>
-                <SplitterPanel>
-                    <Monitor
-                        v-if="project.project?.timeline"
-                        :timeline="project.project?.timeline"
-                        class="min-h-100 w-full"
-                    />
+                <SplitterPanel :size="40">
+                    <Timeline class="h-full w-full" />
                 </SplitterPanel>
             </Splitter>
-        </SplitterPanel>
-        <SplitterPanel :size="40">
-            <Timeline class="h-full w-full" />
-        </SplitterPanel>
-    </Splitter>
+        </template>
+    </Suspense>
+    <ConfirmDialog group="noProjectDialog"> </ConfirmDialog>
 </template>
 
 <script setup lang="ts">
+import { router } from '@/main';
 import { Storage } from '@safelight/shared/base/Storage';
+import ConfirmDialog from 'primevue/confirmdialog';
 import SplitterPanel from 'primevue/splitterpanel';
-
-// const fileDialog = useFileDialog({
-//     accept: 'image/*,video/*'
-// });
+import { useConfirm } from 'primevue/useconfirm';
 
 const project = useProject();
-// const loading = ref(false);
-
-/* fileDialog.onChange((fileList) => {
-    if (!fileList) return;
 
-    loading.value = true;
-    const promises: Promise<void>[] = [];
-    for (let i = 0; i < fileList.length; i++) {
-        const file = fileList.item(i);
+const projectErrorDialog = useConfirm();
 
-        if (file) promises.push(loadFile(file));
+onMounted(async () => {
+    console.log('A');
+    await router.isReady();
+    console.log('B');
+    if (!project.isLoaded) {
+        const lastId = useSessionStorage('project', undefined).value;
+        if (lastId) {
+            Storage.getProjects().then((projects) => {
+                const projectFromId = projects.find((p) => p.id == lastId);
+                if (projectFromId) {
+                    project.openProject(projectFromId);
+                } else {
+                    showNoProjectDialog();
+                }
+            });
+        } else {
+            showNoProjectDialog();
+        }
     }
-    Promise.all(promises).finally(() => {
-        loading.value = false;
+});
+
+function showNoProjectDialog() {
+    projectErrorDialog.require({
+        group: 'noProjectDialog',
+        header: 'No project loaded',
+        message: 'No project has been loaded, go to project list?',
+        reject() {
+            router.push('/');
+        },
+        accept() {
+            router.push('/projects');
+        }
     });
-}); */
+}
+
+function clearSelection() {
+    document.getSelection()?.removeAllRanges();
+}
 
 onBeforeUnmount(() => {
-    // reset store, which currently tries to call 'this', trying to reference the store
-    // project.$dispose();
-    if (project.project) Storage.getStorage().SaveProject(project.project);
+    if (project.isLoaded) {
+        project.save();
+        project.$dispose();
+    }
 });
 </script>
 
diff --git a/packages/safelight/src/views/projects.vue b/packages/safelight/src/views/projects.vue
index 3cbcd63b..e731ce6f 100644
--- a/packages/safelight/src/views/projects.vue
+++ b/packages/safelight/src/views/projects.vue
@@ -1,113 +1,9 @@
 <template>
     <Card>
         <template #content>
-            <DataTable :value="projects" :loading>
-                <template #header>
-                    <div class="align-items-center justify-content-between flex flex-wrap gap-2">
-                        <h2 class="m-0 flex-1">Projects</h2>
-                        <Button rounded title="Refresh list" @click="loadList()">
-                            <template #icon>
-                                <PhArrowsClockwise size="18" />
-                            </template>
-                        </Button>
-                        <SplitButton
-                            label="New project"
-                            rounded
-                            :model="projectTypes"
-                            @click="newSimpleProject()"
-                        />
-                    </div>
-                </template>
-                <Column field="name" header="Project" />
-                <Column field="type" header="Type" />
-                <Column header="Modified">
-                    <template #body="slotProps">
-                        {{ formatDateTime((slotProps.data as StoredProject).updated) }}
-                    </template>
-                </Column>
-                <Column>
-                    <template #body="slotProps">
-                        <Button @click="OpenProject(slotProps.data)">Open</Button>
-                    </template>
-                </Column>
-            </DataTable>
+            <ProjectList />
         </template>
     </Card>
 </template>
 
-<script setup lang="ts">
-import { Storage, type StoredProject } from '@safelight/shared/base/Storage';
-import { DateTime } from 'luxon';
-import { router } from '@/main';
-import type { MenuItem } from 'primevue/menuitem';
-
-const projectTypes: MenuItem[] = [
-    {
-        label: 'Simple',
-        command: newSimpleProject
-    },
-    { label: 'Test', command() {} }
-] as const;
-
-const projects = ref<StoredProject[]>([]);
-
-const loading = ref(true);
-
-onMounted(() => {
-    loadList();
-});
-function loadList() {
-    loading.value = true;
-    Storage.getProjects()
-        .then((p) => {
-            projects.value = p;
-        })
-        .catch((err) => {
-            console.error(err);
-        })
-        .finally(() => {
-            loading.value = false;
-        });
-}
-
-function formatDateTime(dt: string) {
-    const date = DateTime.fromISO(dt).toLocal();
-    return date.toLocaleString({ dateStyle: 'long', timeStyle: 'short' });
-}
-
-async function newSimpleProject() {
-    const IndexedDbStorageController = (await import('@safelight/shared/Storage/IndexedDbStorage'))
-        .default;
-    Storage.setStorage(new IndexedDbStorageController());
-    const projectStore = useProject();
-    const SimpleProject = (await import('@safelight/shared/Project/SimpleProject')).default;
-    projectStore.setProject(new SimpleProject());
-    toEditor();
-}
-
-async function OpenProject(selectedProject: StoredProject) {
-    if (selectedProject.type == 'Simple') {
-        const IndexedDbStorageController = (
-            await import('@safelight/shared/Storage/IndexedDbStorage')
-        ).default;
-
-        const projectStore = useProject();
-        Storage.setStorage(new IndexedDbStorageController());
-
-        const project = await Storage.getStorage().LoadProject(selectedProject.id);
-
-        if (project) {
-            projectStore.setProject(project);
-            toEditor();
-        } else {
-            console.error('Could not load project');
-        }
-    } else {
-        console.error('Project type not supported');
-    }
-}
-
-function toEditor() {
-    router.push('/editor');
-}
-</script>
+<script setup lang="ts"></script>
diff --git a/packages/shared/src/Storage/IndexedDbStorage.ts b/packages/shared/src/Storage/IndexedDbStorage.ts
index 2ad0653e..34c294b5 100644
--- a/packages/shared/src/Storage/IndexedDbStorage.ts
+++ b/packages/shared/src/Storage/IndexedDbStorage.ts
@@ -48,16 +48,29 @@ export default class IndexedDbStorageController extends BaseStorageController {
                 if (project.type == 'Simple') {
                     const proj = new SimpleProject();
                     proj.id = project.id;
-                    const mediaFetches = project.media.map((m) => this.LoadMedia(m));
-                    const timelineFetches = project.timelines.map((t) =>
-                        this.LoadTimeline<SimpleTimeline>(t)
-                    );
-                    proj.media.push(
-                        ...(await Promise.all(mediaFetches)).filter((m) => m !== undefined)
-                    );
-                    proj.timelines.push(
-                        ...(await Promise.all(timelineFetches)).filter((t) => t !== undefined)
-                    );
+                    const mediaFetches = project.media.map(async (m) => {
+                        const media = await this.LoadMedia(m).catch((reason) => {
+                            console.error('Error loading media file for project', reason);
+                        });
+                        if (media) {
+                            proj.media.push(media);
+                        } else {
+                            // TODO: Add a way for media to be marked as missing
+                        }
+                    });
+                    const timelineFetches = project.timelines.map(async (t) => {
+                        const timeline = await this.LoadTimeline<SimpleTimeline>(t).catch(
+                            (reason) => {
+                                console.error('Error loading timeline for project', reason);
+                            }
+                        );
+                        if (timeline) {
+                            proj.timelines.push(timeline);
+                        }
+                    });
+
+                    // Load all timelines and media
+                    await Promise.allSettled([...timelineFetches, ...mediaFetches]);
                     proj.name = project.name;
                     return proj;
                 } else {
@@ -107,9 +120,7 @@ export default class IndexedDbStorageController extends BaseStorageController {
             this.db.media
                 .get({ id: mediaId })
                 .then((storedMedia) => {
-                    if (storedMedia) {
-                        resolve(this.storedMediaToMedia(storedMedia));
-                    }
+                    resolve(storedMedia ? this.storedMediaToMedia(storedMedia) : undefined);
                 })
                 .catch(reject);
         });
diff --git a/packages/shared/src/helpers/Video/GenerateMediaThumbnail.ts b/packages/shared/src/helpers/Video/GenerateMediaThumbnail.ts
index 079331bf..1d9ac180 100644
--- a/packages/shared/src/helpers/Video/GenerateMediaThumbnail.ts
+++ b/packages/shared/src/helpers/Video/GenerateMediaThumbnail.ts
@@ -1,6 +1,7 @@
 import MimeMatcher from 'mime-matcher';
 import MissingThumbnail from '../../../assets/missing_thumbnail.png?url';
 
+// TODO: Fix video not working for my HDR test video (HDR RGB lights.MOV)
 export function generateMediaThumbnail(file: File, percent = 0.1, maxWidth = 427, maxHeight = 240) {
     return new Promise<Blob | null>((resolve) => {
         const isVideo = new MimeMatcher('video/*').match(file.type);