Split stuff into multiple files. Add webpack.

music-player/client/index.html

@@ -21,58 +21,8 @@
         </div>
 
         <div class="track-list__tracks">
-            <table>
+            <ul>
-                <thead>
+            </ul>
-                    <tr>
-                        <th> id </th>
-                        <th> Track # </th>
-                        <th> Title </th>
-                        <th> Artist </th>
-                        <th> Album </th>
-                        <th> Length </th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    <!--
-                    <tr class="track-list__track-row">
-                        <td> 1 </td>
-                        <td> Underground </td>
-                        <td> Lindsey Stirling </td>
-                        <td> Artemis </td>
-                        <td> 4:24 </td>
-                    </tr>
-                    <tr class="track-list__track-row">
-                        <td> 2 </td>
-                        <td> Artemis </td>
-                        <td> Lindsey Stirling </td>
-                        <td> Artemis </td>
-                        <td> 3:54 </td>
-                    </tr>
-                    <tr class="track-list__track-row">
-                        <td> 3 </td>
-                        <td> Til the Light Goes Out </td>
-                        <td> Lindsey Stirling </td>
-                        <td> Artemis </td>
-                        <td> 4:46 </td>
-                    </tr>
-                    <tr class="track-list__track-row">
-                        <td> 4 </td>
-                        <td> Between Twilight </td>
-                        <td> Lindsey Stirling </td>
-                        <td> Artemis </td>
-                        <td> 4:20 </td>
-                    </tr>
-                    <tr class="track-list__track-row">
-                        <td> 5 </td>
-                        <td> Foreverglow </td>
-                        <td> Lindsey Stirling </td>
-                        <td> Artemis </td>
-                        <td> 3:58 </td>
-                    </tr>
-                    -->
-                </tbody>
-            </table>
         </div>
     </div>
 

music-player/client/package.json

@@ -4,9 +4,9 @@
   "description": "",
   "main": "main.js",
   "scripts": {
-    "build": "browserify src/main.ts -p [ tsify ] > dist/bundle.js && cp index.html styles.css dist",
+    "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "watch": "exa index.html styles.css src/* | entr -s 'npm run build'"
+    "watch": "webpack --watch"
   },
   "author": "Savanni D'Gerinel <savanni@luminescent-dreams.com>",
   "license": "GPL-3.0-or-later",
@@ -16,10 +16,12 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191",
-    "babelify": "^10.0.0",
+    "copy-webpack-plugin": "^11.0.0",
-    "browserify": "^17.0.0",
+    "css-loader": "^6.7.3",
-    "tsify": "^5.0.4",
+    "style-loader": "^3.3.1",
-    "typescript": "^4.9.4",
+    "ts-loader": "^9.4.2",
-    "watchify": "^4.0.0"
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   }
 }

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

@@ -0,0 +1,16 @@
+import { TrackInfo } from "../client";
+
+export class TrackCard extends HTMLElement {
+  track_info: TrackInfo | null;
+
+  constructor() {
+    super();
+    this.track_info = null;
+  }
+
+  connectedCallback() {
+    if (this.track_info) {
+      this.innerHTML = this.track_info.id;
+    }
+  }
+}

music-player/client/src/client.ts

@@ -0,0 +1,10 @@
+export interface TrackInfo {
+  id: string;
+  track_number?: number;
+  name?: string;
+  album?: string;
+  artist?: string;
+}
+
+export const getTracks = (): Promise<TrackInfo[]> =>
+  fetch("/api/v1/tracks").then((r) => r.json());

music-player/client/src/main.ts

@@ -1,12 +1,8 @@
 import * as _ from "lodash";
+import { TrackInfo, getTracks } from "./client";
+import { TrackCard } from "./blocks/track";
 
-interface TrackInfo {
+window.customElements.define("track-card", TrackCard);
-  id: string;
-  track_number?: number;
-  name?: string;
-  album?: string;
-  artist?: string;
-}
 
 const replaceTitle = () => {
   const title = document.querySelector(".js-title");
@@ -15,8 +11,7 @@ const replaceTitle = () => {
   }
 };
 
-const getTracks = () => fetch("/api/v1/tracks").then((r) => r.json());
+/*
-
 const formatTrack = (track: TrackInfo) => {
   let row = document.createElement("tr");
   row.classList.add("track-list__row");
@@ -55,12 +50,19 @@ const formatTrack = (track: TrackInfo) => {
   row.appendChild(length);
   return row;
 };
+*/
 
 const updateTrackList = (tracks: TrackInfo[]) => {
-  const track_list = document.querySelector(".track-list__tracks tbody");
+  const track_list = document.querySelector(".track-list__tracks ul");
   if (track_list) {
-    let track_formats = _.map(tracks, formatTrack);
+    let track_formats = _.map(tracks, (info) => {
+      const card = new TrackCard();
+      card.track_info = info;
+      return card;
+    });
     _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
+  } else {
+    console.log("track_list does not exist");
   }
 };
 

music-player/client/tsconfig.json

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

music-player/client/webpack.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/main.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.html$/i,
+                type: 'asset/resource',
+            },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    plugins: [
+        new CopyPlugin({
+            patterns: [
+                { from: "index.html", to: "index.html" },
+                { from: "styles.css", to: "styles.css" },
+            ],
+        }),
+    ],
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+    },
+};

