How to Build Video streaming backend with V0

1CREATE TABLE videos (
2  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
3  owner_id uuid NOT NULL,
4  title text NOT NULL,
5  description text,
6  thumbnail_url text,
7  status text DEFAULT 'processing'
8    CHECK (status IN ('processing','ready','failed','archived')),
9  duration_seconds int,
10  views_count int DEFAULT 0,
11  upload_id text,
12  playback_id text,
13  created_at timestamptz DEFAULT now()
14);
15
16CREATE TABLE video_views (
17  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
18  video_id uuid REFERENCES videos(id) ON DELETE CASCADE,
19  viewer_id uuid,
20  watch_duration_seconds int DEFAULT 0,
21  completed boolean DEFAULT false,
22  created_at timestamptz DEFAULT now()
23);
24
25CREATE TABLE playlists (
26  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
27  owner_id uuid NOT NULL,
28  title text NOT NULL,
29  is_public boolean DEFAULT true,
30  created_at timestamptz DEFAULT now()
31);
32
33CREATE TABLE playlist_videos (
34  playlist_id uuid REFERENCES playlists(id) ON DELETE CASCADE,
35  video_id uuid REFERENCES videos(id) ON DELETE CASCADE,
36  position int NOT NULL,
37  PRIMARY KEY (playlist_id, video_id)
38);
39
40CREATE OR REPLACE FUNCTION increment_views(p_video_id uuid)
41RETURNS void AS $$
42  UPDATE videos SET views_count = views_count + 1
43  WHERE id = p_video_id;
44$$ LANGUAGE sql;

1import { NextRequest, NextResponse } from 'next/server'
2import Mux from '@mux/mux-node'
3import { createClient } from '@/lib/supabase/server'
4
5const mux = new Mux({
6  tokenId: process.env.MUX_TOKEN_ID!,
7  tokenSecret: process.env.MUX_TOKEN_SECRET!,
8})
9
10export async function POST(req: NextRequest) {
11  const supabase = await createClient()
12  const { title, description } = await req.json()
13
14  const user = (await supabase.auth.getUser()).data.user
15  if (!user) {
16    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
17  }
18
19  const upload = await mux.video.uploads.create({
20    cors_origin: process.env.NEXT_PUBLIC_APP_URL ?? '*',
21    new_asset_settings: {
22      playback_policy: ['public'],
23      encoding_tier: 'baseline',
24    },
25  })
26
27  const { data: video } = await supabase
28    .from('videos')
29    .insert({
30      owner_id: user.id,
31      title,
32      description,
33      upload_id: upload.id,
34    })
35    .select()
36    .single()
37
38  return NextResponse.json({
39    videoId: video?.id,
40    uploadUrl: upload.url,
41  })
42}

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import crypto from 'crypto'
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function POST(req: NextRequest) {
11  const rawBody = await req.text()
12  const signature = req.headers.get('mux-signature') ?? ''
13
14  const expectedSig = crypto
15    .createHmac('sha256', process.env.MUX_WEBHOOK_SECRET!)
16    .update(rawBody)
17    .digest('hex')
18
19  if (signature !== `sha256=${expectedSig}`) {
20    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 })
21  }
22
23  const event = JSON.parse(rawBody)
24
25  if (event.type === 'video.asset.ready') {
26    const asset = event.data
27    const playbackId = asset.playback_ids?.[0]?.id
28
29    await supabase
30      .from('videos')
31      .update({
32        status: 'ready',
33        playback_id: playbackId,
34        duration_seconds: Math.round(asset.duration ?? 0),
35        thumbnail_url: `https://image.mux.com/${playbackId}/thumbnail.webp`,
36      })
37      .eq('upload_id', asset.upload_id)
38  }
39
40  if (event.type === 'video.asset.errored') {
41    await supabase
42      .from('videos')
43      .update({ status: 'failed' })
44      .eq('upload_id', event.data.upload_id)
45  }
46
47  return NextResponse.json({ received: true })
48}

1// Paste this prompt into V0's AI chat:
2// Build a video upload page at app/upload/page.tsx with:
3// 1. Client component ('use client') with shadcn/ui Input for title, Textarea for description
4// 2. File input accepting video/* files
5// 3. On submit: POST to /api/mux/upload to get the upload URL, then use @mux/upchunk UpChunk.createUpload() to send the file in chunks
6// 4. shadcn/ui Progress bar showing upload percentage from upchunk's 'progress' event
7// 5. Status text: 'Uploading...' → 'Processing...' → redirect to video page when ready
8// 6. Error handling for failed uploads with Alert component
9// 7. File size display and video preview before upload
10// Install @mux/upchunk as a dependency.

1// Paste this prompt into V0's AI chat:
2// Build two pages:
3// 1. app/videos/[id]/page.tsx — Video player page:
4//    - Server Component fetching video by ID from Supabase
5//    - @mux/mux-player-react MuxPlayer with playbackId, in shadcn/ui AspectRatio (16:9)
6//    - Title, description, view count, upload date below player
7//    - Client component wrapper that POSTs to /api/views on play events
8// 2. app/videos/page.tsx — Video feed:
9//    - Server Component fetching all videos WHERE status = 'ready'
10//    - Grid of shadcn/ui Cards with Mux thumbnail (image.mux.com/{playbackId}/thumbnail.webp)
11//    - Duration overlay, view count, title, upload date
12//    - Badge for 'processing' videos (show skeleton Card)
13//    - Pagination with limit 12 per page
14// Install @mux/mux-player-react as a dependency.