Fix issue where channel upload viewcounts were creating a new line (#7154)

* fix issue where viewcounts were creating a new line

* conditionally add large view css

* conditionally apply class based on if view count should be shown

* last couple touchups

* clean up the css

* add scss to flow config

* add scss component to flow config

.flowconfig

@@ -41,5 +41,14 @@ module.name_mapper='^web\/component\(.*\)$' -> '<PROJECT_ROOT>/web/component\1'
 module.name_mapper='^web\/effects\(.*\)$' -> '<PROJECT_ROOT>/web/effects\1'
 module.name_mapper='^web\/page\(.*\)$' -> '<PROJECT_ROOT>/web/page\1'
 module.name_mapper='^homepage\(.*\)$' -> '<PROJECT_ROOT>/ui/util/homepage\1'
+module.name_mapper='^scss\/component\(.*\)$' -> '<PROJECT_ROOT>/ui/scss/component/\1'
+
+; Extensions
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.css
+module.file_ext=.scss
+
 
 [strict]

package.json

@@ -37,6 +37,7 @@
     "build": "cross-env NODE_ENV=production yarn compile:electron && electron-builder build",
     "build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null",
     "crossenv": "./node_modules/cross-env/dist/bin/cross-env",
+    "flow": "flow",
     "lint": "eslint 'ui/**/*.{js,jsx}' && eslint 'web/**/*.{js,jsx}' && eslint 'electron/**/*.js' && flow",
     "lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'",
     "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write",

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

@@ -51,10 +51,11 @@ type Props = {
   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 +81,7 @@ function ClaimPreviewTile(props: Props) {
     isLivestreamActive,
     collectionId,
     mediaDuration,
+    viewCount,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const isCollection = claim && claim.value_type === 'collection';
@@ -177,6 +179,10 @@ function ClaimPreviewTile(props: Props) {
     return null;
   }
 
+  const isChannelPage = window.location.pathname.startsWith('/@');
+
+  const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage);
+
   if (placeholder || (!claim && isResolvingUri)) {
     return (
       <li className={classnames('claim-preview--tile', {})}>
@@ -185,7 +191,9 @@ function ClaimPreviewTile(props: Props) {
         </div>
         <div className="placeholder__wrapper">
           <div className="placeholder claim-tile__title" />
-          <div className="placeholder claim-tile__info" />
+          <div className={classnames('claim-tile__info placeholder', {
+            'contains_view_count': shouldShowViewCount,
+          })} />
         </div>
       </li>
     );
@@ -245,7 +253,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/component/dateTime/view.jsx

@@ -104,11 +104,11 @@ class DateTime extends React.Component<Props, State> {
         return null;
       }
 
-      return <span title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>{DateTime.getTimeAgoStr(date)}</span>;
+      return <span className="date_time" title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>{DateTime.getTimeAgoStr(date)}</span>;
     }
 
     return (
-      <span>
+      <span className="date_time">
         {date && show === DateTime.SHOW_DATE && moment(date).format('MMMM Do, YYYY')}
         {date && show === DateTime.SHOW_TIME && moment(date).format(clockFormat)}
         {!date && '...'}

ui/component/fileViewCountInline/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import 'scss/component/_view_count.scss';
 
 type Props = {
   uri: string,
@@ -15,12 +16,12 @@ export default function FileViewCountInline(props: Props) {
   let formattedViewCount;
 
   try {
+    // SI notation that changes 1234 to 1.2K, look up Intl.NumberFormat() for docs
     formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', {
       compactDisplay: 'short',
       notation: 'compact',
     });
   } catch (err) {
-    // No soup for you!
     formattedViewCount = Number(viewCount).toLocaleString();
   }
 
@@ -29,6 +30,7 @@ export default function FileViewCountInline(props: Props) {
   // clean up (only one place edit/remove).
   const isChannelPage = window.location.pathname.startsWith('/@');
 
+  // dont show if no view count, if it's a repost, a livestream or isn't a channel page
   if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) {
     // (1) Currently, makeSelectViewCountForUri doesn't differentiate between
     // un-fetched view-count vs zero view-count. But since it's probably not

ui/scss/component/_claim-list.scss

@@ -556,9 +556,9 @@
 .claim-tile__info {
   display: flex;
   margin-top: var(--spacing-s);
-  padding: var(--spacing-s);
   border-top: 1px solid var(--color-border);
   color: var(--color-subtitle);
+  padding: var(--spacing-s);
 
   .channel-thumbnail {
     @include handleChannelGif(2.1rem);
@@ -605,13 +605,6 @@
   flex-wrap: wrap;
 }
 
-.view_count {
-  &::after {
-    content: '•';
-    margin: 0 var(--spacing-xxs);
-  }
-}
-
 .claim-preview__file-property-overlay {
   position: absolute;
   bottom: var(--spacing-xxs);

ui/scss/component/_view_count.scss

@@ -0,0 +1,34 @@
+@import '../init/vars';
+
+.contains_view_count {
+  // accommodating for large view counts on channel overview
+  @media (min-width: $breakpoint-large) {
+    padding: var(--spacing-s) 4px;
+
+    .date_time {
+      font-size: 11px;
+    }
+  }
+
+  .channel-thumbnail {
+    // accommodating for large view counts on channel overview
+    @media (min-width: $breakpoint-large) {
+      margin-right: 7px;
+    }
+  }
+}
+
+.view_count {
+  &::after {
+    content: '•';
+    margin: 0 4px;
+  }
+
+  @media (min-width: $breakpoint-large) {
+    &::after {
+      margin: 0 2.5px;
+    }
+
+    font-size: 11px;
+  }
+}