feat(lambda): allow to render the composition on aws lambda

Author: florentpergoud

.env.example

@@ -0,0 +1,7 @@
+REMOTION_AWS_ACCESS_KEY_ID = ""
+REMOTION_AWS_SECRET_ACCESS_KEY = ""
+
+REMOTION_SERVE_URL=""
+REMOTION_FUNCTION_NAME=""
+REMOTION_BUCKET=""
+REMOTION_REGION = ""

.gitignore

@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+/out

app/remotion/load-fonts.ts

@@ -1,34 +1,33 @@
 import { continueRender, delayRender, staticFile } from "remotion";
 
-const waitForGroteskFont = delayRender("groteskFont");
-const groteskFont = new FontFace(
-  `Founders Grotesk`,
-  `url(${staticFile("fonts/FoundersGrotesk-Bold.woff2")}) format('woff2')`,
-  { weight: "700" }
-);
+export const loadFonts = async () => {
+  const waitForGroteskFont = delayRender("groteskFont");
+  const groteskFont = new FontFace(
+    `Founders Grotesk`,
+    `url(${staticFile("fonts/FoundersGrotesk-Bold.woff2")}) format('woff2')`,
+    { weight: "700" }
+  );
 
-groteskFont
-  .load()
-  .then(() => {
-    document.fonts.add(groteskFont);
-    continueRender(waitForGroteskFont);
+  groteskFont
+    .load()
+    .then(() => {
+      document.fonts.add(groteskFont);
+      continueRender(waitForGroteskFont);
+    })
+    .catch((err) => console.log("Error loading font", err));
 
-    console.log("Loaded Grotesk font");
-  })
-  .catch((err) => console.log("Error loading font", err));
+  const waitForGtPlanar = delayRender("gtPlanar");
+  const gtPlanarFont = new FontFace(
+    `GTPlanar`,
+    `url(${staticFile("fonts/gt-planar-black.woff2")}) format('woff2')`,
+    { weight: "700" }
+  );
 
-const waitForGtPlanar = delayRender("gtPlanar");
-const gtPlanarFont = new FontFace(
-  `GTPlanar`,
-  `url(${staticFile("fonts/gt-planar-black.woff2")}) format('woff2')`,
-  { weight: "700" }
-);
-
-gtPlanarFont
-  .load()
-  .then(() => {
-    document.fonts.add(gtPlanarFont);
-    continueRender(waitForGtPlanar);
-    console.log("Loaded GTPlanar font");
-  })
-  .catch((err) => console.log("Error loading font", err));
+  gtPlanarFont
+    .load()
+    .then(() => {
+      document.fonts.add(gtPlanarFont);
+      continueRender(waitForGtPlanar);
+    })
+    .catch((err) => console.log("Error loading font", err));
+};

app/remotion/logo-animation.tsx

@@ -9,6 +9,8 @@ import { RemotionLineToPerson } from "./components/remotion-logo/remotion-line-t
 import { RemotionNotAnimated } from "./components/remotion-logo/remotion-not-animated";
 import { RemotionPersonToFusion } from "./components/remotion-logo/remotion-person-to-fusion";
 import { LogoAnimationSequence } from "./components/logo-apparition-sequence";
+import { loadFonts } from "./load-fonts";
+loadFonts();
 
 export const LogoAnimation = () => {
   const { fps } = useVideoConfig();

app/remotion/videos.tsx

@@ -1,20 +1,19 @@
-import {Composition} from 'remotion';
-import './load-fonts';
-import {LogoAnimation} from './logo-animation';
+import { Composition } from "remotion";
+import { LogoAnimation } from "./logo-animation";
 
 const FPS = 30;
 
 export const RemotionVideo = () => {
-	return (
-		<>
-			<Composition
-				id="LogoAnimation"
-				component={LogoAnimation}
-				durationInFrames={FPS * 7}
-				fps={FPS}
-				width={1920}
-				height={1080}
-			/>
-		</>
-	);
+  return (
+    <>
+      <Composition
+        id="LogoAnimation"
+        component={LogoAnimation}
+        durationInFrames={FPS * 7}
+        fps={FPS}
+        width={1920}
+        height={1080}
+      />
+    </>
+  );
 };

app/routes/index.tsx

@@ -1,7 +1,7 @@
 import type { LinksFunction } from "@remix-run/node";
 import { Player } from "@remotion/player";
 import { LogoAnimation } from "~/remotion/logo-animation";
-import stylesHref from "./index.css";
+import stylesHref from "../styles/index.css";
 
 const FPS = 30;