How to Build a Video Streaming Backend with Lovable

1Create a video management platform with Supabase. Set up these tables:
2
3- videos: id, owner_id (references auth.users), title (text), description (text), provider (mux|cloudflare), provider_asset_id (text), playback_id (text nullable — set after transcoding), upload_id (text — the provider's upload job ID), status (uploading|processing|ready|error), duration_seconds (numeric nullable), thumbnail_url (text nullable), visibility (public|private|unlisted), tags (text[]), view_count (int default 0), created_at, updated_at
4- playlists: id, owner_id (references auth.users), title, description, thumbnail_url, visibility (public|private), created_at
5- playlist_videos: id, playlist_id (references playlists), video_id (references videos), position (int), added_at
6- watch_history: id, user_id (references auth.users), video_id (references videos), progress_seconds (numeric), completed (bool default false), last_watched_at — unique(user_id, video_id)
7
8RLS:
9- videos: SELECT for public videos is unrestricted; SELECT for private videos requires owner_id = auth.uid(); INSERT/UPDATE/DELETE requires owner_id = auth.uid()
10- playlists: same visibility-based RLS as videos
11- playlist_videos: readable if the parent playlist is accessible; modifiable by playlist owner
12- watch_history: users can only read and write their own watch history rows
13
14Create a storage bucket called 'thumbnails' (public reads, authenticated uploads) for custom video thumbnails.

1Create a Supabase Edge Function at supabase/functions/create-video-upload/index.ts.
2
3Receives: { title: string, description: string, visibility: string } in body.
4Requires authentication.
5
6For Mux provider:
71. POST to https://api.mux.com/video/v1/uploads with Basic auth (MUX_TOKEN_ID:MUX_TOKEN_SECRET from Deno.env)
8   Body: { cors_origin: '*', new_asset_settings: { playback_policy: ['public'], mp4_support: 'none' } }
92. Response gives: upload.id, upload.url
103. Insert into videos: { owner_id, title, description, visibility, provider: 'mux', upload_id: upload.id, status: 'uploading' }
114. Return: { video_id: new video row id, upload_url: upload.url }
12
13For Cloudflare Stream provider (alternative):
141. POST to https://api.cloudflare.com/client/v4/accounts/{CF_ACCOUNT_ID}/stream?direct_user=true
15   Header: Authorization: Bearer {CF_STREAM_TOKEN}
16   Header: Tus-Resumable: 1.0.0, Upload-Length: (from client)
172. Response Location header = upload URL
183. Insert video row and return upload_url
19
20In the frontend, build a VideoUploadForm component:
21- Drag-and-drop zone for video files (accept video/*)
22- Fields: title (required), description, visibility Select
23- On submit: call create-video-upload Edge Function to get upload_url and video_id
24- Upload file to upload_url using fetch with method PUT and the file as body
25- Show upload progress using a XMLHttpRequest with progress events and a shadcn/ui Progress bar
26- After upload completes, show 'Processing...' state and subscribe to Realtime for that video_id

1Create a Supabase Edge Function at supabase/functions/mux-webhook/index.ts.
2
3This function handles POST requests from Mux (no authentication required, but verify webhook signature).
4
5Logic:
61. Read the mux-signature header from the request.
72. Verify the signature using HMAC-SHA256 with MUX_WEBHOOK_SECRET from Deno.env:
8   const body = await req.text()
9   const expectedSig = 'v1=' + hmacSha256Hex(MUX_WEBHOOK_SECRET, timestamp + '.' + body)
10   If signatures don't match, return 401.
113. Parse body as JSON: { type, data }
124. Handle these event types:
13   - 'video.upload.asset_created': update videos SET provider_asset_id = data.asset_id WHERE upload_id = data.upload_id
14   - 'video.asset.ready': update videos SET status = 'ready', playback_id = data.playback_ids[0].id, duration_seconds = data.duration, thumbnail_url = 'https://image.mux.com/' + data.playback_ids[0].id + '/thumbnail.jpg' WHERE provider_asset_id = data.id
15   - 'video.asset.errored': update videos SET status = 'error' WHERE provider_asset_id = data.id
165. Return 200 for all handled events.
17
18Register this Edge Function URL in the Mux Dashboard under Webhooks. Copy the signing secret from Mux into Cloud tab → Secrets as MUX_WEBHOOK_SECRET.

1import { useEffect, useRef, useState } from 'react'
2import MuxPlayer from '@mux/mux-player-react'
3import { supabase } from '@/integrations/supabase/client'
4import { Badge } from '@/components/ui/badge'
5import { Separator } from '@/components/ui/separator'
6
7type Video = {
8  id: string
9  title: string
10  description: string
11  playback_id: string
12  duration_seconds: number
13  view_count: number
14  owner_id: string
15  created_at: string
16}
17
18export function VideoPlayer({ videoId }: { videoId: string }) {
19  const [video, setVideo] = useState<Video | null>(null)
20  const [resumeTime, setResumeTime] = useState<number>(0)
21  const playerRef = useRef<HTMLVideoElement | null>(null)
22  const progressRef = useRef<number>(0)
23  const saveTimer = useRef<ReturnType<typeof setInterval> | null>(null)
24
25  useEffect(() => {
26    supabase.from('videos').select('*').eq('id', videoId).single()
27      .then(({ data }) => setVideo(data))
28    supabase.from('watch_history').select('progress_seconds').eq('video_id', videoId).single()
29      .then(({ data }) => { if (data) setResumeTime(data.progress_seconds) })
30    supabase.rpc('increment_view_count', { p_video_id: videoId })
31  }, [videoId])
32
33  const saveProgress = async () => {
34    if (progressRef.current < 5) return
35    const completed = video ? progressRef.current >= video.duration_seconds * 0.95 : false
36    await supabase.from('watch_history').upsert({
37      video_id: videoId,
38      progress_seconds: progressRef.current,
39      completed,
40      last_watched_at: new Date().toISOString(),
41    }, { onConflict: 'user_id,video_id' })
42  }
43
44  useEffect(() => {
45    saveTimer.current = setInterval(saveProgress, 10000)
46    window.addEventListener('beforeunload', saveProgress)
47    return () => {
48      if (saveTimer.current) clearInterval(saveTimer.current)
49      window.removeEventListener('beforeunload', saveProgress)
50      saveProgress()
51    }
52  }, [video])
53
54  if (!video) return null
55
56  const fmt = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
57
58  return (
59    <div className="max-w-4xl mx-auto space-y-4">
60      <MuxPlayer
61        playbackId={video.playback_id}
62        startTime={resumeTime > 10 ? resumeTime : 0}
63        onTimeUpdate={(e) => { progressRef.current = (e.target as HTMLVideoElement).currentTime }}
64        onPause={saveProgress}
65        style={{ width: '100%', aspectRatio: '16/9' }}
66      />
67      <div className="space-y-2">
68        <h1 className="text-xl font-bold">{video.title}</h1>
69        <div className="flex items-center gap-3 text-sm text-muted-foreground">
70          <span>{video.view_count.toLocaleString()} views</span>
71          <Separator orientation="vertical" className="h-4" />
72          <span>{fmt(video.duration_seconds)}</span>
73          <Separator orientation="vertical" className="h-4" />
74          <span>{new Date(video.created_at).toLocaleDateString()}</span>
75        </div>
76        {video.description && <p className="text-sm">{video.description}</p>}
77      </div>
78    </div>
79  )
80}

1Build a playlist management page at src/pages/Playlists.tsx.
2
3Requirements:
4- List all playlists owned by the user as Cards with thumbnail, title, video count, and visibility Badge.
5- 'New Playlist' Button opens a Dialog with title, description, and visibility Select fields.
6- Clicking a playlist opens a detail page /playlists/[id] showing the ordered video list.
7- On the detail page:
8  - Playlist header: thumbnail, title, description, video count, total duration (sum of duration_seconds).
9  - Video list as draggable rows using HTML5 drag-and-drop (or ask Lovable to use @dnd-kit/sortable).
10    Each row: position number, thumbnail, title, duration, remove Button.
11  - Dragging a row to a new position updates the position integers in playlist_videos.
12  - 'Add Videos' Button opens a Sheet showing the user's ready videos as checkboxes. Confirming adds them to playlist_videos at the end of the current sequence.
13- Playlist player: a 'Play All' Button navigates to /watch/[firstVideoId]?playlist=[playlistId].
14  On the player page, when a video ends, auto-advance to the next video in the playlist by querying playlist_videos WHERE playlist_id = X AND position > currentPosition ORDER BY position ASC LIMIT 1.