From 1d4e1296ec5dbeab105fcf19a26c3c731832f4f5 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 10 Jan 2022 10:43:10 +0800
Subject: [PATCH] File page: use compact view count (w/ tooltip for full res)

---
 ui/component/fileViewCount/view.jsx | 31 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 13 deletions(-)

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 (
-    <span className="media__subtitle--centered">
-      {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 && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />}
-    </span>
+    <Tooltip title={countFullResolution}>
+      <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>
   );
 }