Stats: modernize the VideoPress video details 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'
@@ -309,8 +313,21 @@ export function summary( context, next ) {
 	const isValidRange = isValidEndDate && ! endDate.isBefore( date );
 	const dateRange = isValidRange ? { startDate: date, endDate: endDate } : null;
 
-	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' ] );
@@ -330,7 +347,6 @@ export function summary( context, next ) {
 				dateRange={ dateRange }
 				context={ context }
 				period={ period }
-				{ ...extraProps }
 			/>
 		</StatsPageLoader>
 	);

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,82 @@
+import { useTranslate } from 'i18n-calypso';
+import { useEffect } 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 { getSelectedSiteId } from 'calypso/state/ui/selectors';
+import PageViewTracker from '../stats-page-view-tracker';
+import VideoDetailsCard, { VideoMediaItem } from './video-details-card';
+import VideoEmbedsCard from './video-embeds-card';
+import VideoSummary from './video-summary';
+
+interface StatsVideoDetailProps {
+	postId: number;
+	period: {
+		period: string;
+	};
+	context: {
+		query: Record< string, string >;
+	};
+}
+
+export default function StatsVideoDetail( { postId, period, context }: StatsVideoDetailProps ) {
+	const translate = useTranslate();
+	const siteId = useSelector( getSelectedSiteId );
+	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 );
+	}, [] );
+
+	useEffect( () => {
+		recordCurrentScreen( 'videodetails', {
+			queryParams: context.query,
+			period: period.period,
+		} );
+	}, [ context.query, period.period ] );
+
+	const title = media?.title || translate( 'Video', { textOnly: true } );
+
+	return (
+		<Main
+			fullWidthLayout
+			breadcrumbs={ [
+				...breadcrumbTrail.map( ( item ) => ( {
+					label: item.label,
+					to: item.url ?? undefined,
+				} ) ),
+				{ label: title },
+			] }
+		>
+			<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 media={ media } mediaId={ postId } />
+					<VideoSummary
+						postId={ postId }
+						initialStatType={ statType }
+						videoDuration={ media?.length ?? null }
+					/>
+					<VideoEmbedsCard postId={ postId } />
+				</div>
+			</div>
+		</Main>
+	);
+}

client/my-sites/stats/stats-video-detail/style.scss

