From 4cb080888d45bc7da43510dc6e25e5e84e18775a Mon Sep 17 00:00:00 2001
From: G2-Games <ke0bhogsg@gmail.com>
Date: Sat, 28 Dec 2024 22:58:44 -0600
Subject: [PATCH] UI changes and reorganization

---
 dmp-core/Cargo.toml       |  2 +-
 src-tauri/src/wrappers.rs |  1 -
 src/App.css               | 90 ++++++++++++++++++++++++++++-----------
 src/App.tsx               | 63 ++++++++++++++++-----------
 4 files changed, 103 insertions(+), 53 deletions(-)

diff --git a/dmp-core/Cargo.toml b/dmp-core/Cargo.toml
index 0f1c647..afbcf56 100644
--- a/dmp-core/Cargo.toml
+++ b/dmp-core/Cargo.toml
@@ -37,4 +37,4 @@ futures = "0.3.30"
 async-channel = "2.3.1"
 ciborium = "0.2.2"
 itertools = "0.13.0"
-prismriver = { git = "https://github.com/Dangoware/prismriver.git", features = ["ffmpeg"]}
+prismriver = { git = "https://github.com/Dangoware/prismriver.git" }
diff --git a/src-tauri/src/wrappers.rs b/src-tauri/src/wrappers.rs
index 2bce23b..d5fc41a 100644
--- a/src-tauri/src/wrappers.rs
+++ b/src-tauri/src/wrappers.rs
@@ -43,7 +43,6 @@ pub async fn set_volume(ctrl_handle: State<'_, ControllerHandle>, volume: String
 
 #[tauri::command]
 pub async fn get_volume(ctrl_handle: State<'_, ControllerHandle>) -> Result<(), String> {
-
     Ok(())
 }
 
diff --git a/src/App.css b/src/App.css
index 52228b9..e392bd6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,31 +13,30 @@
   --lightTextColor: #7a7a6f;
   --mediumTextColor: #cacab8;
   --highlightTextColor: #FFF;
+
+  --bottomBarHeight: 52px;
 }
 
