From 3636384508eb1f580b52e900882af57be80f398f Mon Sep 17 00:00:00 2001
From: Lyall <58636255+Lyall-A@users.noreply.github.com>
Date: Sun, 12 Oct 2025 22:22:58 +0100
Subject: [PATCH] show time remaining instead of duration on click (#1179)

* show time remaining on duration click
---
 .../player/components/center-controls.tsx     | 23 ++++++++++++-------
 src/renderer/store/app.store.ts               |  8 +++++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx
index e2bb6328..5c3e4379 100644
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/src/renderer/features/player/components/center-controls.tsx
@@ -13,19 +13,19 @@ import { openShuffleAllModal } from '/@/renderer/features/player/components/shuf
 import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import {
+    useAppStore,
+    useAppStoreActions,
     useCurrentPlayer,
     useCurrentSong,
     useCurrentStatus,
     useCurrentTime,
-    useRepeatStatus,
-    useSetCurrentTime,
-    useShuffleStatus,
-} from '/@/renderer/store';
-import {
     useHotkeySettings,
     usePlaybackType,
+    useRepeatStatus,
+    useSetCurrentTime,
     useSettingsStore,
-} from '/@/renderer/store/settings.store';
+    useShuffleStatus,
+} from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
@@ -51,6 +51,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     const repeat = useRepeatStatus();
     const shuffle = useShuffleStatus();
     const { bindings } = useHotkeySettings();
+    const { showTimeRemaining } = useAppStore();
+    const { setShowTimeRemaining } = useAppStoreActions();
 
     const {
         handleNextTrack,
@@ -70,7 +72,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0;
     const currentTime = useCurrentTime();
     const currentPlayerRef = player === 1 ? player1 : player2;
-    const duration = formatDuration(songDuration * 1000 || 0);
+    const formattedDuration = formatDuration(songDuration * 1000 || 0);
+    const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
     const formattedTime = formatDuration(currentTime * 1000 || 0);
 
     useEffect(() => {
@@ -260,6 +263,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         isMuted
                         isNoSelect
                         size="xs"
+                        style={{ userSelect: 'none' }}
                     >
                         {formattedTime}
                     </Text>
@@ -293,9 +297,12 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         fw={600}
                         isMuted
                         isNoSelect
+                        onClick={() => setShowTimeRemaining(!showTimeRemaining)}
+                        role="button"
                         size="xs"
+                        style={{ cursor: 'pointer', userSelect: 'none' }}
                     >
-                        {duration}
+                        {showTimeRemaining ? formattedTimeRemaining : formattedDuration}
                     </Text>
                 </div>
             </div>
diff --git a/src/renderer/store/app.store.ts b/src/renderer/store/app.store.ts
index 68f5bfd3..88a71a1a 100644
--- a/src/renderer/store/app.store.ts
+++ b/src/renderer/store/app.store.ts
@@ -9,6 +9,7 @@ export interface AppSlice extends AppState {
     actions: {
         setAppStore: (data: Partial<AppSlice>) => void;
         setPrivateMode: (enabled: boolean) => void;
+        setShowTimeRemaining: (enabled: boolean) => void;
         setSideBar: (options: Partial<SidebarProps>) => void;
         setTitleBar: (options: Partial<TitlebarProps>) => void;
     };
@@ -19,6 +20,7 @@ export interface AppState {
     isReorderingQueue: boolean;
     platform: Platform;
     privateMode: boolean;
+    showTimeRemaining: boolean;
     sidebar: SidebarProps;
     titlebar: TitlebarProps;
 }
@@ -57,6 +59,11 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                             state.privateMode = privateMode;
                         });
                     },
+                    setShowTimeRemaining: (showTimeRemaining) => {
+                        set((state) => {
+                            state.showTimeRemaining = showTimeRemaining;
+                        });
+                    },
                     setSideBar: (options) => {
                         set((state) => {
                             state.sidebar = { ...state.sidebar, ...options };
@@ -89,6 +96,7 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                 isReorderingQueue: false,
                 platform: Platform.WINDOWS,
                 privateMode: false,
+                showTimeRemaining: false,
                 sidebar: {
                     collapsed: false,
                     expanded: [],