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 { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add'; import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
import { import {
useAppStore,
useAppStoreActions,
useCurrentPlayer, useCurrentPlayer,
useCurrentSong, useCurrentSong,
useCurrentStatus, useCurrentStatus,
useCurrentTime, useCurrentTime,
useRepeatStatus,
useSetCurrentTime,
useShuffleStatus,
} from '/@/renderer/store';
import {
useHotkeySettings, useHotkeySettings,
usePlaybackType, usePlaybackType,
useRepeatStatus,
useSetCurrentTime,
useSettingsStore, useSettingsStore,
} from '/@/renderer/store/settings.store'; useShuffleStatus,
} from '/@/renderer/store';
import { Icon } from '/@/shared/components/icon/icon'; import { Icon } from '/@/shared/components/icon/icon';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
import { PlaybackSelectors } from '/@/shared/constants/playback-selectors'; import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
@ -51,6 +51,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const repeat = useRepeatStatus(); const repeat = useRepeatStatus();
const shuffle = useShuffleStatus(); const shuffle = useShuffleStatus();
const { bindings } = useHotkeySettings(); const { bindings } = useHotkeySettings();
const { showTimeRemaining } = useAppStore();
const { setShowTimeRemaining } = useAppStoreActions();
const { const {
handleNextTrack, handleNextTrack,
@ -70,7 +72,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0; const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0;
const currentTime = useCurrentTime(); const currentTime = useCurrentTime();
const currentPlayerRef = player === 1 ? player1 : player2; 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); const formattedTime = formatDuration(currentTime * 1000 || 0);
useEffect(() => { useEffect(() => {
@ -260,6 +263,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
isMuted isMuted
isNoSelect isNoSelect
size="xs" size="xs"
style={{ userSelect: 'none' }}
> >
{formattedTime} {formattedTime}
</Text> </Text>
@ -293,9 +297,12 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
fw={600} fw={600}
isMuted isMuted
isNoSelect isNoSelect
onClick={() => setShowTimeRemaining(!showTimeRemaining)}
role="button"
size="xs" size="xs"
style={{ cursor: 'pointer', userSelect: 'none' }}
> >
{duration} {showTimeRemaining ? formattedTimeRemaining : formattedDuration}
</Text> </Text>
</div> </div>
</div> </div>

View file

@ -9,6 +9,7 @@ export interface AppSlice extends AppState {
actions: { actions: {
setAppStore: (data: Partial<AppSlice>) => void; setAppStore: (data: Partial<AppSlice>) => void;
setPrivateMode: (enabled: boolean) => void; setPrivateMode: (enabled: boolean) => void;
setShowTimeRemaining: (enabled: boolean) => void;
setSideBar: (options: Partial<SidebarProps>) => void; setSideBar: (options: Partial<SidebarProps>) => void;
setTitleBar: (options: Partial<TitlebarProps>) => void; setTitleBar: (options: Partial<TitlebarProps>) => void;
}; };
@ -19,6 +20,7 @@ export interface AppState {
isReorderingQueue: boolean; isReorderingQueue: boolean;
platform: Platform; platform: Platform;
privateMode: boolean; privateMode: boolean;
showTimeRemaining: boolean;
sidebar: SidebarProps; sidebar: SidebarProps;
titlebar: TitlebarProps; titlebar: TitlebarProps;
} }
@ -57,6 +59,11 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
state.privateMode = privateMode; state.privateMode = privateMode;
}); });
}, },
setShowTimeRemaining: (showTimeRemaining) => {
set((state) => {
state.showTimeRemaining = showTimeRemaining;
});
},
setSideBar: (options) => { setSideBar: (options) => {
set((state) => { set((state) => {
state.sidebar = { ...state.sidebar, ...options }; state.sidebar = { ...state.sidebar, ...options };
@ -89,6 +96,7 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
isReorderingQueue: false, isReorderingQueue: false,
platform: Platform.WINDOWS, platform: Platform.WINDOWS,
privateMode: false, privateMode: false,
showTimeRemaining: false,
sidebar: { sidebar: {
collapsed: false, collapsed: false,
expanded: [], expanded: [],