diff --git a/package.json b/package.json index 64834bca5..b0d191e40 100644 --- a/package.json +++ b/package.json @@ -122,8 +122,8 @@ "react-image": "^4.1.0", "react-loading-skeleton": "^3.5.0", "react-player": "^2.16.0", - "react-resizable-panels": "^4.0.15", "react-router": "^7.9.6", + "react-split-pane": "^3.0.4", "react-virtualized-auto-sizer": "^1.0.26", "react-window": "1.8.11", "react-window-v2": "npm:react-window@^2.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f87608195..99f7ac667 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -191,12 +191,12 @@ importers: react-player: specifier: ^2.16.0 version: 2.16.0(react@19.1.0) - react-resizable-panels: - specifier: ^4.0.15 - version: 4.0.15(react-dom@19.1.0(react@19.1.0))(react@19.1.0) react-router: specifier: ^7.9.6 version: 7.9.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + react-split-pane: + specifier: ^3.0.4 + version: 3.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0) react-virtualized-auto-sizer: specifier: ^1.0.26 version: 1.0.26(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -4619,12 +4619,6 @@ packages: '@types/react': optional: true - react-resizable-panels@4.0.15: - resolution: {integrity: sha512-+ygM/EI2h4Qc/cl2fasQ2qwOgNfpQwXLNTU5PqhhPerliX+wnbf7ejcqran7lz3BqABzjddf0pJ3j3G/+A0v9Q==} - peerDependencies: - react: ^18.0.0 || ^19.0.0 - react-dom: ^18.0.0 || ^19.0.0 - react-router-dom@7.9.4: resolution: {integrity: sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==} engines: {node: '>=20.0.0'} @@ -4652,6 +4646,13 @@ packages: react-dom: optional: true + react-split-pane@3.0.4: + resolution: {integrity: sha512-+QNayN8lsYhT87z0bH5yAuUocoqHlc3AQnw/+pGXMH2kG2+mSfNAR4fHhEdmweHLFjIyX811hh9sgCkiHXCYag==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-style-singleton@2.2.3: resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==} engines: {node: '>=10'} @@ -10618,11 +10619,6 @@ snapshots: optionalDependencies: '@types/react': 19.2.5 - react-resizable-panels@4.0.15(react-dom@19.1.0(react@19.1.0))(react@19.1.0): - dependencies: - react: 19.1.0 - react-dom: 19.1.0(react@19.1.0) - react-router-dom@7.9.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0): dependencies: react: 19.1.0 @@ -10647,6 +10643,11 @@ snapshots: optionalDependencies: react-dom: 19.1.0(react@19.1.0) + react-split-pane@3.0.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + dependencies: + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + react-style-singleton@2.2.3(@types/react@19.2.5)(react@19.1.0): dependencies: get-nonce: 1.0.1 diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.module.css b/src/renderer/features/now-playing/components/sidebar-play-queue.module.css index 2c029c746..f5f4f5e6c 100644 --- a/src/renderer/features/now-playing/components/sidebar-play-queue.module.css +++ b/src/renderer/features/now-playing/components/sidebar-play-queue.module.css @@ -45,6 +45,7 @@ flex-direction: column; height: 100%; min-height: 0; + max-height: 100%; overflow: hidden; background: var(--theme-colors-background); background-color: var(--theme-colors-background-alternate); @@ -54,12 +55,19 @@ position: relative; flex-shrink: 0; width: 100%; - height: 1px; + height: 4px; cursor: row-resize; - background-color: var(--theme-colors-border); - transition: - background-color 0.2s ease, - height 0.2s ease; + + &:before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 1px; + background: var(--theme-colors-border); + content: ''; + transition: opacity 0.2s ease; + } } .panel-reorder-controls { diff --git a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx index 29260bfd4..9b92e6054 100644 --- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx +++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx @@ -1,7 +1,8 @@ import { useQuery } from '@tanstack/react-query'; import { lazy, Suspense, useCallback, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels'; +// import { Group, Panel, Separator, useDefaultLayout } from 'react-resizable-panels'; +import { Pane, SplitPane, usePersistence } from 'react-split-pane'; import styles from './sidebar-play-queue.module.css'; @@ -51,8 +52,8 @@ export const SidebarPlayQueue = () => { const showPanel = showLyricsInSidebar || showVisualizer; // Persist the layout of the sidebar play queue container - const { defaultLayout, onLayoutChange } = useDefaultLayout({ - id: 'sidebar-play-queue-container', + const [defaultLayout, onLayoutChange] = usePersistence({ + key: 'sidebar-play-queue-container', storage: localStorage, }); @@ -78,12 +79,21 @@ export const SidebarPlayQueue = () => { return visiblePanels; }, [combinedLyricsAndVisualizer, showLyricsInSidebar, showVisualizer, sidebarPanelOrder]); - const renderPanel = (panelType: SidebarPanelType, index: number, totalPanels: number) => { + const renderPanel = (panelType: SidebarPanelType, _index: number, totalPanels: number) => { if (panelType === 'queue') { return ( <> - {index > 0 && } - +
{ searchTerm={search} />
- + ); } @@ -99,15 +109,20 @@ export const SidebarPlayQueue = () => { if (combinedLyricsAndVisualizer && (panelType === 'lyrics' || panelType === 'visualizer')) { return ( <> - {index > 0 && } - 2 ? 25 : 50} - id="combined" key="combined" minSize={20} + size={defaultLayout[0]} + style={{ + display: 'flex', + flexDirection: 'column', + height: '100%', + overflow: 'hidden', + }} > - + ); } @@ -115,15 +130,20 @@ export const SidebarPlayQueue = () => { if (panelType === 'lyrics') { return ( <> - {index > 0 && } - 2 ? 25 : 50} - id="lyrics" key="lyrics" minSize={15} + size={defaultLayout[1]} + style={{ + display: 'flex', + flexDirection: 'column', + height: '100%', + overflow: 'hidden', + }} > - + ); } @@ -131,15 +151,20 @@ export const SidebarPlayQueue = () => { if (panelType === 'visualizer') { return ( <> - {index > 0 && } - 2 ? 25 : 50} - id="visualizer" key="visualizer" minSize={15} + size={defaultLayout[2]} + style={{ + display: 'flex', + flexDirection: 'column', + height: '100%', + overflow: 'hidden', + }} > - + ); } @@ -155,16 +180,16 @@ export const SidebarPlayQueue = () => { type={ItemListKey.SIDE_QUEUE} /> {showPanel ? ( - {orderedPanels.map((panel, index) => renderPanel(panel, index, orderedPanels.length), )} - + ) : (
diff --git a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.module.css b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.module.css index 2c2e5c774..d575c48ab 100644 --- a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.module.css +++ b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.module.css @@ -3,10 +3,14 @@ z-index: 50; width: 100%; height: 100%; + max-height: 100%; margin: auto; + overflow: hidden; canvas { width: 100%; + max-width: 100%; + max-height: 100%; margin: auto; } @@ -26,4 +30,7 @@ .visualizer { width: 100%; height: 100%; + max-width: 100%; + max-height: 100%; + overflow: hidden; } diff --git a/src/renderer/features/visualizer/components/butternchurn/visualizer.module.css b/src/renderer/features/visualizer/components/butternchurn/visualizer.module.css index 36c2e434c..a6ca9e49b 100644 --- a/src/renderer/features/visualizer/components/butternchurn/visualizer.module.css +++ b/src/renderer/features/visualizer/components/butternchurn/visualizer.module.css @@ -3,7 +3,9 @@ z-index: 50; width: 100%; height: 100%; + max-height: 100%; margin: auto; + overflow: hidden; &:hover { .settings-icon { @@ -21,6 +23,8 @@ display: block; width: 100%; height: 100%; + max-width: 100%; + max-height: 100%; } .preset-overlay {