From 88a655cfb43eb09d82fb1964675ded3b18c7a249 Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Sun, 15 Sep 2024 21:11:34 +0800
Subject: [PATCH] auto save media shadow player layout

---
 .../components/medias/media-shadow-player.tsx        | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/enjoy/src/renderer/components/medias/media-shadow-player.tsx b/enjoy/src/renderer/components/medias/media-shadow-player.tsx
index 6f167ac7..50d2b2ff 100644
--- a/enjoy/src/renderer/components/medias/media-shadow-player.tsx
+++ b/enjoy/src/renderer/components/medias/media-shadow-player.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   MediaLoadingModal,
   MediaRightPanel,
@@ -10,15 +9,14 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@renderer/components/ui";
-import { useDebounce } from "@uidotdev/usehooks";
 
 export const MediaShadowPlayer = () => {
-  const [layout, setLayout] = useState<number[]>();
-  const debouncedLayout = useDebounce(layout, 100);
-
   return (
     <>
-      <ResizablePanelGroup direction="vertical" onLayout={setLayout}>
+      <ResizablePanelGroup
+        autoSaveId="media-shadow-player-layout"
+        direction="vertical"
+      >
         <ResizablePanel defaultSize={60} minSize={50}>
           <ResizablePanelGroup direction="horizontal">
             <ResizablePanel defaultSize={40} minSize={20}>
@@ -33,7 +31,7 @@ export const MediaShadowPlayer = () => {
         <ResizableHandle />
 
         <ResizablePanel minSize={20}>
-          <MediaBottomPanel layout={debouncedLayout} />
+          <MediaBottomPanel />
         </ResizablePanel>
       </ResizablePanelGroup>
       <MediaLoadingModal />