Fixed word wrap and initial y-position in tracks view

jjuback · Aug 9, 2024 · 72e22cc · 72e22cc
1 parent 178ac2e
commit 72e22cc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/Album.js b/src/Album.js
@@ -25,12 +25,15 @@ export const Album = (props) => {
         ]
     });
   }, [props, trackNo]);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [props.count]);  
   if (props === undefined) return null;
   return (
     <>
       <Navbar className="fixed-top bg-body-tertiary">
         <Container>
-          <Navbar.Brand>
+          <Navbar.Brand className="mw-75 text-truncate">
             <img
               alt=""
               src={makeUrl(props.Cover, props.genre)}
@@ -41,10 +44,11 @@ export const Album = (props) => {
             {props.Title}
           </Navbar.Brand>
           <Navbar.Collapse className="justify-content-end">
-            <Navbar.Text>
+            <Navbar.Text className="mw-75 text-truncate">
               {props.Artist}
             </Navbar.Text>
-        </Navbar.Collapse>        </Container>
+          </Navbar.Collapse>
+        </Container>
       </Navbar>
         <Tabs className="mt-5" defaultActiveKey="tracks" onSelect={(k) => k==="back" ? props.goBack() : {}}>
             <Tab eventKey="back" title="<<" />

diff --git a/src/App.js b/src/App.js
@@ -8,8 +8,9 @@ const App = () => {
     const [album, setAlbum] = useState();
     const [artist, setArtist] = useState();
     const [genre, setGenre] = useState(0);
+    const [count, setCount] = useState(0);
     const [scrollY, setScrollY] = useState(0);
-    const selectAlbum = (data, name) => { setAlbum(data); setArtist(name); setScrollY(window.scrollY); }
+    const selectAlbum = (data, name) => { setAlbum(data); setArtist(name); setScrollY(window.scrollY); setCount(count + 1); }
     const selectGenre = (n) => { setArtist(undefined); setGenre(n); setScrollY(0); }
     const goBack = () => setAlbum(undefined);
 
@@ -30,7 +31,7 @@ const App = () => {
           return (
             <Container className="p-3">
               <div className="App">
-                <Album {...album} Artist={artist} genre={genre} goBack={goBack} />
+                <Album {...album} Artist={artist} genre={genre} goBack={goBack} count={count} />
               </div>
             </Container>
           )