refactor(compositions): reorganise composition to ease LyonJS needs (#…

…1185)
lyonjs · Dec 31, 2024 · 6cc773b · 6cc773b
1 parent dd7910a
commit 6cc773b
Show file tree

Hide file tree

Showing 22 changed files with 257 additions and 551 deletions.
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
@@ -36,50 +36,6 @@ jobs:
       - run: pnpm install --frozen-lockfile --prefer-offline
       - run: pnpm prettier --check .
 
-  generateVideos:
-    needs:
-      - test
-      - format
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        composition:
-          - name: "Sponsor"
-            props:
-              companyName: "Foo"
-          - name: "Talk"
-            props:
-              title: "Example of a Title"
-              speakersNames: "John Doe"
-          - name: "Meetup"
-            props:
-              title: "#76 - LyonJS de la rentrée 🦁"
-              date: "28 septembre 2022"
-
-    name: 📽 Generating ${{matrix.composition.name}}
-    steps:
-      - run: sudo apt update
-      - run: sudo apt install ffmpeg
-      - uses: actions/checkout@main
-      - uses: pnpm/[email protected]
-        name: Install pnpm
-        with:
-          version: 8
-      - uses: actions/setup-node@main
-        with:
-          cache: pnpm
-      - run: pnpm install --frozen-lockfile --prefer-offline
-      - run: echo $WORKFLOW_INPUT > input-props.json
-        env:
-          WORKFLOW_INPUT: ${{ toJson(matrix.event.inputs) }}
-      - run: pnpm remotion render remotion/index.tsx ${{matrix.composition.name}} out/${{matrix.composition.name}}.mp4 --props="./input-props.json"
-      - uses: actions/upload-artifact@v4
-        with:
-          name: video-${{matrix.composition.name}}
-          path: out
-          if-no-files-found: "error"
-          compression-level: 0
-
   nextjs:
     name: ⚛️ NextJS application
     runs-on: ubuntu-latest

diff --git a/remotion/Video.tsx b/remotion/Video.tsx
@@ -2,14 +2,16 @@ import React from 'react';
 import {Folder} from 'remotion';
 
 import {ShowcasesComposition} from './compositions/showcases/Showcases.composition';
