gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout videos dans programmer

Browse Source
This commit is contained in:
Julie
2026-06-01 08:51:18 +02:00
parent 78fab695a9
commit 0711bd6996
1 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/pages/professionnels/programmer-orchestre.vue
View File

@@ -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 ""