file uploads timeline layers

.env.example

@@ -9,3 +9,16 @@ PRIVATE_GOOGLE_CLIENT_SECRET=your_google_client_secret_here
 # AI Generation (OpenRouter)
 OPENROUTER_API_KEY=your_openrouter_api_key_here
 
+# OpenAI (Whisper transcription for captions)
+OPENAI_API_KEY=your_openai_api_key_here
+
+# S3-compatible Storage (AWS S3, Cloudflare R2, MinIO, DigitalOcean Spaces, etc.)
+PRIVATE_S3_BUCKET=devmotion-uploads
+PRIVATE_S3_REGION=us-east-1
+# Leave empty for AWS S3, set for R2/MinIO/etc.
+PRIVATE_S3_ENDPOINT=
+PRIVATE_S3_ACCESS_KEY_ID=your_access_key
+PRIVATE_S3_SECRET_ACCESS_KEY=your_secret_key
+# Optional: custom public URL for assets
+PRIVATE_S3_PUBLIC_URL=
+

CLAUDE.md

@@ -61,6 +61,7 @@ registerLayer('my-layer', Component, PropsSchema);
 ### Code Style
 
 - **Package manager**: `pnpm` only (not npm/yarn)
+- **Icons**: Use `@lucide/svelte` package exclusively
 - **Naming**: `kebab-case.ts`, `PascalCase.svelte`, `camelCase` functions
 - **Imports**: External → SvelteKit → Internal → Relative
 - **Store files**: `name.svelte.ts` suffix for rune-based stores
@@ -248,4 +249,4 @@ OPENROUTER_API_KEY                 # AI features (optional)
 - **Type definitions**: Check `src/lib/schemas/animation.ts`
 - **Layer examples**: Look at existing layer components
 
-**Last Updated**: 2026-02-05
+**Last Updated**: 2026-02-06

Dockerfile

@@ -22,6 +22,13 @@ ARG PRIVATE_BETTER_AUTH_SECRET
 ARG PRIVATE_GOOGLE_CLIENT_ID
 ARG PRIVATE_GOOGLE_CLIENT_SECRET
 ARG OPENROUTER_API_KEY
+ARG OPENAI_API_KEY
+ARG PRIVATE_S3_BUCKET
+ARG PRIVATE_S3_REGION
+ARG PRIVATE_S3_ENDPOINT
+ARG PRIVATE_S3_ACCESS_KEY_ID
+ARG PRIVATE_S3_SECRET_ACCESS_KEY
+ARG PRIVATE_S3_PUBLIC_URL
 
 # Mapping ARGs to ENVs so SvelteKit can see them during build
 ENV PUBLIC_BASE_URL=$PUBLIC_BASE_URL
@@ -30,6 +37,13 @@ ENV PRIVATE_BETTER_AUTH_SECRET=$PRIVATE_BETTER_AUTH_SECRET
 ENV PRIVATE_GOOGLE_CLIENT_ID=$PRIVATE_GOOGLE_CLIENT_ID
 ENV PRIVATE_GOOGLE_CLIENT_SECRET=$PRIVATE_GOOGLE_CLIENT_SECRET
 ENV OPENROUTER_API_KEY=$OPENROUTER_API_KEY
+ENV OPENAI_API_KEY=$OPENAI_API_KEY
+ENV PRIVATE_S3_BUCKET=$PRIVATE_S3_BUCKET
+ENV PRIVATE_S3_REGION=$PRIVATE_S3_REGION
+ENV PRIVATE_S3_ENDPOINT=$PRIVATE_S3_ENDPOINT
+ENV PRIVATE_S3_ACCESS_KEY_ID=$PRIVATE_S3_ACCESS_KEY_ID
+ENV PRIVATE_S3_SECRET_ACCESS_KEY=$PRIVATE_S3_SECRET_ACCESS_KEY
+ENV PRIVATE_S3_PUBLIC_URL=$PRIVATE_S3_PUBLIC_URL
 
 # Build the app
 RUN pnpm exec svelte-kit sync && NODE_OPTIONS="--max-old-space-size=4096" pnpm run build

