From 525399049a11cc6b85348e614ffc7809c79b2122 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Sat, 28 Oct 2023 21:49:40 +0200
Subject: [PATCH] feat: allow viewer count to be hidden

---
 frontend/src/locale/en/translation.json |  2 +-
 frontend/src/locale/it/translation.json |  2 +-
 frontend/src/store/api/types.ts         |  1 +
 frontend/src/ui/pages/Dashboard.tsx     | 20 ++++++++++++++++----
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index 9873f1d..49c3870 100644
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@@ -259,7 +259,7 @@
     "dashboard": {
       "twitch-status": "Twitch stream status",
       "live": "Live!",
-      "x-viewers": "{{count}} viewers",
+      "x-viewers": "{{num}} viewers",
       "not-live": "Offline / Not streaming",
       "twitch-events": {
         "header": "Recent events",
diff --git a/frontend/src/locale/it/translation.json b/frontend/src/locale/it/translation.json
index db6aba3..2287fea 100644
--- a/frontend/src/locale/it/translation.json
+++ b/frontend/src/locale/it/translation.json
@@ -143,7 +143,7 @@
       "live": "In onda!",
       "not-live": "Offline / Non in streaming",
       "twitch-status": "Stato stream Twitch",
-      "x-viewers": "{{count}} spettatori",
+      "x-viewers": "{{num}} spettatori",
       "twitch-events": {
         "anonymous": "Uno spettatore anonimo",
         "header": "Eventi recenti",
diff --git a/frontend/src/store/api/types.ts b/frontend/src/store/api/types.ts
index 884838b..2ee8e7d 100644
--- a/frontend/src/store/api/types.ts
+++ b/frontend/src/store/api/types.ts
@@ -151,6 +151,7 @@ export interface UISettings {
   onboardingDone: boolean;
   language: string;
   theme: string;
+  hideViewers: boolean;
 }
 
 export enum ConnectionStatus {
diff --git a/frontend/src/ui/pages/Dashboard.tsx b/frontend/src/ui/pages/Dashboard.tsx
index dd465dd..c8fe526 100644
--- a/frontend/src/ui/pages/Dashboard.tsx
+++ b/frontend/src/ui/pages/Dashboard.tsx
@@ -5,11 +5,13 @@ import {
   EventSubNotificationType,
   unwrapEvent,
 } from '~/lib/eventSub';
-import { useLiveKey } from '~/lib/react';
-import { useAppSelector } from '~/store';
+import { useLiveKey, useModule } from '~/lib/react';
+import { useAppDispatch, useAppSelector } from '~/store';
+import { modules } from '~/store/api/reducer';
 import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
 import BrowserLink from '../components/BrowserLink';
 import Scrollbar from '../components/utils/Scrollbar';
+import RevealLink from '../components/utils/RevealLink';
 
 interface StreamInfo {
   id: string;
@@ -370,6 +372,9 @@ function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
 
 function TwitchStreamStatus({ info }: { info: StreamInfo }) {
   const { t } = useTranslation();
+  const [uiConfig, setUiConfig] = useModule(modules.uiConfig);
+  const dispatch = useAppDispatch();
+  console.log(uiConfig);
   return (
     <StreamBlock>
       <LiveIndicator
@@ -387,8 +392,15 @@ function TwitchStreamStatus({ info }: { info: StreamInfo }) {
       <StreamInfo>
         {info.game_name} -{' '}
         {t('pages.dashboard.x-viewers', {
-          count: info.viewer_count,
-        })}
+          num: uiConfig.hideViewers ? '...' : `${info.viewer_count}`,
+        })}{' '}
+        <RevealLink
+          value={!uiConfig.hideViewers}
+          setter={(newVal) => {
+            console.log(newVal);
+            void dispatch(setUiConfig({ ...uiConfig, hideViewers: !newVal }));
+          }}
+        />
       </StreamInfo>
     </StreamBlock>
   );