feat(NES-1629): video picker uploads grid (MyMuxVideosGrid) by edmonday · Pull Request #9175 · JesusFilm/core

edmonday · 2026-05-07T04:41:36Z

Summary

Adds the "Your uploads" grid below the Mux upload form in the editor's video picker, gated behind the mediaLibrary LaunchDarkly flag. Builds on BE-1 (NES-1627, PR #9166) which added deterministic ordering to getMyMuxVideos.

What's included

MyMuxVideosGrid component
- 3-column grid, 12px gap, scrollable container (max-height 300px desktop / 220px mobile)
- Offset/limit pagination via useQuery(GetMyMuxVideos, { offset, limit: 9 })
- "Load More" button (PAGE_SIZE = 9); switches to disabled "No more to load" once a partial page returns
- Filters to ready-to-stream videos with non-null playbackId
- Skeleton tile with progress indicator while a Mux upload is mid-processing
- Selected tile: red 2px outline ring
- "YOUR UPLOADS" overline header (Montserrat, uppercase, letter-spacing)
Click-tile preview flow: opens existing VideoDetails + MuxDetails; playbackId threaded through to avoid the redundant fetch. Confirm-to-select via "Select" button applies the video to the active block (shouldCloseDrawer=true).
MuxDetails.dispose() cleanup of the videojs player instance on unmount (player leak fix).
MuxVideoUploadProvider calls client.refetchQueries({ include: ['GetMyMuxVideos'] }) from the polling-completion path so freshly-ready uploads surface in the grid.
Apollo cache: getMyMuxVideos configured with offsetLimitPagination() so fetchMore correctly merges pages.
Flag gating: MyMuxVideosGrid mount in VideoFromMux.tsx is wrapped in mediaLibrary === true (per the rollout plan in docs/plans/2026-04-28-001-feat-editor-asset-library-plan.md). Flag-off path is locked in by a regression test.

VideoLibrary.onSelect already closes the outer drawer when shouldCloseDrawer is true on main, so no change needed there.

Tests added

MyMuxVideosGrid.spec.tsx:

should render only ready-to-stream videos with playbackId (filter test)
should render uploading skeleton tile when uploading is true
should render nothing when no videos and not uploading
should open the preview when a tile is clicked and apply the selection on confirm
should show Load More when results are full page; clicking fetches next page
should show "No more to load" disabled state once a partial page is returned
should highlight the selected video tile

VideoFromMux.spec.tsx:

should not render MyMuxVideosGrid when mediaLibrary flag is off (regression)
should render MyMuxVideosGrid when mediaLibrary flag is on

MuxDetails.spec.tsx:

should dispose the videojs player on unmount (leak fix)
should render a Select button when no activeVideoBlock and call onSelect with playbackId fallback
should not render a Select button when activeVideoBlock is provided
existing tests updated to pass id prop

Verification

npx jest --config apps/journeys-admin/jest.config.ts --no-coverage 'apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary' 'apps/journeys-admin/src/components/MuxVideoUploadProvider' -> 25 suites, 179 tests pass
npx nx type-check journeys-admin -> passes
npx nx build journeys-admin -> compiles successfully; SSG step for /templates fails locally because no GraphQL server is running on 127.0.0.1:4000 (unrelated to this PR)

Files changed

apps/journeys-admin/__generated__/GetMyMuxVideos.ts (new)
apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromMux/MyMuxVideosGrid/{MyMuxVideosGrid.tsx,MyMuxVideosGrid.spec.tsx,index.ts} (new)
apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromMux/VideoFromMux.tsx + spec
apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromMux/MuxDetails/MuxDetails.tsx + spec + stories
apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoDetails/VideoDetails.tsx
apps/journeys-admin/src/components/MuxVideoUploadProvider/MuxVideoUploadProvider.tsx
apps/journeys-admin/src/libs/apolloClient/cache.ts

Test plan

