feat(webui): implement infinite scroll

entity/src/lib.rs

@@ -17,6 +17,7 @@ pub mod select_result {
         pub description: Option<String>,
         pub album_id: String,
         pub album_title: String,
+        pub album_artist: String,
         pub album_cover: Option<String>,
         pub album_year: Option<u32>,
         pub artist_id: String,

entity/src/track.rs

@@ -159,11 +159,12 @@ impl From<select_result::PlaylistTrack> for Model {
                 id: playlist_track.album_id,
                 title: playlist_track.album_title,
                 cover: playlist_track.album_cover,
+                artist: playlist_track.artist_name.clone(),
                 ..Default::default()
             },
             artists: vec![artist::Model {
                 id: playlist_track.artist_id,
-                name: playlist_track.artist_name,
+                name: playlist_track.artist_name.clone(),
                 ..Default::default()
             }],
             ..Default::default()

graphql/src/schema/library.rs

@@ -17,11 +17,17 @@ pub struct LibraryQuery;
 
 #[Object]
 impl LibraryQuery {
-    async fn tracks(&self, ctx: &Context<'_>) -> Result<Vec<Track>, Error> {
+    async fn tracks(
+        &self,
+        ctx: &Context<'_>,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Vec<Track>, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let results: Vec<(track_entity::Model, Vec<artist_entity::Model>)> =
             track_entity::Entity::find()
-                .limit(100)
+                .offset(offset.unwrap_or(0))
+                .limit(limit.unwrap_or(100))
                 .order_by_asc(track_entity::Column::Title)
                 .find_with_related(artist_entity::Entity)
                 .all(db.lock().await.get_connection())
@@ -54,20 +60,34 @@ impl LibraryQuery {
             .collect())
     }
 
-    async fn artists(&self, ctx: &Context<'_>) -> Result<Vec<Artist>, Error> {
+    async fn artists(
+        &self,
+        ctx: &Context<'_>,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Vec<Artist>, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let results = artist_entity::Entity::find()
             .order_by_asc(artist_entity::Column::Name)
+            .offset(offset.unwrap_or(0))
+            .limit(limit.unwrap_or(100))
             .all(db.lock().await.get_connection())
             .await?;
 
         Ok(results.into_iter().map(Into::into).collect())
     }
 
-    async fn albums(&self, ctx: &Context<'_>) -> Result<Vec<Album>, Error> {
+    async fn albums(
+        &self,
+        ctx: &Context<'_>,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Vec<Album>, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let results = album_entity::Entity::find()
             .order_by_asc(album_entity::Column::Title)
+            .offset(offset.unwrap_or(0))
+            .limit(limit.unwrap_or(100))
             .all(db.lock().await.get_connection())
             .await?;
         Ok(results.into_iter().map(Into::into).collect())

graphql/src/schema/objects/track.rs

@@ -146,6 +146,7 @@ impl From<select_result::PlaylistTrack> for Track {
             album: Album {
                 id: ID(result.album_id),
                 title: result.album_title,
+                artist: result.album_artist,
                 cover: result.album_cover,
                 year: result.album_year,
                 ..Default::default()

graphql/src/schema/playback.rs

@@ -17,47 +17,32 @@ pub struct PlaybackQuery;
 
 #[Object]
 impl PlaybackQuery {
-    async fn currently_playing_song(
-        &self,
-        ctx: &Context<'_>,
-    ) -> Result<CurrentlyPlayingSong, Error> {
+    async fn currently_playing_song(&self, ctx: &Context<'_>) -> Result<Option<Track>, Error> {
         let tracklist = ctx.data::<Arc<std::sync::Mutex<Tracklist>>>().unwrap();
-        let (track, index) = tracklist.lock().unwrap().current_track();
-        let playback_state = tracklist.lock().unwrap().playback_state();
-
-        if track.is_none() {
-            let response = CurrentlyPlayingSong {
-                track: None,
-                index: 0,
-                position_ms: 0,
-                is_playing: false,
-            };
-            return Ok(response);
-        }
-
-        if track.is_none() {
-            let response = CurrentlyPlayingSong {
-                track: None,
-                index: 0,
-                position_ms: 0,
-                is_playing: false,
-            };
-            return Ok(response);
+        let (track, _) = tracklist.lock().unwrap().current_track();
+        match track {
+            Some(track) => Ok(Some(Track::from(track))),
+            None => Ok(None),
         }
+    }
 
-        let track = track.unwrap();
+    async fn get_player_state(&self, ctx: &Context<'_>) -> Result<PlayerState, Error> {
+        let tracklist = ctx.data::<Arc<std::sync::Mutex<Tracklist>>>().unwrap();
+        let (_, index) = tracklist.lock().unwrap().current_track();
+        let playback_state = tracklist.lock().unwrap().playback_state();
 
-        Ok(CurrentlyPlayingSong {
-            track: Some(track.into()),
+        Ok(PlayerState {
             index: index as u32,
             position_ms: playback_state.position_ms,
             is_playing: playback_state.is_playing,
         })
     }
 
-    async fn get_player_state(&self, ctx: &Context<'_>) -> PlayerState {
-        let _tracklist = ctx.data::<Arc<Mutex<Tracklist>>>().unwrap();
-        todo!()
+    async fn playback_progress(&self, ctx: &Context<'_>) -> Result<u32, Error> {
+        let tracklist = ctx.data::<Arc<std::sync::Mutex<Tracklist>>>().unwrap();
+        let playback_state = tracklist.lock().unwrap().playback_state();
+
+        Ok(playback_state.position_ms)
     }
 }
 

graphql/src/schema/playlist.rs

@@ -27,7 +27,13 @@ pub struct PlaylistQuery;
 
 #[Object]
 impl PlaylistQuery {
-    async fn playlist(&self, ctx: &Context<'_>, id: ID) -> Result<Playlist, Error> {
+    async fn playlist(
+        &self,
+        ctx: &Context<'_>,
+        id: ID,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Playlist, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let db = db.lock().await;
 
@@ -46,6 +52,7 @@ impl PlaylistQuery {
                     .column_as(artist_entity::Column::Name, "artist_name")
                     .column_as(album_entity::Column::Id, "album_id")
                     .column_as(album_entity::Column::Title, "album_title")
+                    .column_as(album_entity::Column::Artist, "album_artist")
                     .column_as(album_entity::Column::Cover, "album_cover")
                     .column_as(album_entity::Column::Year, "album_year")
                     .column_as(track_entity::Column::Id, "track_id")
@@ -68,6 +75,8 @@ impl PlaylistQuery {
                     )
                     .join(JoinType::LeftJoin, track_entity::Relation::Album.def())
                     .join(JoinType::LeftJoin, track_entity::Relation::Artist.def())
+                    .offset(offset.unwrap_or(0))
+                    .limit(limit.unwrap_or(100))
                     .into_model::<select_result::PlaylistTrack>()
                     .all(db.get_connection())
                     .await?;
@@ -89,23 +98,37 @@ impl PlaylistQuery {
         }
     }
 
-    async fn playlists(&self, ctx: &Context<'_>) -> Result<Vec<Playlist>, Error> {
+    async fn playlists(
+        &self,
+        ctx: &Context<'_>,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Vec<Playlist>, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let db = db.lock().await;
         playlist_entity::Entity::find()
             .order_by_asc(playlist_entity::Column::Name)
+            .offset(offset.unwrap_or(0))
+            .limit(limit.unwrap_or(100))
             .all(db.get_connection())
             .await
             .map(|playlists| playlists.into_iter().map(Into::into).collect())
             .map_err(|e| Error::new(e.to_string()))
     }
 
-    async fn main_playlists(&self, ctx: &Context<'_>) -> Result<Vec<Playlist>, Error> {
+    async fn main_playlists(
+        &self,
+        ctx: &Context<'_>,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Vec<Playlist>, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let db = db.lock().await;
         playlist_entity::Entity::find()
             .order_by_asc(playlist_entity::Column::Name)
             .filter(playlist_entity::Column::FolderId.is_null())
+            .offset(offset.unwrap_or(0))
+            .limit(limit.unwrap_or(100))
             .all(db.get_connection())
             .await
             .map(|playlists| playlists.into_iter().map(Into::into).collect())
@@ -140,11 +163,18 @@ impl PlaylistQuery {
         Ok(folder.into())
     }
 
-    async fn folders(&self, ctx: &Context<'_>) -> Result<Vec<Folder>, Error> {
+    async fn folders(
+        &self,
+        ctx: &Context<'_>,
+        limit: Option<u64>,
+        offset: Option<u64>,
+    ) -> Result<Vec<Folder>, Error> {
         let db = ctx.data::<Arc<Mutex<Database>>>().unwrap();
         let db = db.lock().await;
         folder_entity::Entity::find()
             .order_by_asc(folder_entity::Column::Name)
+            .offset(offset.unwrap_or(0))
+            .limit(limit.unwrap_or(100))
             .all(db.get_connection())
             .await
             .map(|folders| folders.into_iter().map(Into::into).collect())

graphql/src/schema/tracklist.rs

@@ -18,10 +18,13 @@ use tokio::sync::{mpsc::UnboundedSender, Mutex};
 
 use crate::simple_broker::SimpleBroker;
 
-use super::{objects::{
-    track::{Track, TrackInput},
-    tracklist::Tracklist,
-}, MutationType};
+use super::{
+    objects::{
+        track::{Track, TrackInput},
+        tracklist::Tracklist,
+    },
+    MutationType,
+};
 
 #[derive(Default)]
 pub struct TracklistQuery;
@@ -349,6 +352,7 @@ impl TracklistMutation {
                     .column_as(artist_entity::Column::Name, "artist_name")
                     .column_as(album_entity::Column::Id, "album_id")
                     .column_as(album_entity::Column::Title, "album_title")
+                    .column_as(album_entity::Column::Artist, "album_artist")
                     .column_as(album_entity::Column::Cover, "album_cover")
                     .column_as(album_entity::Column::Year, "album_year")
                     .column_as(track_entity::Column::Id, "track_id")

server/src/server.rs

@@ -68,7 +68,7 @@ impl MusicPlayerServer {
         let addr: SocketAddr = format!("0.0.0.0:{}", settings.port).parse().unwrap();
 
         println!("{}", BANNER.magenta());
-        println!("Server listening on {}", addr.cyan());
+        println!("Server is listening on {}", addr.cyan());
 
         Server::builder()
             .accept_http1(true)
@@ -108,7 +108,7 @@ impl MusicPlayerServer {
 
         let try_socket = TcpListener::bind(addr).await;
         let listener = try_socket.expect("Failed to bind");
-        println!("Websocket server listening on {}", addr.cyan());
+        println!("Websocket server is listening on {}", addr.cyan());
 
         // Let's spawn the handling of each connection in a separate task.
         while let Ok((stream, addr)) = listener.accept().await {

webui/musicplayer/build/asset-manifest.json

@@ -1,20 +1,20 @@
 {
   "files": {
-    "main.css": "/static/css/main.56b69c4b.css",
-    "main.js": "/static/js/main.5f0e0e2a.js",
+    "main.css": "/static/css/main.9657bc00.css",
+    "main.js": "/static/js/main.a62300e2.js",
     "static/js/787.26bf0a29.chunk.js": "/static/js/787.26bf0a29.chunk.js",
     "static/media/RockfordSans-ExtraBold.otf": "/static/media/RockfordSans-ExtraBold.1513e8fd97078bfb7708.otf",
     "static/media/RockfordSans-Bold.otf": "/static/media/RockfordSans-Bold.c9f599ae01b13e565598.otf",
     "static/media/RockfordSans-Medium.otf": "/static/media/RockfordSans-Medium.e10344a796535b513215.otf",
     "static/media/RockfordSans-Regular.otf": "/static/media/RockfordSans-Regular.652654f28f1c111914b9.otf",
     "static/media/RockfordSans-Light.otf": "/static/media/RockfordSans-Light.b4a12e8abb38f7d105c4.otf",
     "index.html": "/index.html",
-    "main.56b69c4b.css.map": "/static/css/main.56b69c4b.css.map",
-    "main.5f0e0e2a.js.map": "/static/js/main.5f0e0e2a.js.map",
+    "main.9657bc00.css.map": "/static/css/main.9657bc00.css.map",
+    "main.a62300e2.js.map": "/static/js/main.a62300e2.js.map",
     "787.26bf0a29.chunk.js.map": "/static/js/787.26bf0a29.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.56b69c4b.css",
-    "static/js/main.5f0e0e2a.js"
+    "static/css/main.9657bc00.css",
+    "static/js/main.a62300e2.js"
   ]
 }

webui/musicplayer/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.5f0e0e2a.js"></script><link href="/static/css/main.56b69c4b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.a62300e2.js"></script><link href="/static/css/main.9657bc00.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>