Merge pull request #1034 from Lyall-A/private-mode

add private mode toggle to app menu

src/i18n/locales/en.json

@@ -288,6 +288,11 @@
         "updateServer": {
             "success": "server updated successfully",
             "title": "update server"
+        },
+        "privateMode": {
+            "enabled": "private mode enabled, playback status is now hidden from external integrations",
+            "disabled": "private mode disabled, playback status is now visible to enabled external integrations",
+            "title": "private mode"
         }
     },
     "page": {
@@ -321,6 +326,8 @@
             "goBack": "go back",
             "goForward": "go forward",
             "manageServers": "manage servers",
+            "privateModeOff": "turn off private mode",
+            "privateModeOn": "turn on private mode",
             "openBrowserDevtools": "open browser devtools",
             "quit": "$t(common.quit)",
             "selectServer": "select server",

src/renderer/features/discord-rpc/use-discord-rpc.ts

@@ -6,6 +6,7 @@ import { controller } from '/@/renderer/api/controller';
 import {
     DiscordDisplayType,
     getServerById,
+    useAppStore,
     useDiscordSetttings,
     useGeneralSettings,
     usePlayerStore,
@@ -18,6 +19,7 @@ const discordRpc = isElectron() ? window.api.discordRpc : null;
 export const useDiscordRpc = () => {
     const discordSettings = useDiscordSetttings();
     const generalSettings = useGeneralSettings();
+    const { privateMode } = useAppStore();
     const [lastUniqueId, setlastUniqueId] = useState('');
 
     const setActivity = useCallback(
@@ -148,15 +150,15 @@ export const useDiscordRpc = () => {
     );
 
     useEffect(() => {
-        if (!discordSettings.enabled) return discordRpc?.quit();
+        if (!discordSettings.enabled || privateMode) return discordRpc?.quit();
 
         return () => {
             discordRpc?.quit();
         };
-    }, [discordSettings.clientId, discordSettings.enabled]);
+    }, [discordSettings.clientId, privateMode, discordSettings.enabled]);
 
     useEffect(() => {
-        if (!discordSettings.enabled) return;
+        if (!discordSettings.enabled || privateMode) return;
         const unsubSongChange = usePlayerStore.subscribe(
             (state) => [state.current.song, state.current.time, state.current.status],
             setActivity,
@@ -164,5 +166,5 @@ export const useDiscordRpc = () => {
         return () => {
             unsubSongChange();
         };
-    }, [discordSettings.enabled, setActivity]);
+    }, [discordSettings.enabled, privateMode, setActivity]);
 };

src/renderer/features/player/hooks/use-scrobble.ts

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useSendScrobble } from '/@/renderer/features/player/mutations/scrobble-mutation';
-import { usePlayerStore } from '/@/renderer/store';
+import { useAppStore, usePlaybackSettings, usePlayerStore } from '/@/renderer/store';
-import { usePlaybackSettings } from '/@/renderer/store/settings.store';
 import { QueueSong, ServerType } from '/@/shared/types/domain-types';
 import { PlayerStatus } from '/@/shared/types/types';
 
@@ -59,13 +58,14 @@ const checkScrobbleConditions = (args: {
 export const useScrobble = () => {
     const scrobbleSettings = usePlaybackSettings().scrobble;
     const isScrobbleEnabled = scrobbleSettings?.enabled;
+    const isPrivateModeEnabled = useAppStore().privateMode;
     const sendScrobble = useSendScrobble();
 
     const [isCurrentSongScrobbled, setIsCurrentSongScrobbled] = useState(false);
 
     const handleScrobbleFromSeek = useCallback(
         (currentTime: number) => {
-            if (!isScrobbleEnabled) return;
+            if (!isScrobbleEnabled || isPrivateModeEnabled) return;
 
             const currentSong = usePlayerStore.getState().current.song;
 
@@ -84,7 +84,7 @@ export const useScrobble = () => {
                 serverId: currentSong?.serverId,
             });
         },
-        [isScrobbleEnabled, sendScrobble],
+        [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble],
     );
 
     const progressIntervalId = useRef<null | ReturnType<typeof setInterval>>(null);
@@ -119,7 +119,7 @@ export const useScrobble = () => {
                 }, 1000);
             }
 