-.elidedText {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+main {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
 }
 
 .container {
-  position: absolute;
-  top: 0px;
-  left: 0;
-  height: 100%;
-  width: 100%;
   display: flex;
+  position: relative;
   flex-direction: row;
-  justify-content: center;
-  align-items: stretch;
+  height: calc(100% - var(--bottomBarHeight));
+  width: 100%;
 }
 
 .leftSide {
-  flex-shrink: 2;
   height: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .rightSide {
@@ -46,15 +45,18 @@
   flex-direction: column;
   position: relative;
   box-sizing: border-box;
-
-  align-self: flex-end;
   height: 100%;
+
   background-color: var(--baseColor);
   color: var(--highlightTextColor);
 
   /* Change to resize width */
-  min-width: 380px;
-  width: 380px;
+  width: 350px;
+}
+
+.bottom {
+  display: block;
+  width: 100%;
 }
 
 .playlistHead {
@@ -74,6 +76,7 @@
 .mainView > div {
   display: flex;
   flex-direction: column;
+  margin-left: 20px;
 }
 
 .song {
@@ -96,18 +99,55 @@
   background-color: var(--highlightColor);
 }
 
-#playBar {
-  position:relative;
-  bottom: 0;
-  left: 0;
+.playBar {
+  position: relative;
   background-color: var(--playBarColor);
   width: 100%;
-  height: 58px;
-}
-
-.topHalf {
+  height: var(--bottomBarHeight);
   display: flex;
-  justify-content: space-around;
+
+  .seekBar {
+    display: block;
+    width: calc(100% - 300px);
+    background-color: rgba(255, 255, 255, .2);
+    position: absolute;
+    left: 300px;
+    height: 15px;
+  }
+
+  .seekOverlay {
+    display: block;
+    width: 50%;
+    background-color: rgba(255, 255, 255, 1);
+    height: 100%;
+  }
+
+  .bottomSpaced {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .bottomLeft {
+    display: flex;
+    justify-content: space-around;
+    margin-left: 10px;
+  }
+
+  .bottomRight {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  button {
+    background: unset;
+    border: unset;
+    font-size: 30px;
+    width: 50px;
+    height: 100%;
+    margin-right: 15px;
+    color: #FFF;
+  }
 }
 
 #seekBar {
diff --git a/src/App.tsx b/src/App.tsx
index e0fa644..1117ce2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -70,6 +70,7 @@ function App() {
     })
     return () => { unlisten.then((f) => f()) }
   }, []);
+
   useEffect(() => {
     const unlisten = appWindow.listen<any>("paused", (_) => {
         setPlaying(false)
@@ -82,17 +83,20 @@ function App() {
   }, [])
 
   return (
-    <main className="container">
-      <div className="leftSide">
-        <PlaylistHead playlists={ playlists } setPlaylists={ setPlaylists } setViewName={ setViewName } setLibrary={ library[1] } />
-        <MainView lib_ref={ library } viewName={ viewName } />
+    <main>
+      <div className="container">
+        <div className="leftSide">
+          <PlaylistHead playlists={ playlists } setPlaylists={ setPlaylists } setViewName={ setViewName } setLibrary={ library[1] } />
+          <MainView lib_ref={ library } viewName={ viewName } />
+        </div>
+        <div className="rightSide">
+          { nowPlaying }
+          <Queue songs={ queue } />
+        </div>
+      </div>
+      <div className="bottom">
         <PlayBar playing={ playing } setPlaying={ setPlaying } />
       </div>
-      <div className="rightSide">
-        { nowPlaying }
-        <Queue songs={ queue } />
-      </div>
-
     </main>
   );
 }
@@ -281,30 +285,36 @@ function Song(props: SongProps) {
   )
 }
 
-
 interface PlayBarProps {
   playing: boolean,
   setPlaying: React.Dispatch<React.SetStateAction<boolean>>
 }
+
 function PlayBar({ playing, setPlaying }: PlayBarProps) {
   return (
     <section id="playBar" className="playBar">
-      <div className="topHalf">
-        <div>
-          <button>shuffle</button>
-          <button>loop</button>
-        </div>
-        <button onClick={ () => invoke('prev').then(() => {}) }>prev</button>
-        <button onClick={ (_) => {
-          setPlaying( playing ? false : true );
-          invoke( playing ? 'pause' : 'play' ).then(() => {})
-        }}>{ playing ? 'pause' : 'play' }</button>
-        <button onClick={ () => invoke('next').then(() => {}) }>next</button>
-        <input type="range" name="volume" id="volumeSlider" onChange={ (volume) => {
-          invoke('set_volume', { volume: volume.target.value }).then(() => {})
-        }} />
+      <div className="seekBar">
+        <div className="seekOverlay" id="seekOverlay"></div>
+      </div>
+      <div className="bottomSpaced">
+        <div className="bottomLeft">
+          <button onClick={ (_) => {
+            setPlaying( playing ? false : true );
+            invoke( playing ? 'pause' : 'play' ).then(() => {})
+          }}>{ playing ? '⏸' : '⏵' }</button>
+          <button onClick={ () => invoke('stop').then(() => {}) }>⏹</button>
+          <button onClick={ () => invoke('prev').then(() => {}) }>⏮</button>
+          <button onClick={ () => invoke('next').then(() => {}) }>⏭</button>
+        </div>
+        <div className="bottomRight">
+          <button>🔀</button>
+          <button>🔁</button>
+          <input type="range" name="volume" id="volumeSlider" onChange={ (volume) => {
+            invoke('set_volume', { volume: volume.target.value }).then(() => {})
+          }} />
+          <p id="timeDisplay"></p>
+        </div>
       </div>
-      <input type="range" name="seek" id="seekBar" />
     </section>
   )
 }
@@ -332,6 +342,7 @@ function NowPlaying({ title, artist, album, artwork }: NowPlayingProps) {
 interface QueueProps {
   songs: JSX.Element[],
 }
+
 function Queue({ songs }: QueueProps) {
   return (
     <section className="Queue">
@@ -378,4 +389,4 @@ function getConfig(): any {
       invoke('lib_already_created').then(() => {})
     }
   })
-}
\ No newline at end of file
+}