Merge pull request #31 from ContentsViewer/feature/visual

Feature/visual
ContentsViewer · Aug 28, 2024 · 1b1f300 · 1b1f300
2 parents 87499c0 + 7108ee1
commit 1b1f300
Show file tree

Hide file tree

Showing 17 changed files with 901 additions and 235 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,5 @@ next-env.d.ts
 
 *.drawio.bkp
 *.drawio.dtmp
+
+.vscode
diff --git a/app/albums/page.tsx b/app/albums/page.tsx
@@ -65,6 +65,7 @@ const AlbumCard = React.memo(function AlbumCard({
 
   return (
     <Box
+      component="div"
       sx={{
         display: "flex",
         flexDirection: "column",
@@ -167,11 +168,12 @@ const AlbumList = React.memo(function AlbumList({
   }, [])
   return (
     <Box
+      component="div"
       sx={{
         gap: 3,
         gridTemplateColumns: {
           xs: "repeat(auto-fill, minmax(120px, 1fr))",
-          sm: "repeat(auto-fill, minmax(144px, 1fr))"
+          sm: "repeat(auto-fill, minmax(144px, 1fr))",
         },
         display: "grid",
         maxWidth: "1040px",
@@ -195,6 +197,7 @@ const AlbumList = React.memo(function AlbumList({
 
 interface AlbumListPageProps {
   sx?: SxProps<Theme>
+  onMount?: () => void
 }
 const AlbumListPage = React.memo(function AlbumListPage(
   props: AlbumListPageProps
@@ -215,6 +218,10 @@ const AlbumListPage = React.memo(function AlbumListPage(
 
   const [albums, setAlbums] = useState<AlbumItem[]>([])
 
+  useEffect(() => {
+    props.onMount?.()
+  }, [])
+
   useEffect(() => {
     if (!fileStoreState.configured) return
     let isCanceled = false
@@ -240,6 +247,7 @@ const AlbumListPage = React.memo(function AlbumListPage(
 
   return (
     <Box
+      component="div"
       sx={{
         p: {
           xs: 3,
@@ -257,9 +265,11 @@ const AlbumListPage = React.memo(function AlbumListPage(
 interface AlbumPageProps {
   sx?: SxProps<Theme>
   albumItem?: AlbumItem
+  onMount?: () => void
 }
 const AlbumPage = React.memo(function AlbumPage({
   albumItem,
+  onMount,
   sx,
 }: AlbumPageProps) {
   const [fileStoreState, fileStoreActions] = useFileStore()
@@ -270,6 +280,10 @@ const AlbumPage = React.memo(function AlbumPage({
   const [coverUrl, setCoverUrl] = useState<string | undefined>(undefined)
   const [tracks, setTracks] = useState<AudioTrackFileItem[] | undefined>([])
 
+  useEffect(() => {
+    onMount?.()
+  }, [])
+
   useEffect(() => {
     if (!albumItem?.fileIds) return
     const getTracks = async () => {
@@ -294,6 +308,7 @@ const AlbumPage = React.memo(function AlbumPage({
 
   return (
     <Box
+      component="div"
       sx={{
         ...sx,
         display: "flex",
@@ -304,6 +319,7 @@ const AlbumPage = React.memo(function AlbumPage({
       }}
     >
       <Box
+        component="div"
         sx={{
           display: "flex",
           flexDirection: {
@@ -327,6 +343,7 @@ const AlbumPage = React.memo(function AlbumPage({
         />
 
         <Box
+          component="div"
           sx={{
             flexGrow: 1,
             display: "flex",
@@ -350,6 +367,7 @@ const AlbumPage = React.memo(function AlbumPage({
             {albumItem ? albumItem.name : ""}
           </Typography>
           <Box
+            component="div"
             sx={{
               display: "flex",
               flexDirection: "row",
@@ -390,6 +408,9 @@ export default function Page() {
   fileStoreActionsRef.current = fileStoreActions
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const albumPageRef = useRef<Node | undefined>(undefined)
+  const albumListRef = useRef<Node | undefined>(undefined)
+  const [scrollTarget, setScrollTarget] = useState<Node | undefined>(undefined)
 
   useEffect(() => {
     const albumId = decodeURIComponent(routerState.hash.slice(1))
@@ -413,8 +434,21 @@ export default function Page() {
   const downloadingCount = Object.keys(fileStoreState.syncingTrackFiles).length
 
   return (
-    <Box>
-      <AppTopBar>
+    <Box
+      component="div"
+      sx={{
+        height: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <AppTopBar
+        scrollTarget={scrollTarget}
+        // scrollTarget={
+
+        //   const ref = currentAlbum == undefined ? albumListRef.current : albumPageRef.current
+        //   if (ref === null) return undefined
+        //   return ref
+      >
         <Toolbar>
           <IconButton
             color="inherit"
@@ -498,40 +532,62 @@ export default function Page() {
         </Toolbar>
       </AppTopBar>
       <Box
+        component="div"
         sx={{
           ml: `env(safe-area-inset-left, 0)`,
           mr: `env(safe-area-inset-right, 0)`,
           position: "relative",
+          height: "100%",
         }}
       >
         <Fade in={currentAlbum !== undefined} timeout={1000} unmountOnExit>
           <Box
+            component="div"
+            ref={albumPageRef}
             sx={{
               position: "absolute",
               top: 0,
               right: 0,
               left: 0,
               pt: 8,
               pb: `calc(env(safe-area-inset-bottom, 0) + 144px)`,
+              overflow: "auto",
+              height: "100%",
+              scrollbarColor: `${colorOnSurfaceVariant} transparent`,
+              scrollbarWidth: "thin",
             }}
           >
-            <AlbumPage albumItem={currentAlbum} />
+            <AlbumPage
+              albumItem={currentAlbum}
+              onMount={() => {
+                setScrollTarget(albumPageRef.current)
+              }}
+            />
           </Box>
         </Fade>
         <Fade in={currentAlbum === undefined} timeout={1000} unmountOnExit>
           <Box
+            component="div"
+            ref={albumListRef}
             sx={{
               position: "absolute",
               top: 0,
               right: 0,
               left: 0,
               pt: 8,
               pb: `calc(env(safe-area-inset-bottom, 0) + 144px)`,
-              overflow: "hidden",
+              overflow: "auto",
               minHeight: "100vh",
+              height: "100%",
+              scrollbarColor: `${colorOnSurfaceVariant} transparent`,
+              scrollbarWidth: "thin",
             }}
           >
-            <AlbumListPage />
+            <AlbumListPage
+              onMount={() => {
+                setScrollTarget(albumListRef.current)
+              }}
+            />
           </Box>
         </Fade>
       </Box>

diff --git a/app/app-layout.tsx b/app/app-layout.tsx
@@ -17,7 +17,7 @@ import { RouterProvider } from "@/src/router"
 import { useEffect, useRef, useState } from "react"
 import { useThemeStore } from "@/src/stores/theme-store"
 import * as mm from "music-metadata-browser"
-import { DynamicThemeStoreProvider } from "@/src/stores/dynamic-theme-store"
+import { AudioDynamicsProvider } from "@/src/stores/audio-dynamics-store"
 import { css } from "@emotion/css"
 import { registerServiceWorker } from "./register-sw"
 
@@ -94,14 +94,16 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
         <NetworkMonitorProvider>
           <FileStoreProvider>
             <PlayerStoreProvider>
-              <DynamicThemeStoreProvider>
+              <AudioDynamicsProvider>
                 <ThemeChanger />
                 <DynamicBackground />
                 <AudioPlayer />
                 <Fade in={!playerCardExpanded} unmountOnExit>
                   <Box
+                    component="div"
                     sx={{
-                      pb: `calc(env(safe-area-inset-bottom, 0) + 144px)`,
+                      // pb: `calc(env(safe-area-inset-bottom, 0) + 144px)`,
+                      height: "100%",
                     }}
                   >
                     {children}
@@ -116,7 +118,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
                     setPlayerCardExpanded(true)
                   }}
                 />
-              </DynamicThemeStoreProvider>
+              </AudioDynamicsProvider>
             </PlayerStoreProvider>
           </FileStoreProvider>
         </NetworkMonitorProvider>

diff --git a/app/files/page.tsx b/app/files/page.tsx
@@ -49,7 +49,7 @@ export default function Page() {
   fileStoreActionsRef.current = fileStoreActions
 
   const networkMonitor = useNetworkMonitor()
-
+  const scrollTargetRef = useRef<Node | undefined>(undefined)
   const [currentFile, setCurrentFile] = useState<BaseFileItem | null>(null)
   const [files, setFiles] = useState<BaseFileItem[] | undefined>([])
   const [folderId, setFolderId] = useState<string | undefined>(undefined)
@@ -168,8 +168,14 @@ export default function Page() {
   const downloadingCount = Object.keys(fileStoreState.syncingTrackFiles).length
 
   return (
-    <Box>
-      <AppTopBar>
+    <Box
+      component="div"
+      sx={{
+        height: "100%",
+        overflow: "hidden",
+      }}
+    >
+      <AppTopBar scrollTarget={scrollTargetRef.current}>
         <Toolbar>
           <IconButton
             color="inherit"
@@ -281,10 +287,18 @@ export default function Page() {
         </Fade>
       </AppTopBar>
       <Box
+        component="div"
+        ref={scrollTargetRef}
         sx={{
-          mt: 8,
+          // mt: 8,
+          pt: 8,
           ml: `env(safe-area-inset-left, 0)`,
           mr: `env(safe-area-inset-right, 0)`,
+          overflow: "auto",
+          height: "100%",
+          scrollbarColor: `${colorOnSurfaceVariant} transparent`,
+          scrollbarWidth: "thin",
+          pb: `calc(env(safe-area-inset-bottom, 0) + 144px)`,
         }}
       >
         <FileList
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,3 +37,5 @@ next-env.d.ts

		*.drawio.bkp
		*.drawio.dtmp

		.vscode