VideoPress: rework the video details screen around a preview player - #51148
Closed
adampickering wants to merge 3 commits into
Closed
VideoPress: rework the video details screen around a preview player#51148adampickering wants to merge 3 commits into
adampickering wants to merge 3 commits into
Conversation
The video details screen was a 660px column — the narrowest surface in the product, on the one screen people write on. It now uses the same 1344px container as the rest of the dashboard, split into a writing canvas and a settings rail. - Group the file name, title, description, chapters and thumbnail control into a single "Video details" card below the player. ThumbnailCard keeps only its read-outs and becomes VideoInfoCard. - Move "Add to a post or page" into the page header, where it can now create a new page as well as a new post. It renders only when both a GUID and a content nonce are present, so its items can no longer open a blank editor. - Show the in-progress title in the page heading as it is typed, falling back to "Untitled" so the page never loses its accessible name. Typing does not save. - Split the rating options into a label and a description, so a screen reader announces "G" rather than the whole sentence as the option's name. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CcAb177MwHKkw7D5RPrSvq
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
Code Coverage SummaryCoverage changed in 5 files.
4 files are newly checked for coverage.
|
The player led the canvas at full width: 828x466 at a 1440 viewport and 892x502 at 1920, which is over half the visible page before a single field has been read. The settings it pushed into the 380px rail did not fit -- roughly 900px of cards against a cap of 584px on a 1440x900 laptop -- so the rail grew its own scrollbar, with no border, background or scroll shadow to tell it apart from the page's. Two scrollbars, no boundary. Both are the same problem. Swapping what each column holds fixes both: the player becomes a 380x214 preview at the head of the right column, and every control moves to the wide canvas. The right column is now ~346px, so the height cap, the sticky positioning, the two viewport-chrome custom properties and the flex-shrink guard all go with it. One scroll surface. The canvas reads in the order someone works: what the video says, what it looks like, who can see it. * Thumbnail is a card of its own and shows the current poster next to the control that replaces it. It was a label and a single button, which is what it had been reduced to; the poster goes through usePosterUrl so a private video shows a skeleton until its playback token lands rather than a broken image. * Subtitles is a card of its own. Both ways in were nearly invisible: a minimal small button reading "Manage" -- the full string was only in an aria-label -- at the foot of the second rail card, below the fold at common heights and absent without a GUID, plus an iconless item in an unlabelled kebab. The kebab keeps its entry. * File name moves to Video info, next to the link, shortcode and upload date. It is a fact about the upload, derived from the source URL, not something a person writes next to the title. The player is a grid sibling of both columns rather than a child of either, placed by area, so the stacked layout below 1100px can lead with it while the read-outs stay last. Row 2 is a flexible track: the canvas spans both rows, and two intrinsic rows would distribute its excess height across them and strand the read-outs halfway down the page. Verified against the real components and the compiled stylesheet in a headless harness at five viewports: player 380x214, right column 346px with no inner scrollbar, no horizontal overflow, and player -> canvas -> read-outs when stacked. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CcAb177MwHKkw7D5RPrSvq
adampickering
changed the title
Author
|
Closing while I review this locally — reopening once I've been through it. Branch and commits are untouched. |
…psibles
Four refinements from Adam's design pass on the preview-player layout:
* Privacy & sharing and Rating move under Video info in the right column.
The split becomes authoring vs. configuring: the canvas holds what a
person writes (title, description, chapters, thumbnail, subtitles), the
column holds the video, the values that address it, and settings picked
once from a fixed set.
* Both settings cards become CollapsibleCards, collapsed by default, with
the current value (privacy level, rating) carried in the header via
HeaderDescription. Expanded, the column ran 407px past the canvas beside
it; collapsed, the two columns are within 4px. Collapsing is not lossy:
CollapsibleCard.Content defaults to hidden-until-found, so find-in-page
still reaches the controls, and the header summary reaches assistive
tech as the trigger's accessible description.
* The thumbnail dropdown becomes a row of 16:9 tiles: current poster,
Upload image, Select from video — the choice is visual, so a menu that
hides both options behind a label was the wrong control. The design
system has no media picker, upload tile or dashed container (the survey
is documented in thumbnail-tile.tsx), so the tile borrows Button's
unstyled variant for the interaction and paints the frame from WPDS
tokens. thumbnail-update-button.tsx is removed.
* The Subtitles card stacks its state line above the button — it shared a
row with it, which read as fragments ("None [Manage subtitles]") — with
the copy softened to "No subtitles yet." and a Skeleton while the
tracks query resolves.
Adds first-ever test coverage for the Privacy & sharing and Rating cards
(collapsed default, header value, expand-and-edit, find-in-page survival).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CcAb177MwHKkw7D5RPrSvq
adampickering
marked this pull request as ready for review
August 13, 2026 00:59
adampickering
added
Enhancement
Author
|
Closing this — the work here is included in #51268, which rebuilds the first-run and upload experience around it. The video details screen changes from this PR are in that branch unchanged, plus the upload flow that now hands you to this screen. |
github-actions
Bot
removed
[Status] In Progress
[Status] Needs Review
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
The video details screen was a 660px column — the narrowest screen in the product, on the one screen people actually write on. This reworks it around a preview player (the YouTube Studio pattern): video + settings on the right, everything you author on a wide canvas.
What changed
CollapsibleCards. Headers show the current value; find-in-page still reaches collapsed content (hidden-until-found).Where this is heading
This PR is a stepping stone, not the destination. Per the discussion with @mouraheyde: the longer-term direction is to build these screens on WPDS layout patterns, likely as a Library master-detail view (DataViews 17.3 is composable and the Library already holds selection state). That's a bigger change — it merges two routes and relocates Save/breadcrumb/header — so it's its own project. This PR fixes the screen people use today without blocking that path.
Known limitations (deliberate)
R-17, dashboard sendsR).Chapters (N)count can disagree with what's written.Does this pull request change what data or activity we track or use?
No.
Testing instructions