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

large performance refactor

Browse Source
This commit is contained in:
jeffvli
2025-11-26 13:54:45 -08:00
parent 948f428546
commit 60cdea6787
32 changed files with 1030 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/app.tsx
-2
View File
@@ -10,7 +10,6 @@ import isElectron from 'is-electron';
import { useEffect, useMemo, useRef, useState } from 'react';
import i18n from '/@/i18n/i18n';
import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
import { useServerVersion } from '/@/renderer/hooks/use-server-version';
import { IsUpdatedDialog } from '/@/renderer/is-updated-dialog';
@@ -32,7 +31,6 @@ export const App = () => {
const { content, enabled } = useCssSettings();
const { bindings } = useHotkeySettings();
const cssRef = useRef<HTMLStyleElement | null>(null);
useDiscordRpc();
useServerVersion();
const [webAudio, setWebAudio] = useState<WebAudio>();
src/renderer/components/grid-carousel/grid-carousel-v2.tsx
+5 -1
View File
@@ -42,7 +42,7 @@ const pageVariants: Variants = {
initial: (custom: { isNext: boolean }) => ({ opacity: 0, x: custom.isNext ? 100 : -100 }),
};
export function GridCarousel(props: GridCarouselProps) {
function BaseGridCarousel(props: GridCarouselProps) {
const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
const { ref, ...cq } = useContainerQuery({
'2xl': 1024,
@@ -192,6 +192,10 @@ export function GridCarousel(props: GridCarouselProps) {
);
}
export const GridCarousel = memo(BaseGridCarousel);
GridCarousel.displayName = 'GridCarousel';
function getCardsToShow(breakpoints: {
isLargerThan2xl: boolean;
isLargerThan3xl: boolean;
src/renderer/components/item-list/helpers/item-list-infinite-loader.ts
+13 -1
View File
@@ -50,9 +50,21 @@ function getInitialData(itemCount: number) {
};
}
export const infiniteLoaderDataQueryKey = (
serverId: string,
itemType: LibraryItem,
query?: Record<string, any>,
) => {
if (query) {
return [serverId, 'item-list-infinite-loader', itemType, query];
}
return [serverId, 'item-list-infinite-loader', itemType];
};
export const useItemListInfiniteLoader = ({
eventKey,
fetchThreshold = 0.2,
fetchThreshold = 0.5,
itemsPerPage = 100,
itemType,
listCountQuery,
src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+5 -1
View File
@@ -266,7 +266,7 @@ export interface ItemGridListProps {
rows?: ItemCardProps['rows'];
}
export const ItemGridList = ({
const BaseItemGridList = ({
data,
enableDrag = true,
enableExpansion = false,
@@ -750,3 +750,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
</div>
);
});
export const ItemGridList = memo(BaseItemGridList);
ItemGridList.displayName = 'ItemGridList';
src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx
+37 -15
View File
@@ -1,4 +1,5 @@
import clsx from 'clsx';
import { memo } from 'react';
import styles from './row-index-column.module.css';
@@ -88,6 +89,8 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
!!props.activeRowId &&
(props.activeRowId === song?.id || props.activeRowId === song?._uniqueId);
const isActiveAndPlaying = isActive && status === PlayerStatus.PLAYING;
let adjustedRowIndex =
props.adjustedRowIndexMap?.get(props.rowIndex) ??
(props.enableHeader ? props.rowIndex : props.rowIndex + 1);
@@ -97,20 +100,39 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
}
return (
<TableColumnTextContainer {...props}>
{isActive ? (
status === PlayerStatus.PLAYING ? (
<Flex>
<Icon fill="primary" icon="mediaPlay" />
</Flex>
) : (
<Flex>
<Icon fill="primary" icon="mediaPause" />
</Flex>
)
) : (
adjustedRowIndex
)}
</TableColumnTextContainer>
<InnerQueueSongRowIndexColumn
{...props}
adjustedRowIndex={adjustedRowIndex}
isActive={isActive}
isPlaying={isActiveAndPlaying}
/>
);
};
const InnerQueueSongRowIndexColumn = memo(
(
props: ItemTableListInnerColumn & {
adjustedRowIndex: number;
isActive: boolean;
isPlaying: boolean;
},
) => {
return (
<TableColumnTextContainer {...props}>
{props.isActive ? (
props.isPlaying ? (
<Flex>
<Icon fill="primary" icon="mediaPlay" />
</Flex>
) : (
<Flex>
<Icon fill="primary" icon="mediaPause" />
</Flex>
)
) : (
props.adjustedRowIndex
)}
</TableColumnTextContainer>
);
},
);
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+6 -1
View File
@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from 'motion/react';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import React, {
type JSXElementConstructor,
memo,
ReactElement,
Ref,
useCallback,
@@ -704,7 +705,7 @@ interface ItemTableListProps {
startRowIndex?: number;
}
export const ItemTableList = ({
const BaseItemTableList = ({
activeRowId,
autoFitColumns = false,
CellComponent,
@@ -2178,3 +2179,7 @@ export const ItemTableList = ({
</motion.div>
);
};
export const ItemTableList = memo(BaseItemTableList);
ItemTableList.displayName = 'ItemTableList';
src/renderer/components/native-scroll-area/native-scroll-area.tsx
+6 -2
View File
@@ -1,5 +1,5 @@
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import { CSSProperties, forwardRef, ReactNode, Ref, useEffect, useRef } from 'react';
import { CSSProperties, forwardRef, memo, ReactNode, Ref, useEffect, useRef } from 'react';
import styles from './native-scroll-area.module.css';
@@ -18,7 +18,7 @@ interface NativeScrollAreaProps {
style?: CSSProperties;
}
export const NativeScrollArea = forwardRef(
const BaseNativeScrollArea = forwardRef(
(
{ children, noHeader, pageHeaderProps, scrollHideDelay, ...props }: NativeScrollAreaProps,
ref: Ref<HTMLDivElement>,
@@ -98,3 +98,7 @@ export const NativeScrollArea = forwardRef(
);
},
);
export const NativeScrollArea = memo(BaseNativeScrollArea);
NativeScrollArea.displayName = 'NativeScrollArea';
src/renderer/components/page-header/page-header.tsx
+6 -2
View File
@@ -1,7 +1,7 @@
import clsx from 'clsx';
import { useInView } from 'motion/react';
import { AnimatePresence, motion, Variants } from 'motion/react';
import { CSSProperties, ReactNode, RefObject, useEffect, useRef } from 'react';
import { CSSProperties, memo, ReactNode, RefObject, useEffect, useRef } from 'react';
import styles from './page-header.module.css';
@@ -35,7 +35,7 @@ const variants: Variants = {
initial: { opacity: 0 },
};
export const PageHeader = ({
const BasePageHeader = ({
animated,
backgroundColor,
children,
@@ -144,3 +144,7 @@ export const PageHeader = ({
</>
);
};
export const PageHeader = memo(BasePageHeader);
PageHeader.displayName = 'PageHeader';
src/renderer/features/discord-rpc/use-discord-rpc.ts
+9 -9
View File
@@ -10,6 +10,7 @@ import {
useDiscordSettings,
useGeneralSettings,
usePlayerStore,
useTimestampStoreBase,
} from '/@/renderer/store';
import { sentenceCase } from '/@/renderer/utils';
import { QueueSong, ServerType } from '/@/shared/types/domain-types';
@@ -26,7 +27,7 @@ const truncate = (field: string) =>
export const useDiscordRpc = () => {
const discordSettings = useDiscordSettings();
const generalSettings = useGeneralSettings();
const { privateMode } = useAppStore();
const privateMode = useAppStore((state) => state.privateMode);
const [lastUniqueId, setlastUniqueId] = useState('');
const setActivity = useCallback(
@@ -201,14 +202,13 @@ export const useDiscordRpc = () => {
if (!discordSettings.enabled || privateMode) {
return;
}
const unsubSongChange = usePlayerStore.subscribe(
(state): ActivityState => [
state.current.song,
state.current.time,
state.current.status,
],
setActivity,
);
const unsubSongChange = usePlayerStore.subscribe((state): ActivityState => {
const currentSong = state.getCurrentSong();
const currentTime = useTimestampStoreBase.getState().timestamp;
const status = state.player.status;
return [currentSong, currentTime, status];
}, setActivity);
return () => {
unsubSongChange();
};
src/renderer/features/player/audio-player/hooks/use-player-events.ts
+6
View File
@@ -140,6 +140,12 @@ function createPlayerEvents(callbacks: PlayerEventsCallbacks): PlayerEvents {
return {
cleanup: () => {
unsubscribers.forEach((unsubscribe) => unsubscribe());
if (callbacks.onUserRating) {
eventEmitter.off('USER_RATING', callbacks.onUserRating);
}
if (callbacks.onUserFavorite) {
eventEmitter.off('USER_FAVORITE', callbacks.onUserFavorite);
}
},
};
}
src/renderer/features/player/components/audio-players.tsx
+4
View File
@@ -2,8 +2,10 @@ import { useEffect } from 'react';
import { eventEmitter } from '/@/renderer/events/event-emitter';
import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
import { MpvPlayer } from '/@/renderer/features/player/audio-player/mpv-player';
import { WebPlayer } from '/@/renderer/features/player/audio-player/web-player';
import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
import {
updateQueueFavorites,
@@ -19,6 +21,8 @@ export const AudioPlayers = () => {
const serverId = useCurrentServerId();
useScrobble();
usePowerSaveBlocker();
useDiscordRpc();
// Listen to favorite and rating events to update queue songs
useEffect(() => {
src/renderer/features/player/components/center-controls.tsx
+218 -152
View File
@@ -18,167 +18,233 @@ import { Icon } from '/@/shared/components/icon/icon';
import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
export const CenterControls = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const currentSong = usePlayerSong();
const skip = useSettingsStore((state) => state.general.skipButtons);
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const status = usePlayerStatus();
const repeat = usePlayerRepeat();
const shuffle = usePlayerShuffle();
const {
mediaNext,
mediaPrevious,
mediaSkipBackward,
mediaSkipForward,
mediaStop,
mediaTogglePlayPause,
toggleRepeat,
toggleShuffle,
} = usePlayer();
return (
<>
<div className={styles.controlsContainer}>
<div className={styles.buttonsContainer}>
<PlayerButton
icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
onClick={mediaStop}
tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
<PlayerButton
icon={
<Icon
fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
icon="mediaShuffle"
size={buttonSize}
/>
}
isActive={shuffle !== PlayerShuffle.NONE}
onClick={toggleShuffle}
tooltip={{
label:
shuffle === PlayerShuffle.NONE
? t('player.shuffle', {
context: 'off',
postProcess: 'sentenceCase',
})
: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
<PlayerButton
icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
onClick={mediaPrevious}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="secondary"
/>
{skip?.enabled && (
<PlayerButton
icon={
<Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
}
onClick={mediaSkipBackward}
tooltip={{
label: t('player.skip', {
context: 'back',
postProcess: 'sentenceCase',
}),
openDelay: 0,
}}
variant="secondary"
/>
)}
<PlayButton
disabled={currentSong?.id === undefined}
isPaused={status === PlayerStatus.PAUSED}
onClick={mediaTogglePlayPause}
/>
{skip?.enabled && (
<PlayerButton
icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
onClick={mediaSkipForward}
tooltip={{
label: t('player.skip', {
context: 'forward',
postProcess: 'sentenceCase',
}),
openDelay: 0,
}}
variant="secondary"
/>
)}
<PlayerButton
icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
onClick={mediaNext}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="secondary"
/>
<PlayerButton
icon={
repeat === PlayerRepeat.ONE ? (
<Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
) : (
<Icon
fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
icon="mediaRepeat"
size={buttonSize}
/>
)
}
isActive={repeat !== PlayerRepeat.NONE}
onClick={toggleRepeat}
tooltip={{
label: `${
repeat === PlayerRepeat.NONE
? t('player.repeat', {
context: 'off',
postProcess: 'sentenceCase',
})
: repeat === PlayerRepeat.ALL
? t('player.repeat', {
context: 'all',
postProcess: 'sentenceCase',
})
: t('player.repeat', {
context: 'one',
postProcess: 'sentenceCase',
})
}`,
openDelay: 0,
}}
variant="tertiary"
/>
<PlayerButton
icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
onClick={() =>
openShuffleAllModal({
queryClient,
})
}
tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
<StopButton />
<ShuffleButton />
<PreviousButton />
{skip?.enabled && <SkipBackwardButton />}
<CenterPlayButton />
{skip?.enabled && <SkipForwardButton />}
<NextButton />
<RepeatButton />
<ShuffleAllButton />
</div>
</div>
<PlayerbarSlider />
</>
);
};
const StopButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const { mediaStop } = usePlayer();
return (
<PlayerButton
icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
onClick={mediaStop}
tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
);
};
const ShuffleButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const shuffle = usePlayerShuffle();
const { toggleShuffle } = usePlayer();
return (
<PlayerButton
icon={
<Icon
fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
icon="mediaShuffle"
size={buttonSize}
/>
}
isActive={shuffle !== PlayerShuffle.NONE}
onClick={toggleShuffle}
tooltip={{
label:
shuffle === PlayerShuffle.NONE
? t('player.shuffle', {
context: 'off',
postProcess: 'sentenceCase',
})
: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
);
};
const PreviousButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const { mediaPrevious } = usePlayer();
return (
<PlayerButton
icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
onClick={mediaPrevious}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="secondary"
/>
);
};
const SkipBackwardButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const { mediaSkipBackward } = usePlayer();
return (
<PlayerButton
icon={<Icon fill="default" icon="mediaStepBackward" size={buttonSize} />}
onClick={mediaSkipBackward}
tooltip={{
label: t('player.skip', {
context: 'back',
postProcess: 'sentenceCase',
}),
openDelay: 0,
}}
variant="secondary"
/>
);
};
const CenterPlayButton = () => {
const currentSong = usePlayerSong();
const status = usePlayerStatus();
const { mediaTogglePlayPause } = usePlayer();
return (
<PlayButton
disabled={currentSong?.id === undefined}
isPaused={status === PlayerStatus.PAUSED}
onClick={mediaTogglePlayPause}
/>
);
};
const SkipForwardButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const { mediaSkipForward } = usePlayer();
return (
<PlayerButton
icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
onClick={mediaSkipForward}
tooltip={{
label: t('player.skip', {
context: 'forward',
postProcess: 'sentenceCase',
}),
openDelay: 0,
}}
variant="secondary"
/>
);
};
const NextButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const { mediaNext } = usePlayer();
return (
<PlayerButton
icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
onClick={mediaNext}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="secondary"
/>
);
};
const RepeatButton = () => {
const { t } = useTranslation();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const repeat = usePlayerRepeat();
const { toggleRepeat } = usePlayer();
return (
<PlayerButton
icon={
repeat === PlayerRepeat.ONE ? (
<Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
) : (
<Icon
fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
icon="mediaRepeat"
size={buttonSize}
/>
)
}
isActive={repeat !== PlayerRepeat.NONE}
onClick={toggleRepeat}
tooltip={{
label: `${
repeat === PlayerRepeat.NONE
? t('player.repeat', {
context: 'off',
postProcess: 'sentenceCase',
})
: repeat === PlayerRepeat.ALL
? t('player.repeat', {
context: 'all',
postProcess: 'sentenceCase',
})
: t('player.repeat', {
context: 'one',
postProcess: 'sentenceCase',
})
}`,
openDelay: 0,
}}
variant="tertiary"
/>
);
};
const ShuffleAllButton = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
return (
<PlayerButton
icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
onClick={() =>
openShuffleAllModal({
queryClient,
})
}
tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
);
};
src/renderer/features/player/components/left-controls.tsx
+11 -2
View File
@@ -3,18 +3,19 @@ import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
import React, { MouseEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link } from 'react-router';
import { shallow } from 'zustand/shallow';
import styles from './left-controls.module.css';
import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
import { AppRoute } from '/@/renderer/router/routes';
import {
useAppStore,
useAppStoreActions,
useFullScreenPlayerStore,
useHotkeySettings,
usePlayerSong,
useSetFullScreenPlayerStore,
useSidebarStore,
} from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
@@ -31,7 +32,15 @@ export const LeftControls = () => {
const { setSideBar } = useAppStoreActions();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const { collapsed, image } = useSidebarStore();
const { collapsed, image } = useAppStore(
(state) => ({
collapsed: state.sidebar.collapsed,
image: state.sidebar.image,
}),
shallow,
);
const hideImage = image && !collapsed;
const currentSong = usePlayerSong();
const title = currentSong?.name;
src/renderer/features/player/components/playerbar-slider.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const PlayerbarSlider = () => {
const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
const formattedTime = formatDuration(currentTime * 1000 || 0);
const { showTimeRemaining } = useAppStore();
const showTimeRemaining = useAppStore((state) => state.showTimeRemaining);
const { setShowTimeRemaining } = useAppStoreActions();
useRemote();
src/renderer/features/player/components/playerbar.tsx
-19
View File
@@ -7,7 +7,6 @@ import { CenterControls } from '/@/renderer/features/player/components/center-co
import { LeftControls } from '/@/renderer/features/player/components/left-controls';
import { MobilePlayerbar } from '/@/renderer/features/player/components/mobile-playerbar';
import { RightControls } from '/@/renderer/features/player/components/right-controls';
import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
import { useFullScreenPlayerStore, useSetFullScreenPlayerStore } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
@@ -19,8 +18,6 @@ export const Playerbar = () => {
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const isMobile = useIsMobile();
usePowerSaveBlocker();
const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
e?.stopPropagation();
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
@@ -46,22 +43,6 @@ export const Playerbar = () => {
<RightControls />
</div>
</div>
{/* {playbackType === PlayerType.WEB && (
<AudioPlayer
// autoNext={autoNextFn}
crossfadeDuration={settings.crossfadeDuration}
crossfadeStyle={settings.crossfadeStyle}
currentPlayer={player}
muted={muted}
playbackStyle={settings.style}
player1={player1}
player2={player2}
ref={playersRef}
status={status}
style={settings.style as any}
volume={(volume / 100) ** 2}
/>
)} */}
</div>
);
};
src/renderer/features/player/components/right-controls.tsx
+218 -146
View File
@@ -1,3 +1,4 @@
import { t } from 'i18next';
import { useCallback, WheelEvent } from 'react';
import { useTranslation } from 'react-i18next';
@@ -14,9 +15,10 @@ import {
useHotkeySettings,
usePlayerData,
usePlayerMuted,
usePlayerSong,
usePlayerVolume,
useSettingsStore,
useSidebarStore,
useSidebarRightExpanded,
} from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Flex } from '/@/shared/components/flex/flex';
@@ -51,19 +53,61 @@ const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
};
export const RightControls = () => {
return (
<Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
<Group h="calc(100% / 3)">
<RatingButton />
</Group>
<Group align="center" gap="xs" wrap="nowrap">
<PlayerConfig />
<FavoriteButton />
<QueueButton />
<VolumeButton />
</Group>
<Group h="calc(100% / 3)" />
</Flex>
);
};
const QueueButton = () => {
const { t } = useTranslation();
const isMinWidth = useMediaQuery('(max-width: 480px)');
const volume = usePlayerVolume();
const muted = usePlayerMuted();
const server = useCurrentServer();
const { currentSong, previousSong } = usePlayerData();
const isSidebarRightExpanded = useSidebarRightExpanded();
const { setSideBar } = useAppStoreActions();
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { bindings } = useHotkeySettings();
const { volumeWheelStep } = useGeneralSettings();
const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
const { mediaToggleMute, setVolume } = usePlayer();
const updateRatingMutation = useSetRating({});
const handleToggleQueue = () => {
setSideBar({ rightExpanded: !isSidebarRightExpanded });
};
useHotkeys([
[bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
]);
return (
<ActionIcon
icon={isSidebarRightExpanded ? 'panelRightClose' : 'panelRightOpen'}
iconProps={{
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
handleToggleQueue();
}}
size="sm"
tooltip={{
label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="subtle"
/>
);
};
const FavoriteButton = () => {
const currentSong = usePlayerSong();
const { bindings } = useHotkeySettings();
const addToFavoritesMutation = useCreateFavorite({});
const removeFromFavoritesMutation = useDeleteFavorite({});
@@ -79,19 +123,6 @@ export const RightControls = () => {
});
};
const handleUpdateRating = (rating: number) => {
if (!currentSong) return;
updateRatingMutation.mutate({
apiClientProps: { serverId: currentSong?._serverId || '' },
query: {
id: [currentSong.id],
rating,
type: LibraryItem.SONG,
},
});
};
const handleRemoveFromFavorites = (song: QueueSong | undefined) => {
if (!song?.id) return;
@@ -114,6 +145,136 @@ export const RightControls = () => {
}
};
useFavoritePreviousSongHotkeys({
handleAddToFavorites,
handleRemoveFromFavorites,
handleToggleFavorite,
});
useHotkeys([
[
bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
() => handleAddToFavorites(currentSong),
],
[
bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
() => handleRemoveFromFavorites(currentSong),
],
[
bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
() => handleToggleFavorite(currentSong),
],
]);
return (
<ActionIcon
icon="favorite"
iconProps={{
fill: currentSong?.userFavorite ? 'primary' : undefined,
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
handleToggleFavorite(currentSong);
}}
size="sm"
tooltip={{
label: currentSong?.userFavorite
? t('player.unfavorite', { postProcess: 'titleCase' })
: t('player.favorite', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="subtle"
/>
);
};
const useFavoritePreviousSongHotkeys = ({
handleAddToFavorites,
handleRemoveFromFavorites,
handleToggleFavorite,
}: {
handleAddToFavorites: (song: QueueSong | undefined) => void;
handleRemoveFromFavorites: (song: QueueSong | undefined) => void;
handleToggleFavorite: (song: QueueSong | undefined) => void;
}) => {
const { bindings } = useHotkeySettings();
const { previousSong } = usePlayerData();
useHotkeys([
[
bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
() => handleAddToFavorites(previousSong),
],
[
bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
() => handleRemoveFromFavorites(previousSong),
],
[
bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
() => handleToggleFavorite(previousSong),
],
]);
return null;
};
const RatingButton = () => {
const server = useCurrentServer();
const currentSong = usePlayerSong();
const updateRatingMutation = useSetRating({});
const isSongDefined = Boolean(currentSong?.id);
const showRating =
isSongDefined &&
(server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC);
const handleUpdateRating = (rating: number) => {
if (!currentSong) return;
updateRatingMutation.mutate({
apiClientProps: { serverId: currentSong?._serverId || '' },
query: {
id: [currentSong.id],
rating,
type: LibraryItem.SONG,
},
});
};
const { bindings } = useHotkeySettings();
useHotkeys([
[bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
[bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
[bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
[bindings.rate3.isGlobal ? '' : bindings.rate3.hotkey, () => handleUpdateRating(3)],
[bindings.rate4.isGlobal ? '' : bindings.rate4.hotkey, () => handleUpdateRating(4)],
[bindings.rate5.isGlobal ? '' : bindings.rate5.hotkey, () => handleUpdateRating(5)],
]);
return (
<>
{showRating && (
<Rating
onChange={handleUpdateRating}
size="xs"
value={currentSong?.userRating || 0}
/>
)}
</>
);
};
const VolumeButton = () => {
const { bindings } = useHotkeySettings();
const volume = usePlayerVolume();
const muted = usePlayerMuted();
const { volumeWheelStep } = useGeneralSettings();
const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
const { mediaToggleMute, setVolume } = usePlayer();
const isMinWidth = useMediaQuery('(max-width: 480px)');
const handleVolumeDown = useCallback(() => {
setVolume(volume - 1);
}, [setVolume, volume]);
@@ -122,10 +283,6 @@ export const RightControls = () => {
setVolume(volume + 1);
}, [setVolume, volume]);
const handleMute = useCallback(() => {
mediaToggleMute();
}, [mediaToggleMute]);
const handleVolumeSlider = useCallback(
(e: number) => {
setVolume(e);
@@ -133,6 +290,10 @@ export const RightControls = () => {
[setVolume],
);
const handleMute = useCallback(() => {
mediaToggleMute();
}, [mediaToggleMute]);
const handleVolumeWheel = useCallback(
(e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
let volumeToSet;
@@ -146,132 +307,43 @@ export const RightControls = () => {
},
[setVolume, volume, volumeWheelStep],
);
const handleToggleQueue = () => {
setSideBar({ rightExpanded: !isQueueExpanded });
};
const isSongDefined = Boolean(currentSong?.id);
const showRating =
isSongDefined &&
(server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC);
useHotkeys([
[bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
[bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
[bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
[bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
[
bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
() => handleAddToFavorites(currentSong),
],
[
bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
() => handleRemoveFromFavorites(currentSong),
],
[
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.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
[bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
[bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
[bindings.rate3.isGlobal ? '' : bindings.rate3.hotkey, () => handleUpdateRating(3)],
[bindings.rate4.isGlobal ? '' : bindings.rate4.hotkey, () => handleUpdateRating(4)],
[bindings.rate5.isGlobal ? '' : bindings.rate5.hotkey, () => handleUpdateRating(5)],
]);
return (
<Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
<Group h="calc(100% / 3)">
{showRating && (
<Rating
onChange={handleUpdateRating}
size="xs"
value={currentSong?.userRating || 0}
/>
)}
</Group>
<Group align="center" gap="xs" wrap="nowrap">
<PlayerConfig />
<ActionIcon
icon="favorite"
iconProps={{
fill: currentSong?.userFavorite ? 'primary' : undefined,
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
handleToggleFavorite(currentSong);
}}
size="sm"
tooltip={{
label: currentSong?.userFavorite
? t('player.unfavorite', { postProcess: 'titleCase' })
: t('player.favorite', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="subtle"
/>
<ActionIcon
icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
iconProps={{
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
handleToggleQueue();
}}
size="sm"
tooltip={{
label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="subtle"
/>
<ActionIcon
icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
iconProps={{
color: muted ? 'muted' : undefined,
size: 'xl',
}}
onClick={(e) => {
e.stopPropagation();
handleMute();
}}
<>
<ActionIcon
icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
iconProps={{
color: muted ? 'muted' : undefined,
size: 'xl',
}}
onClick={(e) => {
e.stopPropagation();
handleMute();
}}
onWheel={handleVolumeWheel}
size="sm"
tooltip={{
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 0,
}}
variant="subtle"
/>
{!isMinWidth ? (
<CustomPlayerbarSlider
max={100}
min={0}
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
size="sm"
tooltip={{
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 0,
}}
variant="subtle"
size={6}
value={volume}
w={volumeWidth}
/>
{!isMinWidth ? (
<CustomPlayerbarSlider
max={100}
min={0}
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
size={6}
value={volume}
w={volumeWidth}
/>
) : null}
</Group>
<Group h="calc(100% / 3)" />
</Flex>
) : null}
</>
);
};
src/renderer/features/player/hooks/use-scrobble.ts
+1 -1
View File
@@ -60,7 +60,7 @@ const checkScrobbleConditions = (args: {
export const useScrobble = () => {
const scrobbleSettings = usePlaybackSettings().scrobble;
const isScrobbleEnabled = scrobbleSettings?.enabled;
const isPrivateModeEnabled = useAppStore().privateMode;
const isPrivateModeEnabled = useAppStore((state) => state.privateMode);
const sendScrobble = useSendScrobble();
const [isCurrentSongScrobbled, setIsCurrentSongScrobbled] = useState(false);
src/renderer/features/shared/components/library-header.tsx
+1
View File
@@ -100,6 +100,7 @@ export const LibraryHeader = forwardRef(
<Image
alt="cover"
className={styles.image}
containerClassName={styles.image}
loading="eager"
onError={onImageError}
src={imageUrl || ''}
src/renderer/features/shared/mutations/favorite-optimistic-updates.ts
+141 -3
View File
@@ -1,6 +1,7 @@
import { QueryClient } from '@tanstack/react-query';
import { queryKeys } from '/@/renderer/api/query-keys';
import { infiniteLoaderDataQueryKey } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
import {
Album,
AlbumArtist,
@@ -8,7 +9,6 @@ import {
AlbumArtistListResponse,
AlbumDetailResponse,
AlbumListResponse,
Artist,
ArtistListResponse,
FavoriteArgs,
LibraryItem,
@@ -151,6 +151,52 @@ export const applyFavoriteOptimisticUpdates = (
});
}
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
variables.apiClientProps.serverId,
LibraryItem.ALBUM,
);
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ALBUM_ARTIST: {
@@ -271,6 +317,52 @@ export const applyFavoriteOptimisticUpdates = (
});
}
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
variables.apiClientProps.serverId,
LibraryItem.ALBUM_ARTIST,
);
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ARTIST: {
@@ -291,7 +383,7 @@ export const applyFavoriteOptimisticUpdates = (
if (prev) {
return {
...prev,
items: prev.items.map((item: Artist) => {
items: prev.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
@@ -332,7 +424,7 @@ export const applyFavoriteOptimisticUpdates = (
pages: prev.pages.map((page: ArtistListResponse) => {
return {
...page,
items: page.items.map((item: Artist) => {
items: page.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
@@ -349,6 +441,52 @@ export const applyFavoriteOptimisticUpdates = (
});
}
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
variables.apiClientProps.serverId,
LibraryItem.ARTIST,
);
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.PLAYLIST_SONG:
src/renderer/features/shared/mutations/rating-optimistic-updates.ts
+146 -3
View File
@@ -10,7 +10,6 @@ import {
AlbumArtistListResponse,
AlbumDetailResponse,
AlbumListResponse,
Artist,
ArtistListResponse,
LibraryItem,
SetRatingArgs,
@@ -120,6 +119,54 @@ export const applyRatingOptimisticUpdates = (
});
}
// Update infinite loader custom query keys
const infiniteLoaderQueryKey = [
variables.apiClientProps.serverId,
'item-list-infinite-loader',
LibraryItem.ALBUM,
];
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ALBUM_ARTIST: {
@@ -206,6 +253,54 @@ export const applyRatingOptimisticUpdates = (
});
}
// Update infinite loader custom query keys
const infiniteLoaderQueryKey = [
variables.apiClientProps.serverId,
'item-list-infinite-loader',
LibraryItem.ALBUM_ARTIST,
];
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ARTIST: {
@@ -223,7 +318,7 @@ export const applyRatingOptimisticUpdates = (
queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
return {
...prev,
items: prev.items.map((item: Artist) => {
items: prev.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
@@ -254,7 +349,7 @@ export const applyRatingOptimisticUpdates = (
pages: prev.pages.map((page: ArtistListResponse) => {
return {
...page,
items: page.items.map((item: Artist) => {
items: page.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
@@ -268,6 +363,54 @@ export const applyRatingOptimisticUpdates = (
});
}
// Update infinite loader custom query keys
const infiniteLoaderQueryKey = [
variables.apiClientProps.serverId,
'item-list-infinite-loader',
LibraryItem.ARTIST,
];
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.PLAYLIST_SONG:
src/renderer/features/sidebar/components/server-selector.tsx
+3 -6
View File
@@ -9,7 +9,7 @@ import NavidromeLogo from '/@/renderer/features/servers/assets/navidrome.png';
import OpenSubsonicLogo from '/@/renderer/features/servers/assets/opensubsonic.png';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/server-selector-items';
import { useCurrentServer } from '/@/renderer/store';
import { useAppStore, useCurrentServer } from '/@/renderer/store';
import { hasFeature } from '/@/shared/api/utils';
import { Box } from '/@/shared/components/box/box';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
@@ -20,13 +20,10 @@ import { Text } from '/@/shared/components/text/text';
import { ServerType } from '/@/shared/types/domain-types';
import { ServerFeature } from '/@/shared/types/features-types';
interface ServerSelectorProps {
showImage?: boolean;
}
export const ServerSelector = ({ showImage = false }: ServerSelectorProps) => {
export const ServerSelector = () => {
const { t } = useTranslation();
const currentServer = useCurrentServer();
const showImage = useAppStore((state) => state.sidebar.image);
const { data: musicFolders } = useQuery(
currentServer
src/renderer/features/sidebar/components/sidebar.tsx
+105 -96
View File
@@ -15,11 +15,11 @@ import {
SidebarSharedPlaylistList,
} from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
import {
useAppStore,
useAppStoreActions,
useFullScreenPlayerStore,
usePlayerSong,
useSetFullScreenPlayerStore,
useSidebarStore,
} from '/@/renderer/store';
import {
SidebarItemType,
@@ -38,10 +38,8 @@ import { Platform } from '/@/shared/types/types';
export const Sidebar = () => {
const { t } = useTranslation();
const sidebar = useSidebarStore();
const { setSideBar } = useAppStoreActions();
const { sidebarPlaylistList } = useGeneralSettings();
const currentSong = usePlayerSong();
const translatedSidebarItemMap = useMemo(
() => ({
@@ -59,36 +57,6 @@ export const Sidebar = () => {
[t],
);
const upsizedImageUrl = currentSong?.imageUrl
?.replace(/size=\d+/, 'size=450')
.replace(/width=\d+/, 'width=450')
.replace(/height=\d+/, 'height=450');
const showImage = sidebar.image;
const isSongDefined = Boolean(currentSong?.id);
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const expandFullScreenPlayer = () => {
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
const handleToggleContextMenu = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
if (!currentSong) {
return;
}
if (isSongDefined && !isFullScreenPlayerExpanded) {
ContextMenuController.call({
cmd: { items: [currentSong!], type: LibraryItem.SONG },
event: e,
});
}
};
const { sidebarItems } = useGeneralSettings();
const { windowBarStyle } = useWindowSettings();
@@ -164,69 +132,110 @@ export const Sidebar = () => {
</Accordion>
</ScrollArea>
<motion.div className={styles.serverSelectorWrapper} layout>
<ServerSelector showImage={showImage} />
<ServerSelector />
</motion.div>
<AnimatePresence initial={false} mode="popLayout">
{showImage && (
<motion.div
animate={{ opacity: 1, y: 0 }}
className={styles.imageContainer}
exit={{ opacity: 0, y: 200 }}
initial={{ opacity: 0, y: 200 }}
key="sidebar-image"
onClick={expandFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
style={
{
'--sidebar-image-height': sidebar.leftWidth,
} as CSSProperties
}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
{upsizedImageUrl ? (
<img
className={styles.sidebarImage}
loading="eager"
src={upsizedImageUrl}
/>
) : (
<ImageUnloader />
)}
</Tooltip>
<ActionIcon
icon="arrowDownS"
iconProps={{
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
setSideBar({ image: false });
}}
opacity={0.8}
radius="md"
style={{
cursor: 'default',
position: 'absolute',
right: '1rem',
top: '1rem',
}}
tooltip={{
label: t('common.collapse', {
postProcess: 'titleCase',
}),
openDelay: 500,
}}
/>
</motion.div>
)}
</AnimatePresence>
<SidebarImage />
</div>
);
};
const SidebarImage = () => {
const { t } = useTranslation();
const showImage = useAppStore((state) => state.sidebar.image);
const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
const { setSideBar } = useAppStoreActions();
const currentSong = usePlayerSong();
const upsizedImageUrl = currentSong?.imageUrl
?.replace(/size=\d+/, 'size=450')
.replace(/width=\d+/, 'width=450')
.replace(/height=\d+/, 'height=450');
const isSongDefined = Boolean(currentSong?.id);
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const expandFullScreenPlayer = () => {
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
const handleToggleContextMenu = (e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
if (!currentSong) {
return;
}
if (isSongDefined && !isFullScreenPlayerExpanded) {
ContextMenuController.call({
cmd: { items: [currentSong!], type: LibraryItem.SONG },
event: e,
});
}
};
return (
<AnimatePresence initial={false} mode="popLayout">
{showImage && (
<motion.div
animate={{ opacity: 1, y: 0 }}
className={styles.imageContainer}
exit={{ opacity: 0, y: 200 }}
initial={{ opacity: 0, y: 200 }}
key="sidebar-image"
onClick={expandFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
style={
{
'--sidebar-image-height': leftWidth,
} as CSSProperties
}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
{upsizedImageUrl ? (
<img
className={styles.sidebarImage}
loading="eager"
src={upsizedImageUrl}
/>
) : (
<ImageUnloader />
)}
</Tooltip>
<ActionIcon
icon="arrowDownS"
iconProps={{
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
setSideBar({ image: false });
}}
opacity={0.8}
radius="md"
style={{
cursor: 'default',
position: 'absolute',
right: '1rem',
top: '1rem',
}}
tooltip={{
label: t('common.collapse', {
postProcess: 'titleCase',
}),
openDelay: 500,
}}
/>
</motion.div>
)}
</AnimatePresence>
);
};
src/renderer/features/titlebar/components/app-menu.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { Link, useNavigate } from 'react-router';
import packageJson from '../../../../../package.json';
import { openSettingsModal } from '/@/renderer/features/settings/utils/open-settings-modal';
import { useAppStore, useAppStoreActions, useSidebarStore } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store';
import { DropdownMenu, MenuItemProps } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Icon } from '/@/shared/components/icon/icon';
import { toast } from '/@/shared/components/toast/toast';
@@ -67,8 +67,8 @@ interface RegularMenuItem extends BaseMenuItem {
export const AppMenu = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const { collapsed } = useSidebarStore();
const { privateMode } = useAppStore();
const collapsed = useAppStore((state) => state.sidebar.collapsed);
const privateMode = useAppStore((state) => state.privateMode);
const { setPrivateMode, setSideBar } = useAppStoreActions();
const handleBrowserDevTools = () => {
src/renderer/hooks/use-fast-average-color.tsx
+27 -4
View File
@@ -43,6 +43,7 @@ export const useFastAverageColor = (args: {
}) => {
const { algorithm, default: defaultColor, id, src, srcLoaded } = args;
const idRef = useRef<string | undefined>(id);
const processingSrcRef = useRef<null | string | undefined>(null);
const [isLoading, setIsLoading] = useState(false);
@@ -59,12 +60,23 @@ export const useFastAverageColor = (args: {
useEffect(() => {
let isMounted = true;
let fac: FastAverageColor | null = null;
let timeoutId: NodeJS.Timeout | null = null;
// Reset loading state when src changes or srcLoaded becomes false
if (!src || !srcLoaded) {
setIsLoading(false);
processingSrcRef.current = null;
}
if (src && srcLoaded) {
processingSrcRef.current = src;
setIsLoading(true);
setTimeout(() => {
if (!isMounted) return;
timeoutId = setTimeout(() => {
// Check if src has changed since we started processing
if (!isMounted || processingSrcRef.current !== src) {
return;
}
fac = new FastAverageColor();
fac.getColorAsync(src, {
@@ -73,7 +85,8 @@ export const useFastAverageColor = (args: {
mode: 'speed',
})
.then((color) => {
if (isMounted) {
// Only update if this is still the current src being processed
if (isMounted && processingSrcRef.current === src) {
idRef.current = id;
setBackground({
background: color.rgb,
@@ -81,6 +94,7 @@ export const useFastAverageColor = (args: {
isLight: color.isLight,
});
setIsLoading(false);
processingSrcRef.current = null;
}
if (fac) {
fac.destroy();
@@ -88,7 +102,8 @@ export const useFastAverageColor = (args: {
}
})
.catch((e) => {
if (isMounted) {
// Only update if this is still the current src being processed
if (isMounted && processingSrcRef.current === src) {
console.error('Error fetching average color', e);
idRef.current = id;
setBackground({
@@ -97,6 +112,7 @@ export const useFastAverageColor = (args: {
isLight: false,
});
setIsLoading(false);
processingSrcRef.current = null;
}
if (fac) {
fac.destroy();
@@ -112,11 +128,18 @@ export const useFastAverageColor = (args: {
isDark: true,
isLight: false,
});
setIsLoading(false);
processingSrcRef.current = null;
}
}
return () => {
isMounted = false;
processingSrcRef.current = null;
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
if (fac) {
fac.destroy();
fac = null;
src/renderer/layouts/default-layout/left-sidebar.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import styles from './left-sidebar.module.css';
import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
import { CollapsedSidebar } from '/@/renderer/features/sidebar/components/collapsed-sidebar';
import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
import { useSidebarStore } from '/@/renderer/store';
import { useAppStore } from '/@/renderer/store';
interface LeftSidebarProps {
isResizing: boolean;
@@ -14,7 +14,7 @@ interface LeftSidebarProps {
export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) => {
const sidebarRef = useRef<HTMLDivElement | null>(null);
const { collapsed } = useSidebarStore();
const collapsed = useAppStore((state) => state.sidebar.collapsed);
return (
<aside className={styles.container} id="sidebar">
src/renderer/layouts/default-layout/main-content.tsx
+11 -2
View File
@@ -2,13 +2,14 @@ import clsx from 'clsx';
import { motion } from 'motion/react';
import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
import { Outlet } from 'react-router';
import { shallow } from 'zustand/shallow';
import styles from './main-content.module.css';
import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
import { useAppStoreActions, useSidebarStore } from '/@/renderer/store';
import { useAppStore, useAppStoreActions } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -16,7 +17,15 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
const MINIMUM_SIDEBAR_WIDTH = 260;
export const MainContent = ({ shell }: { shell?: boolean }) => {
const { collapsed, leftWidth, rightExpanded, rightWidth } = useSidebarStore();
const { collapsed, leftWidth, rightExpanded, rightWidth } = useAppStore(
(state) => ({
collapsed: state.sidebar.collapsed,
leftWidth: state.sidebar.leftWidth,
rightExpanded: state.sidebar.rightExpanded,
rightWidth: state.sidebar.rightWidth,
}),
shallow,
);
const { setSideBar } = useAppStoreActions();
const { sideQueueType } = useGeneralSettings();
const [isResizing, setIsResizing] = useState(false);
src/renderer/layouts/default-layout/right-sidebar.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import styles from './right-sidebar.module.css';
import { SidebarPlayQueue } from '/@/renderer/features/now-playing/components/sidebar-play-queue';
import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
import { useGeneralSettings, useSidebarStore } from '/@/renderer/store';
import { useAppStore, useGeneralSettings } from '/@/renderer/store';
// const queueDrawerVariants: Variants = {
// closed: (windowBarStyle) => ({
@@ -54,7 +54,7 @@ export const RightSidebar = forwardRef(
{ isResizing: isResizingRight, startResizing }: RightSidebarProps,
ref: Ref<HTMLDivElement>,
) => {
const { rightExpanded } = useSidebarStore();
const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
const { sideQueueType } = useGeneralSettings();
return (
src/renderer/layouts/default-layout/side-drawer-queue.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import styles from './side-drawer-queue.module.css';
import { DrawerPlayQueue } from '/@/renderer/features/now-playing/components/drawer-play-queue';
import { AppRoute } from '/@/renderer/router/routes';
import { useAppStore, useSidebarStore } from '/@/renderer/store';
import { useAppStore } from '/@/renderer/store';
import { Icon } from '/@/shared/components/icon/icon';
import { useDisclosure } from '/@/shared/hooks/use-disclosure';
import { useTimeout } from '/@/shared/hooks/use-timeout';
@@ -66,7 +66,7 @@ const queueDrawerButtonVariants: Variants = {
export const SideDrawerQueue = () => {
const location = useLocation();
const [drawer, drawerHandler] = useDisclosure(false);
const { rightExpanded } = useSidebarStore();
const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);
src/renderer/layouts/window-bar.tsx
+6 -3
View File
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import isElectron from 'is-electron';
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
import appIcon from '../../../assets/icons/32x32.png';
@@ -124,7 +124,7 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
export const WindowBar = () => {
const { windowBarStyle } = useWindowSettings();
const playerStatus = usePlayerStatus();
const { privateMode } = useAppStore();
const privateMode = useAppStore((state) => state.privateMode);
const handleMinimize = () => minimize();
const { currentSong, index, queueLength } = usePlayerData();
@@ -150,10 +150,13 @@ export const WindowBar = () => {
? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName} — Feishin` : ''}`
: 'Feishin'
}${privateMode ? ` ${privateModeString}` : ''}`;
document.title = title;
return title;
}, [currentSong?.artistName, currentSong?.name, index, playerStatus, privateMode, queueLength]);
useEffect(() => {
document.title = title;
}, [title]);
if (windowBarStyle === Platform.WEB) {
return null;
}
src/renderer/store/player.store.ts
+14 -15
View File
@@ -1,9 +1,9 @@
import merge from 'lodash/merge';
import { nanoid } from 'nanoid';
import { create } from 'zustand';
import { createJSONStorage, persist, subscribeWithSelector } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import { useShallow } from 'zustand/react/shallow';
import { createWithEqualityFn } from 'zustand/traditional';
import { createSelectors } from '/@/renderer/lib/zustand';
import { useSettingsStore } from '/@/renderer/store/settings.store';
@@ -256,7 +256,7 @@ const initialState: State = {
},
};
export const usePlayerStoreBase = create<PlayerState>()(
export const usePlayerStoreBase = createWithEqualityFn<PlayerState>()(
persist(
subscribeWithSelector(
immer((set, get) => ({
@@ -2243,19 +2243,18 @@ export const usePlayerSpeed = () => {
};
export const usePlayerSong = () => {
return usePlayerStoreBase((state) => {
const queue = state.getQueue();
let index = state.player.index;
// If shuffle is enabled, map shuffled position to actual queue position
if (state.player.shuffle === PlayerShuffle.TRACK && state.queue.shuffled.length > 0) {
if (index >= 0 && index < state.queue.shuffled.length) {
index = state.queue.shuffled[index];
}
}
return queue.items[index];
});
return usePlayerStoreBase(
(state) => {
return state.getCurrentSong();
},
(prev, next) => {
return (
prev?._uniqueId === next?._uniqueId &&
prev?.userFavorite === next?.userFavorite &&
prev?.userRating === next?.userRating
);
},
);
};
export const usePlayerNum = () => {
src/shared/components/image/image.tsx
+15 -3
View File
@@ -1,5 +1,12 @@
import clsx from 'clsx';
import { ForwardedRef, forwardRef, HTMLAttributes, type ImgHTMLAttributes, ReactNode } from 'react';
import {
ForwardedRef,
forwardRef,
HTMLAttributes,
type ImgHTMLAttributes,
memo,
ReactNode,
} from 'react';
import { Img } from 'react-image';
import styles from './image.module.css';
@@ -34,10 +41,10 @@ interface ImageUnloaderProps {
export const FALLBACK_SVG =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
export function Image({
export function BaseImage({
className,
containerClassName,
enableAnimation,
enableAnimation = false,
imageContainerProps,
includeLoader = true,
includeUnloader = true,
@@ -62,6 +69,8 @@ export function Image({
{children}
</ImageContainer>
)}
decoding="async"
fetchPriority={inViewport ? 'high' : 'low'}
loader={
includeLoader ? (
<ImageContainer className={containerClassName}>
@@ -69,6 +78,7 @@ export function Image({
</ImageContainer>
) : null
}
loading={inViewport ? 'eager' : 'lazy'}
src={inViewport ? src : FALLBACK_SVG}
unloader={
includeUnloader ? (
@@ -89,6 +99,8 @@ export function Image({
);
}
export const Image = memo(BaseImage);
const ImageContainer = forwardRef(
(
{ children, className, enableAnimation, ...props }: ImageContainerProps,
src/shared/components/skeleton/skeleton.tsx
+6 -3
View File
@@ -1,6 +1,5 @@
import type { CSSProperties } from 'react';
import clsx from 'clsx';
import { type CSSProperties, memo } from 'react';
import RSkeleton from 'react-loading-skeleton';
import styles from './skeleton.module.css';
@@ -22,7 +21,7 @@ interface SkeletonProps {
width?: number | string;
}
export function Skeleton({
export function BaseSkeleton({
baseColor,
borderRadius,
className,
@@ -54,3 +53,7 @@ export function Skeleton({
/>
);
}
export const Skeleton = memo(BaseSkeleton);
Skeleton.displayName = 'Skeleton';