twotalesanimation
172 lines
4.9 KiB
Markdown
172 lines
4.9 KiB
Markdown
# 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)
|
|
|
|
```bash
|
|
# 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):**
|
|
|
|
| Email | 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
|
|
|
|
```bash
|
|
# 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](http://localhost:3000).
|
|
|
|
---
|
|
|
|
## Environment Variables
|
|
|
|
See `.env.example` for full reference. Key variables:
|
|
|
|
```env
|
|
# 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 |
|
|
|
|
---
|
|
|
|
## License
|
|
|
|
MIT
|