Stats: modernize the VideoPress video details page

client/my-sites/stats/components/stats-main/index.tsx

@@ -76,7 +76,7 @@ function StatsBreadcrumbs( { items }: { items: BreadcrumbItem[] } ) {
 				<span className="stats-breadcrumbs__current">{ STATS_HEADER_TITLE }</span>
 			) }
 			{ restItems.map( ( item, index ) => (
-				<span key={ index }>
+				<span key={ index } className="stats-breadcrumbs__item">
 					<span className="stats-breadcrumbs__separator"> / </span>
 					{ item.to ? (
 						<a
@@ -138,7 +138,8 @@ export default function StatsMain( {
 	return (
 		<Main { ...props } className={ clsx( 'stats-main', 'color-scheme', customTheme, className ) }>
 			{ ! isWPAdminAndNotSimpleSite && <QuerySiteFeatures siteIds={ [ siteId ] } /> }
-			<QuerySiteSettings siteId={ siteId } />
+			{ /* The Odyssey stats-app proxy has no settings route, so the request would 404. */ }
+			{ ! isWPAdminAndNotSimpleSite && <QuerySiteSettings siteId={ siteId } /> }
 			<Page
 				// Restore a stable styling hook lost when @wordpress/admin-ui 2.x moved Page
 				// internals to CSS Modules. Stats SCSS overrides target `.admin-ui-page`.

client/my-sites/stats/controller.jsx

@@ -26,6 +26,10 @@ const loadStatsPostDetail = () =>
 	import(
 		/* webpackChunkName: "async-load-calypso-my-sites-stats-stats-post-detail" */ './stats-post-detail'
 	);
+const loadStatsVideoDetail = () =>
+	import(
+		/* webpackChunkName: "async-load-calypso-my-sites-stats-stats-video-detail" */ './stats-video-detail'
+	);
 const loadCommentFollows = () =>
 	import(
 		/* webpackChunkName: "async-load-calypso-my-sites-stats-comment-follows" */ './comment-follows'
@@ -335,8 +339,21 @@ export function summary( context, next ) {
 	);
 	const period = rangeOfPeriod( activeFilter.period, date );
 
-	const extraProps =
-		context.params.module === 'videodetails' ? { postId: parseInt( queryOptions.post, 10 ) } : {};
+	// Video details has its own dedicated page, modeled on the single post page.
+	if ( context.params.module === 'videodetails' ) {
+		context.primary = (
+			<StatsPageLoader>
+				<AsyncLoad
+					require={ loadStatsVideoDetail }
+					placeholder={ PageLoading }
+					postId={ parseInt( queryOptions.post, 10 ) }
+					period={ period }
+					context={ context }
+				/>
+			</StatsPageLoader>
+		);
+		return next();
+	}
 
 	// The option is used for stats queries only.
 	const statsQueryOptions = pick( queryOptions, [ 'num', 'summarize', 'geoMode', 'viewType' ] );
@@ -356,7 +373,6 @@ export function summary( context, next ) {
 				dateRange={ dateRange }
 				context={ context }
 				period={ period }
-				{ ...extraProps }
 			/>
 		</StatsPageLoader>
 	);

client/my-sites/stats/hooks/use-stats-navigation-history.ts

@@ -30,6 +30,7 @@ const possibleBackLinks: { [ key: string ]: string | null } = {
 	postList: '{adminUrl}edit.php',
 	emailsummary: '/stats/{period}/emails/',
 	postDetails: null, // Last item in the history, the text is not displayed anywhere but this is used to track the item in history stack.
+	videodetails: null, // Same as postDetails: tracked in the history stack, never rendered as a crumb.
 };
 
 const SUPPORTED_QUERY_PARAMS: string[] = [
@@ -158,6 +159,7 @@ export const useStatsNavigationHistory = (
 			postList: translate( 'Post List' ),
 			emailsummary: translate( 'Emails' ),
 			postDetails: null, // Last item in the history, the text is not displayed anywhere but this is used to track the item in history stack.
+			videodetails: null,
 		} ),
 		[]
 	);
@@ -288,6 +290,7 @@ export const useStatsBreadcrumbTrail = (
 			postList: translate( 'Post List' ),
 			emailsummary: translate( 'Emails' ),
 			postDetails: null,
+			videodetails: null,
 		} ),
 		[]
 	);

client/my-sites/stats/stats-summary/index.jsx

@@ -99,8 +99,8 @@ class StatsSummaryChart extends Component {
 			label: tabLabel + label,
 		};
 
-		// The StatsPostSummary has been modernized to fresh styling.
-		const isModernized = 'post' === type;
+		// The post and video summaries have been modernized to fresh styling.
+		const isModernized = 'post' === type || 'video' === type;
 
 		return isModernized ? (
 			<div className={ clsx( 'is-summary-chart', { 'is-loading': isLoading } ) }>

client/my-sites/stats/stats-video-detail/index.tsx

@@ -0,0 +1,120 @@
+import { useTranslate } from 'i18n-calypso';
+import { useEffect, useLayoutEffect } from 'react';
+import titlecase from 'to-title-case';
+import QueryMedia from 'calypso/components/data/query-media';
+import Main from 'calypso/my-sites/stats/components/stats-main';
+import {
+	useStatsBreadcrumbTrail,
+	recordCurrentScreen,
+} from 'calypso/my-sites/stats/hooks/use-stats-navigation-history';
+import { useSelector } from 'calypso/state';
+import getMediaItem from 'calypso/state/selectors/get-media-item';
+import { getSiteStatsNormalizedData } from 'calypso/state/stats/lists/selectors';
+import { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import PageViewTracker from '../stats-page-view-tracker';
+import VideoDetailsCard from './video-details-card';
+import VideoEmbedsCard from './video-embeds-card';
+import VideoSummary from './video-summary';
+
+import './style.scss';
+
+interface StatsVideoDetailProps {
+	postId: number;
+	period: {
+		period: string;
+	};
+	context: {
+		query: Record< string, string >;
+	};
+}
+
+interface VideoMediaItem {
+	title?: string;
+	date?: string;
+	/** Video duration in seconds. */
+	length?: number;
+}
+
+interface VideoStatsPost {
+	post_title?: string;
+	post_date?: string;
+}
+
+export default function StatsVideoDetail( { postId, period, context }: StatsVideoDetailProps ) {
+	const translate = useTranslate();
+	const siteId = useSelector( getSelectedSiteId );
+	// The video title and upload date come from the attachment post included in
+	// the statsVideo response — available in both Calypso and Odyssey (the
+	// stats-app proxy forwards stats routes). Mirrors VideoSummary's default
+	// Days/Weeks query, which is always fetched first.
+	const videoStatsData = useSelector(
+		( state ) =>
+			getSiteStatsNormalizedData( state, siteId, 'statsVideo', {
+				postId,
+				statType: 'views',
+				period: 'month',
+			} ) as { post?: VideoStatsPost | null } | null
+	);
+	const videoStatsPost = videoStatsData?.post ?? null;
+	// The media item is only needed for the video duration (retention rate);
+	// the request 404s harmlessly in Odyssey, where the stats-app proxy has no
+	// media route, and the retention card is simply omitted.
+	const media = useSelector(
+		( state ) => getMediaItem( state, siteId, postId ) as VideoMediaItem | null
+	);
+	const breadcrumbTrail = useStatsBreadcrumbTrail();
+	const statType = context.query.statType ?? null;
+
+	useEffect( () => {
+		window.scrollTo( 0, 0 );
+	}, [] );
+
+	// Must run before useStatsBreadcrumbTrail's passive effect reads the
+	// navigation history, so the trail treats this screen (not the previous
+	// one) as the current entry to exclude.
+	useLayoutEffect( () => {
+		recordCurrentScreen( 'videodetails', {
+			queryParams: context.query,
+			period: period.period,
+		} );
+	}, [ context.query, period.period ] );
+
+	const videoTitle = videoStatsPost?.post_title || media?.title || null;
+	const videoDate = videoStatsPost?.post_date || media?.date || null;
+	// Loading = neither source has responded yet; once statsVideo answers, a
+	// missing post means there is genuinely no title and the card hides.
+	const isVideoInfoLoading = ! videoStatsData && ! media;
+
+	return (
+		<Main
+			fullWidthLayout
+			breadcrumbs={ [
+				...breadcrumbTrail.map( ( item ) => ( {
+					label: item.label,
+					to: item.url ?? undefined,
+				} ) ),
+				{ label: videoTitle || translate( 'Video details', { textOnly: true } ) },
+			] }
+		>
+			<PageViewTracker
+				path={ `/stats/${ period.period }/videodetails/:site` }
+				title={ `Stats > ${ titlecase( period.period ) } > Videodetails` }
+			/>
+			{ siteId && <QueryMedia siteId={ siteId } mediaId={ postId } /> }
+			<div className="stats stats-summary-view">
+				<div
+					id="my-stats-content"
+					className="stats-summary-view stats-summary__positioned stats-video-detail"
+				>
+					<VideoDetailsCard
+						title={ videoTitle }
+						date={ videoDate }
+						isLoading={ isVideoInfoLoading }
+					/>
+					<VideoSummary postId={ postId } initialStatType={ statType } />
+					<VideoEmbedsCard postId={ postId } />
+				</div>
+			</div>
+		</Main>
+	);
+}