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,19 +91,24 @@ 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>
 			</nav>
 			<Component {...pageProps} />

pages/event.tsx

@@ -0,0 +1,60 @@
+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,21 @@ 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,26 @@
+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,12 @@
+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,36 @@
+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>
+  );
+};