jalil/aspireves.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ajouter le teaser YouTube sur la page spectacle

Browse source
This commit is contained in:
Jalil Arfaoui 2026-03-12 15:23:49 +01:00
parent fe539d4f4a
commit e849d5980c
2 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/lib/storyblok.ts
View file

@ -1,6 +1,13 @@
import { useStoryblokApi } from '@storyblok/astro'; import { useStoryblokApi } from '@storyblok/astro';
import type { SbBlokData } from '@storyblok/astro'; import type { SbBlokData } from '@storyblok/astro';
export function extractYouTubeId(url: string): string | null {
const match = url.match(
/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|shorts\/))([a-zA-Z0-9_-]{11})/
);
return match?.[1] ?? null;
}
function getVersion(): 'draft' | 'published' { function getVersion(): 'draft' | 'published' {
return import.meta.env.PUBLIC_STORYBLOK_IS_PREVIEW === 'true' ? 'draft' : 'published'; return import.meta.env.PUBLIC_STORYBLOK_IS_PREVIEW === 'true' ? 'draft' : 'published';
} }
@ -16,6 +23,7 @@ export interface Spectacle {
credits: string; credits: string;
affiche: string; affiche: string;
gallery: string[]; gallery: string[];
teaser: string;
dossierPro: string; dossierPro: string;
dateCreation: string; dateCreation: string;
_blok: SbBlokData; _blok: SbBlokData;
@ -54,6 +62,7 @@ export function mapStoryToSpectacle(story: any): Spectacle {
credits: c.credits || '', credits: c.credits || '',
affiche: c.affiche?.filename || '', affiche: c.affiche?.filename || '',
gallery: (c.galerie || []).map((a: any) => a.filename), gallery: (c.galerie || []).map((a: any) => a.filename),
teaser: c.teaser || '',
dossierPro: c.dossier?.filename || '', dossierPro: c.dossier?.filename || '',
dateCreation: c.date_creation || '', dateCreation: c.date_creation || '',
_blok: c, _blok: c,

21
src/pages/spectacles/[id].astro
View file

@ -2,7 +2,7 @@
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { getLiveStory, storyblokEditable } from '@storyblok/astro'; import { getLiveStory, storyblokEditable } from '@storyblok/astro';
import { fetchSpectacles, fetchAgenda, mapStoryToSpectacle } from '../../lib/storyblok'; import { fetchSpectacles, fetchAgenda, mapStoryToSpectacle, extractYouTubeId } from '../../lib/storyblok';
// Requis pour le build statique (ignoré en SSR) // Requis pour le build statique (ignoré en SSR)
export async function getStaticPaths() { export async function getStaticPaths() {
@ -46,6 +46,8 @@ if (!spectacle) {
const now = new Date(); const now = new Date();
upcomingDates = upcomingDates.filter(event => new Date(event.date) >= now); upcomingDates = upcomingDates.filter(event => new Date(event.date) >= now);
const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
--- ---
<Layout title={`${spectacle.title} — Compagnie AspiRêves`}> <Layout title={`${spectacle.title} — Compagnie AspiRêves`}>
@ -121,6 +123,23 @@ upcomingDates = upcomingDates.filter(event => new Date(event.date) >= now);
</div> </div>
</div> </div>
<!-- Teaser -->
{youtubeId && (
<section class="fade-up mb-16 md:mb-24">
<div class="max-w-3xl mx-auto rounded-2xl md:rounded-3xl overflow-hidden shadow-xl shadow-night/10 border-4 border-white">
<div class="relative w-full" style="padding-bottom: 56.25%">
<iframe
class="absolute inset-0 w-full h-full"
src={`https://www.youtube-nocookie.com/embed/${youtubeId}`}
title={`Teaser — ${spectacle.title}`}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</section>
)}
<!-- Upcoming dates --> <!-- Upcoming dates -->
{upcomingDates.length > 0 && ( {upcomingDates.length > 0 && (
<section class="fade-up mb-16 md:mb-24"> <section class="fade-up mb-16 md:mb-24">