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

replace react-resizable-panels with react-split-pane

Browse Source 
- react-resizable-panels was causing an issue with browser navigation
This commit is contained in:
jeffvli
2025-12-27 00:55:38 -08:00
parent 796e511626
commit f0d22267c3
6 changed files with 90 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -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",
pnpm-lock.yaml
Generated
+15 -14
View File
@@ -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
src/renderer/features/now-playing/components/sidebar-play-queue.module.css
+13 -5
View File
@@ -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 {
src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+50 -25
View File
@@ -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 && <Separator className={styles.resizeHandle} />}
<Panel defaultSize={50} id="queue" key="queue" minSize={20}>
<Pane
defaultSize={50}
key="queue"
minSize={20}
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
}}
>
<div className={styles.playQueueSection}>
<PlayQueue
listKey={ItemListKey.SIDE_QUEUE}
@@ -91,7 +101,7 @@ export const SidebarPlayQueue = () => {
searchTerm={search}
/>
</div>
</Panel>
</Pane>
</>
);
}
@@ -99,15 +109,20 @@ export const SidebarPlayQueue = () => {
if (combinedLyricsAndVisualizer && (panelType === 'lyrics' || panelType === 'visualizer')) {
return (
<>
{index > 0 && <Separator className={styles.resizeHandle} />}
<Panel
<Pane
defaultSize={totalPanels > 2 ? 25 : 50}
id="combined"
key="combined"
minSize={20}
size={defaultLayout[0]}
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
}}
>
<CombinedLyricsAndVisualizerPanel />
</Panel>
</Pane>
</>
);
}
@@ -115,15 +130,20 @@ export const SidebarPlayQueue = () => {
if (panelType === 'lyrics') {
return (
<>
{index > 0 && <Separator className={styles.resizeHandle} />}
<Panel
<Pane
defaultSize={totalPanels > 2 ? 25 : 50}
id="lyrics"
key="lyrics"
minSize={15}
size={defaultLayout[1]}
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
}}
>
<LyricsPanel />
</Panel>
</Pane>
</>
);
}
@@ -131,15 +151,20 @@ export const SidebarPlayQueue = () => {
if (panelType === 'visualizer') {
return (
<>
{index > 0 && <Separator className={styles.resizeHandle} />}
<Panel
<Pane
defaultSize={totalPanels > 2 ? 25 : 50}
id="visualizer"
key="visualizer"
minSize={15}
size={defaultLayout[2]}
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
}}
>
<VisualizerPanel />
</Panel>
</Pane>
</>
);
}
@@ -155,16 +180,16 @@ export const SidebarPlayQueue = () => {
type={ItemListKey.SIDE_QUEUE}
/>
{showPanel ? (
<Group
defaultLayout={defaultLayout}
onLayoutChange={onLayoutChange}
orientation="vertical"
style={{ flex: 1, minHeight: 0 }}
<SplitPane
direction="vertical"
dividerClassName={styles.resizeHandle}
onResize={onLayoutChange}
style={{ flex: 1, height: '100%', minHeight: 0 }}
>
{orderedPanels.map((panel, index) =>
renderPanel(panel, index, orderedPanels.length),
)}
</Group>
</SplitPane>
) : (
<Flex direction="column" style={{ flex: 1, minHeight: 0 }}>
<div className={styles.playQueueSection}>
src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer.module.css
+7
View File
@@ -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;
}
src/renderer/features/visualizer/components/butternchurn/visualizer.module.css
+4
View File
@@ -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 {