Render a track list sent from the server

music-player/client/index.html

@@ -33,6 +33,7 @@
                 </thead>
 
                 <tbody>
+                    <!--
                     <tr class="track-list__track-row">
                         <td> 1 </td>
                         <td> Underground </td>
@@ -68,12 +69,13 @@
                         <td> Artemis </td>
                         <td> 3:58 </td>
                     </tr>
+                    -->
                 </tbody>
             </table>
         </div>
     </div>
 
-<script src="./main.js" type="module"></script>
+<script src="./bundle.js" type="module"></script>
 
 </body>
 </html>

music-player/client/src/main.ts

@@ -1,5 +1,13 @@
 import * as _ from "lodash";
 
+interface TrackInfo {
+  id: string;
+  track_number?: number;
+  name?: string;
+  album?: string;
+  artist?: string;
+}
+
 const replaceTitle = () => {
   const title = document.querySelector(".js-title");
   if (title && title.innerHTML) {
@@ -7,21 +15,42 @@ const replaceTitle = () => {
   }
 };
 
-/*
+const getTracks = () => fetch("/api/v1/tracks").then((r) => r.json());
-const checkWeatherService = () => {
+
-    fetch("https://api.weather.gov/")
+const formatTrack = (track: TrackInfo) => {
-        .then((r) => r.json())
+  let row = document.createElement("tr");
-        .then((js) => {
+
-            const weather = document.querySelector('.js-weather');
+  let track_number = document.createElement("td");
-            weather.innerHTML = js.status;
+  track_number.appendChild(
-        });
+    document.createTextNode(track.track_number.toString())
+  );
+
+  let name = document.createElement("td");
+  name.appendChild(document.createTextNode(track.name));
+
+  let album = document.createElement("td");
+  album.appendChild(document.createTextNode(track.album));
+
+  let artist = document.createElement("td");
+  artist.appendChild(document.createTextNode(track.artist));
+
+  row.appendChild(track_number);
+  row.appendChild(name);
+  row.appendChild(artist);
+  row.appendChild(album);
+  return row;
+};
+
+const updateTrackList = (tracks: TrackInfo[]) => {
+  const track_list = document.querySelector(".track-list__tracks tbody");
+  if (track_list) {
+    let track_formats = _.map(tracks, formatTrack);
+    _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
   }
-*/
+};
 
 const run = () => {
-  replaceTitle();
+  getTracks().then((tracks) => updateTrackList(tracks));
-  console.log(_.map([4, 8], (x) => x * x));
-  // checkWeatherService();
 };
 
 run();

music-player/client/tsconfig.json

@@ -6,6 +6,7 @@
       "rootDir": "src",
       "outDir": "./dist",
       "lib": ["es2016", "DOM"],
-      "sourceMap": true
+      "sourceMap": true,
+      "strict": true
   }
 }

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

@@ -9,51 +9,59 @@ use std::{
 };
 use warp::{Filter, Reply};
 
-use music_player::{core::Core, database::MemoryIndex};
+use music_player::{
+    audio::{TrackId, TrackInfo},
+    core::Core,
+    database::MemoryIndex,
+};
 
-/*
+fn tracks() -> Vec<TrackInfo> {
-fn tracks() -> Vec<Track> {
     vec![
-        Track {
+        TrackInfo {
             track_number: Some(1),
             name: Some("Underground".to_owned()),
             album: Some("Artemis".to_owned()),
             artist: Some("Lindsey Stirling".to_owned()),
-            path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/01 - Underground.ogg"),
+            id: TrackId::from(
+                "/mnt/music/Lindsey Stirling/Artemis/01 - Underground.ogg".to_owned(),
+            ),
         },
-        Track {
+        TrackInfo {
             track_number: Some(2),
             name: Some("Artemis".to_owned()),
             album: Some("Artemis".to_owned()),
             artist: Some("Lindsey Stirling".to_owned()),
-            path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/02 - Artemis.ogg"),
+            id: TrackId::from("/mnt/music/Lindsey Stirling/Artemis/02 - Artemis.ogg".to_owned()),
         },
-        Track {
+        TrackInfo {
             track_number: Some(3),
             name: Some("Til the Light Goes Out".to_owned()),
             album: Some("Artemis".to_owned()),
             artist: Some("Lindsey Stirling".to_owned()),
-            path: PathBuf::from(
+            id: TrackId::from(
-                "/mnt/music/Lindsey Stirling/Artemis/03 - Til the Light Goes Out.ogg",
+                "/mnt/music/Lindsey Stirling/Artemis/03 - Til the Light Goes Out.ogg".to_owned(),
             ),
         },
-        Track {
+        TrackInfo {
             track_number: Some(4),
             name: Some("Between Twilight".to_owned()),
             album: Some("Artemis".to_owned()),
             artist: Some("Lindsey Stirling".to_owned()),
-            path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/04 - Between Twilight.ogg"),
+            id: TrackId::from(
+                "/mnt/music/Lindsey Stirling/Artemis/04 - Between Twilight.ogg".to_owned(),
+            ),
         },
-        Track {
+        TrackInfo {
             track_number: Some(5),
             name: Some("Foreverglow".to_owned()),
             album: Some("Artemis".to_owned()),
             artist: Some("Lindsey Stirling".to_owned()),
-            path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/05 - Foreverglow.ogg"),
+            id: TrackId::from(
+                "/mnt/music/Lindsey Stirling/Artemis/05 - Foreverglow.ogg".to_owned(),
+            ),
         },
     ]
 }
-*/
 
 enum Bundle {
     Index,
@@ -118,10 +126,12 @@ pub async fn main() {
             let conn = Connection::new_session().expect("to connect to dbus");
             warp::reply::json(&list_devices(conn))
         });
+        */
 
     let track_list = warp::path!("api" / "v1" / "tracks")
         .and(warp::get())
         .map(|| warp::reply::json(&tracks()));
+    /*
     let tracks_for_artist = warp::path!("api" / "v1" / "artist" / String)
         .and(warp::get())
         .map(|_artist: String| warp::reply::json(&tracks()));
@@ -147,7 +157,7 @@ pub async fn main() {
         .or(queue)
         .or(playing_status);
         */
-    let routes = index.or(app).or(styles);
+    let routes = index.or(app).or(styles).or(track_list);
     let server = warp::serve(routes);
     server
         .run(SocketAddr::new(