twotalesanimation
269a5cbfda
Deploy / deploy (push) Successful in 6m27s
Two faults in how a package's folder is named, both of which put unrelated
files in one directory on the delivery volume.
The default layout had no {showId}, so every show's episode 101 resolved to
{deliveryRoot}/101/{packageName}. The token existed and was populated — it
just never appeared in the path. With hardlinked packages that means two
shows delivering the same episode number on the same day write into the same
folder, and identically named shots overwrite each other. reviewDir had the
same hole, and is worse there: reviewNameFor scopes its lookup by projectId,
so a second show computes the bare base name and lands on the first show's
folder instead of suffixing past it.
createDeliveryPackage also never checked for an existing package of the same
name. packageNameTemplate is date-only and packageNumber is a per-project
counter that is not in the template, so a second delivery on the same day got
an identical name and rootPath and built on top of the first. MOV reviews
already did this correctly, so nextReviewName moves to deliveries.ts as
nextPackageName and both paths share it; the review-side name is kept as an
alias because it reads better at that call site.
Putting {showId} ahead of {episode} exposes an empty segment on non-episodic
shows, so paths go through tidyPath, which collapses it and leaves the UNC
root alone.
Historic packages are unaffected: buildDeliveryJobManifest reads rootPath and
configSnapshot off the record, so only new packages use the new layout. A
project with its own deliveryConfig.layout in the database still overrides
these defaults.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
FeedBack — VFX Review & Approval Platform
Frame-accurate video review, annotation drawing, and approval tracking for boutique VFX and animation studios.
Features
- Dead-simple video upload — drag & drop MP4/MOV, up to 2 GB, version-tracked
- Frame-accurate scrubbing — canvas-based timeline ruler with click-and-drag seek
- Timestamp comments — comments anchored to exact frame numbers, threaded replies, resolve/unresolve
- Annotation drawing — freehand, arrow, rectangle, circle tools with color + stroke width picker
- Approval workflow — Approve / Reject / Needs Changes with notes, full history
- Client review links — shareable token-based review URLs for external clients (no login required)
- Role-based access — Admin / Producer / Supervisor / Artist / Client roles
- Slack notifications — webhook alerts for uploads and approvals
- Self-hostable — Docker Compose with PostgreSQL + MinIO (S3-compatible) included
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 15 App Router (Turbopack) |
| Language | TypeScript 5 strict |
| Styling | TailwindCSS 3 + shadcn/ui (zinc, dark-only) |
| Auth | NextAuth.js v5 (Credentials + JWT) |
| Database | PostgreSQL 16 via Prisma 6 |
| File Storage | UploadThing / S3 / R2 / B2 / MinIO / local |
| State | Zustand 5 (player) + TanStack Query 5 (server) |
| Annotations | HTML5 Canvas API (normalized coordinates) |
| Video Playback | HTML5 <video> with custom controls |
| Container | Docker multi-stage build |
Quick Start (Docker)
# 1. Clone and configure
cp .env.example .env
# Edit .env — set AUTH_SECRET, DATABASE_URL, storage provider
# 2. Start services (PostgreSQL + MinIO + App)
docker compose up -d
# 3. Run migrations and seed
docker compose exec app npx prisma migrate deploy
docker compose exec app npx tsx prisma/seed.ts
# 4. Open http://localhost:3000
Demo accounts (after seed):
| Password | Role | |
|---|---|---|
| admin@vfxreview.local | admin123 | Admin |
| producer@vfxreview.local | producer123 | Producer |
| supervisor@vfxreview.local | supervisor123 | Supervisor |
| artist@vfxreview.local | artist123 | Artist |
| client@studio.com | client123 | Client |
Local Development
# Install dependencies
npm install
# Set up database (Postgres must be running)
npx prisma migrate dev
npx tsx prisma/seed.ts
# Start dev server
npm run dev
Open http://localhost:3000.
Environment Variables
See .env.example for full reference. Key variables:
# Required
DATABASE_URL="postgresql://..."
AUTH_SECRET="your-32-char-secret"
NEXTAUTH_URL="http://localhost:3000"
# Storage (choose one)
STORAGE_PROVIDER="local" # local | uploadthing | s3 | r2 | b2 | minio
# UploadThing (if STORAGE_PROVIDER=uploadthing)
UPLOADTHING_SECRET="sk_live_..."
UPLOADTHING_APP_ID="..."
# AWS S3 / R2 / B2 compatible
S3_ACCESS_KEY_ID=""
S3_SECRET_ACCESS_KEY=""
S3_BUCKET_NAME=""
S3_REGION=""
S3_ENDPOINT="" # for R2/B2/MinIO
# Slack (optional)
SLACK_BOT_TOKEN=""
# Email (optional, nodemailer)
SMTP_HOST=""
SMTP_PORT="587"
SMTP_USER=""
SMTP_PASS=""
Project Structure
app/
(auth)/login/ — Sign-in page
(dashboard)/ — Protected dashboard layout
dashboard/ — Home stats + shot queue
projects/ — Project list + detail pages
settings/ — User profile
review/[versionId]/ — Full-screen review player
client/[token]/ — Unauthenticated client review link
api/
auth/[...nextauth]/ — NextAuth route handler
uploadthing/ — UploadThing route handler
notifications/ — Notification CRUD
projects/ — Projects REST endpoint
components/
player/ — ReviewPlayer, FrameTimeline, PlaybackControls
annotations/ — AnnotationCanvas, AnnotationTools
comments/ — CommentPanel (threads + replies)
versions/ — VersionUpload, VersionList
shots/ — ShotCard, NewShotDialog
projects/ — ProjectCard, NewProjectDialog
dashboard/ — StatsCards, ShotQueue, RecentActivity
layout/ — Sidebar, Header, NotificationBell, Providers
ui/ — shadcn/ui base components
actions/ — Server Actions (projects, shots, versions, comments, annotations, approvals)
lib/ — db, auth, utils, frame-utils, storage, slack, notifications, uploadthing
hooks/ — use-review-player (Zustand), use-annotations, use-frame-comments
prisma/ — schema.prisma, seed.ts
Review Player Keyboard Shortcuts
| Key | Action |
|---|---|
Space / K |
Play / Pause |
J |
Reverse playback |
L |
Forward playback |
← / → |
Step one frame |
F |
Toggle fullscreen |
Documentation
| Doc | Covers |
|---|---|
| RenderPipeline2.md | Render pipeline specification — normative design, state machine, API contracts |
| DELIVERY_WORKFLOW.md | Building and shipping delivery packages (how-to) |
| VFXReviewConnector.md | After Effects panel — setup, Shot Builder, QC, diagnostics |
| RenderWorker/README.md | Render worker service — packaging, install, validation, delivery builds |
| BlenderPanel/README.md | Blender add-on — queueing a .blend on the farm |
| EXT_API_REFERENCE.md | External API (/api/ext/*) used by the panel and workers |
| Shot task workflow.md | Shot and task lifecycle in the web app |
License
MIT