From 5126f75e9226b0dd21b5ad09c49d30b3bae59386 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Tue, 23 Apr 2024 16:59:59 +0200
Subject: [PATCH 1/3] fix: Removed some passthough parameters, need to continue

---
 .../src/components/Editor/Library/Library.vue | 16 +++++---------
 .../safelight/src/views/Editor/Editor.vue     | 21 +++++++------------
 2 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index d5ee4f25..1f25e023 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -1,21 +1,13 @@
 <template>
     <DataView
         :value="sortedAndFiltered"
-        scrollable
-        scroll-height="400px"
-        class="flex h-full flex-col"
         data-key="id"
         :pt="{
             header: {
                 class: 'p-1'
-            },
-            content: {
-                style: 'flex: 1;'
-            },
-            emptyMessage: {
-                style: 'height: 100%;'
             }
         }"
+        :layout="layout"
     >
         <template #header>
             <Toolbar class="border-none p-0">
@@ -47,6 +39,7 @@
                             :options="['Name', 'Duration', 'File type']"
                         />
                     </InputGroup>
+                    <DataViewLayoutOptions v-model="layout" />
                 </template>
                 <template #end>
                     <Button title="Load file" rounded @click="fileDialog.open()">
@@ -57,9 +50,9 @@
                 </template>
             </Toolbar>
         </template>
-        <template #list="{ items }: { items: Media[] }">
+        <template #grid="{ items }: { items: Media[] }">
             <div
-                class="grid-nogutter grid h-full select-none"
+                class="grid-nogutter grid select-none"
                 role="grid"
                 style="
                     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -134,6 +127,7 @@ fileDialog.onChange((fileList) => {
 const search = ref('');
 const sortBy = ref<sortOptions>('Name');
 const sortDescending = ref(false);
+const layout = ref<string>('grid');
 
 const sortedAndFiltered = shallowRef<Media[]>([]);
 
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 5d6b6cfa..c866899e 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -30,26 +30,19 @@
             <SplitterPanel>
                 <Splitter @resize="clearSelection()">
                     <SplitterPanel>
-                        <TabView
-                            class="flex h-full flex-col"
-                            :pt="{
-                                panelContainer: {
-                                    class: 'flex-1'
-                                }
-                            }"
-                        >
-                            <TabPanel
-                                :pt="{
-                                    root: { class: 'h-full' }
-                                }"
-                            >
+                        <TabView>
+                            <TabPanel>
                                 <template #header>
                                     <div class="flex items-center gap-2">
                                         <PhFolders />
                                         <span class="white-space-nowrap font-bold"> Library </span>
                                     </div>
                                 </template>
-                                <Library />
+                                <Card>
+                                    <template #content>
+                                        <Library />
+                                    </template>
+                                </Card>
                             </TabPanel>
                         </TabView>
                     </SplitterPanel>

From 856c30d32c8390d6f96e7b967f5e914808a7373a Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 6 May 2024 17:04:55 +0200
Subject: [PATCH 2/3] feat: Started on datatable for library

---
 .../src/components/Editor/Library/Library.vue |  86 +++++++++-
 .../{LibraryItem.vue => LibraryGridItem.vue}  |   0
 .../Editor/Library/LibraryListItem.vue        | 157 ++++++++++++++++++
 3 files changed, 239 insertions(+), 4 deletions(-)
 rename packages/safelight/src/components/Editor/Library/{LibraryItem.vue => LibraryGridItem.vue} (100%)
 create mode 100644 packages/safelight/src/components/Editor/Library/LibraryListItem.vue

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index 1245b3a0..9ec618cb 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -1,5 +1,6 @@
 <template>
     <DataView
+        v-if="layout == 'grid'"
         :value="sortedAndFiltered"
         class="flex h-full flex-col"
         data-key="id"
@@ -14,11 +15,12 @@
                 style: 'height: 100%;'
             }
         }"
-        :layout="layout"
+        layout="grid"
     >
         <template #header>
             <Toolbar class="border-none p-0">
                 <template #start>
+                    <DataViewLayoutOptions v-model="layout" class="mr-2 min-w-fit" />
                     <InputGroup class="mr-2">
                         <InputGroupAddon class="p-0">
                             <PhMagnifyingGlass />
@@ -46,7 +48,6 @@
                             :options="['Name', 'Duration', 'File type']"
                         />
                     </InputGroup>
-                    <DataViewLayoutOptions v-model="layout" />
                 </template>
                 <template #end>
                     <Button title="Load file" rounded @click="fileDialog.open()">
@@ -68,7 +69,7 @@
                 @dblclick.self="fileDialogOpenDblClick"
             >
                 <template v-for="item in items" :key="item.id">
-                    <LibraryItem :item="item" />
+                    <LibraryGridItem :item="item" />
                 </template>
             </div>
         </template>
@@ -84,11 +85,88 @@
             </div>
         </template>
     </DataView>
+    <DataTable
+        v-else-if="layout == 'list'"
+        class="flex h-full flex-col"
+        :value="sortedAndFiltered"
+        :pt="{
+            header: {
+                class: 'p-1'
+            },
+            wrapper: {
+                style: 'flex-shrink: 1'
+            },
+            table: {
+                class: 'h-full'
+            }
+        }"
+        sort-field="field"
+        sort-mode="single"
+        scrollable
+        data-key="id"
+    >
+        <Column field="name.value" header="Name" sortable />
+        <Column header="Type">
+            <template #body="{ data }: { data: Media }">
+                <PhVideoCamera
+                    v-if="data.isOfType(MediaType.Video)"
+                    weight="bold"
+                    aria-label="Media has video"
+                />
+                <PhSpeakerHigh
+                    v-if="data.isOfType(MediaType.Audio)"
+                    weight="bold"
+                    aria-label="Media has audio"
+                />
+                <PhSubtitles
+                    v-if="data.isOfType(MediaType.Text)"
+                    weight="bold"
+                    aria-label="Media has subtitles"
+                />
+                <PhImage
+                    v-if="data.isOfType(MediaType.Image)"
+                    weight="bold"
+                    aria-label="Media is an image"
+                />
+            </template>
+        </Column>
+        <template #header>
+            <Toolbar class="border-none p-0">
+                <template #start>
+                    <DataViewLayoutOptions v-model="layout" class="mr-2 min-w-fit" />
+                    <InputGroup class="mr-2">
+                        <InputGroupAddon class="p-0">
+                            <PhMagnifyingGlass />
+                        </InputGroupAddon>
+                        <InputText v-model="search" placeholder="Search"> </InputText>
+                    </InputGroup>
+                </template>
+                <template #end>
+                    <Button title="Load file" rounded @click="fileDialog.open()">
+                        <template #icon>
+                            <PhPlus />
+                        </template>
+                    </Button>
+                </template>
+            </Toolbar>
+        </template>
+        <template #empty>
+            <div
+                class="grid h-full select-none place-items-center opacity-60"
+                @dblclick="fileDialogOpenDblClick"
+            >
+                <label v-if="CurrentProject.project.value?.media.length == 0">
+                    No media imported
+                </label>
+                <label v-else>No media found</label>
+            </div>
+        </template>
+    </DataTable>
 </template>
 
 <script setup lang="ts">
 import { ProjectFeatures } from '@safelight/shared/base/Project';
-import Media from '@safelight/shared/Media/Media';
+import Media, { MediaType } from '@safelight/shared/Media/Media';
 import fuzzysearch from 'fuzzysearch';
 import MimeMatcher from 'mime-matcher';
 import InputGroup from 'primevue/inputgroup';
