feat(config): add option to anonymize other users (#263)

resolves #262

src/app/dashboard/users/page.tsx

@@ -10,6 +10,7 @@ import fetchTautulli, { getLibrariesByType } from '@/utils/fetchTautulli'
 import { secondsToTime, timeToSeconds } from '@/utils/formatting'
 import getPeriod from '@/utils/getPeriod'
 import getSettings from '@/utils/getSettings'
+import { anonymizeUsers } from '@/utils/helpers'
 import { Metadata } from 'next'
 import { getServerSession } from 'next-auth'
 import { notFound } from 'next/navigation'
@@ -51,7 +52,7 @@ async function getUsers(
   const allUsersCount = await getUsersCount(settings)
 
   if (!allUsersCount) {
-    console.error('[TAUTULLI] - Could not determine the number of users.')
+    console.error('Could not determine the number of users!')
 
     return
   }
@@ -165,6 +166,10 @@ async function getUsers(
     user.audio_plays_count = usersPlaysAndDurations[i].audio_plays_count
   })
 
+  if (settings.general.isAnonymized) {
+    return anonymizeUsers(listedUsers, loggedInUserId)
+  }
+
   return listedUsers
 }
 

src/app/settings/general/_actions/updateGeneralSettings.ts

@@ -9,6 +9,7 @@ const schema = z.object({
   isPostersTmdbOnly: z.boolean(),
   googleAnalyticsId: z.string(),
   isOutsideAccess: z.boolean(),
+  isAnonymized: z.boolean(),
   complete: z.boolean(),
 })
 
@@ -21,6 +22,7 @@ export default async function saveGeneralSettings(
     isPostersTmdbOnly: formData.get('isPostersTmdbOnly') === 'on',
     googleAnalyticsId: formData.get('googleAnalyticsId') as string,
     isOutsideAccess: formData.get('isOutsideAccess') === 'on',
+    isAnonymized: formData.get('isAnonymized') === 'on',
     complete: true,
   }
 

src/app/settings/general/_components/GeneralSettingsForm.tsx

@@ -120,6 +120,17 @@ export default function GeneralSettingsForm({ settings, libraries }: Props) {
                 <small>Access without login.</small>
               </span>
             </Switch>
+            <Switch
+              className='switch items-start'
+              name='isAnonymized'
+              defaultSelected={generalSettings.isAnonymized}
+            >
+              <div className='indicator'></div>
+              <span className='label'>
+                <span className='label-wrapper'>Anonymize</span>
+                <small>Hide usernames for other users.</small>
+              </span>
+            </Switch>
           </section>
           <section className='group-settings group'>
             <h2 className='heading-settings'>Analytics</h2>

src/components/MediaItem/MediaItem.tsx

@@ -18,9 +18,10 @@ import clsx from 'clsx'
 import { motion } from 'framer-motion'
 import Image from 'next/image'
 import { useEffect, useRef, useState } from 'react'
+import anonymousSvg from './anonymous.svg'
 import MediaItemTitle from './MediaItemTitle'
-import PlexDeeplink from './PlexDeeplink'
 import placeholderSvg from './placeholder.svg'
+import PlexDeeplink from './PlexDeeplink'
 
 type Props = {
   data: TautulliItemRow
@@ -53,16 +54,19 @@ export default function MediaItem({
           isUserDashboard ? data.user_thumb : data.thumb
         }&width=300`,
       )}`
+  const isAnonymized = data.user === 'Anonymous'
+  const initialImageSrc =
+    isUserDashboard && isAnonymized ? anonymousSvg : posterSrc
+  const [imageSrc, setImageSrc] = useState<string>(initialImageSrc)
   const [dataKey, setDataKey] = useState<number>(0)
   const titleContainerRef = useRef<HTMLDivElement>(null)
   const isOverseerrActive =
     settings.connection.overseerrUrl && settings.connection.overseerrApiKey
-  const [imageSrc, setImageSrc] = useState<string>(posterSrc)
 
   useEffect(() => {
     setDataKey((prevDataKey) => prevDataKey + 1)
-    setImageSrc(posterSrc)
-  }, [data, type, posterSrc])
+    setImageSrc(initialImageSrc)
+  }, [data, type, initialImageSrc])
 
   return (
     <motion.li
@@ -89,7 +93,11 @@ export default function MediaItem({
         <Image
           fill
           className='object-cover object-top'
-          alt={isUserDashboard ? data.user + ' avatar' : data.title + ' poster'}
+          alt={
+            isUserDashboard
+              ? data.friendly_name + ' avatar'
+              : data.title + ' poster'
+          }
           src={imageSrc}
           sizes='10rem'
           onError={() => setImageSrc(placeholderSvg)}

src/types/settings.d.ts

@@ -18,6 +18,7 @@ export type GeneralSettings = {
   isPostersTmdbOnly: boolean
   googleAnalyticsId: string
   isOutsideAccess: boolean
+  isAnonymized: boolean
   complete: boolean
 }
 

src/utils/constants.ts

@@ -51,6 +51,7 @@ export const DEFAULT_SETTINGS: Settings = {
     isPostersTmdbOnly: false,
     googleAnalyticsId: '',
     isOutsideAccess: false,
+    isAnonymized: false,
     complete: false,
   },
   rewind: {

src/utils/helpers.ts

@@ -1,7 +1,8 @@
 import { Settings } from '@/types/settings'
+import { TautulliItemRow } from '@/types/tautulli'
 import { PERIODS, SETTINGS_PAGES } from './constants'
 
-const requiredSettings = [
+const REQUIRED_SETTINGS = [
   'connection.tautulliUrl',
   'connection.tautulliApiKey',
   'connection.plexUrl',
@@ -14,7 +15,7 @@ const requiredSettings = [
 ]
 
 export function checkRequiredSettings(settings: Settings): string | null {
-  for (const key of requiredSettings) {
+  for (const key of REQUIRED_SETTINGS) {
     const keys = key.split('.')
     // @ts-expect-error - TODO: we know this is safe, but should still look to resolve without exception
     const settingValue = keys.reduce((acc, curr) => acc && acc[curr], settings)
@@ -39,3 +40,20 @@ export function getRewindDateRange(settings: Settings) {
 
   return { startDate, endDate }
 }
+
+export function anonymizeUsers(
+  users: TautulliItemRow[],
+  loggedInUserId: string,
+): TautulliItemRow[] {
+  return users.map((user) => {
+    const isLoggedIn = user.user_id === Number(loggedInUserId)
+
+    return {
+      ...user,
+      user: isLoggedIn ? user.user : 'Anonymous',
+      friendly_name: isLoggedIn ? user.friendly_name : 'Anonymous',
+      user_thumb: isLoggedIn ? user.user_thumb : '',
+      user_id: isLoggedIn ? user.user_id : 0,
+    }
+  })
+}