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

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

@ -2,6 +2,8 @@
import { SIMPLE_SITE } from 'config'; import { SIMPLE_SITE } from 'config';
import React from 'react'; import React from 'react';
import HelpLink from 'component/common/help-link'; import HelpLink from 'component/common/help-link';
import Tooltip from 'component/common/tooltip';
import { toCompactNotation } from 'util/string';
type Props = { type Props = {
livestream?: boolean, livestream?: boolean,
@ -16,6 +18,9 @@ type Props = {
function FileViewCount(props: Props) { function FileViewCount(props: Props) {
const { claimId, fetchViewCount, viewCount, livestream, activeViewers, isLive = false } = 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(() => { React.useEffect(() => {
if (claimId) { if (claimId) {
@ -23,20 +28,20 @@ function FileViewCount(props: Props) {
} }
}, [claimId]); // eslint-disable-line react-hooks/exhaustive-deps }, [claimId]); // eslint-disable-line react-hooks/exhaustive-deps
const formattedViewCount = Number(viewCount).toLocaleString();
return ( return (
<span className="media__subtitle--centered"> <Tooltip title={countFullResolution}>
{livestream && <span className="media__subtitle--centered">
__('%viewer_count% currently %viewer_state%', { {livestream &&
viewer_count: activeViewers === undefined ? '...' : activeViewers, __('%viewer_count% currently %viewer_state%', {
viewer_state: isLive ? __('watching') : __('waiting'), viewer_count: activeViewers === undefined ? '...' : countCompact,
})} viewer_state: isLive ? __('watching') : __('waiting'),
{!livestream && })}
activeViewers === undefined && {!livestream &&
(viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))} activeViewers === undefined &&
{!SIMPLE_SITE && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />} (viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view'))}
</span> {!SIMPLE_SITE && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />}
</span>
</Tooltip>
); );
} }