vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

temporarily remove old player implementations to prevent broken app

Browse Source
This commit is contained in:
jeffvli
2025-11-02 01:40:20 -08:00
parent 4e3a3742a5
commit 9abda23a4a
42 changed files with 2571 additions and 2598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/features/core/player/media-keys.ts
+3 -3
View File
@@ -3,7 +3,7 @@ import { BrowserWindow, globalShortcut, systemPreferences } from 'electron';
import { isMacOS, isWindows } from '../../../utils';
import { store } from '../settings';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
export const enableMediaKeys = (window: BrowserWindow | null) => {
if (isMacOS()) {
@@ -26,9 +26,9 @@ export const enableMediaKeys = (window: BrowserWindow | null) => {
}
const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
const playbackType = store.get('playbackType', PlaybackType.WEB) as PlaybackType;
const playbackType = store.get('playbackType', PlayerType.WEB) as PlayerType;
if (!enableWindowsMediaSession || !isWindows() || playbackType !== PlaybackType.WEB) {
if (!enableWindowsMediaSession || !isWindows() || playbackType !== PlayerType.WEB) {
globalShortcut.register('MediaStop', () => {
window?.webContents.send('renderer-player-stop');
});
src/main/index.ts
+3 -3
View File
@@ -38,7 +38,7 @@ import {
} from './utils';
import './features';
import { PlaybackType, TitleTheme } from '/@/shared/types/types';
import { PlayerType, TitleTheme } from '/@/shared/types/types';
export default class AppUpdater {
constructor() {
@@ -549,9 +549,9 @@ async function createWindow(first = true): Promise<void> {
}
const enableWindowsMediaSession = store.get('mediaSession', false) as boolean;
const playbackType = store.get('playbackType', PlaybackType.WEB) as PlaybackType;
const playbackType = store.get('playbackType', PlayerType.WEB) as PlayerType;
const shouldDisableMediaFeatures =
!isWindows() || !enableWindowsMediaSession || playbackType !== PlaybackType.WEB;
!isWindows() || !enableWindowsMediaSession || playbackType !== PlayerType.WEB;
if (shouldDisableMediaFeatures) {
app.commandLine.appendSwitch(
'disable-features',
src/renderer/app.tsx
+42 -52
View File
@@ -2,44 +2,37 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
import { ModuleRegistry } from '@ag-grid-community/core';
import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import { Notifications } from '@mantine/notifications';
import '@mantine/notifications/styles.css';
import isElectron from 'is-electron';
import { useEffect, useMemo, useRef, useState } from 'react';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import '@mantine/dates/styles.css';
import '/@/shared/styles/global.css';
import '@ag-grid-community/styles/ag-grid.css';
import 'overlayscrollbars/overlayscrollbars.css';
import '/styles/overlayscrollbars.css';
import i18n from '/@/i18n/i18n';
import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
import { PlayQueueHandlerContext } from '/@/renderer/features/player/context/play-queue-handler-context';
import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
import { useServerVersion } from '/@/renderer/hooks/use-server-version';
import { IsUpdatedDialog } from '/@/renderer/is-updated-dialog';
import { AppRouter } from '/@/renderer/router/app-router';
import {
PlayerState,
useCssSettings,
useHotkeySettings,
usePlaybackSettings,
usePlayerStore,
useQueueControls,
useRemoteSettings,
useSettingsStore,
} from '/@/renderer/store';
import { useAppTheme } from '/@/renderer/themes/use-app-theme';
import { sanitizeCss } from '/@/renderer/utils/sanitize';
import { setQueue } from '/@/renderer/utils/set-transcoded-queue-data';
import { toast } from '/@/shared/components/toast/toast';
import { PlaybackType, PlayerStatus, WebAudio } from '/@/shared/types/types';
import { PlayerType, WebAudio } from '/@/shared/types/types';
import '/styles/overlayscrollbars.css';
ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
@@ -55,8 +48,8 @@ export const App = () => {
const { content, enabled } = useCssSettings();
const { type: playbackType } = usePlaybackSettings();
const { bindings } = useHotkeySettings();
const handlePlayQueueAdd = useHandlePlayQueueAdd();
const { clearQueue, restoreQueue } = useQueueControls();
// const handlePlayQueueAdd = useHandlePlayQueueAdd();
// const { clearQueue, restoreQueue } = useQueueControls();
const remoteSettings = useRemoteSettings();
const cssRef = useRef<HTMLStyleElement | null>(null);
useDiscordRpc();
@@ -84,9 +77,9 @@ export const App = () => {
return () => {};
}, [content, enabled]);
const providerValue = useMemo(() => {
return { handlePlayQueueAdd };
}, [handlePlayQueueAdd]);
// const providerValue = useMemo(() => {
// return { handlePlayQueueAdd };
// }, [handlePlayQueueAdd]);
const webAudioProvider = useMemo(() => {
return { setWebAudio, webAudio };
@@ -95,7 +88,7 @@ export const App = () => {
// Start the mpv instance on startup
useEffect(() => {
const initializeMpv = async () => {
if (playbackType === PlaybackType.LOCAL) {
if (playbackType === PlayerType.LOCAL) {
const isRunning: boolean | undefined = await mpvPlayer?.isRunning();
mpvPlayer?.stop();
@@ -103,7 +96,7 @@ export const App = () => {
if (!isRunning) {
const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
const properties: Record<string, any> = {
speed: usePlayerStore.getState().speed,
// speed: usePlayerStore.getState().speed,
...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
};
@@ -124,11 +117,10 @@ export const App = () => {
}
return () => {
clearQueue();
mpvPlayer?.stop();
mpvPlayer?.cleanup();
};
}, [clearQueue, playbackType]);
}, [playbackType]);
useEffect(() => {
if (isElectron()) {
@@ -136,34 +128,34 @@ export const App = () => {
}
}, [bindings]);
useEffect(() => {
if (utils) {
utils.onSaveQueue(() => {
const { current, queue } = usePlayerStore.getState();
const stateToSave: Partial<Pick<PlayerState, 'current' | 'queue'>> = {
current: {
...current,
status: PlayerStatus.PAUSED,
},
queue,
};
utils.saveQueue(stateToSave);
});
// useEffect(() => {
// if (utils) {
// utils.onSaveQueue(() => {
// const { current, queue } = usePlayerStore.getState();
// const stateToSave: Partial<Pick<PlayerState, 'current' | 'queue'>> = {
// current: {
// ...current,
// status: PlayerStatus.PAUSED,
// },
// queue,
// };
// utils.saveQueue(stateToSave);
// });
utils.onRestoreQueue((_event: any, data) => {
const playerData = restoreQueue(data);
if (playbackType === PlaybackType.LOCAL) {
setQueue(playerData, true);
}
updateSong(playerData.current.song);
});
}
// utils.onRestoreQueue((_event: any, data) => {
// const playerData = restoreQueue(data);
// if (playbackType === PlaybackType.LOCAL) {
// setQueue(playerData, true);
// }
// updateSong(playerData.current.song);
// });
// }
return () => {
ipc?.removeAllListeners('renderer-restore-queue');
ipc?.removeAllListeners('renderer-save-queue');
};
}, [playbackType, restoreQueue]);
// return () => {
// ipc?.removeAllListeners('renderer-restore-queue');
// ipc?.removeAllListeners('renderer-save-queue');
// };
// }, [playbackType, restoreQueue]);
useEffect(() => {
if (remote) {
@@ -200,11 +192,9 @@ export const App = () => {
}}
zIndex={50000}
/>
<PlayQueueHandlerContext.Provider value={providerValue}>
<WebAudioContext.Provider value={webAudioProvider}>
<AppRouter />
</WebAudioContext.Provider>
</PlayQueueHandlerContext.Provider>
<WebAudioContext.Provider value={webAudioProvider}>
<AppRouter />
</WebAudioContext.Provider>
<IsUpdatedDialog />
</MantineProvider>
);
src/renderer/components/audio-player/index.tsx
+12 -7
View File
@@ -20,10 +20,15 @@ import {
gaplessHandler,
} from '/@/renderer/components/audio-player/utils/list-handlers';
import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
import { TranscodingConfig, usePlaybackSettings, useSpeed } from '/@/renderer/store';
import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
import {
TranscodingConfig,
usePlaybackSettings,
usePlayerSpeed,
useSettingsStore,
useSettingsStoreActions,
} from '/@/renderer/store';
import { toast } from '/@/shared/components/toast/toast';
import { PlaybackStyle, PlayerStatus } from '/@/shared/types/types';
import { PlayerStatus, PlayerStyle } from '/@/shared/types/types';
export type AudioPlayerProgress = {
loaded: number;
@@ -38,7 +43,7 @@ interface AudioPlayerProps extends ReactPlayerProps {
crossfadeStyle: CrossfadeStyle;
currentPlayer: 1 | 2;
muted: boolean;
playbackStyle: PlaybackStyle;
playbackStyle: PlayerStyle;
player1?: Song;
player2?: Song;
status: PlayerStatus;
@@ -122,7 +127,7 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
const shouldUseWebAudio = useSettingsStore((state) => state.playback.webAudio);
const preservesPitch = useSettingsStore((state) => state.playback.preservePitch);
const { resetSampleRate } = useSettingsStoreActions();
const playbackSpeed = useSpeed();
const playbackSpeed = usePlayerSpeed();
const { transcode } = usePlaybackSettings();
const stream1 = useSongUrl(transcode, currentPlayer === 1, player1);
@@ -448,7 +453,7 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
onEnded={stream1 ? handleOnEnded : undefined}
onError={handleOnError(player1Ref)}
onProgress={
playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1
playbackStyle === PlayerStyle.GAPLESS ? handleGapless1 : handleCrossfade1
}
onReady={handlePlayer1Start}
playbackRate={playbackSpeed}
@@ -468,7 +473,7 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
onEnded={stream2 ? handleOnEnded : undefined}
onError={handleOnError(player2Ref)}
onProgress={
playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2
playbackStyle === PlayerStyle.GAPLESS ? handleGapless2 : handleCrossfade2
}
onReady={handlePlayer2Start}
playbackRate={playbackSpeed}
src/renderer/components/virtual-table/hooks/use-current-song-row-styles.ts
+2 -2
View File
@@ -4,7 +4,7 @@ import { RowClassRules, RowNode } from '@ag-grid-community/core';
import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
import { useAppFocus } from '/@/renderer/hooks';
import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
import { usePlayerSong, usePlayerStore } from '/@/renderer/store';
import { Song } from '/@/shared/types/domain-types';
import { PlayerStatus } from '/@/shared/types/types';
@@ -13,7 +13,7 @@ interface UseCurrentSongRowStylesProps {
}
export const useCurrentSongRowStyles = ({ tableRef }: UseCurrentSongRowStylesProps) => {
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const isFocused = useAppFocus();
const isFocusedRef = useRef<boolean>(isFocused);
src/renderer/features/albums/components/album-detail-content.tsx
+3 -3
View File
@@ -36,7 +36,7 @@ import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-
import { useAppFocus, useContainerQuery } from '/@/renderer/hooks';
import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useCurrentSong, useCurrentStatus } from '/@/renderer/store';
import { useCurrentServer, usePlayerSong, usePlayerStatus } from '/@/renderer/store';
import {
PersistedTableColumn,
useGeneralSettings,
@@ -85,9 +85,9 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
const handlePlayQueueAdd = usePlayQueueAdd();
const tableConfig = useTableSettings('albumDetail');
const { setTable } = useSettingsStoreActions();
const status = useCurrentStatus();
const status = usePlayerStatus();
const isFocused = useAppFocus();
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const { externalLinks, lastFM, musicBrainz } = useGeneralSettings();
const genreRoute = useGenreRoute();
src/renderer/features/context-menu/context-menu-provider.tsx
+1048 -1048
View File
File diff suppressed because it is too large Load Diff
src/renderer/features/lyrics/lyrics-actions.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
import {
useCurrentSong,
usePlayerSong,
useLyricsSettings,
useSettingsStore,
useSettingsStoreActions,
@@ -38,7 +38,7 @@ export const LyricsActions = ({
setIndex,
}: LyricsActionsProps) => {
const { t } = useTranslation();
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const { setSettings } = useSettingsStoreActions();
const { delayMs, sources } = useLyricsSettings();
src/renderer/features/lyrics/lyrics.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import {
UnsynchronizedLyricsProps,
} from '/@/renderer/features/lyrics/unsynchronized-lyrics';
import { queryClient } from '/@/renderer/lib/react-query';
import { useCurrentSong, useLyricsSettings, usePlayerStore } from '/@/renderer/store';
import { usePlayerSong, useLyricsSettings, usePlayerStore } from '/@/renderer/store';
import { Center } from '/@/shared/components/center/center';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
@@ -29,7 +29,7 @@ import { Text } from '/@/shared/components/text/text';
import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/shared/types/domain-types';
export const Lyrics = () => {
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const {
enableAutoTranslation,
translationApiKey,
src/renderer/features/lyrics/synchronized-lyrics.tsx
+20 -21
View File
@@ -8,17 +8,16 @@ import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
import {
useCurrentPlayer,
useCurrentStatus,
useCurrentTime,
useLyricsSettings,
usePlaybackType,
usePlayerActions,
usePlayerData,
useSeeked,
useSetCurrentTime,
usePlayerNum,
usePlayerStatus,
usePlayerTimestamp,
} from '/@/renderer/store';
import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/shared/types/domain-types';
import { PlaybackType, PlayerStatus } from '/@/shared/types/types';
import { PlayerStatus, PlayerType } from '/@/shared/types/types';
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
const utils = isElectron() ? window.api.utils : null;
@@ -38,33 +37,33 @@ export const SynchronizedLyrics = ({
translatedLyrics,
}: SynchronizedLyricsProps) => {
const playersRef = PlayersRef;
const status = useCurrentStatus();
const status = usePlayerStatus();
const playbackType = usePlaybackType();
const playerData = usePlayerData();
const now = useCurrentTime();
const now = usePlayerTimestamp();
const settings = useLyricsSettings();
const currentPlayer = useCurrentPlayer();
const currentPlayer = usePlayerNum();
const currentPlayerRef =
currentPlayer === 1 ? playersRef.current?.player1 : playersRef.current?.player2;
const setCurrentTime = useSetCurrentTime();
const { handleScrobbleFromSeek } = useScrobble();
const handleSeek = useCallback(
(time: number) => {
if (playbackType === PlaybackType.LOCAL && mpvPlayer) {
if (playbackType === PlayerType.LOCAL && mpvPlayer) {
mpvPlayer.seekTo(time);
setCurrentTime(time, true);
// setCurrentTime(time, true);
} else {
setCurrentTime(time, true);
// setCurrentTime(time, true);
handleScrobbleFromSeek(time);
mpris?.updateSeek(time);
currentPlayerRef?.seekTo(time);
}
},
[currentPlayerRef, handleScrobbleFromSeek, playbackType, setCurrentTime],
[currentPlayerRef, handleScrobbleFromSeek, playbackType],
);
const seeked = useSeeked();
// const seeked = useSeeked();
// A reference to the timeout handler
const lyricTimer = useRef<null | ReturnType<typeof setTimeout>>(null);
@@ -97,7 +96,7 @@ export const SynchronizedLyrics = ({
};
const getCurrentTime = useCallback(async () => {
if (isElectron() && playbackType !== PlaybackType.WEB) {
if (isElectron() && playbackType !== PlayerType.WEB) {
if (mpvPlayer) {
return mpvPlayer.getCurrentTime();
}
@@ -109,7 +108,7 @@ export const SynchronizedLyrics = ({
}
const player =
playerData.current.player === 1
playerData.player.playerNum === 1
? playersRef.current.player1
: playersRef.current.player2;
const underlying = player?.getInternalPlayer();
@@ -282,16 +281,16 @@ export const SynchronizedLyrics = ({
// we may be playing the same track (repeat one). In this case, we also
// need to restart playback
const restarted = status === PlayerStatus.PLAYING && now === 0;
if (!seeked && !restarted) {
return;
}
// if (!seeked && !restarted) {
// return;
// }
if (lyricTimer.current) {
clearTimeout(lyricTimer.current);
}
setCurrentLyric(now * 1000 - delayMsRef.current);
}, [now, seeked, setCurrentLyric, status]);
}, [now, setCurrentLyric, status]);
useEffect(() => {
// Guaranteed cleanup; stop the timer, and just in case also increment
src/renderer/features/now-playing/components/play-queue-list-controls.tsx
+47 -51
View File
@@ -7,15 +7,12 @@ import { useTranslation } from 'react-i18next';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import { SearchInput } from '/@/renderer/features/shared/components/search-input';
import { usePlayerControls, useQueueControls } from '/@/renderer/store';
import { usePlayerStore, useSetCurrentTime } from '/@/renderer/store/player.store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
import { Popover } from '/@/shared/components/popover/popover';
import { Song } from '/@/shared/types/domain-types';
import { PlaybackType, TableType } from '/@/shared/types/types';
import { TableType } from '/@/shared/types/types';
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
@@ -33,30 +30,30 @@ export const PlayQueueListControls = ({
type,
}: PlayQueueListOptionsProps) => {
const { t } = useTranslation();
const {
clearQueue,
moveToBottomOfQueue,
moveToNextOfQueue,
moveToTopOfQueue,
removeFromQueue,
shuffleQueue,
} = useQueueControls();
// const {
// clearQueue,
// moveToBottomOfQueue,
// moveToNextOfQueue,
// moveToTopOfQueue,
// removeFromQueue,
// shuffleQueue,
// } = useQueueControls();
const { pause } = usePlayerControls();
// const { pause } = usePlayerControls();
const playbackType = usePlaybackType();
const setCurrentTime = useSetCurrentTime();
// const setCurrentTime = useSetCurrentTime();
const handleMoveToNext = () => {
const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
const uniqueIds = selectedRows?.map((row) => row.uniqueId);
if (!uniqueIds?.length) return;
const playerData = moveToNextOfQueue(uniqueIds);
// const playerData = moveToNextOfQueue(uniqueIds);
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
// if (playbackType === PlaybackType.LOCAL) {
// setQueueNext(playerData);
// }
};
const handleMoveToBottom = () => {
@@ -64,11 +61,11 @@ export const PlayQueueListControls = ({
const uniqueIds = selectedRows?.map((row) => row.uniqueId);
if (!uniqueIds?.length) return;
const playerData = moveToBottomOfQueue(uniqueIds);
// const playerData = moveToBottomOfQueue(uniqueIds);
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
// if (playbackType === PlaybackType.LOCAL) {
// setQueueNext(playerData);
// }
};
const handleMoveToTop = () => {
@@ -76,11 +73,11 @@ export const PlayQueueListControls = ({
const uniqueIds = selectedRows?.map((row) => row.uniqueId);
if (!uniqueIds?.length) return;
const playerData = moveToTopOfQueue(uniqueIds);
// const playerData = moveToTopOfQueue(uniqueIds);
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
// if (playbackType === PlaybackType.LOCAL) {
// setQueueNext(playerData);
// }
};
const handleRemoveSelected = () => {
@@ -88,43 +85,42 @@ export const PlayQueueListControls = ({
const uniqueIds = selectedRows?.map((row) => row.uniqueId);
if (!uniqueIds?.length) return;
const currentSong = usePlayerStore.getState().current.song;
const playerData = removeFromQueue(uniqueIds);
const isCurrentSongRemoved = currentSong && uniqueIds.includes(currentSong.uniqueId);
// const currentSong = usePlayerStore.getState().current.song;
// const playerData = removeFromQueue(uniqueIds);
// const isCurrentSongRemoved = currentSong && uniqueIds.includes(currentSong.uniqueId);
if (playbackType === PlaybackType.LOCAL) {
if (isCurrentSongRemoved) {
setQueue(playerData);
} else {
setQueueNext(playerData);
}
}
// if (playbackType === PlaybackType.LOCAL) {
// if (isCurrentSongRemoved) {
// setQueue(playerData);
// } else {
// setQueueNext(playerData);
// }
// }
if (isCurrentSongRemoved) {
updateSong(playerData.current.song);
}
// if (isCurrentSongRemoved) {
// updateSong(playerData.current.song);
// }
};
const handleClearQueue = () => {
const playerData = clearQueue();
// const playerData = clearQueue();
if (playbackType === PlaybackType.LOCAL) {
setQueue(playerData);
mpvPlayer!.pause();
}
// if (playbackType === PlaybackType.LOCAL) {
// setQueue(playerData);
// mpvPlayer!.pause();
// }
updateSong(undefined);
setCurrentTime(0);
pause();
// setCurrentTime(0);
// pause();
};
const handleShuffleQueue = () => {
const playerData = shuffleQueue();
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
// const playerData = shuffleQueue();
// if (playbackType === PlaybackType.LOCAL) {
// setQueueNext(playerData);
// }
};
const handleSearchTerm = useCallback(
src/renderer/features/now-playing/components/play-queue.tsx
+47 -42
View File
@@ -24,13 +24,10 @@ import { updateSong } from '/@/renderer/features/player/update-remote-song';
import { useAppFocus } from '/@/renderer/hooks';
import {
useAppStoreActions,
useCurrentSong,
useCurrentStatus,
useDefaultQueue,
usePlayerControls,
usePreviousSong,
useQueueControls,
useVolume,
usePlayerQueue,
usePlayerSong,
usePlayerStatus,
usePlayerVolume,
} from '/@/renderer/store';
import {
PersistedTableColumn,
@@ -42,7 +39,7 @@ import {
import { searchSongs } from '/@/renderer/utils/search-songs';
import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
import { PlaybackType, TableType } from '/@/shared/types/types';
import { PlayerType, TableType } from '/@/shared/types/types';
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
@@ -54,18 +51,18 @@ type QueueProps = {
export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<any>) => {
const tableRef = useRef<AgGridReactType | null>(null);
const mergedRef = useMergedRef(ref, tableRef);
const queue = useDefaultQueue();
const { reorderQueue, setCurrentTrack } = useQueueControls();
const currentSong = useCurrentSong();
const previousSong = usePreviousSong();
const status = useCurrentStatus();
const queue = usePlayerQueue();
// const { reorderQueue, setCurrentTrack } = useQueueControls();
const currentSong = usePlayerSong();
// const previousSong = usePreviousSong();
const status = usePlayerStatus();
const { setSettings } = useSettingsStoreActions();
const { setAppStore } = useAppStoreActions();
const tableConfig = useTableSettings(type);
const [gridApi, setGridApi] = useState<AgGridReactType | undefined>();
const playbackType = usePlaybackType();
const { play } = usePlayerControls();
const volume = useVolume();
// const { play } = usePlayerControls();
const volume = usePlayerVolume();
const isFocused = useAppFocus();
const isFocusedRef = useRef<boolean>(isFocused);
@@ -94,26 +91,26 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
[tableConfig.columns],
);
const handleDoubleClick = (e: CellDoubleClickedEvent) => {
const playerData = setCurrentTrack(e.data.uniqueId);
updateSong(playerData.current.song);
// const handleDoubleClick = (e: CellDoubleClickedEvent) => {
// const playerData = setCurrentTrack(e.data.uniqueId);
// updateSong(playerData.current.song);
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.volume(volume);
setQueue(playerData, false);
} else {
const player =
playerData.current.player === 1
? PlayersRef.current?.player1
: PlayersRef.current?.player2;
const underlying = player?.getInternalPlayer();
if (underlying) {
underlying.currentTime = 0;
}
}
// if (playbackType === PlaybackType.LOCAL) {
// mpvPlayer!.volume(volume);
// setQueue(playerData, false);
// } else {
// const player =
// playerData.current.player === 1
// ? PlayersRef.current?.player1
// : PlayersRef.current?.player2;
// const underlying = player?.getInternalPlayer();
// if (underlying) {
// underlying.currentTime = 0;
// }
// }
play();
};
// play();
// };
const handleDragStart = () => {
if (type === 'sideDrawerQueue') {
@@ -128,11 +125,11 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
.map((node) => node.data?.uniqueId)
.filter((e) => e !== undefined);
const playerData = reorderQueue(selectedUniqueIds as string[], e.overNode?.data?.uniqueId);
// const playerData = reorderQueue(selectedUniqueIds as string[], e.overNode?.data?.uniqueId);
if (playbackType === PlaybackType.LOCAL) {
setQueueNext(playerData);
}
// if (playbackType === PlaybackType.LOCAL) {
// setQueueNext(playerData);
// }
if (type === 'sideDrawerQueue') {
setAppStore({ isReorderingQueue: false });
@@ -204,6 +201,14 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
};
}, [currentSong?.uniqueId]);
const previousSongRef = useRef<QueueSong | undefined>(undefined);
useEffect(() => {
if (currentSong) {
previousSongRef.current = currentSong;
}
}, [currentSong]);
// Redraw the current song row when the previous song changes
useEffect(() => {
if (tableRef?.current) {
@@ -215,8 +220,8 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
const currentNode = currentSong?.uniqueId
? api.getRowNode(currentSong.uniqueId)
: undefined;
const previousNode = previousSong?.uniqueId
? api.getRowNode(previousSong?.uniqueId)
const previousNode = previousSongRef.current?.uniqueId
? api.getRowNode(previousSongRef.current?.uniqueId)
: undefined;
const rowNodes = [currentNode, previousNode].filter(
@@ -231,7 +236,7 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
}
}
}
}, [currentSong, previousSong, tableConfig.followCurrentSong, status]);
}, [currentSong, previousSongRef, tableConfig.followCurrentSong, status]);
// As a separate rule, update the current row when focus changes. This is
// to prevent queue scrolling when the application loses and then gains focus.
@@ -266,7 +271,7 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
columnDefs={columnDefs}
context={{
currentSong,
handleDoubleClick,
// handleDoubleClick,
isFocused,
isQueue: true,
itemType: LibraryItem.SONG,
@@ -276,7 +281,7 @@ export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<
deselectOnClickOutside={type === 'fullScreen'}
getRowId={(data) => data.data.uniqueId}
onCellContextMenu={onCellContextMenu}
onCellDoubleClicked={handleDoubleClick}
// onCellDoubleClicked={handleDoubleClick}
onColumnMoved={handleColumnChange}
onColumnResized={debouncedColumnChange}
onDragStarted={handleDragStart}
src/renderer/features/player/components/center-controls.tsx
+67 -71
View File
@@ -1,4 +1,3 @@
import { useHotkeys } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query';
import formatDuration from 'format-duration';
import isElectron from 'is-electron';
@@ -10,27 +9,24 @@ import styles from './center-controls.module.css';
import { PlayButton, PlayerButton } from '/@/renderer/features/player/components/player-button';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
import { useMediaSession } from '/@/renderer/features/player/hooks/use-media-session';
import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
import {
useAppStore,
useAppStoreActions,
useCurrentPlayer,
useCurrentSong,
useCurrentStatus,
useCurrentTime,
useHotkeySettings,
usePlaybackType,
useRepeatStatus,
useSetCurrentTime,
usePlayerNum,
usePlayerRepeat,
usePlayerShuffle,
usePlayerSong,
usePlayerStatus,
usePlayerTimestamp,
useSettingsStore,
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';
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
import { PlayerRepeat, PlayerShuffle, PlayerStatus, PlayerType } from '/@/shared/types/types';
interface CenterControlsProps {
playersRef: any;
@@ -40,38 +36,38 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const [isSeeking, setIsSeeking] = useState(false);
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const skip = useSettingsStore((state) => state.general.skipButtons);
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const playbackType = usePlaybackType();
const player1 = playersRef?.current?.player1;
const player2 = playersRef?.current?.player2;
const status = useCurrentStatus();
const player = useCurrentPlayer();
const setCurrentTime = useSetCurrentTime();
const repeat = useRepeatStatus();
const shuffle = useShuffleStatus();
const status = usePlayerStatus();
const player = usePlayerNum();
// const setCurrentTime = useSetCurrentTime();
const repeat = usePlayerRepeat();
const shuffle = usePlayerShuffle();
const { bindings } = useHotkeySettings();
const { showTimeRemaining } = useAppStore();
const { setShowTimeRemaining } = useAppStoreActions();
const {
handleNextTrack,
handlePause,
handlePlay,
handlePlayPause,
handlePrevTrack,
handleSeekSlider,
handleSkipBackward,
handleSkipForward,
handleStop,
handleToggleRepeat,
handleToggleShuffle,
} = useCenterControls({ playersRef });
// const {
// handleNextTrack,
// handlePause,
// handlePlay,
// handlePlayPause,
// handlePrevTrack,
// handleSeekSlider,
// handleSkipBackward,
// handleSkipForward,
// handleStop,
// handleToggleRepeat,
// handleToggleShuffle,
// } = useCenterControls({ playersRef });
const handlePlayQueueAdd = usePlayQueueAdd();
const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0;
const currentTime = useCurrentTime();
const currentTime = usePlayerTimestamp();
const currentPlayerRef = player === 1 ? player1 : player2;
const formattedDuration = formatDuration(songDuration * 1000 || 0);
const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
@@ -81,50 +77,50 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
let interval: ReturnType<typeof setInterval>;
if (status === PlayerStatus.PLAYING && !isSeeking) {
if (!isElectron() || playbackType === PlaybackType.WEB) {
if (!isElectron() || playbackType === PlayerType.WEB) {
// Update twice a second for slightly better performance
interval = setInterval(() => {
if (currentPlayerRef) {
setCurrentTime(currentPlayerRef.getCurrentTime());
// setCurrentTime(currentPlayerRef.getCurrentTime());
}
}, 500);
}
}
return () => clearInterval(interval);
}, [currentPlayerRef, isSeeking, setCurrentTime, playbackType, status]);
}, [currentPlayerRef, isSeeking, playbackType, status]);
const [seekValue, setSeekValue] = useState(0);
useHotkeys([
[bindings.playPause.isGlobal ? '' : bindings.playPause.hotkey, handlePlayPause],
[bindings.play.isGlobal ? '' : bindings.play.hotkey, handlePlay],
[bindings.pause.isGlobal ? '' : bindings.pause.hotkey, handlePause],
[bindings.stop.isGlobal ? '' : bindings.stop.hotkey, handleStop],
[bindings.next.isGlobal ? '' : bindings.next.hotkey, handleNextTrack],
[bindings.previous.isGlobal ? '' : bindings.previous.hotkey, handlePrevTrack],
[bindings.toggleRepeat.isGlobal ? '' : bindings.toggleRepeat.hotkey, handleToggleRepeat],
[bindings.toggleShuffle.isGlobal ? '' : bindings.toggleShuffle.hotkey, handleToggleShuffle],
[
bindings.skipBackward.isGlobal ? '' : bindings.skipBackward.hotkey,
() => handleSkipBackward(skip?.skipBackwardSeconds || 5),
],
[
bindings.skipForward.isGlobal ? '' : bindings.skipForward.hotkey,
() => handleSkipForward(skip?.skipForwardSeconds || 5),
],
]);
// useHotkeys([
// [bindings.playPause.isGlobal ? '' : bindings.playPause.hotkey, handlePlayPause],
// [bindings.play.isGlobal ? '' : bindings.play.hotkey, handlePlay],
// [bindings.pause.isGlobal ? '' : bindings.pause.hotkey, handlePause],
// [bindings.stop.isGlobal ? '' : bindings.stop.hotkey, handleStop],
// [bindings.next.isGlobal ? '' : bindings.next.hotkey, handleNextTrack],
// [bindings.previous.isGlobal ? '' : bindings.previous.hotkey, handlePrevTrack],
// [bindings.toggleRepeat.isGlobal ? '' : bindings.toggleRepeat.hotkey, handleToggleRepeat],
// [bindings.toggleShuffle.isGlobal ? '' : bindings.toggleShuffle.hotkey, handleToggleShuffle],
// [
// bindings.skipBackward.isGlobal ? '' : bindings.skipBackward.hotkey,
// () => handleSkipBackward(skip?.skipBackwardSeconds || 5),
// ],
// [
// bindings.skipForward.isGlobal ? '' : bindings.skipForward.hotkey,
// () => handleSkipForward(skip?.skipForwardSeconds || 5),
// ],
// ]);
useMediaSession({
handleNextTrack,
handlePause,
handlePlay,
handlePrevTrack,
handleSeekSlider,
handleSkipBackward,
handleSkipForward,
handleStop,
});
// useMediaSession({
// handleNextTrack,
// handlePause,
// handlePlay,
// handlePrevTrack,
// handleSeekSlider,
// handleSkipBackward,
// handleSkipForward,
// handleStop,
// });
return (
<>
@@ -132,7 +128,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<div className={styles.buttonsContainer}>
<PlayerButton
icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
onClick={handleStop}
// onClick={handleStop}
tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 0,
@@ -148,7 +144,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
/>
}
isActive={shuffle !== PlayerShuffle.NONE}
onClick={handleToggleShuffle}
// onClick={handleToggleShuffle}
tooltip={{
label:
shuffle === PlayerShuffle.NONE
@@ -163,7 +159,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
/>
<PlayerButton
icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
onClick={handlePrevTrack}
// onClick={handlePrevTrack}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 0,
@@ -175,7 +171,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
icon={
<Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
}
onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
// onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
tooltip={{
label: t('player.skip', {
context: 'back',
@@ -190,12 +186,12 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<PlayButton
disabled={currentSong?.id === undefined}
isPaused={status === PlayerStatus.PAUSED}
onClick={handlePlayPause}
// onClick={handlePlayPause}
/>
{skip?.enabled && (
<PlayerButton
icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
// onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
tooltip={{
label: t('player.skip', {
context: 'forward',
@@ -209,7 +205,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
)}
<PlayerButton
icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
onClick={handleNextTrack}
// onClick={handleNextTrack}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 0,
@@ -229,7 +225,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
)
}
isActive={repeat !== PlayerRepeat.NONE}
onClick={handleToggleRepeat}
// onClick={handleToggleRepeat}
tooltip={{
label: `${
repeat === PlayerRepeat.NONE
@@ -294,7 +290,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
// event fires before onChange. Add a small delay to force
// onChangeEnd to happen after onCHange
setTimeout(() => {
handleSeekSlider(e);
// handleSeekSlider(e);
setIsSeeking(false);
}, 50);
}}
src/renderer/features/player/components/full-screen-player-queue.tsx
+3 -3
View File
@@ -15,7 +15,7 @@ import {
} from '/@/renderer/store/full-screen-player.store';
import { Button } from '/@/shared/components/button/button';
import { Group } from '/@/shared/components/group/group';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
const Visualizer = lazy(() =>
import('/@/renderer/features/player/components/visualizer').then((module) => ({
@@ -48,7 +48,7 @@ export const FullScreenPlayerQueue = () => {
},
];
if (type === PlaybackType.WEB && webAudio) {
if (type === PlayerType.WEB && webAudio) {
items.push({
active: activeTab === 'visualizer',
label: t('page.fullscreenPlayer.visualizer', { postProcess: 'titleCase' }),
@@ -107,7 +107,7 @@ export const FullScreenPlayerQueue = () => {
</div>
) : activeTab === 'lyrics' ? (
<Lyrics />
) : activeTab === 'visualizer' && type === PlaybackType.WEB && webAudio ? (
) : activeTab === 'visualizer' && type === PlayerType.WEB && webAudio ? (
<Suspense fallback={<></>}>
<Visualizer />
</Suspense>
src/renderer/features/player/components/full-screen-player.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ import { FullScreenPlayerImage } from '/@/renderer/features/player/components/fu
import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
import { useFastAverageColor } from '/@/renderer/hooks';
import {
useCurrentSong,
usePlayerSong,
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
useLyricsSettings,
@@ -421,7 +421,7 @@ export const FullScreenPlayer = () => {
isOpenedRef.current = true;
}, [location, setStore]);
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const { background } = useFastAverageColor({
algorithm: 'dominant',
src: currentSong?.imageUrl,
src/renderer/features/player/components/full-screen-similar-songs.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { SimilarSongsList } from '/@/renderer/features/similar-songs/components/similar-songs-list';
import { useCurrentSong } from '/@/renderer/store';
import { usePlayerSong } from '/@/renderer/store';
export const FullScreenSimilarSongs = () => {
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
return currentSong?.id ? <SimilarSongsList fullScreen song={currentSong} /> : null;
};
src/renderer/features/player/components/left-controls.tsx
+2 -2
View File
@@ -12,7 +12,7 @@ import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/h
import { AppRoute } from '/@/renderer/router/routes';
import {
useAppStoreActions,
useCurrentSong,
usePlayerSong,
useFullScreenPlayerStore,
useHotkeySettings,
useSetFullScreenPlayerStore,
@@ -34,7 +34,7 @@ export const LeftControls = () => {
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const { collapsed, image } = useSidebarStore();
const hideImage = image && !collapsed;
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const title = currentSong?.name;
const artists = currentSong?.artists;
const { bindings } = useHotkeySettings();
src/renderer/features/player/components/playerbar.tsx
+25 -23
View File
@@ -1,5 +1,5 @@
import clsx from 'clsx';
import { MouseEvent, useCallback } from 'react';
import { MouseEvent } from 'react';
import styles from './playerbar.module.css';
@@ -9,17 +9,17 @@ import { LeftControls } from '/@/renderer/features/player/components/left-contro
import { RightControls } from '/@/renderer/features/player/components/right-controls';
import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import {
useCurrentPlayer,
useCurrentStatus,
useFullScreenPlayerStore,
useMuted,
usePlayer1Data,
usePlayer2Data,
usePlayerControls,
usePlayerData,
// usePlayer1Data,
// usePlayer2Data,
// usePlayerControls,
usePlayerMuted,
usePlayerNum,
usePlayerStatus,
usePlayerVolume,
useSetFullScreenPlayerStore,
useVolume,
} from '/@/renderer/store';
import {
useGeneralSettings,
@@ -27,20 +27,20 @@ import {
useSettingsStore,
} from '/@/renderer/store/settings.store';
import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
export const Playerbar = () => {
const playersRef = PlayersRef;
const settings = useSettingsStore((state) => state.playback);
const { playerbarOpenDrawer } = useGeneralSettings();
const playbackType = usePlaybackType();
const volume = useVolume();
const player1 = usePlayer1Data();
const player2 = usePlayer2Data();
const status = useCurrentStatus();
const player = useCurrentPlayer();
const muted = useMuted();
const { autoNext } = usePlayerControls();
const volume = usePlayerVolume();
// const player1 = usePlayer1Data();
// const player2 = usePlayer2Data();
const status = usePlayerStatus();
const player = usePlayerNum();
const muted = usePlayerMuted();
// const { autoNext } = usePlayerControls();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
@@ -51,10 +51,12 @@ export const Playerbar = () => {
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
const autoNextFn = useCallback(() => {
const playerData = autoNext();
updateSong(playerData.current.song);
}, [autoNext]);
const { player1, player2 } = usePlayerData();
// const autoNextFn = useCallback(() => {
// const playerData = autoNext();
// updateSong(playerData.current.song);
// }, [autoNext]);
return (
<div
@@ -72,9 +74,9 @@ export const Playerbar = () => {
<RightControls />
</div>
</div>
{playbackType === PlaybackType.WEB && (
{playbackType === PlayerType.WEB && (
<AudioPlayer
autoNext={autoNextFn}
// autoNext={autoNextFn}
crossfadeDuration={settings.crossfadeDuration}
crossfadeStyle={settings.crossfadeStyle}
currentPlayer={player}
src/renderer/features/player/components/right-controls.tsx
+21 -22
View File
@@ -11,17 +11,16 @@ import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-m
import {
useAppStoreActions,
useCurrentServer,
useCurrentSong,
useHotkeySettings,
useMuted,
usePlaybackSettings,
usePlaybackType,
usePreviousSong,
usePlayerMuted,
usePlayerSong,
usePlayerSpeed,
usePlayerVolume,
useSettingsStore,
useSettingsStoreActions,
useSidebarStore,
useSpeed,
useVolume,
} from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
@@ -40,11 +39,11 @@ const remote = isElectron() ? window.api.remote : null;
export const RightControls = () => {
const { t } = useTranslation();
const isMinWidth = useMediaQuery('(max-width: 480px)');
const volume = useVolume();
const muted = useMuted();
const volume = usePlayerVolume();
const muted = usePlayerMuted();
const server = useCurrentServer();
const currentSong = useCurrentSong();
const previousSong = usePreviousSong();
const currentSong = usePlayerSong();
// const previousSong = usePreviousSong();
const { setSideBar } = useAppStoreActions();
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { bindings } = useHotkeySettings();
@@ -60,7 +59,7 @@ export const RightControls = () => {
const playbackSettings = usePlaybackSettings();
const playbackType = usePlaybackType();
const speed = useSpeed();
const speed = usePlayerSpeed();
const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
const speedPreservePitch = useSettingsStore((state) => state.playback.preservePitch);
@@ -148,18 +147,18 @@ export const RightControls = () => {
bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
() => handleToggleFavorite(currentSong),
],
[
bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
() => handleAddToFavorites(previousSong),
],
[
bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
() => handleRemoveFromFavorites(previousSong),
],
[
bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
() => handleToggleFavorite(previousSong),
],
// [
// bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
// () => handleAddToFavorites(previousSong),
// ],
// [
// bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
// () => handleRemoveFromFavorites(previousSong),
// ],
// [
// bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
// () => handleToggleFavorite(previousSong),
// ],
[bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
[bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
[bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
src/renderer/features/player/hooks/use-center-controls.ts
+771 -771
View File
File diff suppressed because it is too large Load Diff
src/renderer/features/player/hooks/use-handle-playqueue-add.ts
+200 -200
View File
@@ -1,226 +1,226 @@
import { useQueryClient } from '@tanstack/react-query';
import isElectron from 'is-electron';
import { nanoid } from 'nanoid/non-secure';
import { useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
// import { useQueryClient } from '@tanstack/react-query';
// import isElectron from 'is-electron';
// import { nanoid } from 'nanoid/non-secure';
// import { useCallback, useRef } from 'react';
// import { useTranslation } from 'react-i18next';
import { queryKeys } from '/@/renderer/api/query-keys';
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import {
getAlbumArtistSongsById,
getAlbumSongsById,
getArtistSongsById,
getGenreSongsById,
getPlaylistSongsById,
getSongById,
getSongsByQuery,
} from '/@/renderer/features/player/utils';
import { useCurrentServer, usePlayerControls, usePlayerStore } from '/@/renderer/store';
import { useGeneralSettings, usePlaybackType } from '/@/renderer/store/settings.store';
import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
import { toast } from '/@/shared/components/toast/toast';
import {
instanceOfCancellationError,
LibraryItem,
QueueSong,
Song,
SongListResponse,
} from '/@/shared/types/domain-types';
import { Play, PlaybackType, PlayQueueAddOptions } from '/@/shared/types/types';
// import { queryKeys } from '/@/renderer/api/query-keys';
// import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
// import { updateSong } from '/@/renderer/features/player/update-remote-song';
// import {
// getAlbumArtistSongsById,
// getAlbumSongsById,
// getArtistSongsById,
// getGenreSongsById,
// getPlaylistSongsById,
// getSongById,
// getSongsByQuery,
// } from '/@/renderer/features/player/utils';
// import { useCurrentServer, usePlayerStore } from '/@/renderer/store';
// import { useGeneralSettings, usePlaybackType } from '/@/renderer/store/settings.store';
// import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
// import { toast } from '/@/shared/components/toast/toast';
// import {
// instanceOfCancellationError,
// LibraryItem,
// QueueSong,
// Song,
// SongListResponse,
// } from '/@/shared/types/domain-types';
// import { Play, PlaybackType, PlayQueueAddOptions } from '/@/shared/types/types';
const getRootQueryKey = (itemType: LibraryItem, serverId: string) => {
let queryKey;
// const getRootQueryKey = (itemType: LibraryItem, serverId: string) => {
// let queryKey;
switch (itemType) {
case LibraryItem.ALBUM:
queryKey = queryKeys.songs.list(serverId);
break;
case LibraryItem.ALBUM_ARTIST:
queryKey = queryKeys.songs.list(serverId);
break;
case LibraryItem.GENRE:
queryKey = queryKeys.songs.list(serverId);
break;
case LibraryItem.PLAYLIST:
queryKey = queryKeys.playlists.songList(serverId);
break;
case LibraryItem.SONG:
queryKey = queryKeys.songs.list(serverId);
break;
default:
queryKey = queryKeys.songs.list(serverId);
break;
}
// switch (itemType) {
// case LibraryItem.ALBUM:
// queryKey = queryKeys.songs.list(serverId);
// break;
// case LibraryItem.ALBUM_ARTIST:
// queryKey = queryKeys.songs.list(serverId);
// break;
// case LibraryItem.GENRE:
// queryKey = queryKeys.songs.list(serverId);
// break;
// case LibraryItem.PLAYLIST:
// queryKey = queryKeys.playlists.songList(serverId);
// break;
// case LibraryItem.SONG:
// queryKey = queryKeys.songs.list(serverId);
// break;
// default:
// queryKey = queryKeys.songs.list(serverId);
// break;
// }
return queryKey;
};
// return queryKey;
// };
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
// const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
const addToQueue = usePlayerStore.getState().actions.addToQueue;
// const addToQueue = usePlayerStore.getState().actions.addToQueue;
export const useHandlePlayQueueAdd = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const playbackType = usePlaybackType();
const server = useCurrentServer();
const { play } = usePlayerControls();
const timeoutIds = useRef<null | Record<string, ReturnType<typeof setTimeout>>>({});
// export const useHandlePlayQueueAdd = () => {
// const { t } = useTranslation();
// const queryClient = useQueryClient();
// const playbackType = usePlaybackType();
// const server = useCurrentServer();
// const { play } = usePlayerControls();
// const timeoutIds = useRef<null | Record<string, ReturnType<typeof setTimeout>>>({});
const { doubleClickQueueAll } = useGeneralSettings();
// const { doubleClickQueueAll } = useGeneralSettings();
const handlePlayQueueAdd = useCallback(
async (options: PlayQueueAddOptions) => {
if (!server) return toast.error({ message: 'No server selected', type: 'error' });
const { byData, byItemType, initialIndex, initialSongId, playType, query } = options;
let songs: null | QueueSong[] = null;
// Allow this to be undefined for "play shuffled". If undefined, default to 0,
// otherwise, choose the selected item in the queue
let initialSongIndex: number | undefined;
let toastId: null | string = null;
// const handlePlayQueueAdd = useCallback(
// async (options: PlayQueueAddOptions) => {
// if (!server) return toast.error({ message: 'No server selected', type: 'error' });
// const { byData, byItemType, initialIndex, initialSongId, playType, query } = options;
// let songs: null | QueueSong[] = null;
// // Allow this to be undefined for "play shuffled". If undefined, default to 0,
// // otherwise, choose the selected item in the queue
// let initialSongIndex: number | undefined;
// let toastId: null | string = null;
if (byItemType) {
let songList: SongListResponse | undefined;
const { id, type: itemType } = byItemType;
// if (byItemType) {
// let songList: SongListResponse | undefined;
// const { id, type: itemType } = byItemType;
const fetchId = nanoid();
timeoutIds.current = {
...timeoutIds.current,
[fetchId]: setTimeout(() => {
toastId = toast.info({
autoClose: false,
message: t('player.playbackFetchCancel', {
postProcess: 'sentenceCase',
}),
onClose: () => {
queryClient.cancelQueries({
exact: false,
queryKey: getRootQueryKey(itemType, server?.id),
});
},
title: t('player.playbackFetchInProgress', {
postProcess: 'sentenceCase',
}),
});
}, 2000),
};
// const fetchId = nanoid();
// timeoutIds.current = {
// ...timeoutIds.current,
// [fetchId]: setTimeout(() => {
// toastId = toast.info({
// autoClose: false,
// message: t('player.playbackFetchCancel', {
// postProcess: 'sentenceCase',
// }),
// onClose: () => {
// queryClient.cancelQueries({
// exact: false,
// queryKey: getRootQueryKey(itemType, server?.id),
// });
// },
// title: t('player.playbackFetchInProgress', {
// postProcess: 'sentenceCase',
// }),
// });
// }, 2000),
// };
try {
if (itemType === LibraryItem.PLAYLIST) {
songList = await getPlaylistSongsById({
id: id?.[0],
query,
queryClient,
server,
});
} else if (itemType === LibraryItem.ALBUM) {
songList = await getAlbumSongsById({ id, query, queryClient, server });
} else if (itemType === LibraryItem.ALBUM_ARTIST) {
songList = await getAlbumArtistSongsById({
id,
query,
queryClient,
server,
});
} else if (itemType === LibraryItem.ARTIST) {
songList = await getArtistSongsById({
id,
query,
queryClient,
server,
});
} else if (itemType === LibraryItem.GENRE) {
songList = await getGenreSongsById({ id, query, queryClient, server });
} else if (itemType === LibraryItem.SONG) {
if (id?.length === 1) {
songList = await getSongById({ id: id?.[0], queryClient, server });
} else if (!doubleClickQueueAll && initialSongId) {
songList = await getSongById({
id: initialSongId,
queryClient,
server,
});
} else {
songList = await getSongsByQuery({ query, queryClient, server });
}
}
// try {
// if (itemType === LibraryItem.PLAYLIST) {
// songList = await getPlaylistSongsById({
// id: id?.[0],
// query,
// queryClient,
// server,
// });
// } else if (itemType === LibraryItem.ALBUM) {
// songList = await getAlbumSongsById({ id, query, queryClient, server });
// } else if (itemType === LibraryItem.ALBUM_ARTIST) {
// songList = await getAlbumArtistSongsById({
// id,
// query,
// queryClient,
// server,
// });
// } else if (itemType === LibraryItem.ARTIST) {
// songList = await getArtistSongsById({
// id,
// query,
// queryClient,
// server,
// });
// } else if (itemType === LibraryItem.GENRE) {
// songList = await getGenreSongsById({ id, query, queryClient, server });
// } else if (itemType === LibraryItem.SONG) {
// if (id?.length === 1) {
// songList = await getSongById({ id: id?.[0], queryClient, server });
// } else if (!doubleClickQueueAll && initialSongId) {
// songList = await getSongById({
// id: initialSongId,
// queryClient,
// server,
// });
// } else {
// songList = await getSongsByQuery({ query, queryClient, server });
// }
// }
clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>);
delete timeoutIds.current[fetchId];
if (toastId) {
toast.hide(toastId);
}
} catch (err: any) {
if (instanceOfCancellationError(err)) {
return null;
}
// clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>);
// delete timeoutIds.current[fetchId];
// if (toastId) {
// toast.hide(toastId);
// }
// } catch (err: any) {
// if (instanceOfCancellationError(err)) {
// return null;
// }
clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>);
delete timeoutIds.current[fetchId];
toast.hide(fetchId);
// clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>);
// delete timeoutIds.current[fetchId];
// toast.hide(fetchId);
return toast.error({
message: err.message,
title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
});
}
// return toast.error({
// message: err.message,
// title: t('error.genericError', { postProcess: 'sentenceCase' }) as string,
// });
// }
songs =
songList?.items?.map((song: Song) => ({ ...song, uniqueId: nanoid() })) || null;
} else if (byData) {
songs = byData.map((song) => ({ ...song, uniqueId: nanoid() })) || null;
}
// songs =
// songList?.items?.map((song: Song) => ({ ...song, uniqueId: nanoid() })) || null;
// } else if (byData) {
// songs = byData.map((song) => ({ ...song, uniqueId: nanoid() })) || null;
// }
if (!songs || songs?.length === 0)
return toast.warn({
message: t('common.noResultsFromQuery', { postProcess: 'sentenceCase' }),
title: t('player.playbackFetchNoResults', { postProcess: 'sentenceCase' }),
});
// if (!songs || songs?.length === 0)
// return toast.warn({
// message: t('common.noResultsFromQuery', { postProcess: 'sentenceCase' }),
// title: t('player.playbackFetchNoResults', { postProcess: 'sentenceCase' }),
// });
if (initialIndex) {
initialSongIndex = initialIndex;
} else if (initialSongId) {
initialSongIndex = songs.findIndex((song) => song.id === initialSongId);
}
// if (initialIndex) {
// initialSongIndex = initialIndex;
// } else if (initialSongId) {
// initialSongIndex = songs.findIndex((song) => song.id === initialSongId);
// }
const hadSong = usePlayerStore.getState().queue.default.length > 0;
const playerData = addToQueue({ initialIndex: initialSongIndex, playType, songs });
// const hadSong = usePlayerStore.getState().queue.default.length > 0;
// const playerData = addToQueue({ initialIndex: initialSongIndex, playType, songs });
updateSong(playerData.current.song);
// updateSong(playerData.current.song);
const replacesQueue = playType === Play.NOW || playType === Play.SHUFFLE;
// const replacesQueue = playType === Play.NOW || playType === Play.SHUFFLE;
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.volume(usePlayerStore.getState().volume);
// if (playbackType === PlaybackType.LOCAL) {
// mpvPlayer!.volume(usePlayerStore.getState().volume);
if (replacesQueue || !hadSong) {
mpvPlayer!.pause();
setQueue(playerData, false);
} else {
setQueueNext(playerData);
}
} else {
const player =
playerData.current.player === 1
? PlayersRef.current?.player1
: PlayersRef.current?.player2;
const underlying = player?.getInternalPlayer();
if (underlying && replacesQueue) {
underlying.currentTime = 0;
}
}
// if (replacesQueue || !hadSong) {
// mpvPlayer!.pause();
// setQueue(playerData, false);
// } else {
// setQueueNext(playerData);
// }
// } else {
// const player =
// playerData.current.player === 1
// ? PlayersRef.current?.player1
// : PlayersRef.current?.player2;
// const underlying = player?.getInternalPlayer();
// if (underlying && replacesQueue) {
// underlying.currentTime = 0;
// }
// }
// We should only play if the queue was empty, or we are doing play NOW
// (override the queue).
if (replacesQueue || !hadSong) {
play();
}
// // We should only play if the queue was empty, or we are doing play NOW
// // (override the queue).
// if (replacesQueue || !hadSong) {
// play();
// }
return null;
},
[doubleClickQueueAll, play, playbackType, queryClient, server, t],
);
// return null;
// },
// [doubleClickQueueAll, play, playbackType, queryClient, server, t],
// );
return handlePlayQueueAdd;
};
// return handlePlayQueueAdd;
// };
src/renderer/features/player/hooks/use-media-session.ts
+4 -4
View File
@@ -1,8 +1,8 @@
import { useEffect } from 'react';
import {
useCurrentSong,
useCurrentStatus,
usePlayerSong,
usePlayerStatus,
usePlaybackSettings,
useSettingsStore,
} from '/@/renderer/store';
@@ -28,8 +28,8 @@ export const useMediaSession = ({
handleStop: () => void;
}) => {
const { mediaSession: mediaSessionEnabled } = usePlaybackSettings();
const playerStatus = useCurrentStatus();
const currentSong = useCurrentSong();
const playerStatus = usePlayerStatus();
const currentSong = usePlayerSong();
const mediaSession = navigator.mediaSession;
const skip = useSettingsStore((state) => state.general.skipButtons);
src/renderer/features/player/hooks/use-power-save-blocker.ts
+2 -2
View File
@@ -1,14 +1,14 @@
import isElectron from 'is-electron';
import { useCallback, useEffect } from 'react';
import { useCurrentStatus } from '/@/renderer/store';
import { usePlayerStatus } from '/@/renderer/store';
import { useWindowSettings } from '/@/renderer/store';
import { PlayerStatus } from '/@/shared/types/types';
const ipc = isElectron() ? window.api.ipc : null;
export const usePowerSaveBlocker = () => {
const status = useCurrentStatus();
const status = usePlayerStatus();
const { preventSleepOnPlayback } = useWindowSettings();
const startPowerSaveBlocker = useCallback(async () => {
src/renderer/features/player/hooks/use-right-controls.ts
+22 -31
View File
@@ -1,13 +1,7 @@
import isElectron from 'is-electron';
import { useCallback, useEffect, WheelEvent } from 'react';
import {
useMuted,
usePlayerControls,
useSetCurrentSpeed,
useSpeed,
useVolume,
} from '/@/renderer/store';
import { usePlayerMuted, usePlayerSpeed, usePlayerVolume } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
@@ -40,12 +34,12 @@ const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
};
export const useRightControls = () => {
const { setMuted, setVolume } = usePlayerControls();
const volume = useVolume();
const muted = useMuted();
// const { setMuted, setVolume } = usePlayerControls();
const volume = usePlayerVolume();
const muted = usePlayerMuted();
const { volumeWheelStep } = useGeneralSettings();
const speed = useSpeed();
const setCurrentSpeed = useSetCurrentSpeed();
const speed = usePlayerSpeed();
// const setCurrentSpeed = useSetCurrentSpeed();
// Ensure that the mpv player volume is set on startup
useEffect(() => {
@@ -63,40 +57,37 @@ export const useRightControls = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleSpeed = useCallback(
(e: number) => {
setCurrentSpeed(e);
if (mpvPlayer) {
mpvPlayer?.setProperties({ speed: e });
}
},
[setCurrentSpeed],
);
const handleSpeed = useCallback((e: number) => {
// setCurrentSpeed(e);
if (mpvPlayer) {
mpvPlayer?.setProperties({ speed: e });
}
}, []);
const handleVolumeSlider = (e: number) => {
mpvPlayer?.volume(e);
remote?.updateVolume(e);
setVolume(e);
// setVolume(e);
};
const handleVolumeSliderState = (e: number) => {
remote?.updateVolume(e);
setVolume(e);
// setVolume(e);
};
const handleVolumeDown = useCallback(() => {
const volumeToSet = calculateVolumeDown(volume, volumeWheelStep);
mpvPlayer?.volume(volumeToSet);
remote?.updateVolume(volumeToSet);
setVolume(volumeToSet);
}, [setVolume, volume, volumeWheelStep]);
// setVolume(volumeToSet);
}, [volume, volumeWheelStep]);
const handleVolumeUp = useCallback(() => {
const volumeToSet = calculateVolumeUp(volume, volumeWheelStep);
mpvPlayer?.volume(volumeToSet);
remote?.updateVolume(volumeToSet);
setVolume(volumeToSet);
}, [setVolume, volume, volumeWheelStep]);
// setVolume(volumeToSet);
}, [volume, volumeWheelStep]);
const handleVolumeWheel = useCallback(
(e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
@@ -109,15 +100,15 @@ export const useRightControls = () => {
mpvPlayer?.volume(volumeToSet);
remote?.updateVolume(volumeToSet);
setVolume(volumeToSet);
// setVolume(volumeToSet);
},
[setVolume, volume, volumeWheelStep],
[volume, volumeWheelStep],
);
const handleMute = useCallback(() => {
setMuted(!muted);
// setMuted(!muted);
mpvPlayer?.mute(!muted);
}, [muted, setMuted]);
}, [muted]);
useEffect(() => {
if (isElectron()) {
src/renderer/features/player/mutations/scrobble-mutation.ts
+2 -3
View File
@@ -3,12 +3,11 @@ import { AxiosError } from 'axios';
import { api } from '/@/renderer/api';
import { MutationOptions } from '/@/renderer/lib/react-query';
import { useIncrementQueuePlayCount } from '/@/renderer/store';
import { usePlayEvent } from '/@/renderer/store/event.store';
import { ScrobbleArgs, ScrobbleResponse } from '/@/shared/types/domain-types';
export const useSendScrobble = (options?: MutationOptions) => {
const incrementPlayCount = useIncrementQueuePlayCount();
// const incrementPlayCount = useIncrementQueuePlayCount();
const sendPlayEvent = usePlayEvent();
return useMutation<ScrobbleResponse, AxiosError, ScrobbleArgs, null>({
@@ -21,7 +20,7 @@ export const useSendScrobble = (options?: MutationOptions) => {
onSuccess: (_data, variables) => {
// Manually increment the play count for the song in the queue if scrobble was submitted
if (variables.query.submission) {
incrementPlayCount([variables.query.id]);
// incrementPlayCount([variables.query.id]);
sendPlayEvent(variables.query.id);
}
},
src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx
+4 -4
View File
@@ -29,8 +29,8 @@ import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-a
import { useAppFocus } from '/@/renderer/hooks';
import {
useCurrentServer,
useCurrentSong,
useCurrentStatus,
usePlayerSong,
usePlayerStatus,
usePlaylistDetailStore,
usePlaylistDetailTablePagination,
useSetPlaylistDetailTable,
@@ -58,9 +58,9 @@ interface PlaylistDetailContentProps {
export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetailContentProps) => {
const { playlistId } = useParams() as { playlistId: string };
const queryClient = useQueryClient();
const status = useCurrentStatus();
const status = usePlayerStatus();
const isFocused = useAppFocus();
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const server = useCurrentServer();
const page = usePlaylistDetailStore();
const filters: PlaylistSongListQueryClientSide = useMemo(() => {
src/renderer/features/settings/components/hotkeys/window-hotkey-settings.tsx
+2 -4
View File
@@ -7,7 +7,7 @@ import {
} from '/@/renderer/features/settings/components/settings-section';
import { useHotkeySettings, usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
import { Switch } from '/@/shared/components/switch/switch';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
const localSettings = isElectron() ? window.api.localSettings : null;
const isWindows = isElectron() ? window.api.utils.isWindows() : false;
@@ -25,9 +25,7 @@ export const WindowHotkeySettings = () => {
defaultChecked={settings.globalMediaHotkeys}
disabled={
!isElectron() ||
(enableWindowsMediaSession &&
isWindows &&
playbackType === PlaybackType.WEB)
(enableWindowsMediaSession && isWindows && playbackType === PlayerType.WEB)
}
onChange={(e) => {
setSettings({
src/renderer/features/settings/components/playback/audio-settings.tsx
+23 -23
View File
@@ -6,14 +6,14 @@ import {
SettingOption,
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
import { useCurrentStatus, usePlayerStore } from '/@/renderer/store';
import { usePlayerStatus, usePlayerStore } from '/@/renderer/store';
import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
import { setQueue } from '/@/renderer/utils/set-transcoded-queue-data';
import { Select } from '/@/shared/components/select/select';
import { Slider } from '/@/shared/components/slider/slider';
import { Switch } from '/@/shared/components/switch/switch';
import { toast } from '/@/shared/components/toast/toast';
import { CrossfadeStyle, PlaybackStyle, PlaybackType, PlayerStatus } from '/@/shared/types/types';
import { CrossfadeStyle, PlayerStyle, PlayerType, PlayerStatus } from '/@/shared/types/types';
const ipc = isElectron() ? window.api.ipc : null;
@@ -26,7 +26,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
const { t } = useTranslation();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const status = useCurrentStatus();
const status = usePlayerStatus();
const [audioDevices, setAudioDevices] = useState<{ label: string; value: string }[]>([]);
@@ -43,7 +43,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
);
};
if (settings.type === PlaybackType.WEB) {
if (settings.type === PlayerType.WEB) {
getAudioDevices();
}
}, [settings.type, t]);
@@ -56,16 +56,16 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
{
disabled: !isElectron(),
label: 'MPV',
value: PlaybackType.LOCAL,
value: PlayerType.LOCAL,
},
{ label: 'Web', value: PlaybackType.WEB },
{ label: 'Web', value: PlayerType.WEB },
]}
defaultValue={settings.type}
disabled={status === PlayerStatus.PLAYING}
onChange={(e) => {
setSettings({ playback: { ...settings, type: e as PlaybackType } });
setSettings({ playback: { ...settings, type: e as PlayerType } });
ipc?.send('settings-set', { property: 'playbackType', value: e });
if (isElectron() && e === PlaybackType.LOCAL) {
if (isElectron() && e === PlayerType.LOCAL) {
const queueData = usePlayerStore.getState().actions.getPlayerData();
setQueue(queueData);
}
@@ -89,7 +89,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
clearable
data={audioDevices}
defaultValue={settings.audioDeviceId}
disabled={settings.type !== PlaybackType.WEB}
disabled={settings.type !== PlayerType.WEB}
onChange={(e) => setSettings({ playback: { ...settings, audioDeviceId: e } })}
/>
),
@@ -97,7 +97,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: !isElectron() || settings.type !== PlaybackType.WEB,
isHidden: !isElectron() || settings.type !== PlayerType.WEB,
title: t('setting.audioDevice', { postProcess: 'sentenceCase' }),
},
{
@@ -109,20 +109,20 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'optionNormal',
postProcess: 'titleCase',
}),
value: PlaybackStyle.GAPLESS,
value: PlayerStyle.GAPLESS,
},
{
label: t('setting.playbackStyle', {
context: 'optionCrossFade',
postProcess: 'titleCase',
}),
value: PlaybackStyle.CROSSFADE,
value: PlayerStyle.CROSSFADE,
},
]}
defaultValue={settings.style}
disabled={settings.type !== PlaybackType.WEB || status === PlayerStatus.PLAYING}
disabled={settings.type !== PlayerType.WEB || status === PlayerStatus.PLAYING}
onChange={(e) =>
setSettings({ playback: { ...settings, style: e as PlaybackStyle } })
setSettings({ playback: { ...settings, style: e as PlayerStyle } })
}
/>
),
@@ -130,7 +130,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.WEB,
isHidden: settings.type !== PlayerType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: t('setting.playbackStyle', {
context: 'description',
@@ -152,7 +152,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.WEB,
isHidden: settings.type !== PlayerType.WEB,
note: t('common.restartRequired', { postProcess: 'sentenceCase' }),
title: t('setting.webAudio', {
postProcess: 'sentenceCase',
@@ -173,7 +173,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.WEB,
isHidden: settings.type !== PlayerType.WEB,
title: t('setting.preservePitch', {
postProcess: 'sentenceCase',
}),
@@ -183,8 +183,8 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
<Slider
defaultValue={settings.crossfadeDuration}
disabled={
settings.type !== PlaybackType.WEB ||
settings.style !== PlaybackStyle.CROSSFADE ||
settings.type !== PlayerType.WEB ||
settings.style !== PlayerStyle.CROSSFADE ||
status === PlayerStatus.PLAYING
}
max={15}
@@ -199,7 +199,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.WEB,
isHidden: settings.type !== PlayerType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: t('setting.crossfadeDuration', {
postProcess: 'sentenceCase',
@@ -224,8 +224,8 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
]}
defaultValue={settings.crossfadeStyle}
disabled={
settings.type !== PlaybackType.WEB ||
settings.style !== PlaybackStyle.CROSSFADE ||
settings.type !== PlayerType.WEB ||
settings.style !== PlayerStyle.CROSSFADE ||
status === PlayerStatus.PLAYING
}
onChange={(e) => {
@@ -241,7 +241,7 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.WEB,
isHidden: settings.type !== PlayerType.WEB,
note: status === PlayerStatus.PLAYING ? 'Player must be paused' : undefined,
title: t('setting.crossfadeStyle', { postProcess: 'sentenceCase' }),
},
src/renderer/features/settings/components/playback/media-session-settings.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import {
} from '/@/renderer/features/settings/components/settings-section';
import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
import { Switch } from '/@/shared/components/switch/switch';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
const isWindows = isElectron() ? window.api.utils.isWindows() : null;
const isDesktop = isElectron();
@@ -30,7 +30,7 @@ export const MediaSessionSettings = () => {
<Switch
aria-label="Toggle media Session"
defaultChecked={mediaSession}
disabled={!isWindows || !isDesktop || playbackType !== PlaybackType.WEB}
disabled={!isWindows || !isDesktop || playbackType !== PlayerType.WEB}
onChange={handleMediaSessionChange}
/>
),
src/renderer/features/settings/components/playback/mpv-settings.tsx
+22 -24
View File
@@ -6,11 +6,9 @@ import {
SettingOption,
SettingsSection,
} from '/@/renderer/features/settings/components/settings-section';
import { usePlayerControls, usePlayerStore, useQueueControls } from '/@/renderer/store';
import {
SettingsState,
usePlaybackSettings,
useSettingsStore,
useSettingsStoreActions,
} from '/@/renderer/store/settings.store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -22,7 +20,7 @@ import { Switch } from '/@/shared/components/switch/switch';
import { TextInput } from '/@/shared/components/text-input/text-input';
import { Text } from '/@/shared/components/text/text';
import { Textarea } from '/@/shared/components/textarea/textarea';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
const localSettings = isElectron() ? window.api.localSettings : null;
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
@@ -74,8 +72,8 @@ export const MpvSettings = () => {
const { t } = useTranslation();
const settings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
const { pause } = usePlayerControls();
const { clearQueue } = useQueueControls();
// const { pause } = usePlayerControls();
// const { clearQueue } = useQueueControls();
const [mpvPath, setMpvPath] = useState(
(localSettings?.get('mpv_path') as string | undefined) || '',
@@ -129,21 +127,21 @@ export const MpvSettings = () => {
mpvPlayer?.setProperties(mpvSetting);
};
const handleReloadMpv = () => {
pause();
clearQueue();
// const handleReloadMpv = () => {
// pause();
// clearQueue();
const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
const properties: Record<string, any> = {
speed: usePlayerStore.getState().speed,
...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
};
mpvPlayer?.restart({
binaryPath: mpvPath || undefined,
extraParameters,
properties,
});
};
// const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
// const properties: Record<string, any> = {
// speed: usePlayerStore.getState().speed,
// ...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
// };
// mpvPlayer?.restart({
// binaryPath: mpvPath || undefined,
// extraParameters,
// properties,
// });
// };
const handleSetExtraParameters = (data: string[]) => {
setSettings({
@@ -160,7 +158,7 @@ export const MpvSettings = () => {
<Group gap="sm">
<ActionIcon
icon="refresh"
onClick={handleReloadMpv}
// onClick={handleReloadMpv}
tooltip={{
label: t('common.reload', { postProcess: 'titleCase' }),
openDelay: 0,
@@ -194,7 +192,7 @@ export const MpvSettings = () => {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.LOCAL,
isHidden: settings.type !== PlayerType.LOCAL,
note: 'Restart required',
title: t('setting.mpvExecutablePath', { postProcess: 'sentenceCase' }),
},
@@ -235,7 +233,7 @@ export const MpvSettings = () => {
</Text>
</Stack>
),
isHidden: settings.type !== PlaybackType.LOCAL,
isHidden: settings.type !== PlayerType.LOCAL,
note: t('common.restartRequired', {
postProcess: 'sentenceCase',
}),
@@ -268,7 +266,7 @@ export const MpvSettings = () => {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.LOCAL,
isHidden: settings.type !== PlayerType.LOCAL,
title: t('setting.gaplessAudio', { postProcess: 'sentenceCase' }),
},
{
@@ -311,7 +309,7 @@ export const MpvSettings = () => {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: settings.type !== PlaybackType.LOCAL,
isHidden: settings.type !== PlayerType.LOCAL,
title: t('setting.audioExclusiveMode', { postProcess: 'sentenceCase' }),
},
];
src/renderer/features/settings/components/playback/playback-tab.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { ScrobbleSettings } from '/@/renderer/features/settings/components/playb
import { TranscodeSettings } from '/@/renderer/features/settings/components/playback/transcode-settings';
import { useSettingsStore } from '/@/renderer/store';
import { Stack } from '/@/shared/components/stack/stack';
import { PlaybackType } from '/@/shared/types/types';
import { PlayerType } from '/@/shared/types/types';
const MpvSettings = lazy(() =>
import('/@/renderer/features/settings/components/playback/mpv-settings').then((module) => {
@@ -22,7 +22,7 @@ export const PlaybackTab = () => {
const hasFancyAudio = useMemo(() => {
return (
(isElectron() && audioType === PlaybackType.LOCAL) ||
(isElectron() && audioType === PlayerType.LOCAL) ||
(useWebAudio && 'AudioContext' in window)
);
}, [audioType, useWebAudio]);
src/renderer/features/shared/mutations/create-favorite-mutation.ts
+3 -3
View File
@@ -5,7 +5,7 @@ import isElectron from 'is-electron';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
import { useSetAlbumListItemDataById } from '/@/renderer/store';
import { useFavoriteEvent } from '/@/renderer/store/event.store';
import {
AlbumArtistDetailResponse,
@@ -21,7 +21,7 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
const { options } = args || {};
const queryClient = useQueryClient();
const setAlbumListData = useSetAlbumListItemDataById();
const setQueueFavorite = useSetQueueFavorite();
// const setQueueFavorite = useSetQueueFavorite();
const setFavoriteEvent = useFavoriteEvent();
return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, null>({
@@ -46,7 +46,7 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
if (variables.query.type === LibraryItem.SONG) {
remote?.updateFavorite(true, serverId, variables.query.id);
setQueueFavorite(variables.query.id, true);
// setQueueFavorite(variables.query.id, true);
setFavoriteEvent(variables.query.id, true);
}
src/renderer/features/shared/mutations/delete-favorite-mutation.ts
+3 -3
View File
@@ -5,7 +5,7 @@ import isElectron from 'is-electron';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
import { useSetAlbumListItemDataById } from '/@/renderer/store';
import { useFavoriteEvent } from '/@/renderer/store/event.store';
import {
AlbumArtistDetailResponse,
@@ -21,7 +21,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
const { options } = args || {};
const queryClient = useQueryClient();
const setAlbumListData = useSetAlbumListItemDataById();
const setQueueFavorite = useSetQueueFavorite();
// const setQueueFavorite = useSetQueueFavorite();
const setFavoriteEvent = useFavoriteEvent();
return useMutation<FavoriteResponse, AxiosError, FavoriteArgs, null>({
@@ -44,7 +44,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
if (variables.query.type === LibraryItem.SONG) {
remote?.updateFavorite(false, serverId, variables.query.id);
setQueueFavorite(variables.query.id, false);
// setQueueFavorite(variables.query.id, false);
setFavoriteEvent(variables.query.id, false);
}
src/renderer/features/shared/mutations/set-rating-mutation.ts
+4 -4
View File
@@ -5,7 +5,7 @@ import isElectron from 'is-electron';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { MutationHookArgs } from '/@/renderer/lib/react-query';
import { useSetAlbumListItemDataById, useSetQueueRating } from '/@/renderer/store';
import { useSetAlbumListItemDataById } from '/@/renderer/store';
import { useRatingEvent } from '/@/renderer/store/event.store';
import {
Album,
@@ -24,7 +24,7 @@ export const useSetRating = (args: MutationHookArgs) => {
const { options } = args || {};
const queryClient = useQueryClient();
const setAlbumListData = useSetAlbumListItemDataById();
const setQueueRating = useSetQueueRating();
// const setQueueRating = useSetQueueRating();
const setRatingEvent = useRatingEvent();
return useMutation<
@@ -46,7 +46,7 @@ export const useSetRating = (args: MutationHookArgs) => {
setAlbumListData(item.id, { userRating: item.userRating });
break;
case LibraryItem.SONG:
setQueueRating([item.id], item.userRating);
// setQueueRating([item.id], item.userRating);
setRatingEvent([item.id], item.userRating);
break;
}
@@ -67,7 +67,7 @@ export const useSetRating = (args: MutationHookArgs) => {
}
if (songIds.length > 0) {
setQueueRating(songIds, variables.query.rating);
// setQueueRating(songIds, variables.query.rating);
setRatingEvent(songIds, variables.query.rating);
}
src/renderer/features/sidebar/components/sidebar.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ import {
} from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
import {
useAppStoreActions,
useCurrentSong,
usePlayerSong,
useFullScreenPlayerStore,
useSetFullScreenPlayerStore,
useSidebarStore,
@@ -42,7 +42,7 @@ export const Sidebar = () => {
const sidebar = useSidebarStore();
const { setSideBar } = useAppStoreActions();
const { sidebarPlaylistList } = useGeneralSettings();
const currentSong = useCurrentSong();
const currentSong = usePlayerSong();
const translatedSidebarItemMap = useMemo(
() => ({
src/renderer/features/similar-songs/components/similar-songs-list.tsx
+5 -8
View File
@@ -9,7 +9,6 @@ import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-tabl
import { ErrorFallback } from '/@/renderer/features/action-required/components/error-fallback';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { usePlayButtonBehavior, useTableSettings } from '/@/renderer/store';
import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -24,8 +23,6 @@ export type SimilarSongsListProps = {
export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListProps) => {
const tableRef = useRef<AgGridReact<Song> | null>(null);
const tableConfig = useTableSettings(fullScreen ? 'fullScreen' : 'songs');
const handlePlayQueueAdd = useHandlePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
const songQuery = useQuery(
songsQueries.similar({
@@ -51,11 +48,11 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
const handleRowDoubleClick = (e: RowDoubleClickedEvent<Song>) => {
if (!e.data || !songQuery.data) return;
handlePlayQueueAdd?.({
byData: songQuery.data,
initialSongId: e.data.id,
playType: playButtonBehavior,
});
// handlePlayQueueAdd?.({
// byData: songQuery.data,
// initialSongId: e.data.id,
// playType: playButtonBehavior,
// });
};
return songQuery.isLoading ? (
src/renderer/features/songs/components/song-list-table-view.tsx
+4 -4
View File
@@ -12,8 +12,8 @@ import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/conte
import { useAppFocus } from '/@/renderer/hooks';
import {
useCurrentServer,
useCurrentSong,
useCurrentStatus,
usePlayerSong,
usePlayerStatus,
usePlayButtonBehavior,
} from '/@/renderer/store';
import { LibraryItem, QueueSong, SongListQuery } from '/@/shared/types/domain-types';
@@ -27,8 +27,8 @@ export const SongListTableView = ({ itemCount, tableRef }: SongListTableViewProp
const server = useCurrentServer();
const { customFilters, handlePlay, id, pageKey } = useListContext();
const isFocused = useAppFocus();
const currentSong = useCurrentSong();
const status = useCurrentStatus();
const currentSong = usePlayerSong();
const status = usePlayerStatus();
const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
src/renderer/layouts/default-layout.tsx
+20 -27
View File
@@ -1,22 +1,16 @@
import { HotkeyItem, useHotkeys } from '@mantine/hooks';
import clsx from 'clsx';
import isElectron from 'is-electron';
import { lazy, useMemo } from 'react';
import { lazy } from 'react';
import { useNavigate } from 'react-router';
import styles from './default-layout.module.css';
import { ContextMenuProvider } from '/@/renderer/features/context-menu/context-menu-provider';
import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
import { AppRoute } from '/@/renderer/router/routes';
import {
useAppStore,
useCommandPalette,
useCurrentStatus,
useQueueStatus,
} from '/@/renderer/store';
import { useAppStore, useCommandPalette } from '/@/renderer/store';
import {
useGeneralSettings,
useHotkeySettings,
@@ -24,13 +18,13 @@ import {
useSettingsStoreActions,
useWindowSettings,
} from '/@/renderer/store/settings.store';
import { Platform, PlaybackType, PlayerStatus } from '/@/shared/types/types';
import { Platform, PlayerType } from '/@/shared/types/types';
if (!isElectron()) {
useSettingsStore.getState().actions.setSettings({
playback: {
...useSettingsStore.getState().playback,
type: PlaybackType.WEB,
type: PlayerType.WEB,
},
});
}
@@ -53,8 +47,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
const localSettings = isElectron() ? window.api.localSettings : null;
const settings = useGeneralSettings();
const { setSettings } = useSettingsStoreActions();
const playerStatus = useCurrentStatus();
const { currentSong, index, length } = useQueueStatus();
const { privateMode } = useAppStore();
const updateZoom = (increase: number) => {
@@ -83,21 +76,21 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
...(isElectron() ? zoomHotkeys : []),
]);
const title = useMemo(() => {
const statusString = playerStatus === PlayerStatus.PAUSED ? '(Paused) ' : '';
const queueString = length ? `(${index + 1} / ${length}) ` : '';
const privateModeString = privateMode ? '(Private mode)' : '';
const title = `${
length
? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName} — Feishin` : ''}`
: 'Feishin'
}${privateMode ? ` ${privateModeString}` : ''}`;
document.title = title;
return title;
}, [currentSong?.artistName, currentSong?.name, index, length, playerStatus, privateMode]);
// const title = useMemo(() => {
// const statusString = playerStatus === PlayerStatus.PAUSED ? '(Paused) ' : '';
// const queueString = length ? `(${index + 1} / ${length}) ` : '';
// const privateModeString = privateMode ? '(Private mode)' : '';
// const title = `${
// length
// ? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName} — Feishin` : ''}`
// : 'Feishin'
// }${privateMode ? ` ${privateModeString}` : ''}`;
// document.title = title;
// return title;
// }, [currentSong?.artistName, currentSong?.name, index, length, playerStatus, privateMode]);
return (
<ContextMenuProvider>
<>
<div
className={clsx(styles.layout, {
[styles.macos]: windowBarStyle === Platform.MACOS,
@@ -105,11 +98,11 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
})}
id="default-layout"
>
{windowBarStyle !== Platform.WEB && <WindowBar title={title} />}
{windowBarStyle !== Platform.WEB && <WindowBar title="" />}
<MainContent shell={shell} />
<PlayerBar />
</div>
<CommandPalette modalProps={{ handlers, opened }} />
</ContextMenuProvider>
</>
);
};
src/renderer/router/app-outlet.tsx
+14 -14
View File
@@ -4,7 +4,7 @@ import { Navigate, Outlet } from 'react-router-dom';
import { useServerAuthenticated } from '/@/renderer/hooks/use-server-authenticated';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useSetPlayerFallback } from '/@/renderer/store';
import { useCurrentServer } from '/@/renderer/store';
import { Center } from '/@/shared/components/center/center';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { toast } from '/@/shared/components/toast/toast';
@@ -16,7 +16,7 @@ const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
export const AppOutlet = () => {
const currentServer = useCurrentServer();
const setFallback = useSetPlayerFallback();
// const setFallback = useSetPlayerFallback();
const authState = useServerAuthenticated();
const isActionsRequired = useMemo(() => {
@@ -28,20 +28,20 @@ export const AppOutlet = () => {
return isActionRequired;
}, [currentServer]);
useEffect(() => {
utils?.mainMessageListener((_event, data) => {
toast.show(data);
});
// useEffect(() => {
// utils?.mainMessageListener((_event, data) => {
// toast.show(data);
// });
mpvPlayerListener?.rendererPlayerFallback((_event, data) => {
setFallback(data);
});
// mpvPlayerListener?.rendererPlayerFallback((_event, data) => {
// setFallback(data);
// });
return () => {
ipc?.removeAllListeners('toast-from-main');
ipc?.removeAllListeners('renderer-player-fallback');
};
}, [setFallback]);
// return () => {
// ipc?.removeAllListeners('toast-from-main');
// ipc?.removeAllListeners('renderer-player-fallback');
// };
// }, [setFallback]);
if (authState === AuthState.LOADING) {
return (
src/renderer/store/player.store.ts
+85 -86
View File
@@ -10,40 +10,14 @@ import { useShallow } from 'zustand/react/shallow';
import { createSelectors } from '/@/renderer/lib/zustand';
import { shuffleInPlace } from '/@/renderer/utils/shuffle';
import { QueueSong, Song } from '/@/shared/types/domain-types';
export enum PlayerRepeat {
ALBUM = 'album',
ALL = 'all',
OFF = 'off',
ONE = 'one',
}
export enum PlayerShuffle {
OFF = 'off',
TRACK = 'track',
}
export enum PlayerStatus {
PAUSED = 'paused',
PLAYING = 'playing',
}
export enum PlayerTransition {
CROSSFADE = 'crossfade',
GAPLESS = 'gapless',
}
export enum PlayType {
INDEX = 'index',
LAST = 'last',
NEXT = 'next',
NOW = 'now',
}
export enum QueueType {
DEFAULT = 'default',
PRIORITY = 'priority',
}
import {
Play,
PlayerQueueType,
PlayerRepeat,
PlayerShuffle,
PlayerStatus,
PlayerStyle,
} from '/@/shared/types/types';
export interface PlayerData {
currentTrack: QueueSong | undefined;
@@ -56,7 +30,7 @@ export interface PlayerData {
shuffle: PlayerShuffle;
speed: number;
status: PlayerStatus;
transitionType: PlayerTransition;
transitionType: PlayerStyle;
volume: number;
};
player1: QueueSong | undefined;
@@ -75,7 +49,7 @@ export interface QueueData {
export type QueueGroupingProperty = keyof QueueSong;
interface Actions {
addToQueueByType: (items: Song[], playType: PlayType) => void;
addToQueueByType: (items: Song[], playType: Play) => void;
addToQueueByUniqueId: (items: Song[], uniqueId: string, edge: 'bottom' | 'top') => void;
clearQueue: () => void;
clearSelected: (items: QueueSong[]) => void;
@@ -103,11 +77,11 @@ interface Actions {
moveSelectedToTop: (items: QueueSong[]) => void;
setCrossfadeDuration: (duration: number) => void;
setProgress: (timestamp: number) => void;
setQueueType: (queueType: QueueType) => void;
setQueueType: (queueType: PlayerQueueType) => void;
setRepeat: (repeat: PlayerRepeat) => void;
setShuffle: (shuffle: PlayerShuffle) => void;
setSpeed: (speed: number) => void;
setTransitionType: (transitionType: PlayerTransition) => void;
setTransitionType: (transitionType: PlayerStyle) => void;
setVolume: (volume: number) => void;
shuffle: () => void;
shuffleAll: () => void;
@@ -125,7 +99,7 @@ interface State {
index: number;
muted: boolean;
playerNum: 1 | 2;
queueType: QueueType;
queueType: PlayerQueueType;
repeat: PlayerRepeat;
seekToTimestamp: string;
shuffle: PlayerShuffle;
@@ -134,7 +108,7 @@ interface State {
stepBackward: number;
stepForward: number;
timestamp: number;
transitionType: PlayerTransition;
transitionType: PlayerStyle;
volume: number;
};
queue: QueueData;
@@ -150,9 +124,9 @@ export const usePlayerStoreBase = create<PlayerState>()(
const queueType = getQueueType();
switch (queueType) {
case QueueType.DEFAULT: {
case PlayerQueueType.DEFAULT: {
switch (playType) {
case PlayType.LAST: {
case Play.LAST: {
set((state) => {
const currentIndex = state.player.index;
@@ -171,7 +145,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
});
break;
}
case PlayType.NEXT: {
case Play.NEXT: {
set((state) => {
const currentIndex = state.player.index;
@@ -194,7 +168,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
});
break;
}
case PlayType.NOW: {
case Play.NOW: {
set((state) => {
state.queue.default = [];
state.player.index = 0;
@@ -214,9 +188,9 @@ export const usePlayerStoreBase = create<PlayerState>()(
}
break;
}
case QueueType.PRIORITY: {
case PlayerQueueType.PRIORITY: {
switch (playType) {
case PlayType.LAST: {
case Play.LAST: {
set((state) => {
state.queue.priority = [
...state.queue.priority,
@@ -230,7 +204,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
});
break;
}
case PlayType.NEXT: {
case Play.NEXT: {
set((state) => {
const currentIndex = state.player.index;
const isInPriority =
@@ -260,7 +234,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
});
break;
}
case PlayType.NOW: {
case Play.NOW: {
set((state) => {
state.queue.default = [];
state.player.status = PlayerStatus.PLAYING;
@@ -337,7 +311,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
const queueType = getQueueType();
set((state) => {
if (queueType === QueueType.DEFAULT) {
if (queueType === PlayerQueueType.DEFAULT) {
const index = state.queue.default.findIndex(
(item) => item.uniqueId === uniqueId,
);
@@ -445,7 +419,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
const queue = get().getQueueOrder();
const queueType = getQueueType();
if (!groupBy || queueType === QueueType.PRIORITY) {
if (!groupBy || queueType === PlayerQueueType.PRIORITY) {
return queue;
}
@@ -483,7 +457,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
getQueueOrder: () => {
const queueType = getQueueType();
if (queueType === QueueType.PRIORITY) {
if (queueType === PlayerQueueType.PRIORITY) {
const defaultQueue = get().queue.default;
const priorityQueue = get().queue.priority;
@@ -645,7 +619,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
set((state) => {
const uniqueIdMap = new Map(items.map((item) => [item.uniqueId, item]));
if (queueType == QueueType.DEFAULT) {
if (queueType == PlayerQueueType.DEFAULT) {
// Find the index of the drop target
const index = state.queue.default.findIndex(
(item) => item.uniqueId === uniqueId,
@@ -738,7 +712,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
set((state) => {
const uniqueIds = items.map((item) => item.uniqueId);
if (state.player.queueType === QueueType.PRIORITY) {
if (state.player.queueType === PlayerQueueType.PRIORITY) {
const priorityFiltered = state.queue.priority.filter(
(item) => !uniqueIds.includes(item.uniqueId),
);
@@ -779,7 +753,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
const uniqueIds = items.map((item) => item.uniqueId);
if (queueType === QueueType.DEFAULT) {
if (queueType === PlayerQueueType.DEFAULT) {
const currentIndex = state.player.index;
const filtered = state.queue.default.filter(
(item) => !uniqueIds.includes(item.uniqueId),
@@ -861,7 +835,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
set((state) => {
const uniqueIds = items.map((item) => item.uniqueId);
if (state.player.queueType === QueueType.PRIORITY) {
if (state.player.queueType === PlayerQueueType.PRIORITY) {
const priorityFiltered = state.queue.priority.filter(
(item) => !uniqueIds.includes(item.uniqueId),
);
@@ -896,16 +870,16 @@ export const usePlayerStoreBase = create<PlayerState>()(
index: -1,
muted: false,
playerNum: 1,
queueType: QueueType.DEFAULT,
repeat: PlayerRepeat.OFF,
queueType: PlayerQueueType.DEFAULT,
repeat: PlayerRepeat.NONE,
seekToTimestamp: uniqueSeekToTimestamp(0),
shuffle: PlayerShuffle.OFF,
shuffle: PlayerShuffle.NONE,
speed: 1,
status: PlayerStatus.PAUSED,
stepBackward: 10,
stepForward: 10,
timestamp: 0,
transitionType: PlayerTransition.GAPLESS,
transitionType: PlayerStyle.GAPLESS,
volume: 30,
},
queue: {
@@ -924,10 +898,10 @@ export const usePlayerStoreBase = create<PlayerState>()(
state.player.timestamp = timestamp;
});
},
setQueueType: (queueType: QueueType) => {
setQueueType: (queueType: PlayerQueueType) => {
set((state) => {
// From default -> priority, move all items from default to priority
if (queueType === QueueType.PRIORITY) {
if (queueType === PlayerQueueType.PRIORITY) {
state.queue.priority = [
...state.queue.default,
...state.queue.priority,
@@ -960,7 +934,7 @@ export const usePlayerStoreBase = create<PlayerState>()(
state.player.speed = normalizedSpeed;
});
},
setTransitionType: (transitionType: PlayerTransition) => {
setTransitionType: (transitionType: PlayerStyle) => {
set((state) => {
state.player.transitionType = transitionType;
});
@@ -1053,7 +1027,7 @@ export const usePlayerActions = () => {
);
};
export type AddToQueueByPlayType = PlayType;
export type AddToQueueByPlayType = Play;
export type AddToQueueByUniqueId = {
edge: 'bottom' | 'left' | 'right' | 'top' | null;
@@ -1254,16 +1228,6 @@ export const usePlayerProperties = () => {
);
};
export const useCurrentTrack = () => {
return usePlayerStoreBase(
useShallow((state) => {
const queue = state.getQueue();
const index = state.player.index;
return { index, length: queue.items.length, track: queue.items[index] };
}),
);
};
export const usePlayerProgress = () => {
return usePlayerStoreBase((state) => state.player.timestamp);
};
@@ -1321,32 +1285,67 @@ export const updateQueueFavorites = (ids: string[], favorite: boolean) => {
});
};
export function usePlayerMuted() {
export const usePlayerMuted = () => {
return usePlayerStoreBase((state) => state.player.muted);
}
};
export function usePlayerQueueType() {
export const usePlayerQueueType = () => {
return usePlayerStoreBase((state) => state.player.queueType);
}
};
export function usePlayerRepeat() {
export const usePlayerRepeat = () => {
return usePlayerStoreBase((state) => state.player.repeat);
}
};
export function usePlayerShuffle() {
export const usePlayerShuffle = () => {
return usePlayerStoreBase((state) => state.player.shuffle);
}
};
export function usePlayerStatus() {
export const usePlayerStatus = () => {
return usePlayerStoreBase((state) => state.player.status);
}
};
export function usePlayerVolume() {
export const usePlayerVolume = () => {
return usePlayerStoreBase((state) => state.player.volume);
}
};
export const usePlayerSpeed = () => {
return usePlayerStoreBase((state) => state.player.speed);
};
export const usePlayerTimestamp = () => {
return usePlayerStoreBase((state) => state.player.timestamp);
};
export const usePlayerSong = () => {
return usePlayerStoreBase((state) => {
const queue = state.getQueue();
const index = state.player.index;
return queue.items[index];
});
};
export const usePlayerNum = () => {
return usePlayerStoreBase((state) => state.player.playerNum);
};
export const usePlayerQueue = () => {
return usePlayerStoreBase((state) => {
const queueType = state.player.queueType;
switch (queueType) {
case PlayerQueueType.DEFAULT:
return state.queue.default;
case PlayerQueueType.PRIORITY:
return state.queue.priority;
default:
return state.queue.default;
}
});
};
function getQueueType() {
const queueType: QueueType = usePlayerStore.getState().player.queueType;
const queueType: PlayerQueueType = usePlayerStore.getState().player.queueType;
return queueType;
}
src/renderer/store/settings.store.ts
+8 -8
View File
@@ -21,8 +21,8 @@ import {
FontType,
Platform,
Play,
PlaybackStyle,
PlaybackType,
PlayerStyle,
PlayerType,
TableColumn,
TableType,
} from '/@/shared/types/types';
@@ -258,9 +258,9 @@ const PlaybackSettingsSchema = z.object({
muted: z.boolean(),
preservePitch: z.boolean(),
scrobble: ScrobbleSettingsSchema,
style: z.nativeEnum(PlaybackStyle),
style: z.nativeEnum(PlayerStyle),
transcode: TranscodingConfigSchema,
type: z.nativeEnum(PlaybackType),
type: z.nativeEnum(PlayerType),
webAudio: z.boolean(),
});
@@ -652,11 +652,11 @@ const initialState: SettingsState = {
scrobbleAtDuration: 240,
scrobbleAtPercentage: 75,
},
style: PlaybackStyle.GAPLESS,
style: PlayerStyle.GAPLESS,
transcode: {
enabled: false,
},
type: PlaybackType.WEB,
type: PlayerType.WEB,
webAudio: true,
},
remote: {
@@ -843,7 +843,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
...initialState,
playback: {
...initialState.playback,
type: PlaybackType.WEB,
type: PlayerType.WEB,
},
});
} else {
@@ -970,7 +970,7 @@ export const usePlaybackType = () =>
const isFallback = usePlayerStore.getState().fallback;
if (isFallback) {
return PlaybackType.WEB;
return PlayerType.WEB;
}
return state.playback.type;
src/shared/types/types.ts
+14 -8
View File
@@ -101,20 +101,16 @@ export enum FontType {
}
export enum Play {
INDEX = 'index',
LAST = 'last',
NEXT = 'next',
NOW = 'now',
SHUFFLE = 'shuffle',
}
export enum PlaybackStyle {
CROSSFADE = 'crossfade',
GAPLESS = 'gapless',
}
export enum PlaybackType {
LOCAL = 'local',
WEB = 'web',
export enum PlayerQueueType {
DEFAULT = 'default',
PRIORITY = 'priority',
}
export enum PlayerRepeat {
@@ -134,6 +130,16 @@ export enum PlayerStatus {
PLAYING = 'playing',
}
export enum PlayerStyle {
CROSSFADE = 'crossfade',
GAPLESS = 'gapless',
}
export enum PlayerType {
LOCAL = 'local',
WEB = 'web',
}
export enum TableColumn {
ACTIONS = 'actions',
ALBUM = 'album',