mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-03 03:11:40 +00:00
show time remaining instead of duration on click (#1179)
* show time remaining on duration click
This commit is contained in:
parent
fc847631d3
commit
3636384508
2 changed files with 23 additions and 8 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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: [],
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue