ajout videos dans programmer

app/pages/professionnels/programmer-orchestre.vue

@@ -277,6 +277,46 @@
                   </div>
                 </a>
 
+                <a
+                  v-for="videoDownload in programme.videos_download || []"
+                  :key="`video-download-${videoDownload.id}`"
+                  :href="videoDownload.url"
+                  :download="videoDownload.name || true"
+                  class="flex flex-col gap-3 group"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <div class="relative w-full aspect-[4/3] bg-surface-container-low rounded-lg overflow-hidden group-hover:bg-primary-container transition-colors">
+                    <img
+                      v-if="getMediaPreviewUrl(videoDownload)"
+                      :src="getMediaPreviewUrl(videoDownload)"
+                      :alt="videoDownload.alternativeText || videoDownload.caption || videoDownload.name || ''"
+                      class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    >
+                    <video
+                      v-else-if="videoDownload.url"
+                      :src="videoDownload.url"
+                      muted
+                      playsinline
+                      preload="metadata"
+                      class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    ></video>
+                    <div class="absolute inset-0 bg-black/15 flex items-center justify-center">
+                      <span class="material-symbols-outlined text-4xl text-white drop-shadow">play_circle</span>
+                    </div>
+                  </div>
+                  <div class="text-center">
+                    <p v-if="videoDownload.caption || videoDownload.name" class="text-xs font-bold uppercase tracking-tighter">
+                      {{ videoDownload.caption || videoDownload.name }}
+                    </p>
+                    <p class="text-[10px] text-outline">
+                      <span v-if="videoDownload.ext">{{ videoDownload.ext.replace('.', '').toUpperCase() }}</span>
+                      <span v-if="videoDownload.ext && videoDownload.size"> • </span>
+                      <span v-if="videoDownload.size">{{ formatKoToMo(videoDownload.size) }}</span>
+                    </p>
+                  </div>
+                </a>
+
                 <a
                   v-for="document in programme.documents || []"
                   :key="`document-${document.id}`"
@@ -433,6 +473,46 @@
                     </div>
                   </a>
 
+                  <a
+                    v-for="videoDownload in programme.videos_download || []"
+                    :key="`video-download-${videoDownload.id}`"
+                    :href="videoDownload.url"
+                    :download="videoDownload.name || true"
+                    class="flex flex-col gap-3 group"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <div class="relative w-full aspect-[4/3] bg-surface-container-low rounded-lg overflow-hidden group-hover:bg-primary-container transition-colors">
+                      <img
+                        v-if="getMediaPreviewUrl(videoDownload)"
+                        :src="getMediaPreviewUrl(videoDownload)"
+                        :alt="videoDownload.alternativeText || videoDownload.caption || videoDownload.name || ''"
+                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      >
+                      <video
+                        v-else-if="videoDownload.url"
+                        :src="videoDownload.url"
+                        muted
+                        playsinline
+                        preload="metadata"
+                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      ></video>
+                      <div class="absolute inset-0 bg-black/15 flex items-center justify-center">
+                        <span class="material-symbols-outlined text-4xl text-white drop-shadow">play_circle</span>
+                      </div>
+                    </div>
+                    <div class="text-center">
+                      <p v-if="videoDownload.caption || videoDownload.name" class="text-xs font-bold uppercase tracking-tighter">
+                        {{ videoDownload.caption || videoDownload.name }}
+                      </p>
+                      <p class="text-[10px] text-outline">
+                        <span v-if="videoDownload.ext">{{ videoDownload.ext.replace('.', '').toUpperCase() }}</span>
+                        <span v-if="videoDownload.ext && videoDownload.size"> • </span>
+                        <span v-if="videoDownload.size">{{ formatKoToMo(videoDownload.size) }}</span>
+                      </p>
+                    </div>
+                  </a>
+
 
                 </div>
               </div>
@@ -482,6 +562,7 @@
             images: true,
             documents: true,
             videos: true,
+            videos_download: true,
         },
         categorie: {
           programme_categorie: true,
@@ -489,6 +570,7 @@
             images: true,
             documents: true,
             videos: true,
+            videos_download: true,
           }
         },
       },
@@ -564,6 +646,10 @@
     return `${(size / 1024).toFixed(1)} Mo`
   }
 
+  function getMediaPreviewUrl(file) {
+    return file?.formats?.thumbnail?.url || file?.previewUrl || ""
+  }
+
   function getInitials(fullName) {
     if (!fullName) return ""