-import {TemplatesComposition} from './compositions/templates/Templates.composition';
+import {LyonJSMeetup} from './compositions/templates/LyonJSMeetup.composition';
+import {MeetupToolKit} from './compositions/templates/MeetupToolKit.composition';
 import {AtomsComposition} from './design/atoms/Atoms.composition';
 import {MoleculesComposition} from './design/molecules/Molecules.composition';
 
 export const RemotionRoot: React.FC = () => {
 	return (
 		<>
-			<TemplatesComposition />
+			<LyonJSMeetup />
+			<MeetupToolKit />
 			<ShowcasesComposition />
 			<Folder name="Design">
 				<AtomsComposition />

diff --git a/remotion/compositions/showcases/Showcases.composition.tsx b/remotion/compositions/showcases/Showcases.composition.tsx
@@ -17,7 +17,7 @@ import {VolcampComposition} from './volcamp/Volcamp.composition';
 
 export const ShowcasesComposition: React.FC = () => {
 	return (
-		<Folder name="Showcases">
+		<Folder name="Conferences">
 			<LyonJSComposition />
 			<AlpesCraftComposition />
 			<TouraineTechComposition />

diff --git a/remotion/compositions/showcases/lyonJS/Replay.tsx b/remotion/compositions/showcases/lyonJS/Replay.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
 import {AbsoluteFill, Audio, interpolate, Sequence, staticFile} from 'remotion';
+import {z} from 'zod';
 
 import {BackgroundTriangle} from '../../../design/atoms/BackgroundTriangle';
-import {Speaker} from '../../../types/defaultProps.types';
+import {SpeakerSchema} from '../showcases.types';
 
 import {BigSpeakers} from './BigSpeakers';
 import {Details} from './Details';
 import {Logo} from './Logo';
 import {LogoSponsor} from './LogoSponsor';
 import {TalkTitle} from './TalkTitle';
 
-export type LyonJSReplayType = {
-	title: string;
-	date: string;
-	sponsor: string;
-	speakers: Speaker[];
-};
+export const LyonJSReplaySchema = z.object({
+	title: z.string(),
+	date: z.string(),
+	sponsor: z.string(),
+	speakers: z.array(SpeakerSchema),
+});
 
-export const ReplayLyonJS: React.FC<LyonJSReplayType> = ({
+export const ReplayLyonJS: React.FC<z.infer<typeof LyonJSReplaySchema>> = ({
 	title,
 	speakers,
 	date,

diff --git a/remotion/compositions/templates/LyonJSMeetup.composition.tsx b/remotion/compositions/templates/LyonJSMeetup.composition.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import {Composition, Folder} from 'remotion';
+
+import {LyonJSReplaySchema, ReplayLyonJS} from '../showcases/lyonJS/Replay';
+
+import {LayersComposition} from './layers/Layers.composition';
+import {Meetup, MeetupSchema} from './meetup/Meetup';
+import {Silhouette, SilhouetteSchema} from './silhouette/Silhouette';
+import {SponsorsComposition} from './sponsors/Sponsors.composition';
+import {TalkBranded} from './talk/branded/TalkBranded';
+import {Talk} from './talk/Talk';
+import {TalkBrandedSchema, TalkSchema} from './talk/talks.types';
+
+const startingDate = new Date(2023, 3, 18, 13);
+
+export const LyonJSMeetup: React.FC = () => {
+	return (
+		<Folder name="LyonJS">
+			<Composition
+				component={Talk}
+				width={1200}
+				height={1200}
+				id="LyonJS-Talk"
+				fps={30}
+				durationInFrames={120}
+				schema={TalkSchema}
+				defaultProps={{
+					speakersNames: 'John Doe',
+					titleColor: '#efdb50',
+					talkTitle: 'Is JS an awesome programing language ?',
+					titleSize: 80,
+					backgroundImg:
+						'https://github.com/lyonjs/shortvid.io/blob/48ffea960b300eb9230786ed0ab043ec3387e877/public/images/showcases/lyonjs/defaultBackgroundImage.jpeg?raw=true',
+					speakerPicture:
+						'https://raw.githubusercontent.com/lyonjs/shortvid.io/main/public/images/common/defaultAvatar.svg',
+					eventLogo:
+						'https://github.com/lyonjs/shortvid.io/blob/main/public/images/showcases/lyonjs/lyonjsSquaredLogo.png?raw=true',
+				}}
+			/>
+			<Composition
+				component={TalkBranded}
+				width={1280}
+				height={720}
+				id="LyonJS-Talk-Alternate"
+				fps={30}
+				durationInFrames={140}
+				schema={TalkBrandedSchema}
+				defaultProps={{
+					backgroundColor: '#efdb50',
+					title: 'Certification “Google Cloud Architect”',
+					startingDate,
+					location: '5 Place Jules Ferry, 69006.',
+					logoUrl:
+						'https://github.com/lyonjs/shortvid.io/blob/main/public/images/showcases/lyonjs/lyonjsSquaredLogo.png?raw=true',
+					speakers: [
+						{
+							pictureUrl:
+								'https://res.cloudinary.com/startup-grind/image/upload/c_fill,dpr_2.0,f_auto,g_center,h_250,q_auto:good,w_250/v1/gcs/platform-data-goog/events/20200911_094649_MbC4W4N.jpg',
+							name: 'Julien Landuré',
+							company: 'Zenika Nantes',
+							job: 'CTO / GDE',
+						},
+					],
+				}}
+			/>
+			<Composition
+				component={Silhouette}
+				width={1280}
+				height={720}
+				id="LyonJS-Talk-Silhouette"
+				fps={30}
+				durationInFrames={120}
+				schema={SilhouetteSchema}
+				defaultProps={{
+					backgroundImg:
+						'https://github.com/lyonjs/shortvid.io/blob/48ffea960b300eb9230786ed0ab043ec3387e877/public/images/showcases/lyonjs/defaultBackgroundImage.jpeg?raw=true',
+					title: 'Example of title for the template 🚀',
+					silhouetteUrl:
+						'https://user-images.githubusercontent.com/6263857/230662773-4d7a534a-e01c-4ba8-9c3b-fa95586adf52.png',
+					side: 'right',
+					logoUrl:
+						'https://github.com/lyonjs/shortvid.io/blob/main/public/images/showcases/lyonjs/lyonjsSquaredLogo.png?raw=true',
+				}}
+			/>
+			<Composition
+				component={Meetup}
+				width={1200}
+				height={1200}
+				id="LyonJS-Meetup-Announce"
+				fps={30}
+				durationInFrames={270}
+				schema={MeetupSchema}
+				defaultProps={{
+					title: '#76 - LyonJS de la rentrée 🦁',
+					date: '28 septembre 2022',
+					backgroundImg:
+						'https://github.com/lyonjs/shortvid.io/blob/48ffea960b300eb9230786ed0ab043ec3387e877/public/images/showcases/lyonjs/defaultBackgroundImage.jpeg?raw=true',
+					eventLogo:
+						'https://github.com/lyonjs/shortvid.io/blob/main/public/images/showcases/lyonjs/lyonjsSquaredLogo.png?raw=true',
+				}}
+			/>
+			<Composition
+				width={1920}
+				height={1080}
+				id="LyonJS-Replay"
+				fps={60}
+				durationInFrames={320}
+				component={ReplayLyonJS}
+				schema={LyonJSReplaySchema}
+				defaultProps={{
+					title: 'Meetup #80 : Projet XState',
+					speakers: [
+						{
+							name: 'Maxime Blanc',
+							picture:
+								'https://ca.slack-edge.com/T108ZKPMF-U3VL71HHU-179292d5d86f-512',
+						},
+					],
+					date: '8 férvrier 2023',
+					sponsor:
+						'https://s3.eu-west-3.amazonaws.com/moovijob.prod/1494438/Horizontal_Black_Logo-Zenika.png',
+				}}
+			/>
+			<LayersComposition />
+			<SponsorsComposition />
+		</Folder>
+	);
+};
diff --git a/remotion/compositions/templates/MeetupToolKit.composition.tsx b/remotion/compositions/templates/MeetupToolKit.composition.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import {Composition, Folder} from 'remotion';
+
+import {Talk} from './talk/Talk';
+import {TalkSchema} from './talk/talks.types';
+
+export const MeetupToolKit: React.FC = () => {
+	return (
+		<Folder name="Meetup-ToolKit">
+			<Folder name="HumanTalk">
+				<Composition
+					component={Talk}
+					width={1200}
+					height={1200}
+					id="HumanTalk-Talk"
+					fps={30}
+					durationInFrames={120}
+					schema={TalkSchema}
+					defaultProps={{
+						speakersNames: 'John Doe',
+						titleColor: '#772757',
+						talkTitle: 'Is JS an awesome programing language ?',
+						titleSize: 80,
+						backgroundImg:
+							'https://humantalks.com/assets/talks-10min-eabec95a48239e06c9dfb2c466874a3c734c54b579d38cf98a1135eb3f293c5e.jpg',
+						speakerPicture:
+							'https://raw.githubusercontent.com/lyonjs/shortvid.io/main/public/images/common/defaultAvatar.svg',
+						eventLogo:
+							'https://humantalks.com/assets/logo-HumanTalks-b238463e6389c198a989506119f06d0d0ef836cc90a3c7713939c0ae09eb5f76.png',
+					}}
+				/>
+			</Folder>
+			<Folder name="ParisJS">
+				<Composition
+					component={Talk}
+					width={1200}
+					height={1200}
+					id="ParisJS-Talk"
+					fps={30}
+					durationInFrames={120}
+					schema={TalkSchema}
+					defaultProps={{
+						speakersNames: 'John Doe',
+						titleColor: '#e14680',
+						talkTitle: 'Is JS an awesome programing language ?',
+						titleSize: 80,
+						backgroundImg:
+							'https://secure.meetupstatic.com/photos/event/4/e/2/0/highres_466520000.webp',
+						speakerPicture:
+							'https://raw.githubusercontent.com/lyonjs/shortvid.io/main/public/images/common/defaultAvatar.svg',
+						eventLogo:
+							'https://secure-content.meetupstatic.com/images/classic-events/499980504/128x128.jpg',
+					}}
+				/>
+			</Folder>
+			<Folder name="StrasbourgJS">
+				<Composition
+					component={Talk}
+					width={1200}
+					height={1200}
+					id="StrasbourgJS-Talk"
+					fps={30}
+					durationInFrames={120}
+					schema={TalkSchema}
+					defaultProps={{
+						speakersNames: 'John Doe',
+						titleColor: '#FFCC4A',
+						talkTitle: 'Is JS an awesome programing language ?',
+						titleSize: 80,
+						backgroundImg:
+							'https://secure.meetupstatic.com/photos/event/3/5/b/8/highres_415693752.webp',
+						speakerPicture:
+							'https://raw.githubusercontent.com/lyonjs/shortvid.io/main/public/images/common/defaultAvatar.svg',
+						eventLogo:
+							'https://secure-content.meetupstatic.com/images/classic-events/493856926/128x128.jpg',
+					}}
+				/>
+			</Folder>
+		</Folder>
+	);
+};
diff --git a/remotion/compositions/templates/Templates.composition.tsx b/remotion/compositions/templates/Templates.composition.tsx
diff --git a/remotion/compositions/templates/carousel/Carousel.composition.tsx b/remotion/compositions/templates/carousel/Carousel.composition.tsx