Initial commit

Author: Kiranism

.env.example

@@ -0,0 +1,2 @@
+REMOTION_AWS_ACCESS_KEY_ID=""
+REMOTION_AWS_SECRET_ACCESS_KEY=""

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": "next",
+  "plugins": ["@remotion"],
+  "overrides": [
+    {
+      "files": ["remotion/**/*.{ts,tsx}"],
+      "extends": ["plugin:@remotion/recommended"]
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+out/
+.env

README.md

@@ -0,0 +1,76 @@
+<img src="https://github.com/remotion-dev/template-next/assets/1629785/9092db5f-7c0c-4d38-97c4-5f5a61f5cc098" />
+<br/>
+<br/>
+
+This is a Next.js template for building programmatic video apps, with [`@remotion/player`](https://remotion.dev/player) and [`@remotion/lambda`](https://remotion.dev/lambda) built in.
+
+This template uses the Next.js App directory. There is a [Pages directory version](https://github.com/remotion-dev/template-next-pages-dir) of this template available.
+
+<img src="https://github.com/remotion-dev/template-next/assets/1629785/c9c2e5ca-2637-4ec8-8e40-a8feb5740d88" />
+
+## Getting Started
+
+[Use this template](https://github.com/new?template_name=template-next-app-dir&template_owner=remotion-dev) to clone it into your GitHub account. Run
+
+```
+npm i
+```
+
+afterwards. Alternatively, use this command to scaffold a project:
+
+```
+npx create-video@latest --next
+```
+
+## Commands
+
+Start the Next.js dev server:
+
+```
+npm run dev
+```
+
+Open the Remotion Studio:
+
+```
+npm run remotion
+```
+
+The following script will set up your Remotion Bundle and Lambda function on AWS:
+
+```
+node deploy.mjs
+```
+
+You should run this script after:
+
+- changing the video template
+- changing `config.mjs`
+- upgrading Remotion to a newer version
+
+## Set up rendering on AWS Lambda
+
+This template supports rendering the videos via [Remotion Lambda](https://remotion.dev/lambda).
+
+1. Copy the `.env.example` file to `.env` and fill in the values.
+   Complete the [Lambda setup guide](https://www.remotion.dev/docs/lambda/setup) to get your AWS credentials.
+
+1. Edit the `config.mjs` file to your desired Lambda settings.
+
+1. Run `node deploy.mjs` to deploy your Lambda function and Remotion Bundle.
+
+## Docs
+
+Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
+
+## Help
+
+We provide help on our [Discord server](https://remotion.dev/discord).
+
+## Issues
+
+Found an issue with Remotion? [File an issue here](https://remotion.dev/issue).
+
+## License
+
+Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).

app/api/lambda/progress/route.ts

@@ -0,0 +1,44 @@
+import {
+  speculateFunctionName,
+  AwsRegion,
+  getRenderProgress,
+} from "@remotion/lambda/client";
+import { DISK, RAM, REGION, TIMEOUT } from "../../../../config.mjs";
+import { executeApi } from "../../../../helpers/api-response";
+import { ProgressRequest, ProgressResponse } from "../../../../types/schema";
+
+export const POST = executeApi<ProgressResponse, typeof ProgressRequest>(
+  ProgressRequest,
+  async (req, body) => {
+    const renderProgress = await getRenderProgress({
+      bucketName: body.bucketName,
+      functionName: speculateFunctionName({
+        diskSizeInMb: DISK,
+        memorySizeInMb: RAM,
+        timeoutInSeconds: TIMEOUT,
+      }),
+      region: REGION as AwsRegion,
+      renderId: body.id,
+    });
+
+    if (renderProgress.fatalErrorEncountered) {
+      return {
+        type: "error",
+        message: renderProgress.errors[0].message,
+      };
+    }
+
+    if (renderProgress.done) {
+      return {
+        type: "done",
+        url: renderProgress.outputFile as string,
+        size: renderProgress.outputSizeInBytes as number,
+      };
+    }
+
+    return {
+      type: "progress",
+      progress: Math.max(0.03, renderProgress.overallProgress),
+    };
+  }
+);

app/api/lambda/render/route.ts

@@ -0,0 +1,50 @@
+import { AwsRegion, RenderMediaOnLambdaOutput } from "@remotion/lambda/client";
+import {
+  renderMediaOnLambda,
+  speculateFunctionName,
+} from "@remotion/lambda/client";
+import { DISK, RAM, REGION, SITE_NAME, TIMEOUT } from "../../../../config.mjs";
+import { executeApi } from "../../../../helpers/api-response";
+import { RenderRequest } from "../../../../types/schema";
+
+export const POST = executeApi<RenderMediaOnLambdaOutput, typeof RenderRequest>(
+  RenderRequest,
+  async (req, body) => {
+    if (
+      !process.env.AWS_ACCESS_KEY_ID &&
+      !process.env.REMOTION_AWS_ACCESS_KEY_ID
+    ) {
+      throw new TypeError(
+        "Set up Remotion Lambda to render videos. See the README.md for how to do so."
+      );
+    }
+    if (
+      !process.env.AWS_SECRET_ACCESS_KEY &&
+      !process.env.REMOTION_AWS_SECRET_ACCESS_KEY
+    ) {
+      throw new TypeError(
+        "The environment variable REMOTION_AWS_SECRET_ACCESS_KEY is missing. Add it to your .env file."
+      );
+    }
+
+    const result = await renderMediaOnLambda({
+      codec: "h264",
+      functionName: speculateFunctionName({
+        diskSizeInMb: DISK,
+        memorySizeInMb: RAM,
+        timeoutInSeconds: TIMEOUT,
+      }),
+      region: REGION as AwsRegion,
+      serveUrl: SITE_NAME,
+      composition: body.id,
+      inputProps: body.inputProps,
+      framesPerLambda: 10,
+      downloadBehavior: {
+        type: "download",
+        fileName: "video.mp4",
+      },
+    });
+
+    return result;
+  }
+);

app/favicon.ico

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/globals.css

@@ -0,0 +1,32 @@
+import ThemeProvider from "@/components/ThemeToggle/theme-provider";
+import "../styles/global.css";
+import "./globals.css";
+import { Metadata } from "next";
+import Header from "@/components/Header";
+import { Toaster } from "@/components/ui/sonner";
+
+export const metadata: Metadata = {
+  title: "Remotion and Next.js",
+  description: "Remotion and Next.js",
+  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
+};
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeProvider>
+          <Header />
+          {children}
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/layout.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { NextPage } from "next";
+import MainSection from "../components/MainSection";
+
+const Home: NextPage = () => {
+  return (
+    <>
+      <MainSection />
+    </>
+  );
+};
+
+export default Home;

app/page.tsx

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components.json

@@ -0,0 +1,11 @@
+import React from "react";
+
+const container: React.CSSProperties = {
+  alignSelf: "flex-end",
+};
+
+export const AlignEnd: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return <div style={container}>{children}</div>;
+};