avec son dans ascenseur

package.json

@@ -18,9 +18,11 @@
     "@mui/icons-material": "^6.0.1",
     "@mui/material": "^6.0.1",
     "@tanstack/react-query": "^5.53.1",
+    "@types/howler": "^2.2.11",
     "apollo3-cache-persist": "^0.15.0",
     "date-fns": "^3.6.0",
     "graphql": "^16.9.0",
+    "howler": "^2.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

src/components/composant-ecran.tsx

@@ -5,6 +5,7 @@ import {format} from "date-fns";
 import {ConfigEcran, Talk} from "src/types.ts";
 import {AFFICHES_ZONE} from "src/data/configsAffichagesZones.ts";
 import {
+  ASCENSEUR_EFFRAYANT,
   ECRAN_ESCALIER_TITAN,
   ECRANS_ASCENSEUR_SPEAKER,
   ECRANS_COULOIR_GRANDE_HALL,
@@ -17,6 +18,7 @@ import {DefaultRemotion} from "src/remotion/components/default-remotion.tsx";
 import {GrandEcranTitanRemotion} from "src/remotion/components/grand-ecran-titan-remotion.tsx";
 import {EcranPlatGrandeGalerieRemotion} from "src/remotion/components/ecran-plat-grande-galerie-remotion.tsx";
 import {AffichageZoneRemotion} from "src/remotion/components/affichage-zone-remotion.tsx";
+import {ScaryElevatorRemotion} from "src/remotion/components/scary-elevator-remotion.tsx";
 
 export const ComposantEcran: React.FC<{ planning?: Talk[] } & ConfigEcran> = ({planning, ...configEcran}) => {
 
@@ -46,6 +48,9 @@ export const ComposantEcran: React.FC<{ planning?: Talk[] } & ConfigEcran> = ({p
       if (estParmisEcrans(configEcran.id, ECRANS_ASCENSEUR_SPEAKER)) {
         return <PhraseRemotion title={"Level 1:  Speaker Room"}/>
       }
+      if (configEcran.id == ASCENSEUR_EFFRAYANT.id) {
+        return <ScaryElevatorRemotion/>
+      }
       if (configEcran.directions) {
         return <DirectionRemotion directions={configEcran.directions} portrait={isPortrait}/>
       }

src/components/superviseur.tsx

@@ -1,4 +1,12 @@
-import {ECRANS, ECRANS_AUTRES, ECRANS_DIRECTION, ECRANS_SALLES} from "src/data/Ecrans.ts";
+import {
+  ECRANS,
+  ECRANS_ASCENSEUR,
+  ECRANS_AUTRES,
+  ECRANS_BARS,
+  ECRANS_DIRECTION,
+  ECRANS_SALLES,
+  ECRANS_VESTIAIRE
+} from "src/data/Ecrans.ts";
 import React from "react";
 import {ConfigEcran} from "src/types.ts";
 import {useSearchParams} from "react-router-dom";
@@ -21,24 +29,34 @@ export function Superviseur() {
                   style={{marginRight: '10px'}}>[{ecran.id}] {ecran.nom}</a>
       })
     }</div>
-    <h1>Salles</h1>
-    <div className={"superviseur"}>
-      {ECRANS_SALLES.map((ecran) => {
-        return <IframeEcran key={ecran.id} ecran={ecran}/>;
-      })}
-    </div>
-    <h1>Directions</h1>
-    <div className={"superviseur"}>
-      {ECRANS_DIRECTION.map((ecran) => {
-        return <IframeEcran key={ecran.id} ecran={ecran}/>;
-      })}
-    </div>
-    <h1>Autres</h1>
-    <div className={"superviseur"}>
-      {ECRANS_AUTRES.map((ecran) => {
-        return <IframeEcran key={ecran.id} ecran={ecran}/>;
-      })}
-    </div>
+    {[{
+      title: "Salles",
+      ecrans: ECRANS_SALLES
+    }, {
+      title: "Directions",
+      ecrans: ECRANS_DIRECTION
+    }, {
+      title: "Autres",
+      ecrans: ECRANS_AUTRES
+    }, {
+      title: "Ascenseurs",
+      ecrans: ECRANS_ASCENSEUR
+    }, {
+      title: "Bars",
+      ecrans: ECRANS_BARS
+    }, {
+      title: "Vestiaire",
+      ecrans: ECRANS_VESTIAIRE
+    }].map(({title, ecrans}) => (
+      <>
+        <h1>{title}</h1>
+        <div className={"superviseur"}>
+          {ecrans.map((ecran) => {
+            return <IframeEcran key={ecran.id} ecran={ecran}/>;
+          })}
+        </div>
+      </>
+    ))}
   </>;
 }
 

src/data/Ecrans.ts

@@ -413,16 +413,17 @@ export const ECRANS_ASCENSEUR_SPEAKER: ConfigEcran[] = [
     tags: ['ascenseur'],
   }
 ]
+export const ASCENSEUR_EFFRAYANT: ConfigEcran = {
+  id: 'ASC3',
+  nom: 'Ascenseur',
+  ratio: '16_9',
+  resolution: '1920x1080',
+  orientation: 'landscape',
+  tags: ['ascenseur'],
+};
 export const ECRANS_ASCENSEUR: ConfigEcran[] = [
   ...ECRANS_ASCENSEUR_SPEAKER,
-  {
-    id: 'ASC3',
-    nom: 'Ascenseur',
-    ratio: '16_9',
-    resolution: '1920x1080',
-    orientation: 'landscape',
-    tags: ['ascenseur'],
-  }
+  ASCENSEUR_EFFRAYANT
 ]
 
 export const ECRANS_VESTIAIRE: ConfigEcran[] = [

src/main.tsx

@@ -12,11 +12,9 @@ import {Superviseur} from "src/components/superviseur.tsx";
 let buildTime: string
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={new QueryClient()}>
-      <App/>
-    </QueryClientProvider>
-  </React.StrictMode>,
+  <QueryClientProvider client={new QueryClient()}>
+    <App/>
+  </QueryClientProvider>
 )
 
 function App() {

src/remotion/components/default-remotion.tsx

@@ -5,6 +5,7 @@ import {
 import {DevfestNantesDefault} from "src/remotion/compositions/showcases/devfestNantes/DevfestNantesDefault.tsx";
 import {Player} from "@remotion/player";
 
+
 export const DefaultRemotion: React.FC<{ portrait?: boolean }> = ({portrait}) => {
   const currentTemplate = portrait ? {
     compositionName: 'DevfestNantesDefaultTotem',

src/remotion/components/scary-elevator-remotion.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {Howl} from 'howler';
+import {DefaultRemotion} from "src/remotion/components/default-remotion.tsx";
+
+
+export const ScaryElevatorRemotion: typeof DefaultRemotion = (props) => {
+
+  const sound = React.useMemo(() => new Howl({
+    src: ['scary-elevator-short.mp3'],
+    volume: 0.1
+  }), [])
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      sound.play()
+    }, 60000)
+    return () => {
+      sound.stop()
+      clearInterval(interval)
+    }
+  }, [])
+  return <>
+    <div style={{height: '100%', width: '100%', position: 'absolute', zIndex: 1000}} onClick={() => sound.play()}></div>
+    <DefaultRemotion {...props}/>
+  </>
+}