Split stuff into multiple files. Add webpack.

This commit is contained in:
Savanni D'Gerinel 2023-02-27 23:58:28 -05:00
parent 52ca039f45
commit 9ea761cc7c
11 changed files with 2636 additions and 4077 deletions

View File

@ -21,58 +21,8 @@
</div> </div>
<div class="track-list__tracks"> <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>
</div> </div>

File diff suppressed because it is too large Load Diff

View File

@ -4,9 +4,9 @@
"description": "", "description": "",
"main": "main.js", "main": "main.js",
"scripts": { "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", "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>", "author": "Savanni D'Gerinel <savanni@luminescent-dreams.com>",
"license": "GPL-3.0-or-later", "license": "GPL-3.0-or-later",
@ -16,10 +16,12 @@
}, },
"devDependencies": { "devDependencies": {
"@types/lodash": "^4.14.191", "@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"
} }
} }

View File

@ -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;
}
}
}

View File

@ -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());

View File

@ -1,12 +1,8 @@
import * as _ from "lodash"; 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 replaceTitle = () => {
const title = document.querySelector(".js-title"); 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) => { const formatTrack = (track: TrackInfo) => {
let row = document.createElement("tr"); let row = document.createElement("tr");
row.classList.add("track-list__row"); row.classList.add("track-list__row");
@ -55,12 +50,19 @@ const formatTrack = (track: TrackInfo) => {
row.appendChild(length); row.appendChild(length);
return row; return row;
}; };
*/
const updateTrackList = (tracks: TrackInfo[]) => { 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) { 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)); _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
} else {
console.log("track_list does not exist");
} }
}; };

View File

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

View File

@ -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'),
},
};

View File

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

View File

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

View File

@ -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 { fn read(self, root: PathBuf) -> String {
/*
let mut path = root; let mut path = root;
match self { match self {
Bundle::Index => path.push(PathBuf::from("index.html")), Bundle::Index => path.push(PathBuf::from("index.html")),
Bundle::App => path.push(PathBuf::from("bundle.js")), Bundle::App => path.push(PathBuf::from("bundle.js")),
Bundle::Styles => path.push(PathBuf::from("styles.css")), 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); println!("path: {:?}", path);
std::fs::read_to_string(path).expect("to find the file") std::fs::read_to_string(path).expect("to find the file")
} }
@ -68,23 +69,22 @@ pub async fn main() {
move || { move || {
warp::http::Response::builder() warp::http::Response::builder()
.header("content-type", "text/html") .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(); 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() 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(queue)
.or(playing_status); .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); let server = warp::serve(routes);
server server
.run(SocketAddr::new( .run(SocketAddr::new(