Render a track list sent from the server

This commit is contained in:
Savanni D'Gerinel 2023-02-24 08:13:41 -05:00
parent 99ba020b7c
commit f0130d735e
4 changed files with 73 additions and 31 deletions

View File

@ -33,6 +33,7 @@
</thead> </thead>
<tbody> <tbody>
<!--
<tr class="track-list__track-row"> <tr class="track-list__track-row">
<td> 1 </td> <td> 1 </td>
<td> Underground </td> <td> Underground </td>
@ -68,12 +69,13 @@
<td> Artemis </td> <td> Artemis </td>
<td> 3:58 </td> <td> 3:58 </td>
</tr> </tr>
-->
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<script src="./main.js" type="module"></script> <script src="./bundle.js" type="module"></script>
</body> </body>
</html> </html>

View File

@ -1,5 +1,13 @@
import * as _ from "lodash"; import * as _ from "lodash";
interface TrackInfo {
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");
if (title && title.innerHTML) { if (title && title.innerHTML) {
@ -7,21 +15,42 @@ const replaceTitle = () => {
} }
}; };
/* const getTracks = () => fetch("/api/v1/tracks").then((r) => r.json());
const checkWeatherService = () => {
fetch("https://api.weather.gov/") const formatTrack = (track: TrackInfo) => {
.then((r) => r.json()) let row = document.createElement("tr");
.then((js) => {
const weather = document.querySelector('.js-weather'); let track_number = document.createElement("td");
weather.innerHTML = js.status; track_number.appendChild(
}); document.createTextNode(track.track_number.toString())
} );
*/
let name = document.createElement("td");
name.appendChild(document.createTextNode(track.name));
let album = document.createElement("td");
album.appendChild(document.createTextNode(track.album));
let artist = document.createElement("td");
artist.appendChild(document.createTextNode(track.artist));
row.appendChild(track_number);
row.appendChild(name);
row.appendChild(artist);
row.appendChild(album);
return row;
};
const updateTrackList = (tracks: TrackInfo[]) => {
const track_list = document.querySelector(".track-list__tracks tbody");
if (track_list) {
let track_formats = _.map(tracks, formatTrack);
_.map(track_formats, (trackinfo) => track_list.appendChild(trackinfo));
}
};
const run = () => { const run = () => {
replaceTitle(); getTracks().then((tracks) => updateTrackList(tracks));
console.log(_.map([4, 8], (x) => x * x));
// checkWeatherService();
}; };
run(); run();

View File

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

View File

@ -9,51 +9,59 @@ use std::{
}; };
use warp::{Filter, Reply}; use warp::{Filter, Reply};
use music_player::{core::Core, database::MemoryIndex}; use music_player::{
audio::{TrackId, TrackInfo},
core::Core,
database::MemoryIndex,
};
/* fn tracks() -> Vec<TrackInfo> {
fn tracks() -> Vec<Track> {
vec![ vec![
Track { TrackInfo {
track_number: Some(1), track_number: Some(1),
name: Some("Underground".to_owned()), name: Some("Underground".to_owned()),
album: Some("Artemis".to_owned()), album: Some("Artemis".to_owned()),
artist: Some("Lindsey Stirling".to_owned()), artist: Some("Lindsey Stirling".to_owned()),
path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/01 - Underground.ogg"), id: TrackId::from(
"/mnt/music/Lindsey Stirling/Artemis/01 - Underground.ogg".to_owned(),
),
}, },
Track { TrackInfo {
track_number: Some(2), track_number: Some(2),
name: Some("Artemis".to_owned()), name: Some("Artemis".to_owned()),
album: Some("Artemis".to_owned()), album: Some("Artemis".to_owned()),
artist: Some("Lindsey Stirling".to_owned()), artist: Some("Lindsey Stirling".to_owned()),
path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/02 - Artemis.ogg"), id: TrackId::from("/mnt/music/Lindsey Stirling/Artemis/02 - Artemis.ogg".to_owned()),
}, },
Track { TrackInfo {
track_number: Some(3), track_number: Some(3),
name: Some("Til the Light Goes Out".to_owned()), name: Some("Til the Light Goes Out".to_owned()),
album: Some("Artemis".to_owned()), album: Some("Artemis".to_owned()),
artist: Some("Lindsey Stirling".to_owned()), artist: Some("Lindsey Stirling".to_owned()),
path: PathBuf::from( id: TrackId::from(
"/mnt/music/Lindsey Stirling/Artemis/03 - Til the Light Goes Out.ogg", "/mnt/music/Lindsey Stirling/Artemis/03 - Til the Light Goes Out.ogg".to_owned(),
), ),
}, },
Track { TrackInfo {
track_number: Some(4), track_number: Some(4),
name: Some("Between Twilight".to_owned()), name: Some("Between Twilight".to_owned()),
album: Some("Artemis".to_owned()), album: Some("Artemis".to_owned()),
artist: Some("Lindsey Stirling".to_owned()), artist: Some("Lindsey Stirling".to_owned()),
path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/04 - Between Twilight.ogg"), id: TrackId::from(
"/mnt/music/Lindsey Stirling/Artemis/04 - Between Twilight.ogg".to_owned(),
),
}, },
Track { TrackInfo {
track_number: Some(5), track_number: Some(5),
name: Some("Foreverglow".to_owned()), name: Some("Foreverglow".to_owned()),
album: Some("Artemis".to_owned()), album: Some("Artemis".to_owned()),
artist: Some("Lindsey Stirling".to_owned()), artist: Some("Lindsey Stirling".to_owned()),
path: PathBuf::from("/mnt/music/Lindsey Stirling/Artemis/05 - Foreverglow.ogg"), id: TrackId::from(
"/mnt/music/Lindsey Stirling/Artemis/05 - Foreverglow.ogg".to_owned(),
),
}, },
] ]
} }
*/
enum Bundle { enum Bundle {
Index, Index,
@ -118,10 +126,12 @@ pub async fn main() {
let conn = Connection::new_session().expect("to connect to dbus"); let conn = Connection::new_session().expect("to connect to dbus");
warp::reply::json(&list_devices(conn)) warp::reply::json(&list_devices(conn))
}); });
*/
let track_list = warp::path!("api" / "v1" / "tracks") let track_list = warp::path!("api" / "v1" / "tracks")
.and(warp::get()) .and(warp::get())
.map(|| warp::reply::json(&tracks())); .map(|| warp::reply::json(&tracks()));
/*
let tracks_for_artist = warp::path!("api" / "v1" / "artist" / String) let tracks_for_artist = warp::path!("api" / "v1" / "artist" / String)
.and(warp::get()) .and(warp::get())
.map(|_artist: String| warp::reply::json(&tracks())); .map(|_artist: String| warp::reply::json(&tracks()));
@ -147,7 +157,7 @@ pub async fn main() {
.or(queue) .or(queue)
.or(playing_status); .or(playing_status);
*/ */
let routes = index.or(app).or(styles); let routes = index.or(app).or(styles).or(track_list);
let server = warp::serve(routes); let server = warp::serve(routes);
server server
.run(SocketAddr::new( .run(SocketAddr::new(