docker-compose.yaml

@@ -9,10 +9,24 @@ services:
         - PRIVATE_GOOGLE_CLIENT_ID=${PRIVATE_GOOGLE_CLIENT_ID}
         - PRIVATE_GOOGLE_CLIENT_SECRET=${PRIVATE_GOOGLE_CLIENT_SECRET}
         - OPENROUTER_API_KEY=${OPENROUTER_API_KEY}
+        - OPENAI_API_KEY=${OPENAI_API_KEY}
+        - PRIVATE_S3_BUCKET=${PRIVATE_S3_BUCKET}
+        - PRIVATE_S3_REGION=${PRIVATE_S3_REGION}
+        - PRIVATE_S3_ENDPOINT=${PRIVATE_S3_ENDPOINT}
+        - PRIVATE_S3_ACCESS_KEY_ID=${PRIVATE_S3_ACCESS_KEY_ID}
+        - PRIVATE_S3_SECRET_ACCESS_KEY=${PRIVATE_S3_SECRET_ACCESS_KEY}
+        - PRIVATE_S3_PUBLIC_URL=${PRIVATE_S3_PUBLIC_URL}
     environment:
       - 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}
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+      - PRIVATE_S3_BUCKET=${PRIVATE_S3_BUCKET}
+      - PRIVATE_S3_REGION=${PRIVATE_S3_REGION}
+      - PRIVATE_S3_ENDPOINT=${PRIVATE_S3_ENDPOINT}
+      - PRIVATE_S3_ACCESS_KEY_ID=${PRIVATE_S3_ACCESS_KEY_ID}
+      - PRIVATE_S3_SECRET_ACCESS_KEY=${PRIVATE_S3_SECRET_ACCESS_KEY}
+      - PRIVATE_S3_PUBLIC_URL=${PRIVATE_S3_PUBLIC_URL}

docs/current-feature.md

@@ -0,0 +1 @@
+Handle this need, handle/support file upload properly for images and videos, actually image accept only src, should accept also a file. Then allow that the project store securely files on s3 like configurable storage provider. And support the preview. The video layer should define the seconds from start and and, need to be rendered in a proper way in the timeline, and let users to cut/split/resize it. Be sure that server side rendering will show the proper frames in the capture, and merge the audio tracks properly. Also allow to upload/record audios, and manage properly via vercel ai and openrouterr providers the caption generator and preview (this probably should be an audio layer with captions style to be shown ) also for audio handle properly the timeline, split, crop, move. Apply the same concept of enter/exit time for other layers, so we can handle more layers together and visually. Don’t struggle to fix errors, the environment can’t be tested or checked completely, so implement it and I’ll test and tune it.

drizzle/0006_broken_rockslide.sql

@@ -0,0 +1 @@
+ALTER TABLE "project" ADD COLUMN "thumbnail_url" text;

drizzle/0007_fine_human_cannonball.sql

@@ -0,0 +1,17 @@
+CREATE TABLE "asset" (
+	"id" text PRIMARY KEY NOT NULL,
+	"project_id" text NOT NULL,
+	"user_id" text NOT NULL,
+	"storage_key" text NOT NULL,
+	"url" text NOT NULL,
+	"original_name" text NOT NULL,
+	"mime_type" text NOT NULL,
+	"media_type" text NOT NULL,
+	"size" integer NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "asset" ADD CONSTRAINT "asset_project_id_project_id_fk" FOREIGN KEY ("project_id") REFERENCES "public"."project"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "asset" ADD CONSTRAINT "asset_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "asset_project_id_idx" ON "asset" USING btree ("project_id");--> statement-breakpoint
+CREATE INDEX "asset_user_id_idx" ON "asset" USING btree ("user_id");