feat: add video upload hook#8697
feat: add video upload hook#8697jaco-brink wants to merge 3 commits intofeature/26-01-JB-story-1from
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
WalkthroughA new React hook Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Client as Client (React Hook)
participant GraphQL as GraphQL Backend
participant UpChunk as UpChunk
participant Mux as Mux Service
User->>Client: Drop video file
activate Client
Client->>Client: Validate file size
Note over Client: Check < 1GB limit
Client->>GraphQL: createMuxVideoUploadByFile mutation
activate GraphQL
GraphQL->>Mux: Request upload session
Mux-->>GraphQL: Return uploadUrl & id
GraphQL-->>Client: Return uploadUrl & videoId
deactivate GraphQL
Client->>UpChunk: createUpload with file & uploadUrl
activate UpChunk
UpChunk->>Mux: Upload file chunks
UpChunk-->>Client: Progress updates
Client->>Client: Track progress (0-100%)
Mux-->>UpChunk: Upload complete
UpChunk-->>Client: Success notification
deactivate UpChunk
Client->>GraphQL: Poll GET_MY_MUX_VIDEO_QUERY (every 5s)
activate GraphQL
loop Until readyToStream
GraphQL->>Mux: Check video status
Mux-->>GraphQL: Status: processing/ready
GraphQL-->>Client: Return readyToStream flag
Note over Client: Repeat until ready
end
GraphQL-->>Client: readyToStream = true
deactivate GraphQL
Client->>Client: Set status to 'completed'
Client->>Client: Invoke onUploadComplete callback
deactivate Client
User->>User: Video upload finished
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…eate-video-upload-dropzone-mux
|
View your CI Pipeline Execution ↗ for commit 4d51633
☁️ Nx Cloud last updated this comment at |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
The latest updates on your projects.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In
`@apps/journeys-admin/src/components/TemplateCustomization/utils/useVideoUpload/useVideoUpload.tsx`:
- Around line 68-75: The cancelUpload callback currently aborts the upload and
resets status/progress/error but doesn't clear the uploaded video's identifier,
leaving a stale videoId in the UI; update cancelUpload (the function using
uploadInstanceRef, clearPolling, setStatus, setProgress, setError) to also reset
the video id state by calling the relevant setter (e.g., setVideoId(undefined)
or setVideoId('')) so the UI no longer displays the previous upload's id after
cancel.
- Around line 111-115: When an oversized file is selected the handler currently
only calls setError and returns, leaving previous status/progress/videoId intact
and not notifying the consumer; update the oversized-file branch inside the
async (file: File) => { ... } handler in useVideoUpload to also
setStatus('error'), reset progress (setProgress(0)), clear videoId
(setVideoId(undefined) or null as used), and invoke onUploadError with an
appropriate Error object so the error flows through the callback before
returning. Ensure you use the existing state setters (setError, setStatus,
setProgress, setVideoId) and the onUploadError prop to make the failure state
consistent.
🧹 Nitpick comments (3)
apps/journeys-admin/src/components/TemplateCustomization/utils/useVideoUpload/useVideoUpload.tsx (2)
51-51: PreferReturnType<typeof setInterval>for timer refs in browser code.
This avoids Node vs DOM timer type mismatches in TS builds.♻️ Suggested update
- const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null) + const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
53-59: Type the Apollo hooks with generated GraphQL types.
ImportTemplateCustomizeCreateMuxVideoUploadByFileMutation,TemplateCustomizeCreateMuxVideoUploadByFileMutationVariables,TemplateCustomizeGetMyMuxVideoQuery, andTemplateCustomizeGetMyMuxVideoQueryVariablesfrom the generated types and apply them:useMutation<TemplateCustomizeCreateMuxVideoUploadByFileMutation, TemplateCustomizeCreateMuxVideoUploadByFileMutationVariables>(...)anduseLazyQuery<TemplateCustomizeGetMyMuxVideoQuery, TemplateCustomizeGetMyMuxVideoQueryVariables>(...). This avoidsanyleakage and keeps mutation/query results aligned with the schema.apps/journeys-admin/src/components/TemplateCustomization/utils/useVideoUpload/useVideoUpload.spec.tsx (1)
246-291: Consider fake timers to avoid 10–20s real-time waits.
Usingjest.useFakeTimers()+advanceTimersByTimewill speed up CI and reduce flakiness.Also applies to: 293-345
| const cancelUpload = useCallback(() => { | ||
| uploadInstanceRef.current?.abort() | ||
| uploadInstanceRef.current = null | ||
| clearPolling() | ||
| setStatus('idle') | ||
| setProgress(0) | ||
| setError(undefined) | ||
| }, [clearPolling]) |
There was a problem hiding this comment.
Reset videoId on cancel to avoid stale state.
Without clearing, the UI can show the previous upload’s id after a cancel.
🧹 Suggested fix
const cancelUpload = useCallback(() => {
uploadInstanceRef.current?.abort()
uploadInstanceRef.current = null
clearPolling()
setStatus('idle')
setProgress(0)
setError(undefined)
+ setVideoId(undefined)
}, [clearPolling])📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const cancelUpload = useCallback(() => { | |
| uploadInstanceRef.current?.abort() | |
| uploadInstanceRef.current = null | |
| clearPolling() | |
| setStatus('idle') | |
| setProgress(0) | |
| setError(undefined) | |
| }, [clearPolling]) | |
| const cancelUpload = useCallback(() => { | |
| uploadInstanceRef.current?.abort() | |
| uploadInstanceRef.current = null | |
| clearPolling() | |
| setStatus('idle') | |
| setProgress(0) | |
| setError(undefined) | |
| setVideoId(undefined) | |
| }, [clearPolling]) |
🤖 Prompt for AI Agents
In
`@apps/journeys-admin/src/components/TemplateCustomization/utils/useVideoUpload/useVideoUpload.tsx`
around lines 68 - 75, The cancelUpload callback currently aborts the upload and
resets status/progress/error but doesn't clear the uploaded video's identifier,
leaving a stale videoId in the UI; update cancelUpload (the function using
uploadInstanceRef, clearPolling, setStatus, setProgress, setError) to also reset
the video id state by calling the relevant setter (e.g., setVideoId(undefined)
or setVideoId('')) so the UI no longer displays the previous upload's id after
cancel.
| async (file: File) => { | ||
| if (file.size > MAX_VIDEO_SIZE) { | ||
| setError('File is too large. Max size is 1GB.') | ||
| return | ||
| } |
There was a problem hiding this comment.
Make oversized-file handling set error status and trigger onUploadError.
Currently status/progress/videoId can stay from a prior upload and errors don’t flow through the callback.
🛡️ Suggested fix
async (file: File) => {
if (file.size > MAX_VIDEO_SIZE) {
- setError('File is too large. Max size is 1GB.')
+ const message = 'File is too large. Max size is 1GB.'
+ setStatus('error')
+ setProgress(0)
+ setVideoId(undefined)
+ setError(message)
+ onUploadError?.(message)
return
}🤖 Prompt for AI Agents
In
`@apps/journeys-admin/src/components/TemplateCustomization/utils/useVideoUpload/useVideoUpload.tsx`
around lines 111 - 115, When an oversized file is selected the handler currently
only calls setError and returns, leaving previous status/progress/videoId intact
and not notifying the consumer; update the oversized-file branch inside the
async (file: File) => { ... } handler in useVideoUpload to also
setStatus('error'), reset progress (setProgress(0)), clear videoId
(setVideoId(undefined) or null as used), and invoke onUploadError with an
appropriate Error object so the error flows through the callback before
returning. Ensure you use the existing state setters (setError, setStatus,
setProgress, setVideoId) and the onUploadError prop to make the failure state
consistent.
1 participant
Summary by CodeRabbit
Release Notes
New Features
Tests