diff --git a/packages/safelight/src/components/Editor/Library/LibraryItem.vue b/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue
similarity index 100%
rename from packages/safelight/src/components/Editor/Library/LibraryItem.vue
rename to packages/safelight/src/components/Editor/Library/LibraryGridItem.vue
diff --git a/packages/safelight/src/components/Editor/Library/LibraryListItem.vue b/packages/safelight/src/components/Editor/Library/LibraryListItem.vue
new file mode 100644
index 00000000..031581a4
--- /dev/null
+++ b/packages/safelight/src/components/Editor/Library/LibraryListItem.vue
@@ -0,0 +1,157 @@
+<template>
+    <div
+        role="gridcell"
+        class="border-round m-1 flex min-h-44 select-text flex-col rounded-md border-solid border-white/10"
+        style="border-width: 1px"
+        :aria-label="item.name.value"
+    >
+        <div
+            class="bg-checkerboard relative flex aspect-video w-full items-center justify-center overflow-clip rounded-t-md"
+        >
+            <img
+                v-if="item.previewImage.value"
+                class="overflow-none max-h-full max-w-full"
+                :aria-label="'Preview image for ' + item.name.value"
+                :src="item.previewImage.value"
+            />
+            <Skeleton
+                v-else
+                class="max-h-full max-w-full rounded-none rounded-t-md"
+                height="100%"
+                width="100%"
+            />
+            <div class="mediaType">
+                <PhVideoCamera
+                    v-if="item.isOfType(MediaType.Video)"
+                    weight="bold"
+                    aria-label="Media has video"
+                />
+                <PhSpeakerHigh
+                    v-if="item.isOfType(MediaType.Audio)"
+                    weight="bold"
+                    aria-label="Media has audio"
+                />
+                <PhSubtitles
+                    v-if="item.isOfType(MediaType.Text)"
+                    weight="bold"
+                    aria-label="Media has subtitles"
+                />
+                <PhImage
+                    v-if="item.isOfType(MediaType.Image)"
+                    weight="bold"
+                    aria-label="Media is an image"
+                />
+            </div>
+        </div>
+        <div class="flex items-center gap-1 px-1">
+            <p
+                v-tooltip.bottom="{ value: item.name.value, showDelay: 500 }"
+                class="line-clamp-2 flex-1 text-base"
+            >
+                {{ item.name.value }}
+            </p>
+            <Button
+                title="Options"
+                text
+                rounded
+                severity="secondary"
+                aria-haspopup="true"
+                aria-controls="library_item_menu"
+                @click="overlay?.toggle"
+            >
+                <template #icon>
+                    <PhDotsThreeVertical size="20" />
+                </template>
+            </Button>
+        </div>
+    </div>
+    <OverlayPanel
+        id="library_item_menu"
+        ref="overlay"
+        :pt="{
+            content: {
+                style: 'padding: 0'
+            }
+        }"
+    >
+        <Toolbar
+            :pt="{
+                root: {
+                    class: 'p-1 rounded-b-none',
+                    style: 'border-width: 0 0 1px 0'
+                }
+            }"
+        >
+            <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"
+            :pt="{
+                root: {
+                    style: 'border: none;'
+                }
+            }"
+        />
+    </OverlayPanel>
+</template>
+<script setup lang="ts">
+import { ProjectFeatures } from '@safelight/shared/base/Project';
+import type Media from '@safelight/shared/Media/Media';
+import { MediaType } 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 menuItems = ref<MenuItem[]>([
+    {
+        label: 'Temp'
+    }
+]);
+
+const hasItemInTimeline = computed(
+    () =>
+        CurrentProject.project.value &&
+        CurrentProject.project.value.hasFeature(ProjectFeatures.media) &&
+        CurrentProject.project.value.usesMedia(props.item)
+);
+
+const alertt = (text: string) => window.alert(text);
+
+const overlay = ref<OverlayPanel>();
+</script>
+
+<style lang="scss" scoped>
+.bg-checkerboard {
+    /* This is beautifully simple
+       https://stackoverflow.com/a/65129916 */
+    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
+}
+
+.mediaType {
+    @apply left-0 top-0 h-full w-full gap-2 p-2;
+
+    position: absolute;
+    display: flex;
+
+    justify-content: end;
+    align-items: end;
+
+    background: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
+}
+</style>

