Merge branch 'main' of https://github.com/Dangoware/dango-music-player

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" }

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(())
 }
 

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 {
+.playBar {
   position: relative;
-  bottom: 0;
-  left: 0;
   background-color: var(--playBarColor);
   width: 100%;
-  height: 58px;
+  height: var(--bottomBarHeight);
+  display: flex;
+
+  .seekBar {
+    display: block;
+    width: calc(100% - 300px);
+    background-color: rgba(255, 255, 255, .2);
+    position: absolute;
+    left: 300px;
+    height: 15px;
   }
 
-.topHalf {
+  .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 {

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">
+    <main>
+      <div className="container">
         <div className="leftSide">
           <PlaylistHead playlists={ playlists } setPlaylists={ setPlaylists } setViewName={ setViewName } setLibrary={ library[1] } />
           <MainView lib_ref={ library } viewName={ viewName } />
-        <PlayBar playing={ playing } setPlaying={ setPlaying } />
         </div>
         <div className="rightSide">
           { nowPlaying }
           <Queue songs={ queue } />
         </div>
-
+      </div>
+      <div className="bottom">
+        <PlayBar playing={ playing } setPlaying={ setPlaying } />
+      </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 className="seekBar">
+        <div className="seekOverlay" id="seekOverlay"></div>
       </div>
-        <button onClick={ () => invoke('prev').then(() => {}) }>prev</button>
+      <div className="bottomSpaced">
+        <div className="bottomLeft">
           <button onClick={ (_) => {
             setPlaying( playing ? false : true );
             invoke( playing ? 'pause' : 'play' ).then(() => {})
-        }}>{ playing ? 'pause' : 'play' }</button>
-        <button onClick={ () => invoke('next').then(() => {}) }>next</button>
+          }}>{ 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">