). The live-title cases below read that
+// heading, so a hardcoded stub would make them assert nothing.
jest.mock( '@wordpress/admin-ui', () => ( {
- Breadcrumbs: () => VideoPress,
+ Breadcrumbs: ( { items }: { items: { label: string; to?: string }[] } ) => {
+ const last = items[ items.length - 1 ];
+ return (
+
+ );
+ },
} ) );
// Variables referenced inside jest.mock() factories must be prefixed with
@@ -89,10 +108,22 @@ jest.mock( '../../../src/dashboard/components/video-details/preview-player', ()
__esModule: true,
default: () => ,
} ) );
+jest.mock( '../../../src/dashboard/components/video-details/video-info-card', () => ( {
+ __esModule: true,
+ default: () => ,
+} ) );
+// Both carry their own queries — the poster mutation and frame picker in one,
+// the tracks fetch in the other — which would otherwise mount against this
+// file's catch-all apiFetch handler. VideoDetailsCard stays real; the tests
+// type into its fields.
jest.mock( '../../../src/dashboard/components/video-details/thumbnail-card', () => ( {
__esModule: true,
default: () => ,
} ) );
+jest.mock( '../../../src/dashboard/components/video-details/subtitles-card', () => ( {
+ __esModule: true,
+ default: () => ,
+} ) );
jest.mock( '../../../src/dashboard/components/video-details/privacy-sharing-card', () => ( {
__esModule: true,
default: () => ,
@@ -213,6 +244,46 @@ describe( 'video stage', () => {
resetFeatures();
} );
+ /*
+ * The layout contract. The player is a grid sibling of the canvas and the
+ * settings panel, not a child of either, because it is placed by grid area —
+ * that is what lets the stacked layout below 1100px lead with the player
+ * while the settings stay last. Nesting it inside the panel would look
+ * equivalent and silently invert the narrow-viewport order, so pin that it
+ * is outside.
+ */
+ it( 'keeps the player out of the settings panel', async () => {
+ await renderReadyStage();
+
+ const panel = screen.getByRole( 'complementary', { name: 'Video settings' } );
+
+ expect( within( panel ).getByTestId( 'video-info-card' ) ).toBeInTheDocument();
+ expect( within( panel ).queryByTestId( 'preview-player' ) ).not.toBeInTheDocument();
+ expect( screen.getByTestId( 'preview-player' ) ).toBeInTheDocument();
+ } );
+
+ /*
+ * The split is authoring vs. configuring, not editable vs. read-only. The
+ * canvas holds what a person writes; the panel holds the read-outs plus the
+ * settings picked once from a fixed set. Named cards rather than a count, so
+ * putting one in the wrong column fails here.
+ */
+ it( 'groups the settings with the read-outs, and the authoring outside them', async () => {
+ await renderReadyStage();
+
+ const panel = screen.getByRole( 'complementary', { name: 'Video settings' } );
+
+ // Configured once, then left alone.
+ expect( within( panel ).getByTestId( 'privacy-sharing-card' ) ).toBeInTheDocument();
+ expect( within( panel ).getByTestId( 'rating-card' ) ).toBeInTheDocument();
+
+ // Authored — on the canvas, so present on the page but not in the panel.
+ expect( screen.getByTestId( 'thumbnail-card' ) ).toBeInTheDocument();
+ expect( within( panel ).queryByTestId( 'thumbnail-card' ) ).not.toBeInTheDocument();
+ expect( within( panel ).queryByTestId( 'subtitles-card' ) ).not.toBeInTheDocument();
+ expect( within( panel ).queryByLabelText( 'Title' ) ).not.toBeInTheDocument();
+ } );
+
it( 'renders the Details / Editor sub-nav with Details active', async () => {
await renderReadyStage();
@@ -311,6 +382,35 @@ describe( 'video stage', () => {
expect( mockSuccessNotice ).toHaveBeenCalledWith( 'Video details saved.' );
} );
+ // The crumb is the page's . It reads the form's live value, so it has
+ // to follow typing — and it must not turn typing into a save.
+ it( 'tracks the title in the breadcrumb heading as it is typed, without saving', async () => {
+ const user = userEvent.setup();
+
+ await renderReadyStage();
+ expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'My Clip' );
+
+ await user.type( screen.getByLabelText( 'Title' ), ' 2' );
+
+ expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'My Clip 2' );
+ expect( mockUpdateMeta ).not.toHaveBeenCalled();
+ } );
+
+ // An empty label renders an empty , which would leave the page with no
+ // accessible name mid-edit; whitespace has to count as empty too.
+ it( 'falls back to Untitled when the title is cleared or only whitespace', async () => {
+ const user = userEvent.setup();
+
+ await renderReadyStage();
+ await user.clear( screen.getByLabelText( 'Title' ) );
+
+ expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Untitled' );
+
+ await user.type( screen.getByLabelText( 'Title' ), ' ' );
+
+ expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Untitled' );
+ } );
+
it( 'skips the chapters sync and shows an error when the meta save fails', async () => {
const user = userEvent.setup();
diff --git a/projects/packages/videopress/src/dashboard/components/add-to-content-menu/index.tsx b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/index.tsx
new file mode 100644
index 000000000000..897f2a6d7e55
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/index.tsx
@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { plus, page as pageIcon, post as postIcon } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+
+// The two content types this menu can hand a video off to. Anything else
+// (adding to an *existing* post or page) is deliberately out of scope.
+export type NewContentType = 'post' | 'page';
+
+/**
+ * The nonce the server requires before it will fill a new post with the video.
+ *
+ * Read in two places — the render guard and the click handler — because the
+ * menu must not appear at all when it cannot work.
+ *
+ * @return The content nonce, or undefined when the boot payload has none.
+ */
+export const readContentNonce = (): string | undefined => {
+ const nonce =
+ typeof JPVIDEOPRESS_INITIAL_STATE !== 'undefined'
+ ? JPVIDEOPRESS_INITIAL_STATE?.API?.contentNonce
+ : undefined;
+
+ return typeof nonce === 'string' && nonce !== '' ? nonce : undefined;
+};
+
+/**
+ * Open a brand-new post or page in the block editor with the video already in
+ * it. The block markup is produced server-side by
+ * `Block_Editor_Content::videopress_video_block_by_guid()`, which filters
+ * `default_content` on `post-new.php` when the request carries a GUID and a
+ * valid `videopress-content-nonce`. Because it hooks `post-new.php`, passing
+ * `post_type=page` gets page support for free.
+ *
+ * Opened in a new tab so the user keeps their place on the dashboard.
+ *
+ * @param guid - The VideoPress GUID of the published video.
+ * @param contentType - Whether to create a new post or a new page.
+ */
+export const openInNewContent = ( guid: string, contentType: NewContentType ) => {
+ const nonce = readContentNonce();
+
+ if ( ! guid || ! nonce ) {
+ return;
+ }
+
+ const args: Record< string, string > = { videopress_guid: guid, _wpnonce: nonce };
+ if ( contentType === 'page' ) {
+ args.post_type = 'page';
+ }
+
+ window.open( addQueryArgs( 'post-new.php', args ), '_blank' );
+};
+
+type Props = {
+ /** The VideoPress GUID of the video to insert. */
+ guid?: string;
+ /** Accessible label for the trigger; disambiguates the menu when several are on screen. */
+ label?: string;
+ /**
+ * Trigger size. `compact` matches the dashboard header's action row, which
+ * is the only place this renders today; `default` is the 40px in-card size.
+ *
+ * @default 'default'
+ */
+ size?: 'default' | 'compact';
+ className?: string;
+};
+
+/**
+ * "Add to a post or page" dropdown for a published video. Mirrors the labelled
+ * `DropdownMenu` used by the video detail view's ThumbnailUpdateButton so the
+ * two share the design system's look.
+ *
+ * Rendered from the video screen's header actions — the one place it appears
+ * today. Only renders when the video has both a VideoPress GUID and a content
+ * nonce: the hand-off is the server-side `videopress_guid` content filter, so
+ * without either there is no honest VideoPress block to insert, and a menu
+ * whose items silently open a blank editor is worse than no menu at all. A
+ * GUID is absent on local attachments and on videos still being registered
+ * with VideoPress.
+ *
+ * NOTE: `add/videopress-upload-onboarding` carries a near-identical copy of
+ * this file at the same path, differing only in the trigger's `text`. If both
+ * branches land, reconcile them into one component rather than resolving the
+ * conflict by picking a string.
+ *
+ * @param props - Component props.
+ * @param props.guid - The VideoPress GUID of the video to insert.
+ * @param props.label - Accessible label for the trigger.
+ * @param props.size - Trigger size (`default` or `compact`).
+ * @param props.className - Extra class for the dropdown root.
+ * @return The dropdown, or null when no GUID is available.
+ */
+export default function AddToContentMenu( { guid, label, size, className }: Props ) {
+ // Both halves of the hand-off have to be present, not just the GUID. The
+ // server only fills `default_content` when the request carries a valid
+ // `videopress-content-nonce`, so without it every item in this menu would
+ // open a blank editor — the silent no-op this component's own docblock
+ // promises not to ship.
+ if ( ! guid || ! readContentNonce() ) {
+ return null;
+ }
+
+ return (
+
+ { ( { onClose }: { onClose: () => void } ) => (
+
+
+
+
+ ) }
+
+ );
+}
diff --git a/projects/packages/videopress/src/dashboard/components/add-to-content-menu/test/index.test.tsx b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/test/index.test.tsx
new file mode 100644
index 000000000000..97863ff08a09
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/test/index.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AddToContentMenu from '..';
+
+const GUID = 'abc123';
+
+/**
+ * Set (or clear) the boot payload the component reads its nonce from.
+ *
+ * @param contentNonce - Nonce to expose, or undefined to simulate its absence.
+ */
+function setInitialState( contentNonce?: string ) {
+ ( global as unknown as { JPVIDEOPRESS_INITIAL_STATE?: unknown } ).JPVIDEOPRESS_INITIAL_STATE =
+ contentNonce === undefined ? { API: {} } : { API: { contentNonce } };
+}
+
+describe( 'AddToContentMenu', () => {
+ let openSpy: jest.SpyInstance;
+
+ beforeEach( () => {
+ setInitialState( 'nonce-123' );
+ openSpy = jest.spyOn( window, 'open' ).mockImplementation( () => null );
+ } );
+
+ afterEach( () => {
+ openSpy.mockRestore();
+ delete ( global as unknown as { JPVIDEOPRESS_INITIAL_STATE?: unknown } )
+ .JPVIDEOPRESS_INITIAL_STATE;
+ } );
+
+ // Both halves of the hand-off have to be present. A menu whose items open a
+ // blank editor is worse than no menu, so the component renders nothing
+ // rather than something inert.
+ it( 'renders nothing without a GUID', () => {
+ const { container } = render(
+
-
- { __( 'Privacy & sharing', 'jetpack-videopress-pkg' ) }
-
-
+
+
+
+ { __( 'Privacy & sharing', 'jetpack-videopress-pkg' ) }
+
+ { currentPrivacyLabel }
+
+
+
+
onChange( { allowDownloads: next } ) }
/>
-
-
+
+
);
}
diff --git a/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx b/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx
index e4e0e3abab52..5f739d7e6832 100644
--- a/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx
+++ b/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx
@@ -1,6 +1,6 @@
import { RadioControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { Card } from '@wordpress/ui';
+import { Card, CollapsibleCard, Stack, Text } from '@wordpress/ui';
import type { VideoRating } from '../../types/library';
import type { ReactElement } from 'react';
@@ -12,6 +12,11 @@ type Props = {
/**
* Rating radio group. Single tab stop; arrow keys cycle G / PG-13 / R.
*
+ * Collapsible, and collapsed by default — the rating is set once and rarely
+ * revisited, and the three descriptions make it the tallest card in a column
+ * that was already outrunning the canvas beside it. The selected rating shows
+ * in the header, so the collapsed state still answers "what is this rated?".
+ *
* @param props - Component props.
* @param props.value - Currently selected rating.
* @param props.onChange - Receives the new rating.
@@ -19,39 +24,54 @@ type Props = {
*/
export default function RatingCard( { value, onChange }: Props ): ReactElement {
return (
-
-
- { __( 'Rating', 'jetpack-videopress-pkg' ) }
-
-
+
+
+
+ { __( 'Rating', 'jetpack-videopress-pkg' ) }
+
+ { value }
+
+
+
+
onChange( next as VideoRating ) }
+ // `description` renders through the same `StyledHelp` that
+ // `BaseControl` gives every `help` line, so the type matches the
+ // toggle captions in Privacy & sharing. (Only the type — the
+ // two controls set different margins around it.) Splitting the
+ // rating off the sentence also stops a screen reader reading the
+ // whole explanation as the option's name — it becomes an
+ // `aria-describedby` instead.
options={ [
{
- label: __(
- 'G — Suitable for all audiences, including children',
+ label: __( 'G', 'jetpack-videopress-pkg' ),
+ description: __(
+ 'Suitable for all audiences, including children.',
'jetpack-videopress-pkg'
),
value: 'G',
},
{
- label: __(
- 'PG-13 — May include mild language or mature themes',
+ label: __( 'PG-13', 'jetpack-videopress-pkg' ),
+ description: __(
+ 'May include mild language or mature themes.',
'jetpack-videopress-pkg'
),
value: 'PG-13',
},
{
- label: __(
- 'R — May include strong language, violence, or adult content',
+ label: __( 'R', 'jetpack-videopress-pkg' ),
+ description: __(
+ 'May include strong language, violence, or adult content.',
'jetpack-videopress-pkg'
),
value: 'R',
},
] }
/>
-
-
+
+
);
}
diff --git a/projects/packages/videopress/src/dashboard/components/video-details/subtitles-card.tsx b/projects/packages/videopress/src/dashboard/components/video-details/subtitles-card.tsx
new file mode 100644
index 000000000000..0eba08ffa053
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/video-details/subtitles-card.tsx
@@ -0,0 +1,130 @@
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { Button, Card, Skeleton, Stack, Text } from '@wordpress/ui';
+import { useVideoTracks } from '../../../client/components/caption-manager-modal/use-video-tracks';
+import {
+ getLanguageDisplayName,
+ getManualLanguageTagFromTrackKey,
+} from '../../../client/lib/video-tracks/language';
+import type { LibraryItem } from '../../types/library';
+import type { ReactElement } from 'react';
+
+type Props = {
+ video: LibraryItem;
+ onManageSubtitles: () => void;
+};
+
+// The summary lists this many languages before collapsing into "and N more".
+const MAX_SUBTITLE_LANGUAGES_SHOWN = 2;
+
+/**
+ * The card proper. Split from the guard below so the tracks query only exists
+ * for videos that actually have a GUID to query with.
+ *
+ * @param props - Component props.
+ * @param props.video - The current video record.
+ * @param props.onManageSubtitles - Opens the caption manager.
+ * @return The card element.
+ */
+function SubtitlesCardContent( { video, onManageSubtitles }: Props ): ReactElement {
+ /*
+ * The media REST item omits `tracks`, so the languages come from the same
+ * video-info query the caption manager uses.
+ */
+ const { managedTracks, isLoading } = useVideoTracks( {
+ guid: video.guid,
+ isOpen: true,
+ isPrivate: video.isPrivate,
+ tracks: video.tracks,
+ } );
+
+ const subtitleLanguages = [
+ ...new Set(
+ managedTracks
+ .filter( track => track.kind === 'captions' || track.kind === 'subtitles' )
+ .map(
+ track =>
+ track.label ||
+ getLanguageDisplayName(
+ getManualLanguageTagFromTrackKey( track.srcLang ) || track.srcLang
+ )
+ )
+ ),
+ ];
+ const shownLanguages = subtitleLanguages.slice( 0, MAX_SUBTITLE_LANGUAGES_SHOWN ).join( ', ' );
+ const moreLanguagesCount = subtitleLanguages.length - MAX_SUBTITLE_LANGUAGES_SHOWN;
+ let subtitleSummary = shownLanguages || __( 'No subtitles yet.', 'jetpack-videopress-pkg' );
+ if ( moreLanguagesCount > 0 ) {
+ subtitleSummary = sprintf(
+ /* translators: 1: list of subtitle language names. 2: how many further languages exist. */
+ _n(
+ '%1$s, and %2$d more',
+ '%1$s, and %2$d more',
+ moreLanguagesCount,
+ 'jetpack-videopress-pkg'
+ ),
+ shownLanguages,
+ moreLanguagesCount
+ );
+ }
+
+ return (
+
+
+ { __( 'Subtitles', 'jetpack-videopress-pkg' ) }
+
+
+ { /*
+ * State first, then the action — the same rhythm as the
+ * Thumbnail card above this one. The two used to share a row,
+ * which read as fragments ("None [Manage subtitles]").
+ */ }
+
+ { isLoading ? (
+ { subtitleSummary }
+ ) }
+ { /*
+ * The full string, not "Manage". The label used to read
+ * "Manage" with "Manage subtitles" hidden in an aria-label,
+ * which left the visible text meaningless the moment it was
+ * separated from its row label.
+ */ }
+
+
+
+
+ );
+}
+
+/**
+ * Which subtitle languages this video has, and the way in to add or change
+ * them.
+ *
+ * It gets a card on the canvas rather than a row in the reference panel
+ * because the two ways in before this were both nearly invisible: a
+ * lowest-emphasis button labelled "Manage" at the foot of the second panel
+ * card — below the fold on a laptop, and absent entirely without a GUID — and
+ * an iconless first item inside an unlabelled ⋮ menu. Captions are an
+ * accessibility feature; hiding them behind a kebab was the wrong call.
+ *
+ * The ⋮ menu keeps its entry. This is an addition, not a move: a menu people
+ * already know is not worth breaking.
+ *
+ * Renders nothing without a GUID — the tracks API is keyed by it, so there is
+ * nothing to read and nothing to manage until the upload completes.
+ *
+ * @param props - Component props.
+ * @param props.video - The current video record.
+ * @param props.onManageSubtitles - Opens the caption manager.
+ * @return The card, or null when the video has no GUID yet.
+ */
+export default function SubtitlesCard( { video, onManageSubtitles }: Props ): ReactElement | null {
+ if ( ! video.guid ) {
+ return null;
+ }
+
+ return ![]()
at all while the token is in flight — a src without the
+ // token would 403 and render as a broken image.
+ expect( screen.queryByRole( 'img' ) ).not.toBeInTheDocument();
- expect( screen.getByText( 'Subtitles' ) ).toBeInTheDocument();
- expect( screen.getByText( 'None' ) ).toBeInTheDocument();
- } );
+ resolveToken( { playback_token: 'tok-123' } );
- it( 'omits the row for items without a VideoPress GUID', () => {
- render(
-
+
+ { __( 'Thumbnail', 'jetpack-videopress-pkg' ) }
+
-
-
- { showUpdateButton && (
- setDialogOpen( true ) }
- onUploadImage={ handleUploadImage }
- />
- ) }
-
-
-
-
-
- { __( 'File name', 'jetpack-videopress-pkg' ) }
-
- { video.filename }
+ { /*
+ * No Field.Label — the card title already names this. The
+ * Field.Root/Field.Description pair is kept so the caption gets
+ * the same treatment as the help text under every other control
+ * on the page.
+ */ }
+
+
+ { __( 'Pick the still that represents this video.', 'jetpack-videopress-pkg' ) }
+
+
+ { /*
+ * The current poster, shown at the same 16:9 size as the
+ * two actions so the row reads as a set. Solid-bordered
+ * rather than dashed: it is content, not an affordance.
+ */ }
+
+ { posterUrl && (
+ 
+ ) }
+ { isPosterPending && setDialogOpen( true ) }
+ />
-
-
-
- { __( 'Uploaded on', 'jetpack-videopress-pkg' ) }
-
- { dateI18n( dateSettings.formats.date, video.uploadDate ) }
-
-
- { video.guid && (
-
-
- { __( 'Subtitles', 'jetpack-videopress-pkg' ) }
-
-
-
- { isLoadingTracks ? __( 'Loading…', 'jetpack-videopress-pkg' ) : subtitleSummary }
-
-
-
-
- ) }
-
+
+ { __(
+ 'Applies immediately — everything else on this page waits for Save.',
+ 'jetpack-videopress-pkg'
+ ) }
+
+
);
}
+
+/**
+ * The Thumbnail card: the still this video is currently represented by, and
+ * the two ways to replace it — Upload image (WP media modal) and Select from
+ * video (frame scrubber) — as a row of 16:9 tiles.
+ *
+ * Tiles rather than a dropdown because the choice is visual. Both actions
+ * produce an image, the current one is sitting right there to compare
+ * against, and a menu hides all of that behind a label. This is the shape
+ * YouTube Studio uses for the same two actions.
+ *
+ * It is a card of its own rather than a row inside Video details because this
+ * is the one control on the screen that does NOT go through Save: the poster
+ * endpoint is keyed by GUID while the meta patch is keyed by attachment id,
+ * and the mutation polls for up to 60s. Folding it into Save would mean a
+ * button that either spins for a minute or claims success while the poster is
+ * still generating. Two honest save models beat one dishonest one, and a card
+ * boundary says so more clearly than a hairline rule.
+ *
+ * Renders nothing when the video can't take a new poster. A disabled control
+ * would be wrong: there is no user action that would enable it.
+ *
+ * @param props - Component props.
+ * @param props.video - The current video record.
+ * @return The card, or null when the video can't take a new poster.
+ */
+export default function ThumbnailCard( { video }: Props ): ReactElement | null {
+ if ( ! canEditThumbnail( video ) ) {
+ return null;
+ }
+
+ return
, which would leave the page with no
+ // accessible name mid-edit; whitespace has to count as empty too.
+ it( 'falls back to Untitled when the title is cleared or only whitespace', async () => {
+ const user = userEvent.setup();
+
+ await renderReadyStage();
+ await user.clear( screen.getByLabelText( 'Title' ) );
+
+ expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Untitled' );
+
+ await user.type( screen.getByLabelText( 'Title' ), ' ' );
+
+ expect( screen.getByRole( 'heading', { level: 1 } ) ).toHaveTextContent( 'Untitled' );
+ } );
+
it( 'skips the chapters sync and shows an error when the meta save fails', async () => {
const user = userEvent.setup();
diff --git a/projects/packages/videopress/src/dashboard/components/add-to-content-menu/index.tsx b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/index.tsx
new file mode 100644
index 000000000000..897f2a6d7e55
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/index.tsx
@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { plus, page as pageIcon, post as postIcon } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+
+// The two content types this menu can hand a video off to. Anything else
+// (adding to an *existing* post or page) is deliberately out of scope.
+export type NewContentType = 'post' | 'page';
+
+/**
+ * The nonce the server requires before it will fill a new post with the video.
+ *
+ * Read in two places — the render guard and the click handler — because the
+ * menu must not appear at all when it cannot work.
+ *
+ * @return The content nonce, or undefined when the boot payload has none.
+ */
+export const readContentNonce = (): string | undefined => {
+ const nonce =
+ typeof JPVIDEOPRESS_INITIAL_STATE !== 'undefined'
+ ? JPVIDEOPRESS_INITIAL_STATE?.API?.contentNonce
+ : undefined;
+
+ return typeof nonce === 'string' && nonce !== '' ? nonce : undefined;
+};
+
+/**
+ * Open a brand-new post or page in the block editor with the video already in
+ * it. The block markup is produced server-side by
+ * `Block_Editor_Content::videopress_video_block_by_guid()`, which filters
+ * `default_content` on `post-new.php` when the request carries a GUID and a
+ * valid `videopress-content-nonce`. Because it hooks `post-new.php`, passing
+ * `post_type=page` gets page support for free.
+ *
+ * Opened in a new tab so the user keeps their place on the dashboard.
+ *
+ * @param guid - The VideoPress GUID of the published video.
+ * @param contentType - Whether to create a new post or a new page.
+ */
+export const openInNewContent = ( guid: string, contentType: NewContentType ) => {
+ const nonce = readContentNonce();
+
+ if ( ! guid || ! nonce ) {
+ return;
+ }
+
+ const args: Record< string, string > = { videopress_guid: guid, _wpnonce: nonce };
+ if ( contentType === 'page' ) {
+ args.post_type = 'page';
+ }
+
+ window.open( addQueryArgs( 'post-new.php', args ), '_blank' );
+};
+
+type Props = {
+ /** The VideoPress GUID of the video to insert. */
+ guid?: string;
+ /** Accessible label for the trigger; disambiguates the menu when several are on screen. */
+ label?: string;
+ /**
+ * Trigger size. `compact` matches the dashboard header's action row, which
+ * is the only place this renders today; `default` is the 40px in-card size.
+ *
+ * @default 'default'
+ */
+ size?: 'default' | 'compact';
+ className?: string;
+};
+
+/**
+ * "Add to a post or page" dropdown for a published video. Mirrors the labelled
+ * `DropdownMenu` used by the video detail view's ThumbnailUpdateButton so the
+ * two share the design system's look.
+ *
+ * Rendered from the video screen's header actions — the one place it appears
+ * today. Only renders when the video has both a VideoPress GUID and a content
+ * nonce: the hand-off is the server-side `videopress_guid` content filter, so
+ * without either there is no honest VideoPress block to insert, and a menu
+ * whose items silently open a blank editor is worse than no menu at all. A
+ * GUID is absent on local attachments and on videos still being registered
+ * with VideoPress.
+ *
+ * NOTE: `add/videopress-upload-onboarding` carries a near-identical copy of
+ * this file at the same path, differing only in the trigger's `text`. If both
+ * branches land, reconcile them into one component rather than resolving the
+ * conflict by picking a string.
+ *
+ * @param props - Component props.
+ * @param props.guid - The VideoPress GUID of the video to insert.
+ * @param props.label - Accessible label for the trigger.
+ * @param props.size - Trigger size (`default` or `compact`).
+ * @param props.className - Extra class for the dropdown root.
+ * @return The dropdown, or null when no GUID is available.
+ */
+export default function AddToContentMenu( { guid, label, size, className }: Props ) {
+ // Both halves of the hand-off have to be present, not just the GUID. The
+ // server only fills `default_content` when the request carries a valid
+ // `videopress-content-nonce`, so without it every item in this menu would
+ // open a blank editor — the silent no-op this component's own docblock
+ // promises not to ship.
+ if ( ! guid || ! readContentNonce() ) {
+ return null;
+ }
+
+ return (
+
+ { ( { onClose }: { onClose: () => void } ) => (
+
+
+
+
+ ) }
+
+ );
+}
diff --git a/projects/packages/videopress/src/dashboard/components/add-to-content-menu/test/index.test.tsx b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/test/index.test.tsx
new file mode 100644
index 000000000000..97863ff08a09
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/add-to-content-menu/test/index.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AddToContentMenu from '..';
+
+const GUID = 'abc123';
+
+/**
+ * Set (or clear) the boot payload the component reads its nonce from.
+ *
+ * @param contentNonce - Nonce to expose, or undefined to simulate its absence.
+ */
+function setInitialState( contentNonce?: string ) {
+ ( global as unknown as { JPVIDEOPRESS_INITIAL_STATE?: unknown } ).JPVIDEOPRESS_INITIAL_STATE =
+ contentNonce === undefined ? { API: {} } : { API: { contentNonce } };
+}
+
+describe( 'AddToContentMenu', () => {
+ let openSpy: jest.SpyInstance;
+
+ beforeEach( () => {
+ setInitialState( 'nonce-123' );
+ openSpy = jest.spyOn( window, 'open' ).mockImplementation( () => null );
+ } );
+
+ afterEach( () => {
+ openSpy.mockRestore();
+ delete ( global as unknown as { JPVIDEOPRESS_INITIAL_STATE?: unknown } )
+ .JPVIDEOPRESS_INITIAL_STATE;
+ } );
+
+ // Both halves of the hand-off have to be present. A menu whose items open a
+ // blank editor is worse than no menu, so the component renders nothing
+ // rather than something inert.
+ it( 'renders nothing without a GUID', () => {
+ const { container } = render(
+
-
- { __( 'Privacy & sharing', 'jetpack-videopress-pkg' ) }
-
-
+
+
+
+ { __( 'Privacy & sharing', 'jetpack-videopress-pkg' ) }
+
+ { currentPrivacyLabel }
+
+
+
+
onChange( { allowDownloads: next } ) }
/>
-
-
+
+
);
}
diff --git a/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx b/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx
index e4e0e3abab52..5f739d7e6832 100644
--- a/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx
+++ b/projects/packages/videopress/src/dashboard/components/video-details/rating-card.tsx
@@ -1,6 +1,6 @@
import { RadioControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { Card } from '@wordpress/ui';
+import { Card, CollapsibleCard, Stack, Text } from '@wordpress/ui';
import type { VideoRating } from '../../types/library';
import type { ReactElement } from 'react';
@@ -12,6 +12,11 @@ type Props = {
/**
* Rating radio group. Single tab stop; arrow keys cycle G / PG-13 / R.
*
+ * Collapsible, and collapsed by default — the rating is set once and rarely
+ * revisited, and the three descriptions make it the tallest card in a column
+ * that was already outrunning the canvas beside it. The selected rating shows
+ * in the header, so the collapsed state still answers "what is this rated?".
+ *
* @param props - Component props.
* @param props.value - Currently selected rating.
* @param props.onChange - Receives the new rating.
@@ -19,39 +24,54 @@ type Props = {
*/
export default function RatingCard( { value, onChange }: Props ): ReactElement {
return (
-
-
- { __( 'Rating', 'jetpack-videopress-pkg' ) }
-
-
+
+
+
+ { __( 'Rating', 'jetpack-videopress-pkg' ) }
+
+ { value }
+
+
+
+
onChange( next as VideoRating ) }
+ // `description` renders through the same `StyledHelp` that
+ // `BaseControl` gives every `help` line, so the type matches the
+ // toggle captions in Privacy & sharing. (Only the type — the
+ // two controls set different margins around it.) Splitting the
+ // rating off the sentence also stops a screen reader reading the
+ // whole explanation as the option's name — it becomes an
+ // `aria-describedby` instead.
options={ [
{
- label: __(
- 'G — Suitable for all audiences, including children',
+ label: __( 'G', 'jetpack-videopress-pkg' ),
+ description: __(
+ 'Suitable for all audiences, including children.',
'jetpack-videopress-pkg'
),
value: 'G',
},
{
- label: __(
- 'PG-13 — May include mild language or mature themes',
+ label: __( 'PG-13', 'jetpack-videopress-pkg' ),
+ description: __(
+ 'May include mild language or mature themes.',
'jetpack-videopress-pkg'
),
value: 'PG-13',
},
{
- label: __(
- 'R — May include strong language, violence, or adult content',
+ label: __( 'R', 'jetpack-videopress-pkg' ),
+ description: __(
+ 'May include strong language, violence, or adult content.',
'jetpack-videopress-pkg'
),
value: 'R',
},
] }
/>
-
-
+
+
);
}
diff --git a/projects/packages/videopress/src/dashboard/components/video-details/subtitles-card.tsx b/projects/packages/videopress/src/dashboard/components/video-details/subtitles-card.tsx
new file mode 100644
index 000000000000..0eba08ffa053
--- /dev/null
+++ b/projects/packages/videopress/src/dashboard/components/video-details/subtitles-card.tsx
@@ -0,0 +1,130 @@
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { Button, Card, Skeleton, Stack, Text } from '@wordpress/ui';
+import { useVideoTracks } from '../../../client/components/caption-manager-modal/use-video-tracks';
+import {
+ getLanguageDisplayName,
+ getManualLanguageTagFromTrackKey,
+} from '../../../client/lib/video-tracks/language';
+import type { LibraryItem } from '../../types/library';
+import type { ReactElement } from 'react';
+
+type Props = {
+ video: LibraryItem;
+ onManageSubtitles: () => void;
+};
+
+// The summary lists this many languages before collapsing into "and N more".
+const MAX_SUBTITLE_LANGUAGES_SHOWN = 2;
+
+/**
+ * The card proper. Split from the guard below so the tracks query only exists
+ * for videos that actually have a GUID to query with.
+ *
+ * @param props - Component props.
+ * @param props.video - The current video record.
+ * @param props.onManageSubtitles - Opens the caption manager.
+ * @return The card element.
+ */
+function SubtitlesCardContent( { video, onManageSubtitles }: Props ): ReactElement {
+ /*
+ * The media REST item omits `tracks`, so the languages come from the same
+ * video-info query the caption manager uses.
+ */
+ const { managedTracks, isLoading } = useVideoTracks( {
+ guid: video.guid,
+ isOpen: true,
+ isPrivate: video.isPrivate,
+ tracks: video.tracks,
+ } );
+
+ const subtitleLanguages = [
+ ...new Set(
+ managedTracks
+ .filter( track => track.kind === 'captions' || track.kind === 'subtitles' )
+ .map(
+ track =>
+ track.label ||
+ getLanguageDisplayName(
+ getManualLanguageTagFromTrackKey( track.srcLang ) || track.srcLang
+ )
+ )
+ ),
+ ];
+ const shownLanguages = subtitleLanguages.slice( 0, MAX_SUBTITLE_LANGUAGES_SHOWN ).join( ', ' );
+ const moreLanguagesCount = subtitleLanguages.length - MAX_SUBTITLE_LANGUAGES_SHOWN;
+ let subtitleSummary = shownLanguages || __( 'No subtitles yet.', 'jetpack-videopress-pkg' );
+ if ( moreLanguagesCount > 0 ) {
+ subtitleSummary = sprintf(
+ /* translators: 1: list of subtitle language names. 2: how many further languages exist. */
+ _n(
+ '%1$s, and %2$d more',
+ '%1$s, and %2$d more',
+ moreLanguagesCount,
+ 'jetpack-videopress-pkg'
+ ),
+ shownLanguages,
+ moreLanguagesCount
+ );
+ }
+
+ return (
+
+
+ { __( 'Subtitles', 'jetpack-videopress-pkg' ) }
+
+
+ { /*
+ * State first, then the action — the same rhythm as the
+ * Thumbnail card above this one. The two used to share a row,
+ * which read as fragments ("None [Manage subtitles]").
+ */ }
+
+ { isLoading ? (
+ { subtitleSummary }
+ ) }
+ { /*
+ * The full string, not "Manage". The label used to read
+ * "Manage" with "Manage subtitles" hidden in an aria-label,
+ * which left the visible text meaningless the moment it was
+ * separated from its row label.
+ */ }
+
+
+
+
+ );
+}
+
+/**
+ * Which subtitle languages this video has, and the way in to add or change
+ * them.
+ *
+ * It gets a card on the canvas rather than a row in the reference panel
+ * because the two ways in before this were both nearly invisible: a
+ * lowest-emphasis button labelled "Manage" at the foot of the second panel
+ * card — below the fold on a laptop, and absent entirely without a GUID — and
+ * an iconless first item inside an unlabelled ⋮ menu. Captions are an
+ * accessibility feature; hiding them behind a kebab was the wrong call.
+ *
+ * The ⋮ menu keeps its entry. This is an addition, not a move: a menu people
+ * already know is not worth breaking.
+ *
+ * Renders nothing without a GUID — the tracks API is keyed by it, so there is
+ * nothing to read and nothing to manage until the upload completes.
+ *
+ * @param props - Component props.
+ * @param props.video - The current video record.
+ * @param props.onManageSubtitles - Opens the caption manager.
+ * @return The card, or null when the video has no GUID yet.
+ */
+export default function SubtitlesCard( { video, onManageSubtitles }: Props ): ReactElement | null {
+ if ( ! video.guid ) {
+ return null;
+ }
+
+ return ![]()
at all while the token is in flight — a src without the
+ // token would 403 and render as a broken image.
+ expect( screen.queryByRole( 'img' ) ).not.toBeInTheDocument();
- expect( screen.getByText( 'Subtitles' ) ).toBeInTheDocument();
- expect( screen.getByText( 'None' ) ).toBeInTheDocument();
- } );
+ resolveToken( { playback_token: 'tok-123' } );
- it( 'omits the row for items without a VideoPress GUID', () => {
- render(
-
+
+ { __( 'Thumbnail', 'jetpack-videopress-pkg' ) }
+
-
-
- { showUpdateButton && (
- setDialogOpen( true ) }
- onUploadImage={ handleUploadImage }
- />
- ) }
-
-
-
-
-
- { __( 'File name', 'jetpack-videopress-pkg' ) }
-
- { video.filename }
+ { /*
+ * No Field.Label — the card title already names this. The
+ * Field.Root/Field.Description pair is kept so the caption gets
+ * the same treatment as the help text under every other control
+ * on the page.
+ */ }
+
+
+ { __( 'Pick the still that represents this video.', 'jetpack-videopress-pkg' ) }
+
+
+ { /*
+ * The current poster, shown at the same 16:9 size as the
+ * two actions so the row reads as a set. Solid-bordered
+ * rather than dashed: it is content, not an affordance.
+ */ }
+
+ { posterUrl && (
+
+ ) }
+ { isPosterPending && setDialogOpen( true ) }
+ />
-
-
-
- { __( 'Uploaded on', 'jetpack-videopress-pkg' ) }
-
- { dateI18n( dateSettings.formats.date, video.uploadDate ) }
-
-
- { video.guid && (
-
-
- { __( 'Subtitles', 'jetpack-videopress-pkg' ) }
-
-
-
- { isLoadingTracks ? __( 'Loading…', 'jetpack-videopress-pkg' ) : subtitleSummary }
-
-
-
-
- ) }
-
+
+ { __(
+ 'Applies immediately — everything else on this page waits for Save.',
+ 'jetpack-videopress-pkg'
+ ) }
+
+
);
}
+
+/**
+ * The Thumbnail card: the still this video is currently represented by, and
+ * the two ways to replace it — Upload image (WP media modal) and Select from
+ * video (frame scrubber) — as a row of 16:9 tiles.
+ *
+ * Tiles rather than a dropdown because the choice is visual. Both actions
+ * produce an image, the current one is sitting right there to compare
+ * against, and a menu hides all of that behind a label. This is the shape
+ * YouTube Studio uses for the same two actions.
+ *
+ * It is a card of its own rather than a row inside Video details because this
+ * is the one control on the screen that does NOT go through Save: the poster
+ * endpoint is keyed by GUID while the meta patch is keyed by attachment id,
+ * and the mutation polls for up to 60s. Folding it into Save would mean a
+ * button that either spins for a minute or claims success while the poster is
+ * still generating. Two honest save models beat one dishonest one, and a card
+ * boundary says so more clearly than a hairline rule.
+ *
+ * Renders nothing when the video can't take a new poster. A disabled control
+ * would be wrong: there is no user action that would enable it.
+ *
+ * @param props - Component props.
+ * @param props.video - The current video record.
+ * @return The card, or null when the video can't take a new poster.
+ */
+export default function ThumbnailCard( { video }: Props ): ReactElement | null {
+ if ( ! canEditThumbnail( video ) ) {
+ return null;
+ }
+
+ return
+ { posterUrl && (
+
+ ) }
+ { isPosterPending &&
+