diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 24b9cf3d7..523c89671 100644 --- a/ui/component/claimPreview/view.jsx +++ b/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((props: Props, ref: any) => { if (channelSubCount === undefined) { return ; } - const formattedSubCount = Number(channelSubCount).toLocaleString(); + return ( - {channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })} + {channelSubCount === 1 + ? __('1 Follower') + : __('%formattedSubCount% Followers', { formattedSubCount: toCompactNotation(channelSubCount) })} ); }, [channelSubCount]); diff --git a/ui/component/fileViewCount/view.jsx b/ui/component/fileViewCount/view.jsx index 6aa99ba42..45a001a9f 100644 --- a/ui/component/fileViewCount/view.jsx +++ b/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 ( - - {livestream && - __('%viewer_count% currently %viewer_state%', { - viewer_count: activeViewers === undefined ? '...' : activeViewers, - viewer_state: isLive ? __('watching') : __('waiting'), - })} - {!livestream && - activeViewers === undefined && - (viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))} - {!SIMPLE_SITE && } - + + + {livestream && + __('%viewer_count% currently %viewer_state%', { + viewer_count: activeViewers === undefined ? '...' : countCompact, + viewer_state: isLive ? __('watching') : __('waiting'), + })} + {!livestream && + activeViewers === undefined && + (viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view'))} + {!SIMPLE_SITE && } + + ); } diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index 02605e10c..c6d7d5e98 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/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 diff --git a/ui/util/string.js b/ui/util/string.js index e4cb060c5..d5784e9ad 100644 --- a/ui/util/string.js +++ b/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(); + } +}