Skip to content

feat: implement end-to-end video upload flow on frontend#21

Merged
keanu-a merged 6 commits into
mainfrom
keanucaloua/kyy-20-create-video-upload-flow
Jun 22, 2026
Merged

feat: implement end-to-end video upload flow on frontend#21
keanu-a merged 6 commits into
mainfrom
keanucaloua/kyy-20-create-video-upload-flow

Conversation

@keanu-a

@keanu-a keanu-a commented Jun 22, 2026

Copy link
Copy Markdown
Owner

Summary

Implements the full video upload flow from the frontend, wiring the Next.js client to the Spring Boot backend for the first time.

Covers complete lifecycle: metadata creation -> direct s3 upload -> Mux ingest trigger -> polling until video is processed and ready

Changes

** API layer **

  • lib/api/fetcher.ts: reusable apiFetch wrapper that attaches Supabase access token as a Bearer header.
  • lib/api/videos.ts: endpoint functions with DTOs mirroring the backend DTOs. VideoStatus and ContentType defined as single source of truth

S3 upload

  • lib/upload/s3.ts: direct browser -> S3 PUT url. No auth header, relies on the presigned URL

** Upload flow **

  • hooks/use-video-upload.ts: state machine coordinating the multi-step flow, exposing status, progress, and error to the UI. Also polls GET /video/{id} until Mux changes video status to READY

** UI **

  • components/upload/upload-form.tsx: react-hook-form + zod validation,
  • app/upload/page.tsx: protected route with server-side getUser() guard, redirects unauthenticated users to /login

Backend

CORS adjusments

  • Adding PATCH to allowed methods
  • S3 bucket, adding CORS rule (allowed origins and methods)

@keanu-a keanu-a added the ai-review Have AI agent review PR label Jun 22, 2026
Comment thread backend/src/main/java/com/kyyros/config/SecurityConfig.java
Comment thread frontend/src/lib/api/fetcher.ts
Comment thread frontend/src/hooks/use-video-upload.ts
Comment thread frontend/src/hooks/use-video-upload.ts
Comment thread frontend/src/lib/api/videos.ts Outdated
Comment thread frontend/src/components/upload/upload-form.tsx Outdated
@claude

claude Bot commented Jun 22, 2026

Copy link
Copy Markdown

The upload flow is well-structured — the state machine is clear, Zod validation is solid, and the S3 XHR approach handles progress correctly. Five concrete issues flagged inline: (1) BASE_URL can silently be undefined, causing every API call to construct a malformed URL; (2) the polling interval in pollUntilReady has no timeout or max-attempt guard, so a Mux outage leaves users stuck in PROCESSING forever; (3) pollUntilReady doesn't clear an existing interval before starting a new one, leaking the old interval if called while a poll is already active; (4) GetVideoResponse.playbackId is typed string but the backend returns null during processing, so intermediate polling responses deserialize incorrectly; (5) the upload-state error paragraph is a plain <p> with no live region, so screen readers won't announce it — unlike FieldError which correctly uses role="alert".

Comment thread frontend/src/lib/api/fetcher.ts
@keanu-a keanu-a removed the ai-review Have AI agent review PR label Jun 22, 2026
@keanu-a keanu-a merged commit 9900b93 into main Jun 22, 2026
3 checks passed
@keanu-a keanu-a deleted the keanucaloua/kyy-20-create-video-upload-flow branch June 22, 2026 23:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant