From f251ad999e113edb7caa65463914ec799a6748d2 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 16 Sep 2021 17:01:14 +0800 Subject: [PATCH] Handle view_count formatting on old browsers ## Issue 7102 Failed to initialize numberformat on some browsers ## Changes Just revert to the non-SI notation (but still locale aware) for browsers that does not support the `compactDisplay` option. I thought of adding an English-only abbreviation for that corner-case, but I think it's not worth the effort maintaining. There are worse issues happening on older browsers, such as icons not aligning properly in buttons and functions that require polyfilling. --- ui/component/fileViewCountInline/index.js | 2 ++ ui/component/fileViewCountInline/view.jsx | 19 +++++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) 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; }