Add option to hide viewer count. Closes #1939

web/components/config/edit-instance-details.tsx

@@ -15,6 +15,7 @@ import {
   API_YP_SWITCH,
   FIELD_PROPS_YP,
   FIELD_PROPS_NSFW,
+  FIELD_PROPS_HIDE_VIEWER_COUNT,
 } from '../../utils/config-constants';
 
 import { UpdateArgs } from '../../types/config-section';
@@ -61,6 +62,10 @@ export default function EditInstanceDetails() {
     });
   };
 
+  function handleHideViewerCountChange(enabled: boolean) {
+    handleFieldChange({ fieldName: 'hideViewerCount', value: enabled });
+  }
+
   const hasInstanceUrl = instanceUrl !== '';
 
   return (
@@ -100,6 +105,14 @@ export default function EditInstanceDetails() {
       {/* Logo section */}
       <EditLogo />
 
+      <ToggleSwitch
+        fieldName="hideViewerCount"
+        useSubmit
+        {...FIELD_PROPS_HIDE_VIEWER_COUNT}
+        checked={formDataValues.hideViewerCount}
+        onChange={handleHideViewerCountChange}
+      />
+
       <br />
       <p className="description">
         Increase your audience by appearing in the{' '}

web/components/ui/Statusbar/Statusbar.tsx

@@ -40,12 +40,12 @@ export default function Statusbar(props: Props) {
   if (online && lastConnectTime) {
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
-    rightSideMessage = (
+    rightSideMessage = viewerCount > 0 && (
       <span>
         <EyeOutlined /> {viewerCount}
       </span>
     );
-  } else {
+  } else if (!online) {
     onlineMessage = 'Offline';
     if (lastDisconnectTime) {
       rightSideMessage = `Last live ${formatDistanceToNow(new Date(lastDisconnectTime))} ago.`;

web/types/config-section.ts

@@ -152,4 +152,5 @@ export interface ConfigDetails {
   notifications: NotificationsConfig;
   chatJoinMessagesEnabled: boolean;
   chatEstablishedUserMode: boolean;
+  hideViewerCount: boolean;
 }

web/utils/config-constants.tsx

@@ -29,6 +29,7 @@ export const API_VIDEO_SEGMENTS = '/video/streamlatencylevel';
 export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
 export const API_WEB_PORT = '/webserverport';
 export const API_YP_SWITCH = '/directoryenabled';
+export const API_HIDE_VIEWER_COUNT = '/hideviewercount';
 export const API_CHAT_DISABLE = '/chat/disable';
 export const API_CHAT_JOIN_MESSAGES_ENABLED = '/chat/joinmessagesenabled';
 export const API_CHAT_ESTABLISHED_MODE = '/chat/establishedusermode';
@@ -188,6 +189,13 @@ export const FIELD_PROPS_YP = {
   tip: 'Turn this ON to request to show up in the directory.',
 };
 
+export const FIELD_PROPS_HIDE_VIEWER_COUNT = {
+  apiPath: API_HIDE_VIEWER_COUNT,
+  configPath: '',
+  label: 'Hide viewer count',
+  tip: 'Turn this ON to hide the viewer count the web page.',
+};
+
 export const DEFAULT_VARIANT_STATE: VideoVariant = {
   framerate: 24,
   videoPassthrough: false,

web/utils/server-status-context.tsx

@@ -75,6 +75,7 @@ export const initialServerConfigState: ConfigDetails = {
   chatDisabled: false,
   chatJoinMessagesEnabled: true,
   chatEstablishedUserMode: false,
+  hideViewerCount: false,
 };
 
 const initialServerStatusState = {
@@ -156,6 +157,7 @@ const ServerStatusProvider = ({ children }) => {
     };
   }, []);
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const providerValue = {
     ...status,
     serverConfig: config,