# Video Studio

> A prompt to create your own video studio.

*Prompt · December 18, 2025*

# AI Agent Prompt: Build a Video Review & Feedback Studio

**Role**: Senior Full Stack Developer **Objective**: Build a "Video Studio" application that allows users to upload videos, manage versions, and gather frame-accurate feedback (similar to Frame.io). **Tech Stack**: Next.js (App Router), Supabase (Auth, Postgres, RLS), Google Drive API (Video Storage).

---

## 1. Core Features

### A. Dashboard (Project Management)

- **Projects**: Users create "Projects" to organize their videos.
- **Thumbnails**: Display a grid of projects with the latest version's thumbnail.
- **Status**: Show status tags (e.g., "In Review", "Approved", "Changes Requested").
- **Upload**: Drag-and-drop upload that creates a new project or adds a version to an existing one.
- **Migration**: A utility to scan Google Drive for "orphan" videos and create projects for them.

### B. Video Detail Page (The Player)

- **Version Control**: A dropdown to switch between versions (v1, v2, v3) of the video.
- **Video Player**:
  - Custom controls or standard HTML5 player.
  - **Dynamic Aspect Ratio**: Support vertical (9:16), square (1:1), and widescreen (16:9) videos without cropping.
  - **Streaming**: Stream video content securely from Google Drive (bypass 403s/CORS).
- **Comment System**:
  - **Frame-Accurate**: Comments are linked to a specific timestamp in the video.
  - **Timeline Markers**: Show dots on the video timeline where comments exist.
  - **Sidebar**: Display a threaded conversation (comments & replies) on the right.
  - **Resolution**: Mark comments as "Resolved" to hide them (with a toggle to show).
  - **Click-to-Jump**: Clicking a comment jumps the video to that timestamp.

### C. Sharing & Permissions

- **Share Modal**: Invite other users by email to view/comment on a specific video.
- **RLS Policies**: Ensure only owners and shared users can access the content.

---

## 2. Technical Implementation Details

### A. Database Schema (Supabase)

```sql
-- Projects Table
create table video_projects (
    id uuid default gen_random_uuid() primary key,
    name text not null,
    owner_id uuid references auth.users(id),
    created_at timestamptz default now(),
    updated_at timestamptz default now()
);

-- Video Metadata (Versions)
create table video_metadata (
    video_id text primary key, -- Google Drive File ID
    project_id uuid references video_projects(id),
    version int default 1,
    name text,
    thumbnail_link text,
    status text default 'In Review',
    updated_at timestamptz default now()
);

-- Comments
create table video_comments (
    id uuid default gen_random_uuid() primary key,
    video_id text references video_metadata(video_id),
    user_id uuid references auth.users(id),
    content text not null,
    timestamp float not null, -- Seconds
    parent_id uuid references video_comments(id), -- For replies
    is_resolved boolean default false,
    user_name text default 'Anonymous',
    created_at timestamptz default now()
);

-- Sharing
create table video_shares (
    id uuid default gen_random_uuid() primary key,
    video_id text references video_metadata(video_id),
    user_email text not null,
    created_at timestamptz default now()
);
```

### B. Google Drive Integration

- **Service Account**: Use a Google Service Account for server-side operations.
- **Resumable Uploads**: Implement a "Proxy Upload" pattern to bypass Vercel's 4.5MB body limit.
  1. Frontend requests an upload URL from the backend.
  2. Backend gets a Resumable Upload URL from Google Drive API.
  3. Frontend slices the file into 4MB chunks and sends them to a Next.js API Route (`/api/proxy-upload`).
  4. The API Route forwards chunks to Google Drive.
- **Streaming**: Create a route (`/api/video-stream?videoId=...`) that fetches the video stream from Drive and pipes it to the response with correct `Content-Range` headers. **Optimization**: Reuse the Google Auth client instance to prevent latency/stuttering.

### C. Frontend Components

- `VideoPlayer.tsx`: Handles the video element, timeline markers, and emits time updates.
- `CommentSidebar.tsx`: Manages the list of comments, reply forms, and resolution status. Fixed width (`w-96`) to prevent layout breakage.
- `ShareModal.tsx`: Simple form to add emails to the `video_shares` table.

---

## 3. Step-by-Step Instructions for the AI

1. **Setup**: Initialize Supabase client and Google Drive service account utils.
2. **Database**: Run the SQL migrations provided above.
3. **Backend**:
   - Create `actions/video-studio.ts` for server actions (create project, add comment, share).
   - Create `api/proxy-upload/route.ts` for chunked uploads.
   - Create `api/video-stream/route.ts` for streaming.
4. **Frontend**:
   - Build the Dashboard (`/studio/video/page.tsx`) with project grid and upload manager.
   - Build the Detail Page (`/studio/video/[id]/page.tsx`) with the player and sidebar.
5. **Refinement**: Ensure vertical videos render correctly (no cropping) and comments sync perfectly with the timeline.

[Open on the site →](https://www.agenticamit.com/prompt/video-studio)