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] 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>