e58ddbc809
* Tooltip: add 'followCursor' and 'placement' option When used on a `<span>` with short text but large empty area, the location of the tooltip was at the bottom-center of the area, which isn't ideal. I think 'followCursor' should be the default, but making it optional for now to minimize testing. Also added the 'placement' prop -- for the span case again, the mouse cursor is blocking the tooltip. * View/Follower count: only use compact when > 10k ## Issue Received complaints -- some people prefer to see full resolution. ## Changes - As a compromise, we'll only apply the compact notation when the value is greater than 10k, with the exception of Tile View Count, where we'll always apply it due to space limitation. - Also added Tooltip for Follower count. ## Fixes - The string was always in 'en' locale in some instances, so it wasn't grouping up digits properly in Japanese (groups of 4), for example.
49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
// @flow
|
|
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,
|
|
isLive?: boolean,
|
|
// --- redux ---
|
|
claimId: ?string,
|
|
fetchViewCount: (string) => void,
|
|
uri: string,
|
|
viewCount: string,
|
|
activeViewers?: number,
|
|
lang: string,
|
|
};
|
|
|
|
function FileViewCount(props: Props) {
|
|
const { claimId, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, lang } = props;
|
|
const count = livestream ? activeViewers || 0 : viewCount;
|
|
const countCompact = toCompactNotation(count, lang, 10000);
|
|
const countFullResolution = Number(count).toLocaleString();
|
|
|
|
React.useEffect(() => {
|
|
if (claimId) {
|
|
fetchViewCount(claimId);
|
|
}
|
|
}, [claimId]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<Tooltip title={countFullResolution} followCursor placement="top">
|
|
<span className="media__subtitle--centered">
|
|
{livestream &&
|
|
__('%viewer_count% currently %viewer_state%', {
|
|
viewer_count: activeViewers === undefined ? '...' : countCompact,
|
|
viewer_state: isLive ? __('watching') : __('waiting'),
|
|
})}
|
|
{!livestream &&
|
|
activeViewers === undefined &&
|
|
(viewCount !== 1 ? __('%view_count% views', { view_count: countCompact }) : __('1 view'))}
|
|
{!SIMPLE_SITE && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export default FileViewCount;
|