From 7c2d2e720edb8b019c8c847426e1f76b285b547a Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 6 May 2024 21:12:13 +0200
Subject: [PATCH 3/3] feat: Added list and scaling to library

Also added context menu to library item
---
 .../src/components/Editor/Library/Library.vue |  92 +++++++---
 .../Editor/Library/LibraryGridItem.vue        |  25 ++-
 .../Editor/Library/LibraryListItem.vue        | 157 ------------------
 3 files changed, 87 insertions(+), 187 deletions(-)
 delete mode 100644 packages/safelight/src/components/Editor/Library/LibraryListItem.vue

diff --git a/packages/safelight/src/components/Editor/Library/Library.vue b/packages/safelight/src/components/Editor/Library/Library.vue
index 9ec618cb..ca20a8bb 100644
--- a/packages/safelight/src/components/Editor/Library/Library.vue
+++ b/packages/safelight/src/components/Editor/Library/Library.vue
@@ -13,6 +13,9 @@
             },
             emptyMessage: {
                 style: 'height: 100%;'
+            },
+            footer: {
+                style: 'flex-grow: 1; display: flex; align-items: end'
             }
         }"
         layout="grid"
@@ -60,16 +63,12 @@
         </template>
         <template #grid="{ items }: { items: Media[] }">
             <div
-                class="grid-nogutter grid h-full select-none overflow-y-auto"
+                class="flex h-full select-none flex-wrap justify-center overflow-y-auto"
                 role="grid"
-                style="
-                    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-                    grid-template-rows: min-content;
-                "
                 @dblclick.self="fileDialogOpenDblClick"
             >
                 <template v-for="item in items" :key="item.id">
-                    <LibraryGridItem :item="item" />
+                    <LibraryGridItem :item="item" :size="gridItemSize" />
                 </template>
             </div>
         </template>
@@ -84,6 +83,20 @@
                 <label v-else>No media found</label>
             </div>
         </template>
+        <template #footer>
+            <Toolbar class="border-none p-0">
+                <template #start>
+                    <Slider
+                        v-model="gridItemSize"
+                        orientation="horizontal"
+                        :min="50"
+                        :max="300"
+                        :step="10"
+                        class="w-48 max-w-full"
+                    />
+                </template>
+            </Toolbar>
+        </template>
     </DataView>
     <DataTable
         v-else-if="layout == 'list'"
@@ -103,31 +116,45 @@
         sort-field="field"
         sort-mode="single"
         scrollable
+        resizable-columns
+        column-resize-mode="expand"
         data-key="id"
     >
+        <Column header="Type" body-class="px-0">
+            <template #body="{ data }: { data: Media }">
+                <div class="flex gap-2 pl-2">
+                    <PhVideoCamera
+                        v-if="data.isOfType(MediaType.Video)"
+                        weight="bold"
+                        aria-label="Media has video"
+                    />
+                    <PhSpeakerHigh
+                        v-if="data.isOfType(MediaType.Audio)"
+                        weight="bold"
+                        aria-label="Media has audio"
+                    />
+                    <PhSubtitles
+                        v-if="data.isOfType(MediaType.Text)"
+                        weight="bold"
+                        aria-label="Media has subtitles"
+                    />
+                    <PhImage
+                        v-if="data.isOfType(MediaType.Image)"
+                        weight="bold"
+                        aria-label="Media is an image"
+                    />
+                </div>
+            </template>
+        </Column>
         <Column field="name.value" header="Name" sortable />
-        <Column header="Type">
+        <Column field="duration.value" header="Duration" sortable>
             <template #body="{ data }: { data: Media }">
