feat: adding event video generator

package.json

@@ -29,7 +29,6 @@
 		"@types/react-dom": "18.0.6",
 		"@types/web": "0.0.75",
 		"autoprefixer": "10.4.12",
-		"eslint": "8.23.0",
 		"eslint": "8.25.0",
 		"husky": "8.0.1",
 		"postcss": "8.4.18",

pages/_app.jsx

@@ -91,17 +91,22 @@ export default ({Component, pageProps}) => {
 					</ActiveLink>
 					<ActiveLink href="/meetup">
 						<li className="text-black mt-2 md:mt-0 md:ml-5 py-2 px-4 bg-white rounded-lg cursor-pointer font-bold shadow-yellow-300 hover:scale-105">
-							<a>🗓 Meetup announce</a>
+							<a>🗓 Meetup</a>
 						</li>
 					</ActiveLink>
 					<ActiveLink href="/talk">
 						<li className="text-black mt-2 md:mt-0 md:ml-5 py-2 px-4 bg-white rounded-lg cursor-pointer font-bold shadow-yellow-300 hover:scale-105">
-							<a>🎤 Talk subject</a>
+							<a>🎤 Talk</a>
 						</li>
 					</ActiveLink>
 					<ActiveLink href="/sponsor">
 						<li className="text-black mt-2 md:mt-0 md:ml-5 py-2 px-4 bg-white rounded-lg cursor-pointer font-bold shadow-yellow-300 hover:scale-105">
-							<a>🍕 Sponsor video</a>
+							<a>🍕 Sponsor</a>
+						</li>
+					</ActiveLink>
+					<ActiveLink href="/event">
+						<li className="text-black mt-2 md:mt-0 md:ml-5 py-2 px-4 bg-white rounded-lg cursor-pointer font-bold shadow-yellow-300 hover:scale-105">
+							<a>🎉 Event</a>
 						</li>
 					</ActiveLink>
 				</ul>

pages/event.tsx

@@ -0,0 +1,72 @@
+import {useInputChange} from '../src/components/hooks/onInputChange';
+import {Player} from '@remotion/player';
+import {Form, Input} from '../src/components/input';
+import {Code} from '../src/components/Code';
+import {Event} from '../src/event/Event';
+
+const Home = () => {
+	const [title, setTitle] = useInputChange<string>('Apéro JS 🍾');
+	const [lottieAsset, setLottieAsset] = useInputChange<string | undefined>(
+		undefined
+	);
+	const [paillettesAsset, setPaillettesAsset] = useInputChange<
+		string | undefined
+	>(undefined);
+	const [backgroundImg, setBackgroundImg] = useInputChange<string | undefined>(
+		undefined
+	);
+	const props = {title, lottieAsset, paillettesAsset, backgroundImg};
+
+	return (
+		<>
+			<div className="flex flex-col pb-4 justify-center items-center md:flex-row md:items-start">
+				<Player
+					autoPlay
+					controls
+					loop
+					className="shrink-0 shadow-lg"
+					style={{
+						width: '400px',
+						height: '400px',
+					}}
+					durationInFrames={180}
+					compositionWidth={1200}
+					compositionHeight={1200}
+					fps={30}
+					component={Event}
+					inputProps={props}
+				/>
+
+				<Form>
+					<Input setValue={setTitle} value={title} label="Title" />
+					<Input
+						setValue={setLottieAsset}
+						value={lottieAsset}
+						label="LottieAsset (lf20_UDstUT)"
+					/>
+					<Input
+						setValue={setPaillettesAsset}
+						value={paillettesAsset}
+						label="PaillettesAsset (lf20_tiviyc3p)"
+					/>
+					<Input
+						setValue={setBackgroundImg}
+						value={backgroundImg}
+						label="Background image url"
+					/>
+					<a
+						className="text-black py-2 px-4 text-center text-xl font-bold bg-yellow-300 rounded-xl mt-4 hover:scale-105"
+						href="https://github.com/lyonjs/social-video-generator/actions/workflows/render-meetup.yml"
+						target="_blank"
+					>
+						Generate your video 🎬
+					</a>
+				</Form>
+			</div>
+
+			<Code composition="Event" params={props} />
+		</>
+	);
+};
+
+export default Home;

pages/index.tsx

@@ -2,6 +2,7 @@ import {Player} from '@remotion/player';
 import {Meetup} from '../src/meetup/Meetup';
 import {Talk} from '../src/talk/Talk';
 import {Sponsor} from '../src/sponsor/Sponsor';
+import {Event} from '../src/event/Event';
 
 interface Video {
 	id: string;
@@ -47,6 +48,13 @@ const VIDEO_LIST: Video[] = [
 				'https://www.indy.fr/wp-content/themes/indy/img/logo-indy-new.svg',
 		},
 	},
+	{
+		id: 'Event',
+		template: Event,
+		params: {
+			title: 'Apéro JS 🍾',
+		},
+	},
 ];
 
 const Home = () => {

src/Video.tsx

@@ -8,6 +8,7 @@ import {Speaker} from './components/Speaker';
 
 import {Meetup} from './meetup/Meetup';
 import {Register} from './meetup/Register';
+import {Event} from './event/Event';
 
 export const RemotionVideo: React.FC = () => {
 	return (
@@ -125,6 +126,22 @@ export const RemotionVideo: React.FC = () => {
 					defaultProps={{}}
 				/>
 			</Folder>
+			<Folder name="Event">
+				<Composition
+					component={Event}
+					width={1200}
+					height={1200}
+					id="Event"
+					fps={30}
+					durationInFrames={270}
+					defaultProps={{
+						backgroundImg:
+							'https://i.pinimg.com/originals/de/0d/19/de0d19d835dd1224c5208701d78bd6e7.jpg',
+						title: 'Apéro JS de Noël 🎄',
+						lottieAsset: 'lf20_UDstUT',
+					}}
+				/>
+			</Folder>
 		</>
 	);
 };

src/components/LottieAsset.tsx

@@ -0,0 +1,29 @@
+import {Lottie} from '@remotion/lottie';
+import {useLottie} from './hooks/useLottie';
+import {AbsoluteFill} from 'remotion';
+import {CSSProperties} from 'react';
+
+export const LottieAsset: React.FC<{
+	assetLink?: string;
+	style?: CSSProperties;
+}> = ({assetLink, style}) => {
+	const illustration = useLottie(assetLink);
+
+	if (!illustration) {
+		return null;
+	}
+
+	return (
+		<AbsoluteFill style={{display: 'flex', alignItems: 'center'}}>
+			<Lottie
+				style={{
+					filter: 'drop-shadow(0px 0px 2px #000000)',
+					color: 'white',
+					fill: 'white',
+					...style,
+				}}
+				animationData={illustration}
+			/>
+		</AbsoluteFill>
+	);
+};

src/components/Paillettes.tsx

@@ -0,0 +1,15 @@
+import {LottieAsset} from './LottieAsset';
+
+export const Paillettes: React.FC<{assetLink: string}> = ({assetLink}) => {
+	return (
+		<LottieAsset
+			assetLink={assetLink}
+			style={{
+				position: 'absolute',
+				bottom: 0,
+				left: 0,
+				width: '100%',
+			}}
+		/>
+	);
+};

src/event/Event.tsx

@@ -0,0 +1,34 @@
+import {AbsoluteFill, Sequence} from 'remotion';
+import {ImageBackground} from '../components/ImageBackground';
+import {LottieAsset} from '../components/LottieAsset';
+import {EventTitle} from './EventTitle';
+import {Paillettes} from '../components/Paillettes';
+
+export const Event: React.FC<{
+	backgroundImg?: string;
+	title: string;
+	lottieAsset?: string;
+	paillettesAsset?: string;
+}> = ({
+	backgroundImg = 'https://i.pinimg.com/originals/de/0d/19/de0d19d835dd1224c5208701d78bd6e7.jpg',
+	title,
+	lottieAsset = 'lf20_UDstUT',
+	paillettesAsset = 'lf20_tiviyc3p',
+}) => {
+	return (
+		<AbsoluteFill>
+			<ImageBackground animated src={backgroundImg} />
+			<Sequence from={50} durationInFrames={130} name="Paillette">
+				<Paillettes assetLink={paillettesAsset} />
+			</Sequence>
+
+			<Sequence from={40} durationInFrames={140} name="Lottie Icon">
+				<LottieAsset assetLink={lottieAsset} />
+			</Sequence>
+
+			<Sequence from={50} durationInFrames={130} name="Event title">
+				<EventTitle title={title} />
+			</Sequence>
+		</AbsoluteFill>
+	);
+};

src/event/EventTitle.tsx

@@ -0,0 +1,32 @@
+import {spring, useCurrentFrame, useVideoConfig} from 'remotion';
+import {Title} from '../components/Title';
+
+export const EventTitle: React.FC<{
+	title: string;
+}> = ({title}) => {
+	const frame = useCurrentFrame();
+	const {fps, width} = useVideoConfig();
+
+	const fromBottom = spring({
+		frame,
+		from: 0,
+		to: 200,
+		fps,
+		durationInFrames: 30,
+	});
+
+	return (
+		<Title
+			style={{
+				color: 'white',
+				position: 'absolute',
+				bottom: fromBottom,
+				fontSize: 100,
+				width,
+				textAlign: 'center',
+			}}
+		>
+			{title}
+		</Title>
+	);
+};