generated from gitea_admin/default
1555 lines
54 KiB
Vue
1555 lines
54 KiB
Vue
<template>
|
||
<div class="studio-page">
|
||
<!-- ================== -->
|
||
<!-- FILS D'ARIANE -->
|
||
<!-- ================== -->
|
||
<PageSection tone="" content-size="default" class="breadcrum_wp">
|
||
<Breadcrumb/>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- EN-TêTE -->
|
||
<!-- ================== -->
|
||
<section class="fiche_header_simple_wp">
|
||
<div class="fiche_header_wp_gauche"></div>
|
||
|
||
<div class="fiche_header_inner">
|
||
<div class="fiche_header_titres">
|
||
<div>
|
||
<DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
|
||
{{ studio_contenus?.header_titre }}
|
||
</DsHeading>
|
||
</div>
|
||
|
||
<DsText as="p" align="justify">
|
||
{{ studio_contenus?.header_text }}
|
||
</DsText>
|
||
</div>
|
||
<div class="fiche_header_img">
|
||
<DsMedia
|
||
v-if="studio_contenus?.image_illustration_header?.url"
|
||
:src="studio_contenus.image_illustration_header.url"
|
||
:alt="studio_contenus.image_illustration_header.alternativeText || ''"
|
||
fit="contain"
|
||
ratio="square"
|
||
/>
|
||
|
||
<div v-else class="img_placeholder" aria-hidden="true" />
|
||
</div>
|
||
|
||
</div>
|
||
<div class="fiche_header_wp_droite"></div>
|
||
|
||
</section>
|
||
|
||
<!-- ================== -->
|
||
<!-- DESCRIPTION GÉNÉRALE-->
|
||
<!-- ================== -->
|
||
<PageSection :content="false" padded_size="">
|
||
<Decalage
|
||
tone="brand"
|
||
title-tone="invert"
|
||
position="left"
|
||
button-tone="invert"
|
||
ensavoirplus-target="texte_cache_1"
|
||
ensavoirplus-group="studio-details"
|
||
>
|
||
<template #title>
|
||
Professionnels de la musique et du cinéma
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
Musiciens, compositeurs, ingénieurs du son, producteurs, réalisateurs, superviseurs musicaux
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
<PageSection
|
||
id="texte_cache_1"
|
||
data-ensavoirplus-group="studio-details"
|
||
tone=""
|
||
content-size="default"
|
||
padded_size=""
|
||
class="mb-16 decalage_ensavoirplus--hidden"
|
||
>
|
||
<div class="fiche_description">
|
||
<div>
|
||
<section class="img-gallery_wp">
|
||
<div class="img-gallery">
|
||
<div class="ds-media ds-media--">
|
||
<img class="ds-media__img ds-media__img--cover" src="/contenus/studio_001.webp" alt="" loading="lazy" decoding="async">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<SectionContent v-if="studio_contenus?.description_generale" class="description_wp">
|
||
<StrapiBlocksConvert :blocks="studio_contenus.description_generale" />
|
||
</SectionContent>
|
||
</div>
|
||
</div>
|
||
<!-- EXEMPLES D'ENREGISTREMENTS AU STUDIO -->
|
||
<!-- PAR CATEGORIES -->
|
||
<section class="space-y-12 mt-16 mb-16">
|
||
<div
|
||
|
||
class="space-y-4"
|
||
>
|
||
|
||
<div class="flex items-center gap-4">
|
||
<h3 class="text-2xl font-bold tracking-tight">
|
||
EXEMPLES D'ENREGISTREMENTS AU STUDIO
|
||
</h3>
|
||
<div class="h-[2px] flex-1 bg-surface-container"></div>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<div
|
||
|
||
class="bg-surface-container-lowest rounded-xl p-8 hover:shadow-xl transition-shadow border border-outline-variant/10"
|
||
>
|
||
<div class="flex flex-col lg:flex-row gap-8">
|
||
|
||
|
||
<div class="border-surface-container pl-8 grid grid-cols-2 md:grid-cols-5 gap-6 items-start">
|
||
<div
|
||
v-for="enregistrement in studio_enregistrement || []"
|
||
:key="enregistrement.id"
|
||
class="flex flex-col gap-3 group"
|
||
>
|
||
<div class="w-full aspect-[1/1] bg-surface-container-low rounded-lg flex items-center justify-center group-hover:bg-primary-container transition-colors">
|
||
<img
|
||
v-if="enregistrement?.image_illustration_header?.[0]?.url"
|
||
:src="enregistrement.image_illustration_header[0].url"
|
||
:alt="enregistrement.image_illustration_header[0].alternativeText"
|
||
class="w-full aspect-[1/1] object-contain rounded-lg"
|
||
>
|
||
</div>
|
||
<div class="text-center">
|
||
<p class="text-xs font-bold uppercase tracking-tighter">
|
||
{{ enregistrement.header_artiste }}
|
||
</p>
|
||
<p class="text-xs font-regular uppercase tracking-tighter">
|
||
{{ enregistrement.header_titre }}
|
||
</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="px-3 py-1.5 bg-surface-container-low text-on-surface-variant rounded-full text-sm font-medium hover:bg-primary-container hover:text-primary transition-colors"
|
||
@click="openEnregistrementDescription(enregistrement)"
|
||
>
|
||
En savoir plus
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div
|
||
v-if="openedEnregistrementDescription"
|
||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-6"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
:aria-labelledby="`enregistrement-modal-title-${openedEnregistrementDescription.id}`"
|
||
@click.self="closeEnregistrementDescription"
|
||
>
|
||
<div class="relative max-h-[90vh] w-full max-w-3xl overflow-y-auto rounded-3xl bg-white p-6 shadow-2xl sm:p-8">
|
||
<button
|
||
type="button"
|
||
class="absolute right-4 top-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-surface-container text-on-surface-variant transition-colors hover:bg-primary-container hover:text-primary"
|
||
aria-label="Fermer la fenêtre"
|
||
@click="closeEnregistrementDescription"
|
||
>
|
||
<span class="material-symbols-outlined">close</span>
|
||
</button>
|
||
|
||
<div class="flex flex-col gap-6">
|
||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start">
|
||
<div class="w-full max-w-48 overflow-hidden rounded-2xl bg-surface-container-low">
|
||
<img
|
||
v-if="openedEnregistrementDescription?.image_illustration_header?.[0]?.url"
|
||
:src="openedEnregistrementDescription.image_illustration_header[0].url"
|
||
:alt="openedEnregistrementDescription.image_illustration_header[0].alternativeText"
|
||
class="h-full w-full object-contain"
|
||
>
|
||
</div>
|
||
|
||
<div class="flex-1 pr-8">
|
||
<p class="text-sm font-bold uppercase tracking-[0.2em] text-on-surface-variant">
|
||
{{ openedEnregistrementDescription.header_artiste }}
|
||
</p>
|
||
<h3
|
||
:id="`enregistrement-modal-title-${openedEnregistrementDescription.id}`"
|
||
class="mt-2 text-2xl font-bold uppercase tracking-tight text-on-surface"
|
||
>
|
||
{{ openedEnregistrementDescription.header_titre }}
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-left">
|
||
<StrapiBlocksConvert
|
||
v-if="openedEnregistrementDescription.description_generale"
|
||
:blocks="openedEnregistrementDescription.description_generale"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</PageSection>
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- ÉQUIPEMENT -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false" padded_size="md">
|
||
<Decalage
|
||
tone="dark"
|
||
title-tone="invert"
|
||
position="right"
|
||
button-tone="invert"
|
||
ensavoirplus-target="texte_cache_2"
|
||
ensavoirplus-group="studio-details"
|
||
>
|
||
<template #title>
|
||
ÉQUIPEMENT
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
Caractéristiques techniques de l’équipement
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
<PageSection
|
||
id="texte_cache_2"
|
||
data-ensavoirplus-group="studio-details"
|
||
tone=""
|
||
content-size="default"
|
||
padded_size=""
|
||
class="decalage_ensavoirplus--hidden"
|
||
>
|
||
|
||
<div class="fiche_description">
|
||
<SectionContent class="fiche_description strapi-blocks">
|
||
<div class="">
|
||
<section class="img-gallery_wp">
|
||
<div class="img-gallery">
|
||
<div class="ds-media ds-media--">
|
||
<img class="ds-media__img ds-media__img--cover" src="/contenus/studio_004.webp" alt="" loading="lazy" decoding="async">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<h1>3 stations numériques</h1>
|
||
<ul>
|
||
<li>Pro Tools A - HDX 2, Pro Tools B - HDX 1, 1 Pyramix</li>
|
||
<li>Nombreux plugins pour Pro Tools et Pyramix (Waves, UAD, Altiverb, Izotope Noïse Maker)</li>
|
||
</ul>
|
||
<h1>Surface de contrôle et préamplificateurs</h1>
|
||
<ul>
|
||
<li>1 surface de contrôle AVID S6 - 24 faders</li>
|
||
<li>96 préamplificateurs Digital Audio Denmark, (DAD AX32) en 96 KHz/24 bits</li>
|
||
<li>2 réverbérations Bricasti (M7)</li>
|
||
</ul>
|
||
<h1>Écoute et formats</h1>
|
||
<ul>
|
||
<li>ATC, Meyer Sound, formats 5.1 à 15.1</li>
|
||
</ul>
|
||
<h1>Monitoring</h1>
|
||
<ul>
|
||
<li>LCR ATC SCM 50 Custom, Sub ATC, Surround et Atmos Meyer Sound</li>
|
||
</ul>
|
||
<h1>Casques</h1>
|
||
<ul>
|
||
<li>100 casques Beyer Dynamic DT102, 20 casques Beyer Dynamic DT100, 1 console soundcraft SI Expression1 (console annexe pour balance casques spécifique)</li>
|
||
</ul>
|
||
<h1>Vidéo</h1>
|
||
<ul>
|
||
<li>Projection vidéo HD, écran transonore de 3 m de base, lecteur Blu-Ray Oppo 205, grille de distribution vidéo HD, distribution de la valeur de la mesure et du tempo sur écran pour chef et orchestre, caméras et retours vidéo disponibles pour les deux studios et la cabine</li>
|
||
</ul>
|
||
<h1>Microphonie</h1>
|
||
<ul>
|
||
<li>Neumann, Microtech-Gefell, Wunder Audio, Telefunken, Sennheiser, Schoeps, DPA, Royer Labs, AEA, AKG, Electro-Voice, Shure</li>
|
||
</ul>
|
||
<h1>Supports micros et pieds</h1>
|
||
<ul>
|
||
<li>Supports Grace Design pour Decca tree et arbre Surround, grands pieds Manfrotto pour Decca tree et arbre Surround, grands pieds K et M, barres Grace Design de couples stéreo, autres pieds en nombre suffisant pour couvrir les besoins d’un orchestre symphonique d’une centaine de musiciens</li>
|
||
</ul>
|
||
</div>
|
||
</SectionContent>
|
||
</div>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- ESPACES -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false" padded_size="md">
|
||
<Decalage
|
||
tone="brandreverse"
|
||
title-tone="invert"
|
||
position="left"
|
||
button-tone="invert"
|
||
ensavoirplus-target="texte_cache_3"
|
||
ensavoirplus-group="studio-details"
|
||
>
|
||
<template #title>
|
||
Des espaces uniques
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
Acoustiquement rénovées pour une prise de son claire et précise pour le confort de travail des musiciens, les deux salles de la Maison de l’Orchestre sont communicantes et modulables.
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
<PageSection
|
||
id="texte_cache_3"
|
||
data-ensavoirplus-group="studio-details"
|
||
tone=""
|
||
content-size="default"
|
||
padded_size=""
|
||
class="decalage_ensavoirplus--hidden"
|
||
>
|
||
|
||
<div class="fiche_description">
|
||
<SectionContent class="fiche_description strapi-blocks">
|
||
<div class="">
|
||
<section class="img-gallery_wp">
|
||
<div class="img-gallery">
|
||
<div class="ds-media ds-media--">
|
||
<img class="ds-media__img ds-media__img--cover" src="/contenus/studio_002.webp" alt="" loading="lazy" decoding="async">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<h1>La grande salle</h1>
|
||
<p>Une capacité unique en Île-de-France pouvant accueillir le grand symphonique avec ou sans chœur.</p>
|
||
<h2>Surface</h2>
|
||
<ul>
|
||
<li>Superficie 335 m²</li>
|
||
<li>Hauteur : 10 m</li>
|
||
<li>Volume : 3 350 m3</li>
|
||
</ul>
|
||
<h2>Technique</h2>
|
||
<ul>
|
||
<li>Éclairage modulable</li>
|
||
<li>Capacité d’accueil : 300 personnes</li>
|
||
<li>Possibilité d’enregistrements avec chœurs placés dans les gradins (130 personnes), Pré câblage numérique et analogique (Madi optique et Dante)</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</SectionContent>
|
||
</div>
|
||
|
||
<div class="fiche_description">
|
||
<SectionContent class="fiche_description strapi-blocks">
|
||
<div class="">
|
||
<section class="img-gallery_wp">
|
||
<div class="img-gallery">
|
||
<div class="ds-media ds-media--">
|
||
<img class="ds-media__img ds-media__img--cover" src="/contenus/studio_003.webp" alt="" loading="lazy" decoding="async">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<h1>La petite salle</h1>
|
||
<p>Des dimensions plus intimistes et une acoustique idéale pour les plus petites formations : de la musique de chambre à l’orchestre de chambre, en passant par le Big Band, le piano solo ou la voix.</p>
|
||
<h2>Surface</h2>
|
||
<ul>
|
||
<li>Superficie 104 m²</li>
|
||
<li>Hauteur : 7 m</li>
|
||
<li>Volume : 750 m3</li>
|
||
</ul>
|
||
<h2>Technique</h2>
|
||
<ul>
|
||
<li>Éclairage modulable</li>
|
||
<li>Capacité d’accueil : 50 personnes</li>
|
||
<li>Pré câblage numérique et analogique (Madi optique et Dante)</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</SectionContent>
|
||
</div>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- ENREGISTRER AVEC L'ORCHESTRE -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false" padded_size="md">
|
||
<Decalage
|
||
tone="brand"
|
||
title-tone="invert"
|
||
position="right"
|
||
button-tone="invert"
|
||
ensavoirplus-target="texte_cache_4"
|
||
ensavoirplus-group="studio-details"
|
||
>
|
||
<template #title>
|
||
Enregistrer avec les musiciens de l’Orchestre
|
||
</template>
|
||
<DsText as="p" tone="invert" align="justify">
|
||
et une équipe de professionnels et d’assistants ingénieurs du son
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
<PageSection
|
||
id="texte_cache_4"
|
||
data-ensavoirplus-group="studio-details"
|
||
tone=""
|
||
content-size="default"
|
||
padded_size=""
|
||
class="decalage_ensavoirplus--hidden"
|
||
>
|
||
|
||
<div class="fiche_description">
|
||
<SectionContent class="fiche_description strapi-blocks">
|
||
<div class="">
|
||
<p>Le Studio permet d’enregistrer une musique de film avec les musiciens de l’Orchestre, en assurant à la production un budget maîtrisé pour une exploitation de la bande originale en salles et sur tous supports comprenant :</p>
|
||
<ul>
|
||
<li>les droits audiovisuels des musiciens,</li>
|
||
<li>un forfait technique précis incluant l’installation du plateau, les balances son, l’enregistrement, le montage et le mixage.</li>
|
||
</ul>
|
||
<h1>Un service personnalisé</h1>
|
||
<p>Une équipe de professionnels et d’assistants ingénieurs du son est à votre écoute (régisseurs techniques, bibliothécaire).</p>
|
||
<h2>Ingénieures du son</h2>
|
||
<ul>
|
||
<li>Alix Ewald</li>
|
||
<li>Mireille Faure</li>
|
||
</ul>
|
||
<h2>Assistant·e·s</h2>
|
||
<ul>
|
||
<li>Florent Berthier</li>
|
||
<li>Alice Lemoigne</li>
|
||
<li>Guillaume Moutardier</li>
|
||
<li>Hugo-Alexandre Pernot</li>
|
||
</ul>
|
||
<h1>Nomenclature de l’Orchestre</h1>
|
||
<ul>
|
||
<li>16 premiers violons</li>
|
||
<li>14 seconds violons</li>
|
||
<li>12 altos</li>
|
||
<li>10 violoncelles</li>
|
||
<li>8 contrebasses</li>
|
||
<li>4 flûtes</li>
|
||
<li>4 hautbois</li>
|
||
<li>4 clarinettes</li>
|
||
<li>4 bassons</li>
|
||
<li>5 cors</li>
|
||
<li>4 trompettes</li>
|
||
<li>4 trombones</li>
|
||
<li>1 tuba</li>
|
||
<li>1 timbale</li>
|
||
<li>1 harpe</li>
|
||
<li>3 percussions</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</SectionContent>
|
||
</div>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- INFOS PRATIQUES -->
|
||
<!-- ================== -->
|
||
<PageSection :content="false">
|
||
<Decalage tone="dark" title-tone="invert" position="left" button-tone="invert" ensavoirplus-target="texte_cache_5"
|
||
ensavoirplus-group="studio-details">
|
||
<template #title>
|
||
Infos pratiques
|
||
</template>
|
||
<DsText tone="invert" as="p" align="justify">
|
||
Accès au studio instrumental de l’Orchestre national d’Île-de-France
|
||
</DsText>
|
||
</Decalage>
|
||
</PageSection>
|
||
|
||
<!-- ================== -->
|
||
<!-- INFOS PRATIQUES -->
|
||
<!-- PARTIE CACHÉE -->
|
||
<!-- ================== -->
|
||
<div id="texte_cache_5" data-ensavoirplus-group="studio-details" class="decalage_ensavoirplus--hidden">
|
||
<PageSection tone="" content-size="default" padded_size="md">
|
||
<SectionContent class="fiche_description strapi-blocks">
|
||
<div class="">
|
||
<h1>Le studio de l’Orchestre national d’Île-de-France</h1>
|
||
<p>19 rue des Écoles</p>
|
||
<p>94140 Alfortville</p>
|
||
</div>
|
||
</SectionContent>
|
||
</PageSection>
|
||
<PageSection tone="" content-size="default" padded_size="md">
|
||
<SectionContent class="fiche_description strapi-blocks">
|
||
<div>
|
||
<div class="mb-8"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d70672.55028389905!2d2.3463168575299274!3d48.83180674769099!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e6730f74558a15%3A0xc9a8bbf42df731e5!2sOrchestre%20national%20d'%C3%8Ele-de-France!5e0!3m2!1sfr!2sfr!4v1678109834196!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
|
||
<div>
|
||
<h1>Comment venir ?</h1>
|
||
|
||
<h2>RER ligne D</h2>
|
||
<ul>
|
||
<li>Descendre station Maisons-Alfort, Alfortville et sortir côté Alfortville</li>
|
||
<li>Prendre à droite en sortant de la gare : avenue Malleret-Joinville sur 500 mètres environ</li>
|
||
<li>Au premier croisement, suivre en face (mais légèrement sur la gauche) : la rue Victor-Hugo</li>
|
||
<li>Arrivé sur la place Jean-Jaurès (rond-point), continuer en face (entre magasin de téléphonie et Crédit Lyonnais) : rue Victor-Hugo. Tourner dans la première rue à gauche : rue des Écoles</li>
|
||
<li>À environ 150 mètres sur la droite se trouve le bâtiment de l’Orchestre</li>
|
||
</ul>
|
||
<h2>Métro ligne 8</h2>
|
||
<ul>
|
||
<li>Descendre station École vétérinaire de Maisons-Alfort</li>
|
||
<li>Prendre le bus 103 en sortant du métro. Descendre à la station Mairie d’Alfortville</li>
|
||
<li>Arrivé sur la place Jean-Jaurès (rond-point), continuer en face (entre magasin de téléphonie et Crédit Lyonnais) : rue Victor-Hugo. Tourner dans la première rue à gauche : rue des Écoles</li>
|
||
<li>À environ 150 mètres sur la droite se trouve le bâtiment de l’Orchestre</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</SectionContent>
|
||
</PageSection>
|
||
</div>
|
||
|
||
<!-- ================== -->
|
||
<!-- CONTACT -->
|
||
<!-- ================== -->
|
||
|
||
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
|
||
<ContactSpecifique
|
||
titre="Pour enregistrer avec l’Orchestre"
|
||
nom="Maria Birioukova"
|
||
poste="Responsable des productions et du personnel artistique "
|
||
numero="06 77 11 24 74"
|
||
mail="maria.birioukova@orchestre-ile.com"
|
||
adresse="19 rue des Écoles 94140 Alfortvillle"
|
||
/>
|
||
</PageSection>
|
||
|
||
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
|
||
<ContactSpecifique
|
||
titre="Pour louer les espaces"
|
||
nom="Jean Tabourel"
|
||
poste="Directeur technique"
|
||
numero="01 41 79 03 44"
|
||
mail="jean.tabourel@orchestre-ile.com"
|
||
adresse="19 rue des Écoles 94140 Alfortvillle"
|
||
/>
|
||
</PageSection>
|
||
|
||
|
||
<!-- ================== -->
|
||
<!-- L'ORCHESTRE POUR LES PROS -->
|
||
<!-- ================== -->
|
||
<PageSection padded_size="lg">
|
||
<SectionContent>
|
||
<SectionTitle tone="" pad="xs">
|
||
L'ORCHESTRE POUR LES PROS
|
||
</SectionTitle>
|
||
</SectionContent>
|
||
|
||
<SectionContent>
|
||
<BannierePros />
|
||
</SectionContent>
|
||
</PageSection>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
|
||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||
import DsMedia from '@root/design-system/primitives/DsMedia.vue'
|
||
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||
|
||
import logostudio from '/img/logos/logo_le_studio_noir.png'
|
||
import studioWagner from '/contenus/studio_wagner.jpg'
|
||
import studiolupin from '/contenus/studio_lupin.jpg'
|
||
import studiorhythm from '/contenus/studio_rythm_is_in_my_heart.jpg'
|
||
import studiocaruso from '/contenus/studio_caruso.jpg'
|
||
import studiomademoiselle from '/contenus/studio_mademoiselle.jpg'
|
||
import studiopardon from '/contenus/studio_oh_pardon_tu_dormais.jpg'
|
||
import catalogue_studio from '/contenus/catalogue-du-parc-instrumental.pdf'
|
||
|
||
useHead({
|
||
link: [
|
||
{
|
||
rel: 'preconnect',
|
||
href: 'https://fonts.googleapis.com',
|
||
},
|
||
{
|
||
rel: 'preconnect',
|
||
href: 'https://fonts.gstatic.com',
|
||
crossorigin: '',
|
||
},
|
||
{
|
||
rel: 'stylesheet',
|
||
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
|
||
},
|
||
{
|
||
rel: 'stylesheet',
|
||
href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
|
||
},
|
||
],
|
||
})
|
||
|
||
//--------------------
|
||
// RÉCUPÉRATION DES DONNÉES STRAPI
|
||
//--------------------
|
||
|
||
const studio_strapi = ref({
|
||
data: {
|
||
id: 1,
|
||
documentId: "studio123456",
|
||
header_titre: "Un grand studio modulaire high-tech",
|
||
header_text: "Que vous soyez compositeur, réalisateur, producteur ou superviseur musical, ce studio high tech vous offre dorénavant la possibilité d’enregistrer dans des conditions optimales aux portes de Paris ! Vous avez également l’opportunité d’enregistrer avec les musiciens de l’Orchestre et de profiter de leur excellence artistique pour votre projet ! Un studio modulable selon votre ligne artistique.",
|
||
image_illustration_header: {
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: "/"
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: logostudio
|
||
},
|
||
"description_generale": [
|
||
{
|
||
"type": "heading",
|
||
"level": 1,
|
||
"children": [
|
||
{
|
||
"text": "Professionnels de la musique",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "heading",
|
||
"level": 2,
|
||
"children": [
|
||
{
|
||
"text": "Musiciens, compositeurs, ingénieurs du son",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Enregistrez et mixez dans les deux formats audio professionnels les plus utilisés :",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list",
|
||
"format": "unordered",
|
||
"children": [
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "le format stéréo,",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "le format multicanaux 5.1.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Le Studio est également équipé d’un monitoring immersif allant du binaural à l’Atmos.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Bénéficiez d’une prise de son précise grâce à une acoustique claire, définie et respectueuse des timbres et à un parc de micros riche et varié pour :",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list",
|
||
"format": "unordered",
|
||
"children": [
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "retravailler en mixage les différents pupitres avec facilité,",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "enregistrer simultanément deux formations musicales réparties dans deux salles séparées tout en restant en totale communication visuelle grâce à son équipement vidéo adapté",
|
||
"type": "text"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "heading",
|
||
"level": 1,
|
||
"children": [
|
||
{
|
||
"text": "Professionnels du cinéma",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "heading",
|
||
"level": 2,
|
||
"children": [
|
||
{
|
||
"text": "Compositeurs, producteurs, réalisateurs, superviseurs musicaux",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list",
|
||
"format": "unordered",
|
||
"children": [
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "Enregistrez et mixez vos bandes originales dans les meilleures conditions.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "Profitez du soin apporté à la réfection acoustique de la cabine offrant une restitution sonore de grande qualité.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "Écoutez en immersion et plongez au cœur du son grâce au dispositif 15.1, Dolby Atmos.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "list-item",
|
||
"children": [
|
||
{
|
||
"text": "Disposez d’un écran transonore et d’un vidéoprojecteur.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
]
|
||
},
|
||
],
|
||
"documents": [
|
||
{
|
||
"id": 246,
|
||
"documentId": "h38c6ppljk084pdgnngcbe0b",
|
||
"name": "catalogue-du-parc-instrumental",
|
||
"alternativeText": "catalogue-du-parc-instrumental",
|
||
"caption": "Catalogue du Parc",
|
||
"width": null,
|
||
"height": null,
|
||
"formats": null,
|
||
"hash": "catalogue-du-parc-instrumental",
|
||
"ext": ".pdf",
|
||
"mime": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||
"size": 2065.92,
|
||
"url": catalogue_studio,
|
||
"previewUrl": null,
|
||
"provider": "aws-s3",
|
||
"provider_metadata": null,
|
||
"createdAt": "2026-04-20T09:04:05.924Z",
|
||
"updatedAt": "2026-04-20T09:04:39.849Z",
|
||
"publishedAt": "2026-04-20T09:04:05.924Z",
|
||
"focalPoint": null
|
||
},
|
||
]
|
||
},
|
||
meta: {}
|
||
})
|
||
|
||
const studio_contenus = computed(() => studio_strapi.value?.data || null)
|
||
|
||
const studio_enregistrement_strapi = ref({
|
||
data: [
|
||
{
|
||
id: 1,
|
||
documentId: "studio123456",
|
||
header_titre: "Wagnermania",
|
||
header_artiste: "WAGNER",
|
||
image_illustration_header: [
|
||
{
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: studioWagner
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: studioWagner
|
||
},
|
||
],
|
||
"description_generale": [
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Pour fêter son arrivée en tant que Directeur Musical et Chef principal de l’Orchestre national d’Île-de-France, l’Américain Case Scaglione a choisi d’enregistrer un premier album rendant hommage à un compositeur cher à son cœur : Richard Wagner.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Michelle DeYoung, Simon O’Neill et Pierre-Yves Pruvot, wagnériens aguerris, complètent le casting de ce 5eme opus de l’orchestre chez NoMadMusic.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Avant Richard Wagner, aucun compositeur n’avait su fusionner autant la voix et l’orchestre pour porter si haut le sentiment humain. Dans Tristan et Isolde, c’est l’amour absolu qui se déploie avec noblesse : les deux héros s’aiment à en mourir, et jamais on n’aura entendu de page si sublimement tragique. Le personnage de la Walkyrie est plus héroïque : fière, Brühnhilde s’oppose à l’ordre établi pour sauver Siegmund. Mais en désobéissant à Wotan, ne réalise-t-elle pas finalement le vœu le plus cher de son père ? L’autre héros est résolument mystique : il s’agit de Parsifal. Il se présente comme le sauveur d’une communauté de chevaliers dont les forces s’épuisent. Vaillant et pur, Parsifal est là comme un messie incarnant un monde meilleur, un ordre nouveau.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "direction ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Case Scaglione",
|
||
"type": "text",
|
||
"bold": true
|
||
},
|
||
{
|
||
"text": "\nExtraits de : ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Parsifal (acte II, scène 3), Tristan & Isolde (prélude et mort d’Isolde), Die Walküre (acte I, scène 3)",
|
||
"type": "text",
|
||
"italic": true
|
||
},
|
||
{
|
||
"text": "\nmezzo-soprano ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Michelle DeYoung",
|
||
"type": "text",
|
||
"bold": true
|
||
},
|
||
{
|
||
"text": "\nténor ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Simon O’Neill",
|
||
"type": "text",
|
||
"bold": true
|
||
},
|
||
{
|
||
"text": "\nbaryton ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Pierre-Yves Pruvot",
|
||
"type": "text",
|
||
"bold": true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: "image",
|
||
image: {
|
||
url: "/img/logos/logo_nomadmusic.webp",
|
||
alternativeText: "nomad music",
|
||
caption: "",
|
||
}
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Disponible sur ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"type": "link",
|
||
"url": "https://www.nomadmusic.fr/fr/album/wagnermania/",
|
||
"children": [
|
||
{
|
||
"text": "NoMadMusic",
|
||
"type": "text"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 2,
|
||
documentId: "studio123456",
|
||
header_titre: "Lupin partie 2",
|
||
header_artiste: "Mathieu Lamboley",
|
||
image_illustration_header: [
|
||
{
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: studiolupin
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: studiolupin
|
||
},
|
||
],
|
||
"description_generale": [
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "La musique de la série Lupin a été composée par Mathieu Lambolley et enregistrée par l'Orchestre national d'Île-de-France dans son studio.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Série sur Netflix dès le 11 juin 2021.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Voir la rencontre avec Mathieu Lamboley sur ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"type": "link",
|
||
"url": "https://www.allocine.fr/video/player_gen_cmedia=19592597&cserie=22302.html",
|
||
"children": [
|
||
{
|
||
"text": "Allociné",
|
||
"type": "text"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 3,
|
||
documentId: "studio123456",
|
||
header_titre: "Rythm is in my heart",
|
||
header_artiste: "Georgi Varbanov",
|
||
image_illustration_header: [
|
||
{
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: studiorhythm
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: studiorhythm
|
||
},
|
||
],
|
||
"description_generale": [
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Premier opus de la collection « Solo » de l’Orchestre national d’Île-de-France, Rhythm is in my heart met à l’honneur son percussionniste Georgi Varbanov avec un album très personnel dédié au marimba.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Originaire de Bulgarie, Georgi Varbanov a perfectionné son français en écoutant assidûment la radio FIP, sur laquelle officiait notamment Sonya Mellah.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Cette voix représentant un des ses premiers liens avec la musicalité de la langue française, il a tenu à lui rendre hommage en l’invitant à écrire et à interpréter pour l’occasion des textes qui relient les œuvres et improvisations rythmiques présentes sur l’album",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "« La musique du monde entier semble être née au même endroit. Le battement de nos cœurs provoque l’instinct premier de la création d’un rythme acoustique, bien avant la mélodie. ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Rythm is in my heart...",
|
||
"type": "text",
|
||
"italic": true
|
||
},
|
||
{
|
||
"text": " »",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Music for marimba\nSortie le 6 décembre 2019\n\npercussion ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Georgi Varbanov",
|
||
"type": "text",
|
||
"bold": true
|
||
},
|
||
]
|
||
},
|
||
{
|
||
type: "image",
|
||
image: {
|
||
url: "/img/logos/logo_nomadmusic.webp",
|
||
alternativeText: "nomad music",
|
||
caption: "",
|
||
}
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Disponible sur ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"type": "link",
|
||
"url": "https://www.nomadmusic.fr/fr/album/rythm-is-in-my-heart/",
|
||
"children": [
|
||
{
|
||
"text": "NoMadMusic",
|
||
"type": "text"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 4,
|
||
documentId: "studio123456",
|
||
header_titre: "Caruso 1873",
|
||
header_artiste: "Roberto Alagna",
|
||
image_illustration_header: [
|
||
{
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: studiocaruso
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: studiocaruso
|
||
},
|
||
],
|
||
"description_generale": [
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Roberto Alagna : le projet de toute une vie !",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Le plus grand ténor du moment rend hommage au plus grand ténor de tous les temps !\nTous les plus grands airs de l'histoire de l'Opéra popularisés il y a 100 ans par Caruso et sublimés en 2019 par Roberto Alagna ainsi que six chansons populaires napolitaines incontournables.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Un projet arrangé, réalisé et dirigé par l'emblématique Yvan Cassar, avec l'Orchestre national d'Île-de-France !",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Album enregistré au Studio de l'Orchestre",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 5,
|
||
documentId: "studio123456",
|
||
header_titre: "Mademoiselle",
|
||
header_artiste: "Julie Fuchs",
|
||
image_illustration_header: [
|
||
{
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: studiomademoiselle
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: studiomademoiselle
|
||
},
|
||
],
|
||
"description_generale": [
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "« Figure incontournable de la scène lyrique aussi bien en France qu’à l’International, Julie Fuchs revient avec un album entièrement consacré à l’Opéra du XIXe siècle.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Un album enregistré au Studio, avec l'Orchestre national d'Île-de-France !",
|
||
"type": "text",
|
||
"bold": true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Dédié au Bel Canto et chanté en trois langues différentes (français, italien, espagnol), ce nouvel album s’intitule Mademoiselle, l’histoire de l’émancipation d’une jeune chanteuse à travers une sélection d’airs bien spécifiques. Pour cela, Julie Fuchs a choisi à la fois des airs connus du grand répertoire mais aussi des airs rares, pour certains enregistrés pour la toute première fois et redécouverts après un long travail de recherche. Le point commun entre ces airs provient des opéras eux-mêmes puisqu’ils parlent d’orphelines ou de jeunes femmes vouées à destin incertains et qui s’émancipent grâce à leur caractère et personnalité.",
|
||
"type": "text"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Julie Fuchs s’est entourée du chef d’orchestre Enrique Mazzola, spécialiste du répertoire, et chef principal de l’Orchestre national d’Île-de-France qui en a assuré l’enregistrement dans leur nouveau studio à Alfortville. Mademoiselle est ainsi le premier enregistrement à inaugurer ce nouveau lieu à la pointe de la technologie et à l’acoustique idéale. »",
|
||
"type": "text"
|
||
},
|
||
]
|
||
},
|
||
{
|
||
type: "image",
|
||
image: {
|
||
url: "/img/logos/logo_deutschegrammophon.jpg",
|
||
alternativeText: "Deutsche Grammophon",
|
||
caption: "",
|
||
}
|
||
},
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Disponible sur ",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"type": "link",
|
||
"url": "https://www.deutschegrammophon.com/en",
|
||
"children": [
|
||
{
|
||
"text": "Deutsche Grammophon",
|
||
"type": "text"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
},
|
||
{
|
||
id: 6,
|
||
documentId: "studio123456",
|
||
header_titre: "Oh ! Pardon tu dormais...",
|
||
header_artiste: "Jane Birkin",
|
||
image_illustration_header: [
|
||
{
|
||
id: 301,
|
||
documentId: "img123456",
|
||
name: "parc_header.jpg",
|
||
alternativeText: "Vue du parc instrumental de l'Orchestre",
|
||
caption: "studio instrumental",
|
||
width: 1600,
|
||
height: 900,
|
||
formats: {
|
||
thumbnail: {
|
||
url: studiopardon
|
||
}
|
||
},
|
||
ext: ".jpg",
|
||
mime: "image/jpeg",
|
||
size: 245.8,
|
||
url: studiopardon
|
||
},
|
||
],
|
||
"description_generale": [
|
||
{
|
||
"type": "paragraph",
|
||
"children": [
|
||
{
|
||
"text": "Réalisateurs\n",
|
||
"type": "text",
|
||
"bold": true
|
||
},
|
||
{
|
||
"text": "Etienne Daho, Jean-Louis Pierrot",
|
||
"type": "text"
|
||
},
|
||
{
|
||
"text": "Prise de son\n",
|
||
"type": "text",
|
||
"bold": true
|
||
},
|
||
{
|
||
"text": "Alix Ewald",
|
||
"type": "text"
|
||
},
|
||
]
|
||
},
|
||
],
|
||
},
|
||
],
|
||
meta: {}
|
||
})
|
||
|
||
const studio_enregistrement = computed(() => studio_enregistrement_strapi.value?.data || [])
|
||
|
||
const endpointInstruments = "/api/__strapi__/instruments"
|
||
const populateInstruments = {
|
||
illustration_instrument: true,
|
||
}
|
||
const { items: instrumentsItems, refresh: refreshInstruments } = useStrapi(
|
||
endpointInstruments,
|
||
{
|
||
locale: "fr-FR",
|
||
populate: populateInstruments,
|
||
pageSize: 500,
|
||
}
|
||
)
|
||
|
||
onMounted(() => {
|
||
window.addEventListener("keydown", handleEnregistrementModalKeydown)
|
||
|
||
if (!instrumentsItems.value?.length) {
|
||
refreshInstruments()
|
||
}
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("keydown", handleEnregistrementModalKeydown)
|
||
})
|
||
|
||
const instruments_categories = computed(() => {
|
||
const groups = new Map()
|
||
|
||
for (const instrument of instrumentsItems.value || []) {
|
||
const categoryName = instrument.instrument_categorie || "Sans catégorie"
|
||
|
||
if (!groups.has(categoryName)) {
|
||
groups.set(categoryName, {
|
||
id: categoryName,
|
||
nom_categorie: categoryName,
|
||
instruments_list: [],
|
||
})
|
||
}
|
||
|
||
groups.get(categoryName).instruments_list.push(instrument)
|
||
}
|
||
|
||
return Array.from(groups.values())
|
||
})
|
||
|
||
const openedInstrumentDescriptions = ref({})
|
||
const openedEnregistrementDescription = ref(null)
|
||
|
||
const quoteForm = reactive({
|
||
requestType: "",
|
||
name: "",
|
||
email: "",
|
||
phone: "",
|
||
organization: "",
|
||
message: "",
|
||
})
|
||
|
||
const quoteFormErrors = reactive({
|
||
requestType: "",
|
||
name: "",
|
||
email: "",
|
||
phone: "",
|
||
organization: "",
|
||
message: "",
|
||
})
|
||
|
||
const quoteSubmitting = ref(false)
|
||
const quoteSubmitSuccess = ref(false)
|
||
const quoteSubmitError = ref("")
|
||
const quoteEmailsSent = ref(false)
|
||
|
||
function openEnregistrementDescription(enregistrement) {
|
||
openedEnregistrementDescription.value = enregistrement
|
||
}
|
||
|
||
function closeEnregistrementDescription() {
|
||
openedEnregistrementDescription.value = null
|
||
}
|
||
|
||
function handleEnregistrementModalKeydown(event) {
|
||
if (event.key === "Escape") {
|
||
closeEnregistrementDescription()
|
||
}
|
||
}
|
||
|
||
function toggleInstrumentDescription(instrumentId) {
|
||
openedInstrumentDescriptions.value[instrumentId] = !openedInstrumentDescriptions.value[instrumentId]
|
||
}
|
||
|
||
function resetQuoteFormErrors() {
|
||
quoteFormErrors.requestType = ""
|
||
quoteFormErrors.name = ""
|
||
quoteFormErrors.email = ""
|
||
quoteFormErrors.phone = ""
|
||
quoteFormErrors.organization = ""
|
||
quoteFormErrors.message = ""
|
||
}
|
||
|
||
function validateQuoteForm() {
|
||
resetQuoteFormErrors()
|
||
|
||
let isValid = true
|
||
|
||
if (!quoteForm.requestType) {
|
||
quoteFormErrors.requestType = "Le type de demande est obligatoire."
|
||
isValid = false
|
||
}
|
||
|
||
if (!quoteForm.name) {
|
||
quoteFormErrors.name = "Le nom est obligatoire."
|
||
isValid = false
|
||
}
|
||
|
||
if (!quoteForm.email) {
|
||
quoteFormErrors.email = "L’email est obligatoire."
|
||
isValid = false
|
||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(quoteForm.email)) {
|
||
quoteFormErrors.email = "L’email n’est pas valide."
|
||
isValid = false
|
||
}
|
||
|
||
if (!quoteForm.phone) {
|
||
quoteFormErrors.phone = "Le téléphone est obligatoire."
|
||
isValid = false
|
||
}
|
||
|
||
if (!quoteForm.organization) {
|
||
quoteFormErrors.organization = "La structure est obligatoire."
|
||
isValid = false
|
||
}
|
||
|
||
if (!quoteForm.message) {
|
||
quoteFormErrors.message = "Le message est obligatoire."
|
||
isValid = false
|
||
}
|
||
|
||
return isValid
|
||
}
|
||
|
||
async function submitQuoteRequest() {
|
||
quoteSubmitSuccess.value = false
|
||
quoteSubmitError.value = ""
|
||
quoteEmailsSent.value = false
|
||
|
||
if (!validateQuoteForm()) {
|
||
return
|
||
}
|
||
|
||
quoteSubmitting.value = true
|
||
|
||
try {
|
||
const response = await $fetch("/api/studio-demandes", {
|
||
method: "POST",
|
||
body: {
|
||
requestType: quoteForm.requestType,
|
||
name: quoteForm.name,
|
||
email: quoteForm.email,
|
||
phone: quoteForm.phone,
|
||
organization: quoteForm.organization,
|
||
message: quoteForm.message,
|
||
},
|
||
})
|
||
|
||
quoteSubmitSuccess.value = true
|
||
quoteEmailsSent.value = Boolean(response?.emailsSent)
|
||
quoteForm.requestType = ""
|
||
quoteForm.name = ""
|
||
quoteForm.email = ""
|
||
quoteForm.phone = ""
|
||
quoteForm.organization = ""
|
||
quoteForm.message = ""
|
||
resetQuoteFormErrors()
|
||
} catch (error) {
|
||
quoteSubmitError.value = error?.data?.statusMessage || "L’envoi de la demande a échoué."
|
||
} finally {
|
||
quoteSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
|
||
function formatKoToMo(sizeInKo) {
|
||
if (typeof sizeInKo !== "number") return ""
|
||
|
||
return `${(sizeInKo / 1024).toFixed(1)} Mo`
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
|
||
.breadcrum_wp {
|
||
padding-top: 30px;
|
||
}
|
||
|
||
|
||
|
||
// =======================
|
||
// SPÉCIFIQUE À CETTE PAGE
|
||
// =======================
|
||
.studio-page {
|
||
|
||
|
||
.fiche_description {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding-bottom: 10px;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
> * {
|
||
max-width: 640px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
|
||
.contact_spe_wp {
|
||
background-color: var(--c-background-jaune-clair);
|
||
margin-top: 50px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
</style>
|