Set up some basic web components and basically format a track card #25
|
@ -21,58 +21,8 @@
|
|||
</div>
|
||||
|
||||
<div class="track-list__tracks">
|
||||
<table>
|
||||
<thead>
|
||||
<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>
|
||||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
"browserify": "^17.0.0",
|
||||
"tsify": "^5.0.4",
|
||||
"typescript": "^4.9.4",
|
||||
"watchify": "^4.0.0"
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^6.7.3",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-loader": "^9.4.2",
|
||||
"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 { TrackInfo, getTracks } from "./client";
|
||||
import { TrackCard } from "./blocks/track";
|
||||
|
||||
interface TrackInfo {
|
||||
id: string;
|
||||
track_number?: number;
|
||||
name?: string;
|
||||
album?: string;
|
||||
artist?: string;
|
||||
}
|
||||
window.customElements.define("track-card", TrackCard);
|
||||
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -7,6 +7,8 @@
|
|||
"outDir": "./dist",
|
||||
"lib": ["es2016", "DOM"],
|
||||
"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 = [
|
||||
"dbus",
|
||||
"flow",
|
||||
"mime_guess",
|
||||
"mpris",
|
||||
"rusqlite",
|
||||
"serde",
|
||||
|
|
|
@ -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"] }
|
||||
|
|
|
@ -21,20 +21,21 @@ fn tracks(index: &Arc<impl MusicIndex>) -> Vec<TrackInfo> {
|
|||
}
|
||||
}
|
||||
|
||||
enum Bundle {
|
||||
Index,
|
||||
App,
|
||||
Styles,
|
||||
}
|
||||
struct Static(PathBuf);
|
||||
|
||||
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")
|
||||
.body(Bundle::App.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()))
|
||||
.header("content-type", mime_type)
|
||||
.body(Static(PathBuf::from(filename)).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(
|
||||
|
|
Loading…
Reference in New Issue