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.
This commit is contained in:
infinite-persistence 2021-09-16 17:01:14 +08:00
parent 5d06d4e254
commit f251ad999e
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 17 additions and 4 deletions

View file

@ -1,12 +1,14 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { makeSelectClaimForUri } from 'lbry-redux'; import { makeSelectClaimForUri } from 'lbry-redux';
import { makeSelectViewCountForUri } from 'lbryinc'; import { makeSelectViewCountForUri } from 'lbryinc';
import { selectLanguage } from 'redux/selectors/settings';
import FileViewCountInline from './view'; import FileViewCountInline from './view';
const select = (state, props) => { const select = (state, props) => {
return { return {
claim: makeSelectClaimForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state),
viewCount: makeSelectViewCountForUri(props.uri)(state), viewCount: makeSelectViewCountForUri(props.uri)(state),
lang: selectLanguage(state),
}; };
}; };

View file

@ -7,17 +7,28 @@ type Props = {
// --- select --- // --- select ---
claim: ?StreamClaim, claim: ?StreamClaim,
viewCount: string, viewCount: string,
lang: ?string,
}; };
export default function FileViewCountInline(props: Props) { export default function FileViewCountInline(props: Props) {
const { isLivestream, claim, viewCount } = props; const { isLivestream, claim, viewCount, lang } = props;
const formattedViewCount = Number(viewCount).toLocaleString(); 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) { if (!viewCount || (claim && claim.repost_url) || isLivestream) {
// (1) Currently, makeSelectViewCountForUri doesn't differentiate between // (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. // 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. // so hiding it for now.
return null; return null;
} }