music-player/server/Cargo.lock

@@ -583,6 +583,7 @@ version = "0.1.0"
 dependencies = [
  "dbus",
  "flow",
+ "mime_guess",
  "mpris",
  "rusqlite",
  "serde",

music-player/server/Cargo.toml

@@ -8,6 +8,7 @@ edition = "2021"
 [dependencies]
 dbus        = { version = "0.9.7" }
 flow        = { path = "../../flow" }
+mime_guess = "2.0.4"
 mpris       = { version = "2.0" }
 rusqlite    = { version = "0.28" }
 serde       = { version = "1.0", features = ["derive"] }

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

@@ -21,20 +21,21 @@ fn tracks(index: &Arc<impl MusicIndex>) -> Vec<TrackInfo> {
     }
 }
 
-enum Bundle {
+struct Static(PathBuf);
-    Index,
-    App,
-    Styles,
-}
 
-impl Bundle {
+impl Static {
     fn read(self, root: PathBuf) -> String {
+        /*
         let mut path = root;
         match self {
             Bundle::Index => path.push(PathBuf::from("index.html")),
             Bundle::App => path.push(PathBuf::from("bundle.js")),
             Bundle::Styles => path.push(PathBuf::from("styles.css")),
         };
+        std::fs::read_to_string(path).expect("to find the file")
+        */
+        let mut path = root;
+        path.push(self.0);
         println!("path: {:?}", path);
         std::fs::read_to_string(path).expect("to find the file")
     }
@@ -68,23 +69,22 @@ pub async fn main() {
         move || {
             warp::http::Response::builder()
                 .header("content-type", "text/html")
-                .body(Bundle::Index.read(bundle_root.clone()))
+                .body(Static(PathBuf::from("index.html")).read(bundle_root.clone()))
         }
     });
-    let app = warp::path!("bundle.js").and(warp::get()).map({
+    let assets = warp::path!(String).and(warp::get()).map({
         let bundle_root = bundle_root.clone();
-        move || {
+        move |filename: String| {
+            let mime_type = mime_guess::from_path(filename.clone())
+                .first()
+                .map(|m| m.essence_str().to_owned())
+                .unwrap_or("text/plain".to_owned());
+            println!("mime_type: {:?}", mime_type);
+            // let mut path = PathBuf::from("assets");
+            // path.push(filename);
             warp::http::Response::builder()
-                .header("content-type", "text/javascript")
+                .header("content-type", mime_type)
-                .body(Bundle::App.read(bundle_root.clone()))
+                .body(Static(PathBuf::from(filename)).read(bundle_root.clone()))
-        }
-    });
-    let styles = warp::path!("styles.css").and(warp::get()).map({
-        let bundle_root = bundle_root.clone();
-        move || {
-            warp::http::Response::builder()
-                .header("content-type", "text/css")
-                .body(Bundle::Styles.read(bundle_root.clone()))
         }
     });
 
@@ -128,7 +128,7 @@ pub async fn main() {
         .or(queue)
         .or(playing_status);
         */
-    let routes = root.or(app).or(styles).or(track_list);
+    let routes = root.or(assets).or(track_list);
     let server = warp::serve(routes);
     server
         .run(SocketAddr::new(