File page: compact form for View and Follower Count (#658)

ui/component/claimPreview/view.jsx

@@ -10,6 +10,7 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
 import { isChannelClaim } from 'util/claim';
 import { formatLbryUrlForWeb } from 'util/url';
 import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
+import { toCompactNotation } from 'util/string';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
 import PreviewOverlayProperties from 'component/previewOverlayProperties';
@@ -165,10 +166,12 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     if (channelSubCount === undefined) {
       return <span />;
     }
-    const formattedSubCount = Number(channelSubCount).toLocaleString();
+
     return (
       <span className="claim-preview__channel-sub-count">
-        {channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
+        {channelSubCount === 1
+          ? __('1 Follower')
+          : __('%formattedSubCount% Followers', { formattedSubCount: toCompactNotation(channelSubCount) })}
       </span>
     );
   }, [channelSubCount]);

ui/component/fileViewCount/view.jsx

@@ -2,6 +2,8 @@
 import { SIMPLE_SITE } from 'config';
 import React from 'react';
 import HelpLink from 'component/common/help-link';
+import Tooltip from 'component/common/tooltip';
+import { toCompactNotation } from 'util/string';
 
 type Props = {
   livestream?: boolean,
@@ -16,6 +18,9 @@ type Props = {
 
 function FileViewCount(props: Props) {
   const { claimId, fetchViewCount, viewCount, livestream, activeViewers, isLive = false } = props;
+  const count = livestream ? activeViewers || 0 : viewCount;
+  const countCompact = toCompactNotation(count);
+  const countFullResolution = Number(count).toLocaleString();
 
   React.useEffect(() => {
     if (claimId) {
@@ -23,20 +28,20 @@ function FileViewCount(props: Props) {
     }
   }, [claimId]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const formattedViewCount = Number(viewCount).toLocaleString();
-
   return (
+    <Tooltip title={countFullResolution}>
       <span className="media__subtitle--centered">
         {livestream &&
           __('%viewer_count% currently %viewer_state%', {
-          viewer_count: activeViewers === undefined ? '...' : activeViewers,
+            viewer_count: activeViewers === undefined ? '...' : countCompact,
             viewer_state: isLive ? __('watching') : __('waiting'),
           })}
         {!livestream &&
           activeViewers === undefined &&
-        (viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))}
+          (viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view'))}
         {!SIMPLE_SITE && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />}
       </span>
+    </Tooltip>
   );
 }
 

ui/component/fileViewCountInline/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import 'scss/component/_view_count.scss';
 import * as PAGES from 'constants/pages';
+import { toCompactNotation } from 'util/string';
 
 type Props = {
   uri: string,
@@ -14,16 +15,7 @@ type Props = {
 
 export default function FileViewCountInline(props: Props) {
   const { isLivestream, claim, viewCount, lang } = props;
-  let formattedViewCount;
-
-  try {
-    formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', {
-      compactDisplay: 'short',
-      notation: 'compact',
-    });
-  } catch (err) {
-    formattedViewCount = Number(viewCount).toLocaleString();
-  }
+  const formattedViewCount = toCompactNotation(viewCount, lang);
 
   // Limit the view-count visibility to specific pages for now. We'll eventually
   // show it everywhere, so this band-aid would be the easiest to clean up

ui/util/string.js

@@ -3,3 +3,15 @@
 export function toCapitalCase(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
+
+export function toCompactNotation(number: string | number, lang: ?string) {
+  try {
+    return Number(number).toLocaleString(lang || 'en', {
+      compactDisplay: 'short',
+      notation: 'compact',
+    });
+  } catch (err) {
+    // Not all browsers support the addition options.
+    return Number(number).toLocaleString();
+  }
+}