vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-08-08 13:23:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

support sidebar player in now playing route (#2134)

Browse Source 
- add toggle to show/hide the queue in the sidebarplayer
This commit is contained in:
jeffvli
2026-07-23 22:16:01 -07:00
parent 04b1f6595a
commit 207df236a3
12 changed files with 273 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/analytics/hooks/use-app-tracker.ts
+2
View File
@@ -93,6 +93,7 @@ type SettingsProperties = {
'settings.scrobble.enabled': boolean;
'settings.scrobble.notify': boolean;
'settings.showLyricsInSidebar': boolean;
'settings.showQueueInSidebar': boolean;
'settings.showVisualizerInSidebar': boolean;
'settings.sideQueueType': SideQueueType;
'settings.skipButtons': boolean;
@@ -184,6 +185,7 @@ const getSettingsProperties = (): SettingsProperties => {
'settings.scrobble.enabled': settings.playback.scrobble.enabled,
'settings.scrobble.notify': ignoreWeb(settings.playback.scrobble.notify),
'settings.showLyricsInSidebar': settings.general.showLyricsInSidebar,
'settings.showQueueInSidebar': settings.general.showQueueInSidebar,
'settings.showVisualizerInSidebar': settings.general.showVisualizerInSidebar,
'settings.sideQueueType': settings.general.sideQueueType,
// 'settings.skipBackwardSeconds': settings.general.skipButtons.skipBackwardSeconds,
src/renderer/features/now-playing/components/now-playing-header.tsx
-16
View File
@@ -1,16 +0,0 @@
import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
export const NowPlayingHeader = () => {
const { t } = useTranslation();
return (
<PageHeader>
<LibraryHeaderBar ignoreMaxWidth>
<LibraryHeaderBar.Title>{t('page.sidebar.nowPlaying')}</LibraryHeaderBar.Title>
</LibraryHeaderBar>
</PageHeader>
);
};
src/renderer/features/now-playing/components/sidebar-play-queue.module.css
+22
View File
@@ -8,6 +8,24 @@
overflow: hidden;
}
.panels-container {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.queue-only {
flex: 1;
min-height: 0;
}
.queue-only-content {
flex: 1;
min-height: 0;
}
.lyrics-section {
position: relative;
display: flex;
@@ -40,6 +58,10 @@
pointer-events: none;
}
.visualizer-overlay-dimmed {
opacity: 0.2;
}
.visualizer-section {
position: relative;
display: flex;
src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+73 -50
View File
@@ -1,8 +1,9 @@
import { useQuery } from '@tanstack/react-query';
import clsx from 'clsx';
import isElectron from 'is-electron';
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
// import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels';
import { useLocation } from 'react-router';
import { Pane, SplitPane, usePersistence } from 'react-split-pane';
import styles from './sidebar-play-queue.module.css';
@@ -12,6 +13,7 @@ import { lyricsQueries } from '/@/renderer/features/lyrics/api/lyrics-api';
import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
import { AppRoute } from '/@/renderer/router/routes';
import {
useCombinedLyricsAndVisualizer,
useFullScreenPlayerStore,
@@ -20,6 +22,7 @@ import {
useSettingsStore,
useSettingsStoreActions,
useShowLyricsInSidebar,
useShowQueueInSidebar,
useShowVisualizerInSidebar,
useSidebarPanelOrder,
useWindowSettings,
@@ -46,6 +49,7 @@ const ButterchurnVisualizer = lazy(() =>
export const SidebarPlayQueue = () => {
const tableRef = useRef<ItemListHandle | null>(null);
const [search, setSearch] = useState<string | undefined>(undefined);
const location = useLocation();
const {
expanded: isFullScreenPlayerExpanded,
visualizerExpanded: isFullScreenVisualizerExpanded,
@@ -53,12 +57,14 @@ export const SidebarPlayQueue = () => {
const [shouldRender, setShouldRender] = useState(!isFullScreenPlayerExpanded);
const combinedLyricsAndVisualizer = useCombinedLyricsAndVisualizer();
const showLyricsInSidebar = useShowLyricsInSidebar();
const showQueueInSidebar = useShowQueueInSidebar();
const showVisualizerInSidebar = useShowVisualizerInSidebar();
const sidebarPanelOrder = useSidebarPanelOrder();
const { webAudio } = usePlaybackSettings();
const { windowBarStyle } = useWindowSettings();
const showVisualizer = showVisualizerInSidebar && webAudio;
const showPanel = showLyricsInSidebar || showVisualizer;
const showQueue = showQueueInSidebar && location.pathname !== AppRoute.NOW_PLAYING;
const shouldAddTopMargin = isElectron() && windowBarStyle === Platform.WEB;
@@ -90,7 +96,7 @@ export const SidebarPlayQueue = () => {
if (combinedLyricsAndVisualizer) {
// When combined, use the order from settings but filter to only show queue and lyrics (combined)
const visiblePanels = sidebarPanelOrder.filter((panel) => {
if (panel === 'queue') return true;
if (panel === 'queue') return showQueue;
if (panel === 'lyrics') return showLyricsInSidebar || showVisualizer;
return false;
});
@@ -98,14 +104,20 @@ export const SidebarPlayQueue = () => {
}
const visiblePanels = sidebarPanelOrder.filter((panel) => {
if (panel === 'queue') return true;
if (panel === 'queue') return showQueue;
if (panel === 'lyrics') return showLyricsInSidebar;
if (panel === 'visualizer') return showVisualizer;
return false;
});
return visiblePanels;
}, [combinedLyricsAndVisualizer, showLyricsInSidebar, showVisualizer, sidebarPanelOrder]);
}, [
combinedLyricsAndVisualizer,
showLyricsInSidebar,
showQueue,
showVisualizer,
sidebarPanelOrder,
]);
const renderPanel = (panelType: SidebarPanelType) => {
if (panelType === 'queue') {
@@ -150,6 +162,25 @@ export const SidebarPlayQueue = () => {
return undefined;
}
const hasQueue = orderedPanels.includes('queue');
// Without a queue to absorb remaining space, fill the sidebar height
if (!hasQueue) {
if (orderedPanels.length === 1 || index === orderedPanels.length - 1) {
return undefined;
}
if (
defaultLayout &&
Array.isArray(defaultLayout) &&
defaultLayout[index] !== undefined
) {
return defaultLayout[index];
}
return 100;
}
// If defaultLayout exists and has saved sizes, use them
if (
defaultLayout &&
@@ -195,49 +226,42 @@ export const SidebarPlayQueue = () => {
<Stack gap={0} h="100%" id="sidebar-play-queue-container" pos="relative" w="100%">
{shouldAddTopMargin && <div className={styles.draggableRegion} />}
{showPanel ? (
<SplitPane
direction="vertical"
dividerClassName={styles.resizeHandle}
onResize={onLayoutChange}
style={{
display: 'flex',
flex: 1,
flexDirection: 'column',
minHeight: 0,
overflow: 'hidden',
}}
>
{orderedPanels.map((panel, index) => (
<Pane key={panel} size={getPanelSize(panel, index)}>
{renderPanel(panel)}
</Pane>
))}
</SplitPane>
orderedPanels.length === 1 ? (
<div className={styles.panelsContainer}>{renderPanel(orderedPanels[0])}</div>
) : (
<SplitPane
className={styles.panelsContainer}
direction="vertical"
dividerClassName={styles.resizeHandle}
onResize={onLayoutChange}
>
{orderedPanels.map((panel, index) => (
<Pane key={panel} size={getPanelSize(panel, index)}>
{renderPanel(panel)}
</Pane>
))}
</SplitPane>
)
) : (
<Stack
gap={0}
style={{
flex: 1,
minHeight: 0,
}}
w="100%"
>
<PlayQueueListControls
handleSearch={setSearch}
searchTerm={search}
tableRef={tableRef}
type={ItemListKey.SIDE_QUEUE}
/>
<Flex direction="column" style={{ flex: 1, minHeight: 0 }}>
<div className={styles.playQueueSection}>
<PlayQueue
listKey={ItemListKey.SIDE_QUEUE}
ref={tableRef}
searchTerm={search}
/>
</div>
</Flex>
</Stack>
showQueue && (
<Stack className={styles.queueOnly} gap={0} w="100%">
<PlayQueueListControls
handleSearch={setSearch}
searchTerm={search}
tableRef={tableRef}
type={ItemListKey.SIDE_QUEUE}
/>
<Flex className={styles.queueOnlyContent} direction="column">
<div className={styles.playQueueSection}>
<PlayQueue
listKey={ItemListKey.SIDE_QUEUE}
ref={tableRef}
searchTerm={search}
/>
</div>
</Flex>
</Stack>
)
)}
</Stack>
);
@@ -423,10 +447,9 @@ const CombinedLyricsAndVisualizerPanel = () => {
{showLyricsInSidebar && <Lyrics fadeOutNoLyricsMessage={true} settingsKey="sidebar" />}
{showVisualizer && (
<div
className={styles.visualizerOverlay}
style={{
opacity: hasLyrics && showLyricsInSidebar ? 0.2 : 1,
}}
className={clsx(styles.visualizerOverlay, {
[styles.visualizerOverlayDimmed]: hasLyrics && showLyricsInSidebar,
})}
>
<Suspense fallback={<></>}>
{visualizerType === 'butterchurn' ? (
src/renderer/features/now-playing/routes/now-playing-route.tsx
+1 -19
View File
@@ -1,36 +1,18 @@
import { useEffect, useRef, useState } from 'react';
import { useRef, useState } from 'react';
import { ItemListHandle } from '/@/renderer/components/item-list/types';
import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { useAppStore, useAppStoreActions } from '/@/renderer/store';
import { ItemListKey } from '/@/shared/types/types';
const NowPlayingRoute = () => {
const [search, setSearch] = useState<string | undefined>(undefined);
const { setSideBar } = useAppStoreActions();
const tableRef = useRef<ItemListHandle | null>(null);
useEffect(() => {
const wasExpanded = useAppStore.getState().sidebar.rightExpanded;
// On page enter, set rightExpanded to false
setSideBar({ rightExpanded: false });
return () => {
if (wasExpanded) {
// On page exit, set rightExpanded to true if it was previously expanded
setSideBar({ rightExpanded: true });
}
};
}, [setSideBar]);
return (
<AnimatedPage>
<NowPlayingHeader />
<PlayQueueListControls
handleSearch={setSearch}
searchTerm={search}
src/renderer/features/player/components/player-config.tsx
+99 -59
View File
@@ -6,7 +6,10 @@ import {
getDefaultAudioDevice,
useAudioDevices,
} from '/@/renderer/features/settings/components/playback/audio-settings';
import { ListConfigTable } from '/@/renderer/features/shared/components/list-config-menu';
import {
ListConfigBooleanControl,
ListConfigTable,
} from '/@/renderer/features/shared/components/list-config-menu';
import {
usePlaybackType,
usePlayerActions,
@@ -22,16 +25,18 @@ import {
useSettingsStore,
useSettingsStoreActions,
useShowLyricsInSidebar,
useShowQueueInSidebar,
useShowVisualizerInSidebar,
} from '/@/renderer/store/settings.store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
import { Group } from '/@/shared/components/group/group';
import { Paper } from '/@/shared/components/paper/paper';
import { Popover } from '/@/shared/components/popover/popover';
import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
import { Select } from '/@/shared/components/select/select';
import { Slider } from '/@/shared/components/slider/slider';
import { Switch } from '/@/shared/components/switch/switch';
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { CrossfadeStyle, PlayerStatus, PlayerStyle, PlayerType } from '/@/shared/types/types';
@@ -41,8 +46,10 @@ export const PlayerConfig = () => {
const { t } = useTranslation();
const preservePitch = useSettingsStore((state) => state.playback.preservePitch);
const showLyricsInSidebar = useShowLyricsInSidebar();
const showQueueInSidebar = useShowQueueInSidebar();
const showVisualizerInSidebar = useShowVisualizerInSidebar();
const combinedLyricsAndVisualizer = useCombinedLyricsAndVisualizer();
const { transitionType } = usePlayerProperties();
const playbackSettings = usePlaybackSettings();
const { setSettings } = useSettingsStoreActions();
@@ -56,8 +63,8 @@ export const PlayerConfig = () => {
[playbackSettings, setSettings],
);
const options = useMemo(() => {
const allOptions = [
const audioOptions = useMemo(
() => [
{
component: <AudioPlayerTypeConfig />,
id: 'audioPlayerType',
@@ -68,12 +75,12 @@ export const PlayerConfig = () => {
id: 'audioDevice',
label: t('setting.audioDevice'),
},
{
component: null,
id: 'divider-1',
isDivider: true,
label: '',
},
],
[t],
);
const transitionOptions = useMemo(
() => [
{
component: <TransitionTypeConfig />,
id: 'transitionType',
@@ -82,19 +89,21 @@ export const PlayerConfig = () => {
{
component: <CrossfadeStyleConfig />,
id: 'crossfadeStyle',
isHidden: transitionType !== PlayerStyle.CROSSFADE,
label: t('setting.crossfadeStyle'),
},
{
component: <CrossfadeDurationConfig />,
id: 'crossfadeDuration',
isHidden: transitionType !== PlayerStyle.CROSSFADE,
label: t('setting.crossfadeDuration'),
},
{
component: null,
id: 'divider-2',
isDivider: true,
label: '',
},
],
[t, transitionType],
);
const playbackOptions = useMemo(
() => [
{
component: <PlaybackSpeedSlider />,
id: 'playbackSpeed',
@@ -107,31 +116,44 @@ export const PlayerConfig = () => {
},
{
component: (
<Switch
defaultChecked={preservePitch}
onChange={(e) => setPreservePitch(e.currentTarget.checked)}
/>
<ListConfigBooleanControl onChange={setPreservePitch} value={preservePitch} />
),
id: 'preservePitch',
label: t('setting.preservePitch'),
},
{
component: null,
id: 'divider-3',
isDivider: true,
label: '',
},
],
[preservePitch, setPreservePitch, t],
);
const sidebarOptions = useMemo(
() => [
{
component: (
<Switch
defaultChecked={showLyricsInSidebar}
onChange={(e) => {
<ListConfigBooleanControl
onChange={(value) => {
setSettings({
general: {
showLyricsInSidebar: e.currentTarget.checked,
showQueueInSidebar: value,
},
});
}}
value={showQueueInSidebar}
/>
),
id: 'showQueueInSidebar',
label: t('setting.showQueueInSidebar'),
},
{
component: (
<ListConfigBooleanControl
onChange={(value) => {
setSettings({
general: {
showLyricsInSidebar: value,
},
});
}}
value={showLyricsInSidebar}
/>
),
id: 'showLyricsInSidebar',
@@ -139,15 +161,15 @@ export const PlayerConfig = () => {
},
{
component: (
<Switch
defaultChecked={showVisualizerInSidebar}
onChange={(e) => {
<ListConfigBooleanControl
onChange={(value) => {
setSettings({
general: {
showVisualizerInSidebar: e.currentTarget.checked,
showVisualizerInSidebar: value,
},
});
}}
value={showVisualizerInSidebar}
/>
),
id: 'showVisualizerInSidebar',
@@ -155,35 +177,33 @@ export const PlayerConfig = () => {
},
{
component: (
<Switch
defaultChecked={combinedLyricsAndVisualizer}
onChange={(e) => {
<ListConfigBooleanControl
onChange={(value) => {
setSettings({
general: {
combinedLyricsAndVisualizer: e.currentTarget.checked,
combinedLyricsAndVisualizer: value,
},
});
}}
value={combinedLyricsAndVisualizer}
/>
),
id: 'combinedLyricsAndVisualizer',
label: t('setting.combinedLyricsAndVisualizer'),
},
];
return allOptions;
}, [
t,
preservePitch,
setSettings,
setPreservePitch,
showLyricsInSidebar,
showVisualizerInSidebar,
combinedLyricsAndVisualizer,
]);
],
[
combinedLyricsAndVisualizer,
setSettings,
showLyricsInSidebar,
showQueueInSidebar,
showVisualizerInSidebar,
t,
],
);
return (
<Popover position="top" width={500}>
<Popover position="top" withArrow>
<Popover.Target>
<ActionIcon
icon="mediaSettings"
@@ -199,8 +219,21 @@ export const PlayerConfig = () => {
variant="subtle"
/>
</Popover.Target>
<Popover.Dropdown>
<ListConfigTable options={options} />
<Popover.Dropdown maw={500} miw={320} onClick={(e) => e.stopPropagation()} p="sm">
<Stack gap="sm">
<Paper p="md" radius="md">
<ListConfigTable options={audioOptions} />
</Paper>
<Paper p="md" radius="md">
<ListConfigTable options={transitionOptions} />
</Paper>
<Paper p="md" radius="md">
<ListConfigTable options={playbackOptions} />
</Paper>
<Paper p="md" radius="md">
<ListConfigTable options={sidebarOptions} />
</Paper>
</Stack>
</Popover.Dropdown>
</Popover>
);
@@ -234,6 +267,7 @@ const AudioPlayerTypeConfig = () => {
value: e,
});
}}
variant="filled"
width="100%"
/>
);
@@ -268,6 +302,7 @@ const AudioDeviceConfig = () => {
});
}}
value={audioDeviceId ?? getDefaultAudioDevice(audioDevices, playbackType)}
variant="filled"
width="100%"
/>
);
@@ -331,6 +366,7 @@ const CrossfadeStyleConfig = () => {
setCrossfadeStyle(e as CrossfadeStyle);
}
}}
variant="filled"
width="100%"
/>
);
@@ -406,7 +442,7 @@ export const PlaybackSpeedSlider = () => {
root: {},
}}
value={speed}
w="100%"
w="240px"
/>
);
};
@@ -435,8 +471,9 @@ export const PitchControls = () => {
<Button
aria-label="-1 semitone"
fullWidth
fw={400}
onClick={() => adjustMusicalSpeed(-1)}
size="compact-xs"
size="compact-sm"
>
-1st
</Button>
@@ -444,13 +481,14 @@ export const PitchControls = () => {
<Button
aria-label="-10 cents"
fullWidth
fw={400}
onClick={() => adjustMusicalSpeed(-0.1)}
size="compact-xs"
size="compact-sm"
>
-10ct
</Button>
)}
<Text size="xs" style={{ fontFamily: 'monospace' }} ta="center" w="60px">
<Text size="sm" style={{ fontFamily: 'monospace' }} ta="center">
{speed.toFixed(2)}x {speedToPitch(speed) > 0 && '+'}
{speedToPitch(speed) == 0 && '±'}
{speedToPitch(speed).toFixed(2)}st
@@ -459,8 +497,9 @@ export const PitchControls = () => {
<Button
aria-label="+10 cents"
fullWidth
fw={400}
onClick={() => adjustMusicalSpeed(0.1)}
size="compact-xs"
size="compact-sm"
>
+10ct
</Button>
@@ -468,8 +507,9 @@ export const PitchControls = () => {
<Button
aria-label="+1 semitone"
fullWidth
fw={400}
onClick={() => adjustMusicalSpeed(1)}
size="compact-xs"
size="compact-sm"
>
+1st
</Button>
src/renderer/features/settings/components/general/sidebar-settings.tsx
+19
View File
@@ -309,6 +309,25 @@ export const SidebarSettings = memo(() => {
}),
title: t('setting.sidebarCollapsedNavigation'),
},
{
control: (
<Switch
aria-label="Show play queue in sidebar"
defaultChecked={settings.showQueueInSidebar}
onChange={(e) => {
setSettings({
general: {
showQueueInSidebar: e.currentTarget.checked,
},
});
}}
/>
),
description: t('setting.showQueueInSidebar', {
context: 'description',
}),
title: t('setting.showQueueInSidebar'),
},
{
control: (
<Switch
src/renderer/features/shared/components/list-config-menu.module.css
+17
View File
@@ -0,0 +1,17 @@
.table {
border-radius: 1rem;
}
.th {
width: 50%;
padding: var(--theme-spacing-md) var(--theme-spacing-md) var(--theme-spacing-md) 0;
background-color: initial;
}
.td {
padding: 0;
}
.divider-cell {
padding: var(--theme-spacing-md) 0;
}
src/renderer/features/shared/components/list-config-menu.tsx
+21 -6
View File
@@ -1,6 +1,8 @@
import { ReactNode, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './list-config-menu.module.css';
import i18n from '/@/i18n/i18n';
import { GridConfig } from '/@/renderer/features/shared/components/grid-config';
import { SettingsButton } from '/@/renderer/features/shared/components/settings-button';
@@ -228,13 +230,22 @@ const Config = ({
export const ListConfigTable = ({
options,
}: {
options: { component: ReactNode; id: string; isDivider?: boolean; label: ReactNode | string }[];
options: {
component: ReactNode;
id: string;
isDivider?: boolean;
isHidden?: boolean;
label: ReactNode | string;
}[];
}) => {
return (
<Table
className={styles.table}
classNames={{
td: styles.td,
th: styles.th,
}}
onClick={(e) => e.stopPropagation()}
style={{ borderRadius: '1rem' }}
styles={{ th: { backgroundColor: 'initial', padding: 'var(--theme-spacing-md) 0' } }}
variant="vertical"
withColumnBorders={false}
withRowBorders={false}
@@ -242,10 +253,14 @@ export const ListConfigTable = ({
>
<Table.Tbody>
{options.map((option) => {
if (option.isHidden) {
return null;
}
if (option.isDivider) {
return (
<Table.Tr key={option.id}>
<Table.Td colSpan={2} px={0} py="md">
<Table.Td className={styles.dividerCell} colSpan={2}>
<Divider />
</Table.Td>
</Table.Tr>
@@ -253,8 +268,8 @@ export const ListConfigTable = ({
}
return (
<Table.Tr key={option.id}>
<Table.Th w="50%">{option.label}</Table.Th>
<Table.Td p={0}>{option.component}</Table.Td>
<Table.Th>{option.label}</Table.Th>
<Table.Td>{option.component}</Table.Td>
</Table.Tr>
);
})}
src/renderer/store/env-settings-overrides.ts
+5
View File
@@ -247,6 +247,11 @@ const ENV_SETTING_SPECS: EnvSettingSpec[] = [
path: ['general', 'showLyricsInSidebar'],
type: 'bool',
},
{
key: 'FS_GENERAL_SHOW_QUEUE_IN_SIDEBAR',
path: ['general', 'showQueueInSidebar'],
type: 'bool',
},
{ key: 'FS_GENERAL_SHOW_RATINGS', path: ['general', 'showRatings'], type: 'bool' },
{
key: 'FS_GENERAL_SHOW_VISUALIZER_IN_SIDEBAR',
src/renderer/store/settings.store.ts
+12 -1
View File
@@ -538,6 +538,7 @@ export const GeneralSettingsSchema = z.object({
qobuz: z.boolean(),
resume: z.boolean(),
showLyricsInSidebar: z.boolean(),
showQueueInSidebar: z.boolean(),
showRatings: z.boolean(),
showVisualizerInSidebar: z.boolean(),
sidebarCollapsedNavigation: z.boolean(),
@@ -1314,6 +1315,7 @@ const initialState: SettingsState = {
qobuz: true,
resume: true,
showLyricsInSidebar: true,
showQueueInSidebar: true,
showRatings: true,
showVisualizerInSidebar: true,
sidebarCollapsedNavigation: true,
@@ -2725,10 +2727,16 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
}
}
if (version < 33) {
if (state.general.showQueueInSidebar === undefined) {
state.general.showQueueInSidebar = true;
}
}
return persistedState;
},
name: 'store_settings',
version: 32,
version: 33,
},
),
);
@@ -3002,6 +3010,9 @@ export const useCombinedLyricsAndVisualizer = () =>
export const useShowLyricsInSidebar = () =>
useSettingsStore((state) => state.general.showLyricsInSidebar, shallow);
export const useShowQueueInSidebar = () =>
useSettingsStore((state) => state.general.showQueueInSidebar, shallow);
export const useShowVisualizerInSidebar = () =>
useSettingsStore((state) => state.general.showVisualizerInSidebar, shallow);