From 01608fa875c8ba006669c7e9ff3f2893f84032b3 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 9 Jun 2023 00:09:46 -0700
Subject: [PATCH] Fix ref issue

---
 .../components/full-screen-player-image.tsx   |  8 +-
 .../player/components/full-screen-player.tsx  | 94 +++++++++----------
 .../default-layout/full-screen-overlay.tsx    |  8 +-
 3 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
index c46c4764..b81772c5 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -152,7 +152,7 @@ export const FullScreenPlayerImage = () => {
       <ImageContainer>
         <AnimatePresence
           initial={false}
-          mode="popLayout"
+          mode="sync"
         >
           {imageState.current === 0 && (
             <ImageWithPlaceholder
@@ -168,11 +168,7 @@ export const FullScreenPlayerImage = () => {
               variants={imageVariants}
             />
           )}
-        </AnimatePresence>
-        <AnimatePresence
-          initial={false}
-          mode="popLayout"
-        >
+
           {imageState.current === 1 && (
             <ImageWithPlaceholder
               key={imageKey}
diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index b1e26990..597ef14d 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/src/renderer/features/player/components/full-screen-player.tsx
@@ -69,55 +69,53 @@ const Controls = () => {
   useHotkeys([['Escape', handleToggleFullScreenPlayer]]);
 
   return (
-    <>
-      <Group
-        p="1rem"
-        pos="absolute"
-        spacing="sm"
-        sx={{
-          left: 0,
-          top: 10,
-        }}
+    <Group
+      p="1rem"
+      pos="absolute"
+      spacing="sm"
+      sx={{
+        left: 0,
+        top: 10,
+      }}
+    >
+      <Button
+        compact
+        size="sm"
+        tooltip={{ label: 'Minimize' }}
+        variant="subtle"
+        onClick={handleToggleFullScreenPlayer}
       >
-        <Button
-          compact
-          size="sm"
-          tooltip={{ label: 'Minimize' }}
-          variant="subtle"
-          onClick={handleToggleFullScreenPlayer}
-        >
-          <RiArrowDownSLine size="2rem" />
-        </Button>
-        <Popover position="bottom-start">
-          <Popover.Target>
-            <Button
-              compact
-              size="sm"
-              tooltip={{ label: 'Configure' }}
-              variant="subtle"
-            >
-              <RiSettings3Line size="1.5rem" />
-            </Button>
-          </Popover.Target>
-          <Popover.Dropdown>
-            <Option>
-              <Option.Label>Dynamic Background</Option.Label>
-              <Option.Control>
-                <Switch
-                  defaultChecked={dynamicBackground}
-                  onChange={(e) =>
-                    setStore({
-                      dynamicBackground: e.target.checked,
-                    })
-                  }
-                />
-              </Option.Control>
-            </Option>
-            <TableConfigDropdown type="fullScreen" />
-          </Popover.Dropdown>
-        </Popover>
-      </Group>
-    </>
+        <RiArrowDownSLine size="2rem" />
+      </Button>
+      <Popover position="bottom-start">
+        <Popover.Target>
+          <Button
+            compact
+            size="sm"
+            tooltip={{ label: 'Configure' }}
+            variant="subtle"
+          >
+            <RiSettings3Line size="1.5rem" />
+          </Button>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Option>
+            <Option.Label>Dynamic Background</Option.Label>
+            <Option.Control>
+              <Switch
+                defaultChecked={dynamicBackground}
+                onChange={(e) =>
+                  setStore({
+                    dynamicBackground: e.target.checked,
+                  })
+                }
+              />
+            </Option.Control>
+          </Option>
+          <TableConfigDropdown type="fullScreen" />
+        </Popover.Dropdown>
+      </Popover>
+    </Group>
   );
 };
 
diff --git a/src/renderer/layouts/default-layout/full-screen-overlay.tsx b/src/renderer/layouts/default-layout/full-screen-overlay.tsx
index 8e55b399..1803d356 100644
--- a/src/renderer/layouts/default-layout/full-screen-overlay.tsx
+++ b/src/renderer/layouts/default-layout/full-screen-overlay.tsx
@@ -6,10 +6,8 @@ export const FullScreenOverlay = () => {
   const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
 
   return (
-    <>
-      <AnimatePresence initial={false}>
-        {isFullScreenPlayerExpanded && <FullScreenPlayer />}
-      </AnimatePresence>
-    </>
+    <AnimatePresence initial={false}>
+      {isFullScreenPlayerExpanded && <FullScreenPlayer />}
+    </AnimatePresence>
   );
 };