show time remaining instead of duration on click (#1179)

* show time remaining on duration click
This commit is contained in:
Lyall 2025-10-12 22:22:58 +01:00 committed by GitHub
parent fc847631d3
commit 3636384508
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 8 deletions

View file

@ -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>

View file

@ -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: [],