Adapt modal media picker

larbish · larbish · commit 140b31628288 · 2025-12-09T17:41:21.000+01:00
diff --git a/src/app/src/components/shared/ModalMediaPicker.vue b/src/app/src/components/shared/ModalMediaPicker.vue
@@ -25,27 +25,27 @@ const isValidFileType = (item: TreeItem) => {
   return false
 }
 
-const imageFiles = computed(() => {
-  const images: TreeItem[] = []
+const mediaFiles = computed(() => {
+  const medias: TreeItem[] = []
 
-  const collectImages = (items: TreeItem[]) => {
+  const collectMedias = (items: TreeItem[]) => {
     for (const item of items) {
       if (item.type === 'file' && isValidFileType(item)) {
-        images.push(item)
+        medias.push(item)
       }
       if (item.children) {
-        collectImages(item.children)
+        collectMedias(item.children)
       }
     }
   }
 
-  collectImages(mediaTree.root.value)
+  collectMedias(mediaTree.root.value)
 
-  return images
+  return medias
 })
 
-const handleImageSelect = (image: TreeItem) => {
-  emit('select', image)
+const handleMediaSelect = (media: TreeItem) => {
+  emit('select', media)
 }
 
 const handleUpload = () => {
@@ -57,21 +57,21 @@ const handleUpload = () => {
 <template>
   <UModal
     :open="open"
-    :title="$t('studio.mediaPicker.title')"
-    :description="$t('studio.mediaPicker.description')"
+    :title="$t(`studio.mediaPicker.${type}.title`)"
+    :description="$t(`studio.mediaPicker.${type}.description`)"
     @update:open="(value: boolean) => !value && emit('cancel')"
   >
     <template #body>
       <div
-        v-if="imageFiles.length === 0"
+        v-if="mediaFiles.length === 0"
         class="text-center py-4 text-muted"
       >
         <UIcon
-          name="i-lucide-image-off"
+          :name="type === 'image' ? 'i-lucide-image-off' : 'i-lucide-video-off'"
           class="size-8 mx-auto mb-2"
         />
         <p class="text-sm">
-          {{ $t('studio.mediaPicker.noImagesAvailable') }}
+          {{ $t(`studio.mediaPicker.${type}.notAvailable`) }}
         </p>
       </div>
 
@@ -80,23 +80,59 @@ const handleUpload = () => {
         class="grid grid-cols-3 gap-4"
       >
         <button
-          v-for="image in imageFiles"
-          :key="image.fsPath"
-          class="aspect-square rounded-lg overflow-hidden border border-default hover:border-accented hover:ring-1 hover:ring-accented transition-all cursor-pointer group relative"
-          @click="handleImageSelect(image)"
+          v-for="media in mediaFiles"
+          :key="media.fsPath"
+          class="aspect-square rounded-lg cursor-pointer group relative"
+          @click="handleMediaSelect(media)"
         >
+          <!-- Image Preview -->
           <div
-            class="w-full h-full"
+            v-if="type === 'image'"
+            class="w-full h-full overflow-hidden rounded-lg border border-default hover:border-muted hover:ring-1 hover:ring-muted transition-all"
             style="background: repeating-linear-gradient(45deg, #d4d4d8 0 12px, #a1a1aa 0 24px), repeating-linear-gradient(-45deg, #a1a1aa 0 12px, #d4d4d8 0 24px); background-blend-mode: overlay; background-size: 24px 24px;"
           >
             <Image
-              :src="image.routePath || image.fsPath"
+              :src="media.routePath || media.fsPath"
               width="200"
               height="200"
-              :alt="image.name"
-              class="w-full h-full object-cover"
+              :alt="media.name"
+              class="w-full h-full object-cover rounded-lg group-hover:scale-105 transition-transform duration-300 ease-out"
             />
           </div>
+
+          <!-- Video Preview -->
+          <div
+            v-else
+            class="w-full h-full bg-linear-to-br from-neutral-900 via-neutral-800 to-neutral-900 flex flex-col items-center justify-center relative overflow-hidden rounded-lg"
+          >
+            <!-- Decorative film strip pattern -->
+            <div class="absolute inset-y-0 left-0 w-3 bg-neutral-950 flex flex-col justify-around py-1">
+              <div
+                v-for="i in 6"
+                :key="i"
+                class="w-1.5 h-2 bg-neutral-700 mx-auto rounded-sm"
+              />
+            </div>
+            <div class="absolute inset-y-0 right-0 w-3 bg-neutral-950 flex flex-col justify-around py-1">
+              <div
+                v-for="i in 6"
+                :key="i"
+                class="w-1.5 h-2 bg-neutral-700 mx-auto rounded-sm"
+              />
+            </div>
+
+            <div class="size-14 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center group-hover:bg-white/20 group-hover:scale-110 transition-all duration-300 shadow-lg">
+              <UIcon
+                name="i-lucide-video"
+                class="size-7 text-white ml-0.5"
+              />
+            </div>
+
+            <!-- Filename -->
+            <p class="absolute bottom-0 inset-x-0 text-[10px] text-neutral-300 truncate px-4 py-2 bg-linear-to-t from-black/60 to-transparent text-center font-medium">
+              {{ media.name }}
+            </p>
+          </div>
         </button>
       </div>
     </template>
@@ -107,7 +143,7 @@ const handleUpload = () => {
         icon="i-lucide-upload"
         @click="handleUpload"
       >
-        {{ $t('studio.mediaPicker.upload') }}
+        {{ $t(`studio.mediaPicker.${type}.upload`) }}
       </UButton>
     </template>
   </UModal>
diff --git a/src/app/src/locales/bg.json b/src/app/src/locales/bg.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Избиране на изображение",
-      "description": "Изберете изображение от Вашата медийна библиотека",
-      "noImagesAvailable": "Няма налични изображения във Вашата медийна библиотека",
-      "upload": "Качване"
+      "image": {
+        "title": "Избиране на изображение",
+        "description": "Изберете изображение от Вашата медийна библиотека",
+        "notAvailable": "Няма налични изображения във Вашата медийна библиотека",
+        "upload": "Качване"
+      },
+      "video": {
+        "title": "Избиране на видео",
+        "description": "Изберете видео от Вашата медийна библиотека",
+        "notAvailable": "Няма налични видеа във Вашата медийна библиотека",
+        "upload": "Качване"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/de.json b/src/app/src/locales/de.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Bild auswählen",
-      "description": "Wählen Sie ein Bild aus Ihrer Medienbibliothek",
-      "noImagesAvailable": "Keine Bilder in Ihrer Medienbibliothek verfügbar",
-      "upload": "Hochladen"
+      "image": {
+        "title": "Bild auswählen",
+        "description": "Wählen Sie ein Bild aus Ihrer Medienbibliothek",
+        "notAvailable": "Keine Bilder in Ihrer Medienbibliothek verfügbar",
+        "upload": "Hochladen"
+      },
+      "video": {
+        "title": "Video auswählen",
+        "description": "Wählen Sie ein Video aus Ihrer Medienbibliothek",
+        "notAvailable": "Keine Videos in Ihrer Medienbibliothek verfügbar",
+        "upload": "Hochladen"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/en.json b/src/app/src/locales/en.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Select Image",
-      "description": "Choose an image from your media library",
-      "noImagesAvailable": "No images available in your media library",
-      "upload": "Upload"
+      "image": {
+        "title": "Select Image",
+        "description": "Choose an image from your media library",
+        "notAvailable": "No images available in your media library",
+        "upload": "Upload"
+      },
+      "video": {
+        "title": "Select Video",
+        "description": "Choose a video from your media library",
+        "notAvailable": "No videos available in your media library",
+        "upload": "Upload"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/es.json b/src/app/src/locales/es.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Seleccionar imagen",
-      "description": "Elige una imagen de tu biblioteca multimedia",
-      "noImagesAvailable": "No hay imágenes disponibles en tu biblioteca multimedia",
-      "upload": "Subir"
+      "image": {
+        "title": "Seleccionar imagen",
+        "description": "Elige una imagen de tu biblioteca multimedia",
+        "notAvailable": "No hay imágenes disponibles en tu biblioteca multimedia",
+        "upload": "Subir"
+      },
+      "video": {
+        "title": "Seleccionar video",
+        "description": "Elige un video de tu biblioteca multimedia",
+        "notAvailable": "No hay videos disponibles en tu biblioteca multimedia",
+        "upload": "Subir"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/fa.json b/src/app/src/locales/fa.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "انتخاب تصویر",
-      "description": "تصویری از کتابخانه رسانه خود انتخاب کنید",
-      "noImagesAvailable": "هیچ تصویری در کتابخانه رسانه شما موجود نیست",
-      "upload": "آپلود"
+      "image": {
+        "title": "انتخاب تصویر",
+        "description": "تصویری از کتابخانه رسانه خود انتخاب کنید",
+        "notAvailable": "هیچ تصویری در کتابخانه رسانه شما موجود نیست",
+        "upload": "آپلود"
+      },
+      "video": {
+        "title": "انتخاب ویدیو",
+        "description": "ویدیویی از کتابخانه رسانه خود انتخاب کنید",
+        "notAvailable": "هیچ ویدیویی در کتابخانه رسانه شما موجود نیست",
+        "upload": "آپلود"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/fi.json b/src/app/src/locales/fi.json
@@ -263,10 +263,18 @@
         }
       },
       "mediaPicker": {
-        "title": "Valitse kuva",
-        "description": "Valitse kuva mediakirjastosta",
-        "noImagesAvailable": "Mediakirjastosta ei löydy kuvia",
-        "upload": "Lataa"
+        "image": {
+          "title": "Valitse kuva",
+          "description": "Valitse kuva mediakirjastosta",
+          "notAvailable": "Mediakirjastosta ei löydy kuvia",
+          "upload": "Lataa"
+        },
+        "video": {
+          "title": "Valitse video",
+          "description": "Valitse video mediakirjastosta",
+          "notAvailable": "Mediakirjastosta ei löydy videoita",
+          "upload": "Lataa"
+        }
       }
     }
   }
diff --git a/src/app/src/locales/fr.json b/src/app/src/locales/fr.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Sélectionner une image",
-      "description": "Choisissez une image depuis votre bibliothèque de médias",
-      "noImagesAvailable": "Aucune image disponible dans votre bibliothèque de médias",
-      "upload": "Importer"
+      "image": {
+        "title": "Sélectionner une image",
+        "description": "Choisissez une image depuis votre bibliothèque de médias",
+        "notAvailable": "Aucune image disponible dans votre bibliothèque de médias",
+        "upload": "Importer"
+      },
+      "video": {
+        "title": "Sélectionner une vidéo",
+        "description": "Choisissez une vidéo depuis votre bibliothèque de médias",
+        "notAvailable": "Aucune vidéo disponible dans votre bibliothèque de médias",
+        "upload": "Importer"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/id.json b/src/app/src/locales/id.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Pilih Gambar",
-      "description": "Pilih gambar dari pustaka media Anda",
-      "noImagesAvailable": "Tidak ada gambar yang tersedia di pustaka media Anda",
-      "upload": "Unggah"
+      "image": {
+        "title": "Pilih Gambar",
+        "description": "Pilih gambar dari pustaka media Anda",
+        "notAvailable": "Tidak ada gambar yang tersedia di pustaka media Anda",
+        "upload": "Unggah"
+      },
+      "video": {
+        "title": "Pilih Video",
+        "description": "Pilih video dari pustaka media Anda",
+        "notAvailable": "Tidak ada video yang tersedia di pustaka media Anda",
+        "upload": "Unggah"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/it.json b/src/app/src/locales/it.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Seleziona immagine",
-      "description": "Scegli un'immagine dalla tua libreria media",
-      "noImagesAvailable": "Nessuna immagine disponibile nella tua libreria media",
-      "upload": "Carica"
+      "image": {
+        "title": "Seleziona immagine",
+        "description": "Scegli un'immagine dalla tua libreria media",
+        "notAvailable": "Nessuna immagine disponibile nella tua libreria media",
+        "upload": "Carica"
+      },
+      "video": {
+        "title": "Seleziona video",
+        "description": "Scegli un video dalla tua libreria media",
+        "notAvailable": "Nessun video disponibile nella tua libreria media",
+        "upload": "Carica"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/ja.json b/src/app/src/locales/ja.json
@@ -262,10 +262,18 @@
       }
     },
     "mediaPicker": {
-      "title": "画像を選択",
-      "description": "メディアライブラリから画像を選択してください",
-      "noImagesAvailable": "メディアライブラリに利用可能な画像がありません",
-      "upload": "アップロード"
+      "image": {
+        "title": "画像を選択",
+        "description": "メディアライブラリから画像を選択してください",
+        "notAvailable": "メディアライブラリに利用可能な画像がありません",
+        "upload": "アップロード"
+      },
+      "video": {
+        "title": "ビデオを選択",
+        "description": "メディアライブラリからビデオを選択してください",
+        "notAvailable": "メディアライブラリに利用可能なビデオがありません",
+        "upload": "アップロード"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/nl.json b/src/app/src/locales/nl.json
@@ -263,10 +263,18 @@
       }
     },
     "mediaPicker": {
-      "title": "Afbeelding selecteren",
-      "description": "Kies een afbeelding uit je mediabibliotheek",
-      "noImagesAvailable": "Geen afbeeldingen beschikbaar in je mediabibliotheek",
-      "upload": "Uploaden"
+      "image": {
+        "title": "Afbeelding selecteren",
+        "description": "Kies een afbeelding uit je mediabibliotheek",
+        "notAvailable": "Geen afbeeldingen beschikbaar in je mediabibliotheek",
+        "upload": "Uploaden"
+      },
+      "video": {
+        "title": "Video selecteren",
+        "description": "Kies een video uit je mediabibliotheek",
+        "notAvailable": "Geen video's beschikbaar in je mediabibliotheek",
+        "upload": "Uploaden"
+      }
     }
   }
 }
diff --git a/src/app/src/locales/pl.json b/src/app/src/locales/pl.json
diff --git a/src/app/src/locales/pt-br.json b/src/app/src/locales/pt-br.json
diff --git a/src/app/src/locales/zh.json b/src/app/src/locales/zh.json

Original file line number	Diff line number	Diff line change
`@@ -263,10 +263,18 @@`
`263`	`263`	`}`
`264`	`264`	`},`
`265`	`265`	`"mediaPicker": {`
`266`		`- "title": "Избиране на изображение",`
`267`		`- "description": "Изберете изображение от Вашата медийна библиотека",`
`268`		`- "noImagesAvailable": "Няма налични изображения във Вашата медийна библиотека",`
`269`		`- "upload": "Качване"`
	`266`	`+ "image": {`
	`267`	`+ "title": "Избиране на изображение",`
	`268`	`+ "description": "Изберете изображение от Вашата медийна библиотека",`
	`269`	`+ "notAvailable": "Няма налични изображения във Вашата медийна библиотека",`
	`270`	`+ "upload": "Качване"`
	`271`	`+ },`
	`272`	`+ "video": {`
	`273`	`+ "title": "Избиране на видео",`
	`274`	`+ "description": "Изберете видео от Вашата медийна библиотека",`
	`275`	`+ "notAvailable": "Няма налични видеа във Вашата медийна библиотека",`
	`276`	`+ "upload": "Качване"`
	`277`	`+ }`
`270`	`278`	`}`
`271`	`279`	`}`
`272`	`280`	`}`