feat(ui): scale preview thumbs to height

frontend/components/Home.vue

@@ -7,7 +7,7 @@
           <template v-slot:name>search</template>
         </nav-item>
         <nav-item :to="{ name: 'importer' }">
-          <template v-slot:icon><eye-icon class="h-5" /></template>
+          <template v-slot:icon><document-search-icon class="h-5" /></template>
           <template v-slot:name>importer</template>
         </nav-item>
         <nav-item :to="{ name: 'settings' }">
@@ -29,5 +29,5 @@
 
 <script setup lang="ts">
 import NavItem from './NavItem.vue'
-import { SearchIcon, CogIcon, EyeIcon, LogoutIcon } from '@heroicons/vue/outline'
+import { SearchIcon, DocumentSearchIcon, CogIcon, LogoutIcon } from '@heroicons/vue/outline'
 </script>

frontend/components/MediaHighlight.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="w-fit relative">
-    <video v-if="rich && media?.type === MediaType.Video" :controls="true" @loadstart="loaded">
+    <div v-if="thumb && media?.type === MediaType.Video" class="top-2 right-2 bg-black/80 absolute p-2 rounded-md">
+      <video-camera-icon class="h-5 text-white" />
+    </div>
+    <video v-if="!thumb && media?.type === MediaType.Video" :controls="true" @loadstart="loaded">
       <source :src="url" :type="media.mime" />
     </video>
     <img v-else :src="url" @load="loaded" />
+
     <svg
       v-if="media && blocks.length"
       :viewBox="`0 0 ${media.dim_width} ${media.dim_height}`"
@@ -18,9 +22,6 @@
         :height="b.max_y - b.min_y"
       />
     </svg>
-    <div v-if="!rich && media?.type === MediaType.Video" class="top-2 right-2 bg-black/80 absolute p-2 rounded-md">
-      <video-camera-icon class="h-5 text-white" />
-    </div>
   </div>
 </template>
 
@@ -32,7 +33,7 @@ import useStore from '../composables/useStore'
 
 const props = defineProps<{
   hash?: string
-  rich?: boolean
+  thumb?: boolean
 }>()
 
 const emit = defineEmits<{ (e: 'loaded'): void }>()
@@ -44,8 +45,8 @@ const media = computed(() => store.getMediaByHash(props.hash || ''))
 const blocks = computed(() => store.getHighlightedBlocksByHash(props.hash || ''))
 const url = computed(
   () =>
-    props.rich
-      ? `${urlMedia}/${media.value?.hash}/raw` // full image or video
-      : `${urlMedia}/${media.value?.hash}/thumb`, // ~200px thumb
+    props.thumb
+      ? `${urlMedia}/${media.value?.hash}/thumb` // ~200px thumb
+      : `${urlMedia}/${media.value?.hash}/raw`, // full image or video
 )
 </script>

frontend/components/MediaPreview.vue

@@ -1,6 +1,6 @@
 <template>
-  <media-background v-if="media" :hash="media.hash" class="box">
-    <media-highlight rich :hash="media.hash" class="mx-auto" />
+  <media-background v-if="media" :hash="media.hash" class="box flex justify-center">
+    <media-highlight :hash="media.hash" />
   </media-background>
   <loading-spinner v-else class="bg-gray-100" text="processing image" />
 

frontend/components/Search.vue

@@ -13,10 +13,10 @@
           <span class="text-gray-500"> page {{ i + 1 }}</span>
           <hr class="m-0" />
         </div>
-        <div class="col-resp gap-x-4 space-y-4">
-          <media-background v-for="hash in page" :key="hash" :hash="hash" class="shadow-lg">
-            <router-link :to="{ name: 'search', params: { hash } }">
-              <media-highlight :hash="hash" class="mx-auto" />
+        <div class="col-resp col-gap-4 space-y-4">
+          <media-background v-for="hash in page" :key="hash" :hash="hash" class="shadow-lg max-h-[400px] overflow-y-hidden">
+            <router-link :to="{ name: 'search', params: { hash } }" class="block">
+              <media-highlight thumb :hash="hash" />
             </router-link>
           </media-background>
         </div>