Ajouter le teaser YouTube sur la page spectacle

src/lib/storyblok.ts

@@ -1,6 +1,13 @@
 import { useStoryblokApi } 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' {
   return import.meta.env.PUBLIC_STORYBLOK_IS_PREVIEW === 'true' ? 'draft' : 'published';
 }
@@ -16,6 +23,7 @@ export interface Spectacle {
   credits: string;
   affiche: string;
   gallery: string[];
+  teaser: string;
   dossierPro: string;
   dateCreation: string;
   _blok: SbBlokData;
@@ -54,6 +62,7 @@ export function mapStoryToSpectacle(story: any): Spectacle {
     credits: c.credits || '',
     affiche: c.affiche?.filename || '',
     gallery: (c.galerie || []).map((a: any) => a.filename),
+    teaser: c.teaser || '',
     dossierPro: c.dossier?.filename || '',
     dateCreation: c.date_creation || '',
     _blok: c,

src/pages/spectacles/[id].astro

@@ -2,7 +2,7 @@
 import Layout from '../../layouts/Layout.astro';
 import { Icon } from 'astro-icon/components';
 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)
 export async function getStaticPaths() {
@@ -46,6 +46,8 @@ if (!spectacle) {
 
 const now = new Date();
 upcomingDates = upcomingDates.filter(event => new Date(event.date) >= now);
+
+const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
 ---
 
 <Layout title={`${spectacle.title} — Compagnie AspiRêves`}>
@@ -121,6 +123,23 @@ upcomingDates = upcomingDates.filter(event => new Date(event.date) >= now);
         </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 -->
       {upcomingDates.length > 0 && (
         <section class="fade-up mb-16 md:mb-24">