fix: background jumping and flickering

RaunoT · Jan 8, 2024 · e03614b · e03614b
1 parent ea81252
commit e03614b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Keep an eye on the [issues page](https://github.com/RaunoT/plex-rewind/issues) t
 
 ## Preview
 
-![Dashboard](https://i.imgur.com/S1bA46c.png 'Dashboard')
+![Dashboard](https://i.imgur.com/AWY0bUW.png 'Dashboard')
 
 ![Rewind](https://i.imgur.com/tph7cDj.png 'Rewind')
 

diff --git a/src/app/_components/AppProvider.tsx b/src/app/_components/AppProvider.tsx
@@ -40,43 +40,27 @@ export default function AppProvider({ children }: Props) {
     }
   }, [background])
 
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0].target === backgroundRef.current && background) {
-        background.resize()
-      }
-    })
-    const currentBackgroundRef = backgroundRef.current
-
-    if (currentBackgroundRef) {
-      resizeObserver.observe(currentBackgroundRef)
-    }
-
-    return () => resizeObserver.disconnect()
-  }, [background])
-
   return (
     <SessionProvider>
       <main
-        ref={backgroundRef}
-        className='after:absolute after:inset-0 after:bg-black/25 after:content-[""]'
+        className={clsx(
+          'flex min-h-dvh flex-col items-center overflow-x-hidden px-4 py-8 sm:justify-center',
+          { 'justify-center': pathname === '/' },
+        )}
       >
         <div
-          className={clsx(
-            'flex min-h-dvh flex-col items-center overflow-x-hidden px-4 py-8 sm:justify-center',
-            { 'justify-center': pathname === '/' },
-          )}
-        >
-          <a href='https://github.com/RaunoT/plex-rewind' target='_blank'>
-            <Image
-              src={githubSvg}
-              alt='GitHub'
-              className='absolute right-4 top-4 size-4 sm:size-6'
-            />
-          </a>
+          ref={backgroundRef}
+          className='fixed inset-0 -z-10 after:absolute after:inset-0 after:bg-black/25 after:content-[""]'
+        />
+        <a href='https://github.com/RaunoT/plex-rewind' target='_blank'>
+          <Image
+            src={githubSvg}
+            alt='GitHub'
+            className='absolute right-4 top-4 size-4 sm:size-6'
+          />
+        </a>
 
-          {children}
-        </div>
+        {children}
       </main>
     </SessionProvider>
   )