-                <PhVideoCamera
-                    v-if="data.isOfType(MediaType.Video)"
-                    weight="bold"
-                    aria-label="Media has video"
-                />
-                <PhSpeakerHigh
-                    v-if="data.isOfType(MediaType.Audio)"
-                    weight="bold"
-                    aria-label="Media has audio"
-                />
-                <PhSubtitles
-                    v-if="data.isOfType(MediaType.Text)"
-                    weight="bold"
-                    aria-label="Media has subtitles"
-                />
-                <PhImage
-                    v-if="data.isOfType(MediaType.Image)"
-                    weight="bold"
-                    aria-label="Media is an image"
-                />
+                <template v-if="data.isOfType(MediaType.Image)">
+                    {{ Timecode.toFormattedTimecode(5000) }}
+                </template>
+                <template v-else>
+                    {{ Timecode.toFormattedTimecode(data.duration.value * 1000) }}
+                </template>
             </template>
         </Column>
         <template #header>
@@ -167,6 +194,7 @@
 <script setup lang="ts">
 import { ProjectFeatures } from '@safelight/shared/base/Project';
 import Media, { MediaType } from '@safelight/shared/Media/Media';
+import Timecode from '@safelight/shared/Timecode';
 import fuzzysearch from 'fuzzysearch';
 import MimeMatcher from 'mime-matcher';
 import InputGroup from 'primevue/inputgroup';
@@ -206,9 +234,19 @@ const search = ref('');
 const sortBy = ref<sortOptions>('Name');
 const sortDescending = ref(false);
 const layout = ref<string>('grid');
+const gridItemSize = ref(176); // 11rem
 
 const sortedAndFiltered = shallowRef<Media[]>([]);
 
+// Reset sorting when changing to list
+// List has its own sorting
+watchEffect(() => {
+    if (layout.value == 'list') {
+        sortBy.value = 'Name';
+        sortDescending.value = false;
+    }
+});
+
 watchDebounced(
     [CurrentProject.project.value?.media, search, sortBy, sortDescending],
     sortAndFilter,
diff --git a/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue b/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue
index 031581a4..5167af5d 100644
--- a/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue
+++ b/packages/safelight/src/components/Editor/Library/LibraryGridItem.vue
@@ -1,9 +1,18 @@
 <template>
     <div
         role="gridcell"
-        class="border-round m-1 flex min-h-44 select-text flex-col rounded-md border-solid border-white/10"
+        class="border-round m-1 flex select-text flex-col rounded-md border-solid border-white/10"
         style="border-width: 1px"
+        :style="{
+            width: size + 'px'
+        }"
         :aria-label="item.name.value"
+        @contextmenu.prevent="
+            (ev) => {
+                closeOtherOverlays();
+                overlay?.toggle(ev);
+            }
+        "
     >
         <div
             class="bg-checkerboard relative flex aspect-video w-full items-center justify-center overflow-clip rounded-t-md"
@@ -20,7 +29,7 @@
                 height="100%"
                 width="100%"
             />
-            <div class="mediaType">
+            <div v-if="size >= 96" class="mediaType">
                 <PhVideoCamera
                     v-if="item.isOfType(MediaType.Video)"
                     weight="bold"
@@ -51,6 +60,7 @@
                 {{ item.name.value }}
             </p>
             <Button
+                v-if="size >= 96"
                 title="Options"
                 text
                 rounded
@@ -112,10 +122,11 @@ import type Media from '@safelight/shared/Media/Media';
 import { MediaType } from '@safelight/shared/Media/Media';
 import type Menu from 'primevue/menu';
 import type { MenuItem } from 'primevue/menuitem';
