feat: Added list and scaling to library

Also added context menu to library item
Joery-M · May 6, 2024 · 7c2d2e7 · 7c2d2e7
1 parent 856c30d
commit 7c2d2e7
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 187 deletions.
diff --git 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
@@ -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