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); } }