-import type OverlayPanel from 'primevue/overlaypanel';
+import OverlayPanel from 'primevue/overlaypanel';
 
 const props = defineProps<{
     item: Media;
+    size: number;
 }>();
 
 const menuItems = ref<MenuItem[]>([
@@ -134,6 +145,14 @@ const hasItemInTimeline = computed(
 const alertt = (text: string) => window.alert(text);
 
 const overlay = ref<OverlayPanel>();
+
+function closeOtherOverlays() {
+    if (document.activeElement && 'blur' in document.activeElement) {
+        (document.activeElement as HTMLElement).blur();
+    }
+    // Weird, but fine
+    document.body.click();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/safelight/src/components/Editor/Library/LibraryListItem.vue b/packages/safelight/src/components/Editor/Library/LibraryListItem.vue
deleted file mode 100644
index 031581a4..00000000
--- a/packages/safelight/src/components/Editor/Library/LibraryListItem.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-    <div
-        role="gridcell"
-        class="border-round m-1 flex min-h-44 select-text flex-col rounded-md border-solid border-white/10"
-        style="border-width: 1px"
-        :aria-label="item.name.value"
-    >
-        <div
-            class="bg-checkerboard relative flex aspect-video w-full items-center justify-center overflow-clip rounded-t-md"
-        >
-            <img
-                v-if="item.previewImage.value"
-                class="overflow-none max-h-full max-w-full"
-                :aria-label="'Preview image for ' + item.name.value"
-                :src="item.previewImage.value"
-            />
-            <Skeleton
-                v-else
-                class="max-h-full max-w-full rounded-none rounded-t-md"
-                height="100%"
-                width="100%"
-            />
-            <div class="mediaType">
-                <PhVideoCamera
-                    v-if="item.isOfType(MediaType.Video)"
-                    weight="bold"
-                    aria-label="Media has video"
-                />
-                <PhSpeakerHigh
-                    v-if="item.isOfType(MediaType.Audio)"
-                    weight="bold"
-                    aria-label="Media has audio"
-                />
-                <PhSubtitles
-                    v-if="item.isOfType(MediaType.Text)"
-                    weight="bold"
-                    aria-label="Media has subtitles"
-                />
-                <PhImage
-                    v-if="item.isOfType(MediaType.Image)"
-                    weight="bold"
-                    aria-label="Media is an image"
-                />
-            </div>
-        </div>
-        <div class="flex items-center gap-1 px-1">
-            <p
-                v-tooltip.bottom="{ value: item.name.value, showDelay: 500 }"
-                class="line-clamp-2 flex-1 text-base"
-            >
-                {{ item.name.value }}
-            </p>
-            <Button
-                title="Options"
-                text
-                rounded
-                severity="secondary"
-                aria-haspopup="true"
-                aria-controls="library_item_menu"
-                @click="overlay?.toggle"
-            >
-                <template #icon>
-                    <PhDotsThreeVertical size="20" />
-                </template>
-            </Button>
-        </div>
-    </div>
-    <OverlayPanel
-        id="library_item_menu"
-        ref="overlay"
-        :pt="{
-            content: {
-                style: 'padding: 0'
-            }
-        }"
-    >
-        <Toolbar
-            :pt="{
-                root: {
-                    class: 'p-1 rounded-b-none',
-                    style: 'border-width: 0 0 1px 0'
-                }
-            }"
-        >
-            <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"
-            :pt="{
-                root: {
-                    style: 'border: none;'
-                }
-            }"
-        />
-    </OverlayPanel>
-</template>
-<script setup lang="ts">
-import { ProjectFeatures } from '@safelight/shared/base/Project';
-import type Media from '@safelight/shared/Media/Media';
-import { MediaType } 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 menuItems = ref<MenuItem[]>([
-    {
-        label: 'Temp'
-    }
-]);
-
-const hasItemInTimeline = computed(
-    () =>
-        CurrentProject.project.value &&
-        CurrentProject.project.value.hasFeature(ProjectFeatures.media) &&
-        CurrentProject.project.value.usesMedia(props.item)
-);
-
-const alertt = (text: string) => window.alert(text);
-
-const overlay = ref<OverlayPanel>();
-</script>
-
-<style lang="scss" scoped>
-.bg-checkerboard {
-    /* This is beautifully simple
-       https://stackoverflow.com/a/65129916 */
-    background: repeating-conic-gradient(#ffffff0a 0% 25%, transparent 0% 50%) 50% / 20px 20px;
-}
-
-.mediaType {
-    @apply left-0 top-0 h-full w-full gap-2 p-2;
-
-    position: absolute;
-    display: flex;
-
-    justify-content: end;
-    align-items: end;
-
-    background: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
-}
-</style>