LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

File page: use compact view count (w/ tooltip for full res)

Browse source
This commit is contained in:
infinite-persistence 2022-01-10 10:43:10 +08:00
parent df4d142370
commit 1d4e1296ec
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/component/fileViewCount/view.jsx
View file

@ -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 (
<Tooltip title={countFullResolution}>
<span className="media__subtitle--centered">
{livestream &&
__('%viewer_count% currently %viewer_state%', {
viewer_count: activeViewers === undefined ? '...' : activeViewers,
viewer_count: activeViewers === undefined ? '...' : countCompact,
viewer_state: isLive ? __('watching') : __('waiting'),
})}
{!livestream &&
activeViewers === undefined &&
(viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))}
(viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view'))}
{!SIMPLE_SITE && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />}
</span>
</Tooltip>
);
}