Flag off: video picker Upload tab unchanged from pre-PR behavior
Flag on: "Your uploads" grid appears below the upload form, listing only ready-to-stream videos
Upload a new video, wait for Mux processing to complete -> grid auto-refreshes and shows the new tile at the top
Click a tile -> preview slides in; click Select -> video applied to the active block, drawer closes back to Properties
Re-pick the active block's same video -> drawer still closes via shouldCloseDrawer path
Open and close the preview drawer multiple times -> no console errors / no stacked videojs player instances
Click Load More -> next page appended; Load More turns into disabled "No more to load" when fewer than 9 returned

Adds the "Your uploads" grid below the Mux upload form in the editor's video picker, gated behind the `mediaLibrary` LaunchDarkly flag. - New `MyMuxVideosGrid` component: 3-col grid, offset/limit pagination with PAGE_SIZE 9 and "Load More" / "No more to load" disabled state. - Filters to ready-to-stream videos with non-null playbackId. - Click-tile opens existing `VideoDetails` + `MuxDetails`; `playbackId` threaded through to skip the redundant fetch. - `MuxDetails` now disposes the videojs player on unmount and accepts an `id` + `playbackId` so it can render a Select button when used in the gallery (no `activeVideoBlock`). - `MuxVideoUploadProvider` refetches `GetMyMuxVideos` after polling completes so freshly-ready uploads surface in the grid. - Apollo cache: `getMyMuxVideos` uses `offsetLimitPagination()` to merge fetchMore pages.

linear · 2026-05-07T04:41:40Z

NES-1629 FE-2: Video picker uploads grid (VideoFromMux)

coderabbitai · 2026-05-07T04:41:45Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0936350e-f1aa-4e4c-abde-c6d04a846e5e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch edmondshen/nes-1629-fe-2-video-picker-uploads-grid-videofrommux

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-07T04:42:24Z

	Fails
🚫	Please request a reviewer for this PR.

	Warnings
⚠️	❗ Big PR (771 changes)

(change count - 771): Pull Request size seems relatively large. If Pull Request contains multiple changes, split each into separate PR will helps faster, easier review.

Generated by 🚫 dangerJS against 732376a

nx-cloud · 2026-05-07T04:42:46Z

View your CI Pipeline Execution ↗ for commit 9fbe624

Command	Status	Duration	Result
`nx run-many --target=vercel-alias --projects=jo...`	✅ Succeeded	2s	View ↗
`nx run-many --target=upload-sourcemaps --projec...`	✅ Succeeded	10s	View ↗
`nx run-many --target=deploy --projects=journeys...`	✅ Succeeded	2m 27s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-07 04:52:09 UTC

github-actions · 2026-05-07T04:52:11Z

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Thu May 7 16:52:10 NZST 2026

github-actions Bot requested a deployment to Preview - journeys-admin May 7, 2026 04:43 Pending

edmonday self-assigned this May 7, 2026

fix: lint issues

732376a

github-actions Bot temporarily deployed to Preview - journeys-admin May 7, 2026 04:48 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(NES-1629): video picker uploads grid (MyMuxVideosGrid)#9175

feat(NES-1629): video picker uploads grid (MyMuxVideosGrid)#9175
edmonday wants to merge 2 commits into
mainfrom
edmondshen/nes-1629-fe-2-video-picker-uploads-grid-videofrommux

edmonday commented May 7, 2026

Uh oh!

linear Bot commented May 7, 2026

Uh oh!

coderabbitai Bot commented May 7, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions Bot commented May 7, 2026 •

edited

Loading

Uh oh!

nx-cloud Bot commented May 7, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

edmonday commented May 7, 2026

Summary

What's included

Tests added

Verification

Files changed

Test plan

Uh oh!

linear Bot commented May 7, 2026

Uh oh!

coderabbitai Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai Bot commented May 7, 2026 •

edited

Loading

github-actions Bot commented May 7, 2026 •

edited

Loading

nx-cloud Bot commented May 7, 2026 •

edited

Loading