Skip to content

Commit

Permalink
gestion citd + fix divers
Browse files Browse the repository at this point in the history
  • Loading branch information
ArtyMaury committed Oct 14, 2024
1 parent 5a7201b commit 2370b3e
Show file tree
Hide file tree
Showing 13 changed files with 266 additions and 40 deletions.
15 changes: 15 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@
"@tanstack/react-query": "^5.53.1",
"@types/howler": "^2.2.11",
"apollo3-cache-persist": "^0.15.0",
"classnames": "^2.5.1",
"date-fns": "^3.6.0",
"graphql": "^16.9.0",
"howler": "^2.2.4",
"qrcode.react": "^4.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
Expand Down
8 changes: 5 additions & 3 deletions src/components/composant-ecran.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {GrandEcranTitanRemotion} from "src/remotion/components/grand-ecran-titan
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";
import {PlanningCitd} from "src/remotion/components/planning-citd.tsx";

export const ComposantEcran: React.FC<{ planning?: Talk[] } & ConfigEcran> = ({planning, ...configEcran}) => {

Expand All @@ -32,7 +33,7 @@ export const ComposantEcran: React.FC<{ planning?: Talk[] } & ConfigEcran> = ({p
}, [])

const isSalle = configEcran.tags?.includes("room");
const estPremierJour = currentDate.getDate() <= 17;
const estPremierJour = currentDate.getDate() == 17;
const estDeuxiemeJour = currentDate.getDate() == 18;
const heure = format(currentDate, "HH:mm");

Expand All @@ -57,6 +58,9 @@ export const ComposantEcran: React.FC<{ planning?: Talk[] } & ConfigEcran> = ({p
if (configEcran.tags?.includes("vestiaire")) {
return EcranVestiaire(estPremierJour, currentDate, isPortrait, estDeuxiemeJour);
}
if (configEcran.nom == 'Code In The Dark') {
return <PlanningCitd portrait={isPortrait}/>
}

if (heure > "18:30" && estPremierJour) {
return <PhraseRemotion
Expand Down Expand Up @@ -91,8 +95,6 @@ export const ComposantEcran: React.FC<{ planning?: Talk[] } & ConfigEcran> = ({p
if (isSalle) {
const {talkEnCours, prochainTalk} = calculerTalksSalle(configEcran, currentDate, planning);

// TODO Gérer Annulation

if (talkEnCours) {
return <TalkRemotion talk={talkEnCours} portrait={isPortrait} displayName={configEcran.displayName}/>
} else if (prochainTalk) {
Expand Down
20 changes: 16 additions & 4 deletions src/data/Ecrans.ts
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,10 @@ export const ECRANS_DIRECTION: ConfigEcran[] = [
nom: 'Les Machines',
sens: 'gauche'
},
{
nom: 'Code in the Dark',
sens: 'gauche'
},
{
nom: 'Goodies',
sens: 'gauche'
Expand All @@ -254,6 +258,10 @@ export const ECRANS_DIRECTION: ConfigEcran[] = [
nom: 'Les Machines',
sens: 'gauche'
},
{
nom: 'Code in the Dark',
sens: 'haut'
},
{
nom: 'Tour Bretagne',
sens: 'droite'
Expand All @@ -275,6 +283,10 @@ export const ECRANS_DIRECTION: ConfigEcran[] = [
{
nom: 'Les Machines',
sens: 'gauche'
},
{
nom: 'Code in the Dark',
sens: 'gauche'
}
]
},
Expand All @@ -301,7 +313,7 @@ export const ECRANS_DIRECTION: ConfigEcran[] = [
tags: [],
directions: [{
nom: 'Salle speaker            Speaker Room                  Elevator Button 1',
sens: 'bas'
sens: 'haut'
}]
},
{
Expand All @@ -313,7 +325,7 @@ export const ECRANS_DIRECTION: ConfigEcran[] = [
tags: [],
directions: [
{
nom: 'DeLorean', // TODO animation R0
nom: 'Animation Fouloscopie                 La science des Rumeurs!                  Jeudi 10h & 14h',
sens: 'bas'
}
]
Expand Down Expand Up @@ -532,15 +544,15 @@ export const ECRANS_AUTRES: ConfigEcran[] = [
},
{
id: 'SALB',
nom: 'Stockage Foyer Bas',
nom: 'Code In The Dark',
ratio: '16_9',
resolution: '1920x1080',
orientation: 'portrait',
tags: [],
},
{
id: 'SALC',
nom: 'Stockage Foyer Bas',
nom: 'Code In The Dark',
ratio: '16_9',
resolution: '1920x1080',
orientation: 'portrait',
Expand Down
110 changes: 110 additions & 0 deletions src/remotion/components/planning-citd.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React from "react";
import {Player} from "@remotion/player";
import {
DevfestNantesCustomContentTotem
} from "src/remotion/compositions/showcases/devfestNantes/DevfestNantesCustomContentTotem.tsx";
import {
DevfestNantesCustomContent
} from "src/remotion/compositions/showcases/devfestNantes/DevfestNantesCustomContent.tsx";
import {TalkTitle} from "src/remotion/compositions/showcases/devfestNantes/TalkTitle.tsx";
import {useCurrentDate} from "src/helpers.ts";
import {format} from "date-fns";
import classnames from "classnames";
import {QRCodeSVG} from "qrcode.react";

export const PlanningCitd: React.FC<{ portrait?: boolean }> = ({portrait}) => {

const currentTemplate = portrait ? {
compositionName: 'DevfestNantesPlanningCitdTotem',
component: DevfestNantesPlanningCitdTotem,
width: 720,
height: 1280,
durationInFrames: 350,
} : {
compositionName: 'DevfestNantesPlanningCitd',
component: DevfestNantesPlanningCitd,
width: 1280,
height: 720,
durationInFrames: 350,
};
return <Player
autoPlay
controls={false}
loop
style={{
width: '100%',
aspectRatio: '16/9',
}}
durationInFrames={currentTemplate.durationInFrames}
compositionWidth={currentTemplate.width}
compositionHeight={currentTemplate.height}
fps={30}
component={currentTemplate.component as never}
/>
}

const DevfestNantesPlanningCitdTotem = () => {
const currentDate = useCurrentDate()
const estPremierJour = currentDate.getDate() == 17;
const estDeuxiemeJour = currentDate.getDate() == 18;
const heure = format(currentDate, "HH:mm");
return <DevfestNantesCustomContentTotem>
<TalkTitle title={"Code In The Dark"} style={{bottom: "unset", top: "300px", fontSize: "30px"}}
isTotemDisplayMode={true}/>
{estDeuxiemeJour && heure > '12:00' ?
<>
<TalkTitle style={{fontSize: "20px", top: "400px"}}
isTotemDisplayMode={true}>
<p>C'est fini pour cette année</p>
<p>Mais essayez chez vous !</p>
<QRCodeSVG value={"https://citd.gdgnantes.com"} size={300} bgColor={"#e4585cba"}/>
</TalkTitle>

</>
:
<TalkTitle isTotemDisplayMode={true} style={{textAlign: "left", width: "80%"}}>
<p>Prochaines séances:</p>
<ul>
<li className={classnames(estDeuxiemeJour || (estPremierJour && heure >= '12:00') && 'crossed')}>Jeudi 11h10
</li>
<li className={classnames(estDeuxiemeJour || (estPremierJour && heure >= '16:00') && 'crossed')}>Jeudi 15h10
</li>
<li>Vendredi 11h10</li>
</ul>
</TalkTitle>
}
</DevfestNantesCustomContentTotem>
}

const DevfestNantesPlanningCitd = () => {
const currentDate = useCurrentDate()
const estPremierJour = currentDate.getDate() == 17;
const estDeuxiemeJour = currentDate.getDate() == 18;
const heure = format(currentDate, "HH:mm");
return <DevfestNantesCustomContent>
<TalkTitle title={"Code In The Dark"} style={{bottom: "unset", top: "150px", fontSize: "30px"}}
isTotemDisplayMode={true}/>
{estDeuxiemeJour && heure > '12:00' ?
<>
<TalkTitle style={{fontSize: "20px", top: "250px"}}
isTotemDisplayMode={true}>
<p>C'est fini pour cette année</p>
<p>Mais essayez chez vous !</p>
<QRCodeSVG value={"https://citd.gdgnantes.com"} size={200} bgColor={"#e4585cba"}/>
</TalkTitle>

</>
:
<TalkTitle isTotemDisplayMode={true} style={{top: "250px", width: "60%"}}>
<p>Prochaines séances:</p>
<ul>
<li className={classnames(estDeuxiemeJour || (estPremierJour && heure >= '12:00') && 'crossed')}>Jeudi 11h10
</li>
<li className={classnames(estDeuxiemeJour || (estPremierJour && heure >= '16:00') && 'crossed')}>Jeudi 15h10
</li>
<li>Vendredi 11h10</li>
</ul>
</TalkTitle>
}
</DevfestNantesCustomContent>
}
12 changes: 6 additions & 6 deletions src/remotion/compositions/showcases/devfestNantes/Details.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { loadLocalFont } from "../../../../../src/utils/loadFont";
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import {loadLocalFont} from "../../../../../src/utils/loadFont";
import {interpolate, spring, useCurrentFrame, useVideoConfig} from "remotion";

import { TalkDetails } from "../../../design/molecules/TalkDetails";
import {TalkDetails} from "../../../design/molecules/TalkDetails";

loadLocalFont("HigherJump", "font/HigherJump.ttf", "truetype");

Expand All @@ -11,14 +11,14 @@ export const Details: React.FC<{
location?: string;
style?: React.CSSProperties;
isTotemDisplayMode?: boolean;
}> = ({ date, time, location, style, isTotemDisplayMode }) => {
}> = ({date, time, location, style, isTotemDisplayMode}) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const {fps} = useVideoConfig();

const drop = spring({
frame: frame,
from: -40,
to: isTotemDisplayMode ? 150 : 20,
to: isTotemDisplayMode ? 100 : 20,
fps,
durationInFrames: 40,
});
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {loadFont} from "@remotion/google-fonts/CrimsonText";
import {AbsoluteFill, Sequence, staticFile} from "remotion";
import {BackgroundFiller} from "../../../design/atoms/BackgroundFiller";

import {Logo} from "./Logo";
import {Moon} from "./Moon";
import {Trees} from "./Trees";

const {fontFamily} = loadFont();
export const DevfestNantesCustomContent: React.FC<React.PropsWithChildren> = ({children}) => {
return (
<AbsoluteFill
style={{
overflow: "hidden",
fontFamily,
textTransform: "uppercase",
}}
>
<Sequence>
<BackgroundFiller
imageUrl={staticFile(
"/images/showcases/devfestNantes/background-filler-paysage.webp"
)}
style={{
transform: "scale(1)",
}}
/>
</Sequence>
<Sequence from={110}>
<Moon/>
</Sequence>
<Sequence from={30}>
<Trees/>
</Sequence>
<Sequence>
<Logo/>
</Sequence>
{children}
</AbsoluteFill>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {loadFont} from "@remotion/google-fonts/CrimsonText";
import {AbsoluteFill, Sequence, staticFile,} from "remotion";

import {BackgroundFiller} from "../../../design/atoms/BackgroundFiller";
import {Logo} from "./Logo";
import {Moon} from "./Moon";
import {Trees} from "./Trees";

const {fontFamily} = loadFont();

export const DevfestNantesCustomContentTotem: React.FC<React.PropsWithChildren> = ({children}) => {
return (
<AbsoluteFill
style={{
overflow: "hidden",
fontFamily,
textTransform: "uppercase",
}}
>
<Sequence>
<BackgroundFiller
imageUrl={staticFile(
"/images/showcases/devfestNantes/background-filler-totem.webp"
)}
style={{
transform: "scale(1)",
}}
/>
</Sequence>
<Sequence>
<Logo isTotemDisplayMode/>
</Sequence>
<Sequence from={30}>
<Trees/>
</Sequence>
<Sequence from={110}>
<Moon isTotemDisplayMode/>
</Sequence>
{children}
</AbsoluteFill>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const DevfestNantesTalk = ({
transform: `translateY(${SlideDown}px)`,
}}
>
<Sequence name="Speakers" from={30}>
<Sequence name="Speakers" from={30} style={{inset: "20px"}}>
<Speakers speakers={speakers ?? []}/>
<TalkTitle
title={title}
Expand Down
2 changes: 1 addition & 1 deletion src/remotion/compositions/showcases/devfestNantes/Logo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Logo = ({isTotemDisplayMode = false}: ComponentDisplayMode) => {

return (
<Img
src={staticFile("/images/showcases/devfestNantes/logo-devfest-2024.webp")}
src={staticFile("/images/showcases/devfestNantes/logo-devfest-2024.svg")}
width={logoWidth}
height="auto"
style={{
Expand Down
Loading

0 comments on commit 2370b3e

Please sign in to comment.