diff --git a/music-player/client/index.html b/music-player/client/index.html index dec9b55..c9c6439 100644 --- a/music-player/client/index.html +++ b/music-player/client/index.html @@ -11,6 +11,7 @@
+ -
-
diff --git a/music-player/client/src/blocks/track.ts b/music-player/client/src/blocks/track.ts index 43e61c5..0f65d15 100644 --- a/music-player/client/src/blocks/track.ts +++ b/music-player/client/src/blocks/track.ts @@ -1,16 +1,23 @@ import { TrackInfo } from "../client"; export class TrackCard extends HTMLElement { - track_info: TrackInfo | null; + track_info: TrackInfo; - constructor() { + constructor(info: TrackInfo) { super(); - this.track_info = null; + this.track_info = info; } connectedCallback() { - if (this.track_info) { - this.innerHTML = this.track_info.id; - } + const container = document.createElement("div"); + container.classList.add("track-card"); + this.appendChild(container); + + this.track_info.name && + container.appendChild(document.createTextNode(this.track_info.name)); + } + + updateContent() { + console.log("updateContent"); } } diff --git a/music-player/client/src/main.ts b/music-player/client/src/main.ts index 5674cbe..a118ba7 100644 --- a/music-player/client/src/main.ts +++ b/music-player/client/src/main.ts @@ -53,14 +53,17 @@ const formatTrack = (track: TrackInfo) => { */ const updateTrackList = (tracks: TrackInfo[]) => { - const track_list = document.querySelector(".track-list__tracks ul"); + const track_list = document.querySelector(".track-list__tracks"); if (track_list) { let track_formats = _.map(tracks, (info) => { - const card = new TrackCard(); - card.track_info = info; - return card; + return new TrackCard(info); + }); + _.map(track_formats, (trackCard) => { + let listItem = document.createElement("li"); + listItem.classList.add("track-list__row"); + listItem.appendChild(trackCard); + track_list.appendChild(listItem); }); - _.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo)); } else { console.log("track_list does not exist"); } diff --git a/music-player/client/styles.css b/music-player/client/styles.css index 420ac1d..0837335 100644 --- a/music-player/client/styles.css +++ b/music-player/client/styles.css @@ -26,9 +26,10 @@ body { } .track-list__row { - background-color: rgb(10, 10, 10); + margin-top: 32px; } +/* .track-list__row:nth-child(even) { background-color: rgb(255, 255, 255); } @@ -36,7 +37,12 @@ body { .track-list__row:nth-child(odd) { background-color: rgb(200, 200, 200); } +*/ -.track-list__cell { +.track-card { + border: 1px solid black; + border-radius: 5px; padding: 8px; + width: 300px; + height: 100px; } diff --git a/music-player/server/src/bin/server.rs b/music-player/server/src/bin/server.rs index 005a31d..2532edb 100644 --- a/music-player/server/src/bin/server.rs +++ b/music-player/server/src/bin/server.rs @@ -131,9 +131,6 @@ pub async fn main() { let routes = root.or(assets).or(track_list); let server = warp::serve(routes); server - .run(SocketAddr::new( - IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1)), - 8002, - )) + .run(SocketAddr::new(IpAddr::V4(Ipv4Addr::new(0, 0, 0, 0)), 8002)) .await; } diff --git a/music-player/server/src/music_scanner.rs b/music-player/server/src/music_scanner.rs index 8db6338..dddcc63 100644 --- a/music-player/server/src/music_scanner.rs +++ b/music-player/server/src/music_scanner.rs @@ -46,7 +46,10 @@ impl FileIterator { id: TrackId::from(path.to_str().unwrap().to_owned()), album: None, artist: None, - name: None, + name: path + .file_stem() + .and_then(|s| s.to_str()) + .map(|s| s.to_owned()), track_number: None, }) }