diff --git a/client/my-sites/stats/videopress-stats-module/index.jsx b/client/my-sites/stats/videopress-stats-module/index.jsx
index d98ed7409786..c5a7903c693a 100644
--- a/client/my-sites/stats/videopress-stats-module/index.jsx
+++ b/client/my-sites/stats/videopress-stats-module/index.jsx
@@ -1,4 +1,3 @@
-import config from '@automattic/calypso-config';
import page from '@automattic/calypso-router';
import { Card } from '@automattic/components';
import { formatNumber } from '@automattic/number-formatters';
@@ -12,7 +11,6 @@ import SectionHeader from 'calypso/components/section-header';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import StatsInfotip from 'calypso/my-sites/stats/components/stats-infotip';
import { getSiteSlug } from 'calypso/state/sites/selectors';
-import getSiteAdminUrl from 'calypso/state/sites/selectors/get-site-admin-url';
import {
isRequestingSiteStatsForQuery,
getVideoPressPlaysComplete,
@@ -86,7 +84,7 @@ class VideoPressStatsModule extends Component {
return Math.max( ...data.map( ( item ) => item[ field ] || 0 ) );
}
- renderTitleCell( title, views, maxViews, onClick, onKeyUp ) {
+ renderTitleCell( { title, views, maxViews, onClick, href } ) {
const fillPercentage = maxViews > 0 ? ( views / maxViews ) * 100 : 0;
return (
@@ -95,9 +93,9 @@ class VideoPressStatsModule extends Component {
className="videopress-stats-module__bar"
style={ { '--bar-fill-percentage': `${ fillPercentage }%` } }
>
-
+
{ title }
-
+
@@ -117,7 +115,6 @@ class VideoPressStatsModule extends Component {
period,
siteSlug,
translate,
- siteAdminUrl,
siteId,
} = this.props;
@@ -148,14 +145,23 @@ class VideoPressStatsModule extends Component {
'is-refreshing': requesting && ! isLoading,
} );
- const editVideo = ( postId ) => {
- const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
- if ( ! isOdysseyStats ) {
- page( `/media/${ siteSlug }/${ postId }` );
+ const videoDetailsHref = ( postId ) =>
+ `/stats/${ data.period }/videodetails/${ siteSlug }?post=${ postId }`;
+
+ const showVideoDetails = ( event, postId ) => {
+ recordTracksEvent( 'calypso_video_stats_details_clicked', {
+ blog_id: this.props.siteId,
+ post_id: postId,
+ period: data.period,
+ } );
+
+ // Let the browser handle modified clicks (open in a new tab, etc.).
+ if ( event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button > 0 ) {
return;
}
- // If it's Odyssey, redirect user to media lib page.
- location.href = `${ siteAdminUrl }upload.php?item=${ postId }`;
+
+ event.preventDefault();
+ page( videoDetailsHref( postId ) );
};
const showStat = ( queryStatType, row ) => {
@@ -233,13 +239,13 @@ class VideoPressStatsModule extends Component {
key={ 'videopress-stats-row-' + index }
className="videopress-stats-module__row-wrapper"
>
- { this.renderTitleCell(
- row.title,
- row.views,
+ { this.renderTitleCell( {
+ title: row.title,
+ views: row.views,
maxViews,
- () => editVideo( row.post_id ),
- () => editVideo( row.post_id )
- ) }
+ href: videoDetailsHref( row.post_id ),
+ onClick: ( event ) => showVideoDetails( event, row.post_id ),
+ } ) }
showStat( 'impressions', row ) }
@@ -308,7 +314,6 @@ export default connect( ( state, ownProps ) => {
return {
requesting: isRequestingSiteStatsForQuery( state, siteId, statType, query ),
data: getVideoPressPlaysComplete( state, siteId, statType, query ),
- siteAdminUrl: getSiteAdminUrl( state, siteId ),
siteId,
siteSlug,
};
diff --git a/client/my-sites/stats/videopress-stats-module/style.scss b/client/my-sites/stats/videopress-stats-module/style.scss
index f1a57b8456ec..6b4ecaf33e49 100644
--- a/client/my-sites/stats/videopress-stats-module/style.scss
+++ b/client/my-sites/stats/videopress-stats-module/style.scss
@@ -88,7 +88,7 @@
align-items: center;
padding-left: 10px;
- span {
+ a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -100,6 +100,11 @@
color: var(--color-text);
font-size: $font-body-small;
font-weight: 500;
+ text-decoration: none;
+
+ &:visited {
+ color: var(--color-text);
+ }
}
&::before {
@@ -133,7 +138,7 @@
}
.videopress-stats-module__grid-metric span,
- .videopress-stats-module__bar span {
+ .videopress-stats-module__bar a {
color: var(--color-text-inverted);
}
}