@@ -0,0 +1,247 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@automattic/typography/styles/fonts";
+@import "@automattic/components/src/styles/typography";
+@import "@automattic/components/src/styles/mixins";
+
+$card-padding: 24px;
+$border-radius: 5px; // stylelint-disable-line scales/radii
+
+@keyframes stats-video-details-card-shine {
+	to {
+		background-position-x: -200%;
+	}
+}
+
+.stats-video-detail {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	// The Card base has `margin: 0 auto`; inside a flex column the auto
+	// inline margins absorb the free space and shrink the card to its content
+	// width instead of stretching, so zero them out.
+	> .card {
+		margin-inline: 0;
+	}
+}
+
+// The x-axis places labels at equal-slot centers (chart width / bar count),
+// but `.is-chart-tabs` caps bars at 156px and lays them out space-between, so
+// with few bars (e.g. ~5 weekly buckets) bars drift away from their labels.
+// space-around keeps every capped bar centered in its slot.
+.stats-video-summary.is-chart-tabs .chart__bars {
+	justify-content: space-around;
+}
+
+.stats-video-details-card {
+	border-color: var(--studio-gray-5);
+	border-radius: $border-radius;
+	display: grid;
+	font-family: $font-sf-pro-text;
+	font-size: $font-body-small;
+	grid-template-columns: minmax(10px, 1.5fr) minmax(0, auto);
+	grid-template-rows: 26px auto;
+	grid-template-areas:
+		"heading thumbnail"
+		"info thumbnail";
+	margin-bottom: 0;
+	max-width: 100%;
+	max-height: 255px;
+	padding: $card-padding;
+	gap: $card-padding;
+
+	&.card::after {
+		display: none;
+	}
+
+	&.is-loading {
+		.stats-video-details-card__heading,
+		.stats-video-details-card__info {
+			position: relative;
+
+			&::after {
+				content: "";
+				position: absolute;
+				inset: 0;
+				background: linear-gradient(94deg, var(--studio-gray-5) 8%, var(--studio-gray-0) 18%, var(--studio-gray-5) 33%);
+				border-radius: 4px;
+				background-size: 200% 100%;
+				animation: 1.5s stats-video-details-card-shine linear infinite;
+			}
+		}
+	}
+}
+
+.stats-video-details-card__heading {
+	color: var(--studio-gray-100);
+	font-family: $font-sf-pro-display;
+	font-size: $font-size-header-small;
+	font-weight: 500;
+	grid-area: heading;
+	line-height: 1.3;
+}
+
+.stats-video-details-card__info {
+	grid-area: info;
+
+	.stats-video-details-card__title {
+		@include stats-section-header;
+		display: block;
+		margin-bottom: 4px;
+		min-height: 40px;
+	}
+
+	.stats-video-details-card__date {
+		color: var(--studio-gray-60);
+		font-weight: 400;
+		line-height: 1.5;
+	}
+}
+
+.stats-video-details-card__thumbnail-link {
+	grid-area: thumbnail;
+	display: block;
+	height: calc(100% + #{$card-padding * 2});
+	margin: -1 * $card-padding -1 * $card-padding -1 * $card-padding 0;
+	max-width: 300px;
+	width: calc(100% + #{$card-padding});
+}
+
+.stats-video-details-card__thumbnail {
+	border-radius: 0 $border-radius $border-radius 0;
+	display: block;
+	height: 100%;
+	object-fit: cover;
+	width: 100%;
+}
+
+.stats-video-embeds-card {
+	border-color: var(--studio-gray-5);
+	border-radius: 5px; /* stylelint-disable-line scales/radii */
+	font-family: $font-sf-pro-text;
+	font-size: $font-body-small;
+	padding: 24px;
+
+	&.card::after {
+		display: none;
+	}
+}
+
+.stats-video-embeds-card__heading {
+	color: var(--studio-gray-100);
+	font-family: $font-sf-pro-display;
+	font-size: $font-size-header-small;
+	font-weight: 500;
+	line-height: 1.3;
+	margin-bottom: 16px;
+}
+
+.stats-video-embeds-card__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.stats-video-embeds-card__item {
+	line-height: 1.5;
+	margin: 0;
+	overflow-wrap: anywhere;
+
+	+ .stats-video-embeds-card__item {
+		margin-top: 12px;
+	}
+}
+
+.stats-video-embeds-card__empty {
+	color: var(--studio-gray-60);
+	line-height: 1.5;
+}
+
+.stats-video-metric-tabs {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 16px;
+	list-style: none;
+	// The chart's 42px-wide x-axis labels wrap onto a second line for
+	// 'MMM YYYY' month labels (as on the post details page); leave room for
+	// the overflowing line, matching the spacing below the post details chart.
+	margin: 40px 0 0;
+	padding: 0;
+}
+
+.stats-video-metric-tabs__item {
+	margin: 0;
+}
+
+.stats-video-metric-tabs__tab {
+	background: var(--color-surface);
+	border: 1px solid var(--studio-gray-5);
+	border-radius: 5px; /* stylelint-disable-line scales/radii */
+	box-sizing: border-box;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	font-family: $font-sf-pro-text;
+	gap: 12px;
+	padding: 16px 24px;
+	text-align: start;
+	width: 100%;
+
+	&:hover {
+		border-color: var(--studio-gray-30);
+	}
+
+	&.is-selected {
+		border-color: var(--color-primary);
+		box-shadow: inset 0 0 0 1px var(--color-primary);
+	}
+}
+
+.stats-video-metric-tabs__header {
+	align-items: center;
+	color: var(--studio-gray-100);
+	display: flex;
+	font-size: $font-body-small;
+	gap: 8px;
+	line-height: 1.5;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.stats-video-metric-tabs__value {
+	@include stats-section-header;
+	color: var(--studio-gray-100);
+}
+
+@media (max-width: $break-medium) {
+	.stats-video-metric-tabs {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: $break-small) {
+	.stats-video-metric-tabs {
+		grid-template-columns: 1fr;
+	}
+
+	.stats-video-details-card {
+		gap: 12px 0;
+		grid-template-areas:
+			"heading heading"
+			"info thumbnail";
+		max-height: initial;
+	}
+
+	.stats-video-details-card__thumbnail-link {
+		height: 84px;
+		margin: 0;
+		width: 84px;
+		max-width: initial;
+	}
+
+	.stats-video-details-card__thumbnail {
+		border-radius: $border-radius;
+	}
+}