Split stuff into multiple files. Add webpack.
This commit is contained in:
parent
52ca039f45
commit
9ea761cc7c
|
@ -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
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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());
|
|
@ -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");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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"]
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'),
|
||||||
|
},
|
||||||
|
};
|
|
@ -583,6 +583,7 @@ version = "0.1.0"
|
||||||
dependencies = [
|
dependencies = [
|
||||||
"dbus",
|
"dbus",
|
||||||
"flow",
|
"flow",
|
||||||
|
"mime_guess",
|
||||||
"mpris",
|
"mpris",
|
||||||
"rusqlite",
|
"rusqlite",
|
||||||
"serde",
|
"serde",
|
||||||
|
|
|
@ -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"] }
|
||||||
|
|
|
@ -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(
|
||||||
|
|
Loading…
Reference in New Issue