Server side video render

.env.example

@@ -3,8 +3,9 @@ PRIVATE_DATABASE_URL="postgres://root:mysecretpassword@localhost:5432/local"
 PRIVATE_BETTER_AUTH_SECRET=mysecretpassword
 
 # Google OAuth
-GOOGLE_CLIENT_ID=your_google_client_id_here
-GOOGLE_CLIENT_SECRET=your_google_client_secret_here
+PRIVATE_GOOGLE_CLIENT_ID=your_google_client_id_here
+PRIVATE_GOOGLE_CLIENT_SECRET=your_google_client_secret_here
 
 # AI Generation (OpenRouter)
 OPENROUTER_API_KEY=your_openrouter_api_key_here
+

Dockerfile

@@ -1,5 +1,5 @@
 # Build stage
-FROM node:20-alpine AS builder
+FROM node:20-slim AS builder
 
 WORKDIR /app
 
@@ -15,20 +15,35 @@ RUN pnpm install --frozen-lockfile
 # Copy source code
 COPY . .
 
-# Prepare the app
-RUN pnpm run prepare
-
 # Build the app
 RUN pnpm run build
 
 # Production stage
-FROM nginx:alpine
+# Playwright official image includes all browser dependencies
+FROM mcr.microsoft.com/playwright:v1.50.0-jammy
+
+WORKDIR /app
+
+# Install FFmpeg
+RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
+
+# Copy built application
+COPY --from=builder /app/build ./build
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=builder /app/pnpm-workspace.yaml ./pnpm-workspace.yaml
+
+# Install only production dependencies
+RUN npm install -g pnpm && pnpm install --prod --frozen-lockfile
 
-# Copy built static files to nginx
-COPY --from=builder /app/build /usr/share/nginx/html
+# Environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+# Use 0.0.0.0 to allow access from outside the container
+ENV HOST=0.0.0.0
 
 # Expose port
-EXPOSE 80
+EXPOSE 3000
 
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+# Start the Node.js server
+CMD ["node", "build/index.js"]

docker-compose.yml

@@ -1,14 +1,12 @@
 services:
-  db:
-    image: postgres
-    restart: always
+  app:
+    build: .
     ports:
-      - 5432:5432
+      - '3000:3000'
     environment:
-      POSTGRES_USER: root
-      POSTGRES_PASSWORD: mysecretpassword
-      POSTGRES_DB: local
-    volumes:
-      - pgdata:/var/lib/postgresql/data
-volumes:
-  pgdata:
+      - PUBLIC_BASE_URL=${PUBLIC_BASE_URL}
+      - PRIVATE_DATABASE_URL=${PRIVATE_DATABASE_URL}
+      - PRIVATE_BETTER_AUTH_SECRET=${PRIVATE_BETTER_AUTH_SECRET}
+      - PRIVATE_GOOGLE_CLIENT_ID=${PRIVATE_GOOGLE_CLIENT_ID}
+      - PRIVATE_GOOGLE_CLIENT_SECRET=${PRIVATE_GOOGLE_CLIENT_SECRET}
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY}

package.json

@@ -33,6 +33,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/typography": "^0.5.18",
     "@tailwindcss/vite": "^4.1.13",
+    "@types/fluent-ffmpeg": "^2.1.28",
     "@types/node": "^25.0.10",
     "@vitest/browser": "^3.2.4",
     "bits-ui": "^2.15.4",
@@ -42,6 +43,7 @@
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",
+    "fluent-ffmpeg": "^2.1.3",
     "globals": "^17.1.0",
     "mdsvex": "^0.12.6",
     "paneforge": "^1.0.2",
@@ -68,17 +70,15 @@
     "@openrouter/ai-sdk-provider": "^2.0.2",
     "@resvg/resvg-js": "^2.6.2",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@types/dompurify": "^3.0.5",
     "@vercel/mcp-adapter": "^1.0.0",
     "ai": "^6.0.49",
     "better-auth": "^1.3.27",
     "bezier-easing": "^2.1.0",
     "dompurify": "^3.3.1",
-    "lucide-svelte": "^0.563.0",
     "mediabunny": "^1.30.1",
     "nanoid": "^5.1.6",
     "postgres": "^3.4.7",
-    "runed": "^0.34.0",
+    "runed": "^0.37.1",
     "schema-dts": "^1.1.5",
     "svelte-component-to-image": "^2.0.5",
     "svelte-sonner": "^1.0.7",

src/app.d.ts

@@ -3,6 +3,17 @@
 import type { Session, User } from 'better-auth';
 
 // for information about these interfaces
+interface DevMotionAPI {
+  ready: Promise<void>;
+  seek: (time: number) => void;
+  getConfig: () => {
+    width: number;
+    height: number;
+    duration: number;
+    fps: number;
+  };
+}
+
 declare global {
   namespace App {
     // interface Error {}
@@ -14,6 +25,10 @@ declare global {
     // interface PageState {}
     // interface Platform {}
   }
+
+  interface Window {
+    __DEVMOTION__?: DevMotionAPI;
+  }
 }
 
 declare module 'svelte/elements' {

src/lib/components/ai/ai-chat.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { projectStore } from '$lib/stores/project.svelte';
   import { Button } from '$lib/components/ui/button';
-  import { Sparkles, ChevronDown, Bot, Loader2, User } from 'lucide-svelte';
+  import { Sparkles, ChevronDown, Bot, Loader2, User } from '@lucide/svelte';
   import { AI_MODELS, DEFAULT_MODEL_ID } from '$lib/ai/models';
   import { Chat } from '@ai-sdk/svelte';
   import { DefaultChatTransport, isToolUIPart, type UIMessage, type UIDataTypes } from 'ai';

src/lib/components/editor/Logo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { resolve } from '$app/paths';
-  import { Fullscreen } from 'lucide-svelte';
+  import { Fullscreen } from '@lucide/svelte';
 </script>
 
 <a class="flex items-center gap-2 pl-2" href={resolve('/')}>