ui/component/claimPreviewSubtitle/view.jsx

@@ -16,6 +16,7 @@ type Props = {
   isLivestream: boolean,
 };
 
+// previews used in channel overview and homepage (and other places?)
 function ClaimPreviewSubtitle(props: Props) {
   const { pending, uri, claim, type, beginPublish, isLivestream } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;

ui/component/claimPreviewTile/index.js

@@ -12,7 +12,7 @@ import {
   makeSelectDateForUri,
 } from 'lbry-redux';
 import { selectMutedChannels } from 'redux/selectors/blocked';
-import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { makeSelectViewCountForUri, selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
 import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import ClaimPreviewTile from './view';
@@ -38,6 +38,7 @@ const select = (state, props) => {
     isMature: makeSelectClaimIsNsfw(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
     isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
+    viewCount: makeSelectViewCountForUri(props.uri)(state),
   };
 };
 

ui/component/claimPreviewTile/view.jsx

@@ -48,13 +48,15 @@ type Props = {
   showMature: boolean,
   showHiddenByUser?: boolean,
   properties?: (Claim) => void,
+  live?: boolean,
   collectionId?: string,
   showNoSourceClaims?: boolean,
   isLivestream: boolean,
+  viewCount: string,
   isLivestreamActive: boolean,
 };
 
-// preview image cards used in related video functionality
+// preview image cards used in related video functionality, channel overview page and homepage
 function ClaimPreviewTile(props: Props) {
   const {
     history,
@@ -80,6 +82,7 @@ function ClaimPreviewTile(props: Props) {
     isLivestreamActive,
     collectionId,
     mediaDuration,
+    viewCount,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const isCollection = claim && claim.value_type === 'collection';
@@ -196,6 +199,10 @@ function ClaimPreviewTile(props: Props) {
     liveProperty = (claim) => <>LIVE</>;
   }
 
+  const isChannelPage = window.location.pathname.startsWith('/@');
+
+  const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage);
+
   return (
     <li
       onClick={handleClick}
@@ -245,7 +252,9 @@ function ClaimPreviewTile(props: Props) {
         <ClaimMenuList uri={uri} collectionId={listId} channelUri={channelUri} />
       </div>
       <div>
-        <div className="claim-tile__info">
+        <div className={classnames('claim-tile__info', {
+          'contains_view_count': shouldShowViewCount,
+        })}>
           {isChannel ? (
             <div className="claim-tile__about--channel">
               <SubscribeButton uri={repostedChannelUri || uri} />

ui/scss/component/_view_count.scss

@@ -1,19 +1,19 @@
 @import '../init/vars';
 
-.claim-tile__info {
+.contains_view_count {
   // accommodating for large view counts on channel overview
   @media (min-width: $breakpoint-large) {
     padding: var(--spacing-s) 4px !important;
   }
 
   .date_time {
-    font-size: 11px;
+    font-size: 11px !important;
   }
 
   .channel-thumbnail {
     // accommodating for large view counts on channel overview
     @media (min-width: $breakpoint-large) {
-      margin-right: 4px !important;
+      margin-right: 7px !important;
     }
   }
 }
@@ -32,7 +32,3 @@
     }
   }
 }
-
-.claim-tile__about {
-  font-size: 11px;
-}