diff --git a/ui/component/fileViewCount/view.jsx b/ui/component/fileViewCount/view.jsx index 6aa99ba42..45a001a9f 100644 --- a/ui/component/fileViewCount/view.jsx +++ b/ui/component/fileViewCount/view.jsx @@ -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 ( - - {livestream && - __('%viewer_count% currently %viewer_state%', { - viewer_count: activeViewers === undefined ? '...' : activeViewers, - viewer_state: isLive ? __('watching') : __('waiting'), - })} - {!livestream && - activeViewers === undefined && - (viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))} - {!SIMPLE_SITE && } - + + + {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 && } + + ); }