feat: updates

packages/web/components/Main.tsx

@@ -1,24 +1,67 @@
+import { css, cx } from '@emotion/css'
 import Router from './Router'
-import Topbar from './Topbar'
-import { cx } from '@emotion/css'
+import useIntersectionObserver from '@/web/hooks/useIntersectionObserver'
+import uiStates from '@/web/states/uiStates'
+import { useEffect, useRef, useState } from 'react'
+import { breakpoint as bp, ease } from '@/web/utils/const'
+import { useSnapshot } from 'valtio'
+import persistedUiStates from '@/web/states/persistedUiStates'
+import { motion, useAnimation } from 'framer-motion'
+import { sleep } from '@/web/utils/common'
+import player from '@/web/states/player'
 
 const Main = () => {
+  const playerSnapshot = useSnapshot(player)
+
+  // Show/hide topbar background
+  const observePoint = useRef<HTMLDivElement | null>(null)
+  const { onScreen } = useIntersectionObserver(observePoint)
+  useEffect(() => {
+    uiStates.hideTopbarBackground = onScreen
+    return () => {
+      uiStates.hideTopbarBackground = false
+    }
+  }, [onScreen])
+
+  // Change width when player is minimized
+
+  const { minimizePlayer } = useSnapshot(persistedUiStates)
+  const [isMaxWidth, setIsMaxWidth] = useState(minimizePlayer)
+  const controlsMain = useAnimation()
+  useEffect(() => {
+    const animate = async () => {
+      await controlsMain.start({ opacity: 0 })
+      await sleep(100)
+      setIsMaxWidth(minimizePlayer)
+      await controlsMain.start({ opacity: 1 })
+    }
+    if (minimizePlayer !== isMaxWidth) animate()
+  }, [controlsMain, isMaxWidth, minimizePlayer])
+
   return (
-    <div
-      id='mainContainer'
-      className='relative flex h-screen max-h-screen flex-grow flex-col overflow-y-auto bg-white dark:bg-[#1d1d1d]'
+    <motion.main
+      id='main'
+      animate={controlsMain}
+      transition={{ ease, duration: 0.4 }}
+      className={cx(
+        'no-scrollbar z-10 h-screen overflow-y-auto',
+        css`
+          ${bp.lg} {
+            margin-left: 144px;
+            margin-right: ${isMaxWidth || !playerSnapshot.track ? 92 : 382}px;
+          }
+        `
+      )}
     >
-      <Topbar />
-      <main
-        id='main'
-        className={cx(
-          'mb-24 flex-grow px-8',
-          window.env?.isEnableTitlebar && 'mt-8'
-        )}
+      <div ref={observePoint}></div>
+      <div
+        className={css`
+          margin-top: 132px;
+        `}
       >
         <Router />
-      </main>
-    </div>
+      </div>
+    </motion.main>
   )
 }