-            if (!isScrobbleEnabled) return;
+            if (!isScrobbleEnabled || isPrivateModeEnabled) return;
 
             if (progressIntervalId.current) {
                 clearInterval(progressIntervalId.current);
@@ -201,6 +201,7 @@ export const useScrobble = () => {
             scrobbleSettings?.scrobbleAtDuration,
             scrobbleSettings?.scrobbleAtPercentage,
             isScrobbleEnabled,
+            isPrivateModeEnabled,
             isCurrentSongScrobbled,
             sendScrobble,
             handleScrobbleFromSeek,
@@ -209,7 +210,7 @@ export const useScrobble = () => {
 
     const handleScrobbleFromStatusChange = useCallback(
         (current: PlayerEvent, previous: PlayerEvent) => {
-            if (!isScrobbleEnabled) return;
+            if (!isScrobbleEnabled || isPrivateModeEnabled) return;
 
             const currentSong = usePlayerStore.getState().current.song;
 
@@ -293,6 +294,7 @@ export const useScrobble = () => {
         },
         [
             isScrobbleEnabled,
+            isPrivateModeEnabled,
             sendScrobble,
             handleScrobbleFromSeek,
             scrobbleSettings?.scrobbleAtDuration,
@@ -306,7 +308,7 @@ export const useScrobble = () => {
     // need to perform another check to see if the scrobble conditions are met
     const handleScrobbleFromSongRestart = useCallback(
         (currentTime: number) => {
-            if (!isScrobbleEnabled) return;
+            if (!isScrobbleEnabled || isPrivateModeEnabled) return;
 
             const currentSong = usePlayerStore.getState().current.song;
 
@@ -349,6 +351,7 @@ export const useScrobble = () => {
         },
         [
             isScrobbleEnabled,
+            isPrivateModeEnabled,
             scrobbleSettings?.scrobbleAtDuration,
             scrobbleSettings?.scrobbleAtPercentage,
             isCurrentSongScrobbled,

src/renderer/features/titlebar/components/app-menu.tsx

@@ -10,6 +10,7 @@ import { ServerList } from '/@/renderer/features/servers';
 import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
+    useAppStore,
     useAppStoreActions,
     useAuthStoreActions,
     useCurrentServer,
@@ -18,6 +19,7 @@ import {
 } from '/@/renderer/store';
 import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
 import { Icon } from '/@/shared/components/icon/icon';
+import { toast } from '/@/shared/components/toast/toast';
 import { ServerListItem, ServerType } from '/@/shared/types/domain-types';
 
 const browser = isElectron() ? window.api.browser : null;
@@ -30,7 +32,8 @@ export const AppMenu = () => {
     const serverList = useServerList();
     const { setCurrentServer } = useAuthStoreActions();
     const { collapsed } = useSidebarStore();
-    const { setSideBar } = useAppStoreActions();
+    const { privateMode } = useAppStore();
+    const { setPrivateMode, setSideBar } = useAppStoreActions();
 
     const handleSetCurrentServer = (server: ServerListItem) => {
         navigate(AppRoute.HOME);
@@ -80,6 +83,22 @@ export const AppMenu = () => {
         setSideBar({ collapsed: false });
     };
 
+    const handlePrivateModeOff = () => {
+        setPrivateMode(false);
+        toast.info({
+            message: t('form.privateMode.disabled', { postProcess: 'sentenceCase' }),
+            title: t('form.privateMode.title', { postProcess: 'sentenceCase' }),
+        });
+    };
+
+    const handlePrivateModeOn = () => {
+        setPrivateMode(true);
+        toast.info({
+            message: t('form.privateMode.enabled', { postProcess: 'sentenceCase' }),
+            title: t('form.privateMode.title', { postProcess: 'sentenceCase' }),
+        });
+    };
+
     const handleQuit = () => {
         browser?.quit();
     };
@@ -127,7 +146,21 @@ export const AppMenu = () => {
             >
                 {t('page.appMenu.manageServers', { postProcess: 'sentenceCase' })}
             </DropdownMenu.Item>
-
+            {privateMode ? (
+                <DropdownMenu.Item
+                    leftSection={<Icon color="error" icon="lock" />}
+                    onClick={handlePrivateModeOff}
+                >
+                    {t('page.appMenu.privateModeOff', { postProcess: 'sentenceCase' })}
+                </DropdownMenu.Item>
+            ) : (
+                <DropdownMenu.Item
+                    leftSection={<Icon icon="lockOpen" />}
+                    onClick={handlePrivateModeOn}
+                >
+                    {t('page.appMenu.privateModeOn', { postProcess: 'sentenceCase' })}
+                </DropdownMenu.Item>
+            )}
             <DropdownMenu.Divider />
             <DropdownMenu.Label>
                 {t('page.appMenu.selectServer', { postProcess: 'sentenceCase' })}

src/renderer/layouts/window-bar.tsx

@@ -12,8 +12,12 @@ import macMinHover from './assets/min-mac-hover.png';
 import macMin from './assets/min-mac.png';
 import styles from './window-bar.module.css';
 
-import { useCurrentStatus, useQueueStatus } from '/@/renderer/store';
+import {
-import { useWindowSettings } from '/@/renderer/store/settings.store';
+    useAppStore,
+    useCurrentStatus,
+    useQueueStatus,
+    useWindowSettings,
+} from '/@/renderer/store';
 import { Text } from '/@/shared/components/text/text';
 import { Platform, PlayerStatus } from '/@/shared/types/types';
 
@@ -126,14 +130,16 @@ export const WindowBar = () => {
     const playerStatus = useCurrentStatus();
     const { currentSong, index, length } = useQueueStatus();
     const { windowBarStyle } = useWindowSettings();
+    const { privateMode } = useAppStore();
 
     const statusString = playerStatus === PlayerStatus.PAUSED ? '(Paused) ' : '';
     const queueString = length ? `(${index + 1} / ${length}) ` : '';
-    const title = length
+    const privateModeString = privateMode ? '(Private mode)' : '';
-        ? currentSong?.artistName
+    const title = `${
-            ? `${statusString}${queueString}${currentSong?.name} — ${currentSong?.artistName}`
+        length
-            : `${statusString}${queueString}${currentSong?.name}`
+            ? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName}` : ''}`
-        : 'Feishin';
+            : 'Feishin'
+    }${privateMode ? ` ${privateModeString}` : ''}`;
     document.title = title;
 
     const [max, setMax] = useState(localSettings?.env.START_MAXIMIZED || false);

src/renderer/store/app.store.ts

@@ -8,6 +8,7 @@ import { Platform } from '/@/shared/types/types';
 export interface AppSlice extends AppState {
     actions: {
         setAppStore: (data: Partial<AppSlice>) => void;
+        setPrivateMode: (enabled: boolean) => void;
         setSideBar: (options: Partial<SidebarProps>) => void;
         setTitleBar: (options: Partial<TitlebarProps>) => void;
     };
@@ -17,6 +18,7 @@ export interface AppState {
     commandPalette: CommandPaletteProps;
     isReorderingQueue: boolean;
     platform: Platform;
+    privateMode: boolean;
     sidebar: SidebarProps;
     titlebar: TitlebarProps;
 }
@@ -50,6 +52,11 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                     setAppStore: (data) => {
                         set({ ...get(), ...data });
                     },
+                    setPrivateMode: (privateMode) => {
+                        set((state) => {
+                            state.privateMode = privateMode;
+                        });
+                    },
                     setSideBar: (options) => {
                         set((state) => {
                             state.sidebar = { ...state.sidebar, ...options };
@@ -81,6 +88,7 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                 },
                 isReorderingQueue: false,
                 platform: Platform.WINDOWS,
+                privateMode: false,
                 sidebar: {
                     collapsed: false,
                     expanded: [],

src/shared/components/icon/icon.tsx

@@ -59,6 +59,7 @@ import {
     LuListPlus,
     LuLoader,
     LuLock,
+    LuLockOpen,
     LuLogIn,
     LuLogOut,
     LuMenu,
@@ -163,6 +164,7 @@ export const AppIcon = {
     listInfinite: LuInfinity,
     listPaginated: LuArrowRightToLine,
     lock: LuLock,
+    lockOpen: LuLockOpen,
     mediaNext: LuSkipForward,
     mediaPause: LuPause,
     mediaPlay: LuPlay,