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:
parent
5d06d4e254
commit
f251ad999e
2 changed files with 17 additions and 4 deletions
|
@ -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),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue