diff --git a/ui/component/fileViewCountInline/index.js b/ui/component/fileViewCountInline/index.js index 7bd072e79..4481f9eed 100644 --- a/ui/component/fileViewCountInline/index.js +++ b/ui/component/fileViewCountInline/index.js @@ -1,12 +1,14 @@ import { connect } from 'react-redux'; import { makeSelectClaimForUri } from 'lbry-redux'; import { makeSelectViewCountForUri } from 'lbryinc'; +import { selectLanguage } from 'redux/selectors/settings'; import FileViewCountInline from './view'; const select = (state, props) => { return { claim: makeSelectClaimForUri(props.uri)(state), viewCount: makeSelectViewCountForUri(props.uri)(state), + lang: selectLanguage(state), }; }; diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index 78b49334f..809fd7985 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/ui/component/fileViewCountInline/view.jsx @@ -7,17 +7,28 @@ type Props = { // --- select --- claim: ?StreamClaim, viewCount: string, + lang: ?string, }; export default function FileViewCountInline(props: Props) { - const { isLivestream, claim, viewCount } = props; - const formattedViewCount = Number(viewCount).toLocaleString(); + const { isLivestream, claim, viewCount, lang } = props; + let formattedViewCount; + + try { + formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', { + compactDisplay: 'short', + notation: 'compact', + }); + } catch (err) { + // No soup for you! + formattedViewCount = Number(viewCount).toLocaleString(); + } if (!viewCount || (claim && claim.repost_url) || isLivestream) { // (1) Currently, makeSelectViewCountForUri doesn't differentiate between - // unfetched view-count vs zero view-count. But since it's probably not + // un-fetched view-count vs zero view-count. But since it's probably not // ideal to highlight that a view has 0 count, let's just not show anything. - // (2) No idea how to get the repost src's claim ID from the repost claim, + // (2) No idea how to get the repost source's claim ID from the repost claim, // so hiding it for now. return null; }