Start styling the track card

music-player/client/index.html

@@ -11,6 +11,7 @@
     <div class="controls"><button class="play-pause">Pause</button></div>
 
     <div class="track-list">
+        <!--
         <div class="track-list__grouping">
             <ul class="bulletless-list">
                 <li> By Artist </li>
@@ -19,9 +20,10 @@
                 <li> Dance Music </li>
             </ul>
         </div>
+        -->
 
-        <div class="track-list__tracks">
-            <ul>
+        <div>
+            <ul class="track-list__tracks bulletless-list">
             </ul>
         </div>
     </div>

music-player/client/src/blocks/track.ts

@@ -1,16 +1,23 @@
 import { TrackInfo } from "../client";
 
 export class TrackCard extends HTMLElement {
-  track_info: TrackInfo | null;
+  track_info: TrackInfo;
 
-  constructor() {
+  constructor(info: TrackInfo) {
     super();
-    this.track_info = null;
+    this.track_info = info;
   }
 
   connectedCallback() {
-    if (this.track_info) {
-      this.innerHTML = this.track_info.id;
-    }
+    const container = document.createElement("div");
+    container.classList.add("track-card");
+    this.appendChild(container);
+
+    this.track_info.name &&
+      container.appendChild(document.createTextNode(this.track_info.name));
+  }
+
+  updateContent() {
+    console.log("updateContent");
   }
 }

music-player/client/src/main.ts

@@ -53,14 +53,17 @@ const formatTrack = (track: TrackInfo) => {
 */
 
 const updateTrackList = (tracks: TrackInfo[]) => {
-  const track_list = document.querySelector(".track-list__tracks ul");
+  const track_list = document.querySelector(".track-list__tracks");
   if (track_list) {
     let track_formats = _.map(tracks, (info) => {
-      const card = new TrackCard();
-      card.track_info = info;
-      return card;
+      return new TrackCard(info);
+    });
+    _.map(track_formats, (trackCard) => {
+      let listItem = document.createElement("li");
+      listItem.classList.add("track-list__row");
+      listItem.appendChild(trackCard);
+      track_list.appendChild(listItem);
     });
-    _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
   } else {
     console.log("track_list does not exist");
   }

music-player/client/styles.css

@@ -26,9 +26,10 @@ body {
 }
 
 .track-list__row {
-    background-color: rgb(10, 10, 10);
+    margin-top: 32px;
 }
 
+/*
 .track-list__row:nth-child(even) {
     background-color: rgb(255, 255, 255);
 }
@@ -36,7 +37,12 @@ body {
 .track-list__row:nth-child(odd) {
     background-color: rgb(200, 200, 200);
 }
+*/
 
-.track-list__cell {
+.track-card {
+    border: 1px solid black;
+    border-radius: 5px;
     padding: 8px;
+    width: 300px;
+    height: 100px;
 }

music-player/server/src/bin/server.rs

@@ -131,9 +131,6 @@ pub async fn main() {
     let routes = root.or(assets).or(track_list);
     let server = warp::serve(routes);
     server
-        .run(SocketAddr::new(
-            IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1)),
-            8002,
-        ))
+        .run(SocketAddr::new(IpAddr::V4(Ipv4Addr::new(0, 0, 0, 0)), 8002))
         .await;
 }

music-player/server/src/music_scanner.rs

@@ -46,7 +46,10 @@ impl FileIterator {
             id: TrackId::from(path.to_str().unwrap().to_owned()),
             album: None,
             artist: None,
-            name: None,
+            name: path
+                .file_stem()
+                .and_then(|s| s.to_str())
+                .map(|s| s.to_owned()),
             track_number: None,
         })
     }