Album Page Views

src/lib/components/custom/PlayerSidebar.svelte

@@ -6,22 +6,25 @@
     import {View} from "$lib/components/custom/Views/views.svelte";
     import {AlbumView} from "$lib/components/custom/Views/views.svelte.js";
     import {viewState} from "$lib/states/view-state.svelte";
+    import {goto} from "$app/navigation";
 
     let playlists = $state([]);
+    let expanded = $state(true);
+    $inspect(expanded)
 </script>
 
 <div class="border border-2 col-span-1 flex flex-col gap-1 p-2">
     <div class="flex flex-col gap-2">
-        <Button onclick={() => viewState.setMode(View.Albums)} class="flex flex-col h-fit">Albums
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.All)}>All</Button>
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.Random)}>Random</Button>
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.Favourites)}>Favourites</Button>
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.TopRated)}>Top Rated</Button>
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.RecentlyAdded)}>Recently Added</Button>
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.RecentlyPlayed)}>Recently Played</Button>
-            <Button variant="secondary" onclick={() => viewState.setSubMode(AlbumView.MostPlayed)}>Most Played</Button>
-        </Button>
-
+        <Button onclick={() => expanded = !expanded} class="flex flex-col h-fit">Albums</Button>
+        {#if expanded}
+            <Button variant="secondary" onclick={() => goto("/albums/all")}>All</Button>
+            <Button variant="secondary" onclick={() => goto("/albums/random")}>Random</Button>
+            <Button variant="secondary" onclick={() => goto("/albums/favourites")}>Favourites</Button>
+            <Button variant="secondary" onclick={() => goto("/albums/top-rated")}>Top Rated</Button>
+            <Button variant="secondary" onclick={() => goto("/albums/recently-added")}>Recently Added</Button>
+            <Button variant="secondary" onclick={() => goto("/albums/recently-played")}>Recently Played</Button>
+            <Button variant="secondary" onclick={() => goto("/albums/most-played")}>Most Played</Button>
+        {/if}
     </div>
     <Separator />
     <Button onclick={() => viewState.setMode(View.Artists)}>Artists</Button>

src/lib/components/custom/Views/AlbumComponent.svelte

@@ -0,0 +1,20 @@
+<svelte:options runes={true} />
+
+<script>
+    import ViewCard from "$lib/components/custom/Views/ViewCard.svelte";
+    import {Skeleton} from "$lib/components/ui/skeleton";
+    let {albums, updateScroll, selectAlbum} = $props();
+    let self = $state();
+</script>
+
+<div class="border border-2 flex flex-row flex-wrap gap-2 p-2 h-fit max-h-full items-start justify-start overflow-y-auto" bind:this={self} onscroll={() => updateScroll(self)}>
+    {#if albums.loading}
+        {#each [...Array(20).keys()] as i}
+            <Skeleton id={"album-skeleton-" + i} class="rounded-md w-56 h-72 border border-2 bg-background" />
+        {/each}
+    {:else}
+        {#each albums.list as album}
+            <ViewCard data={album} onselectalbum={selectAlbum}/>
+        {/each}
+    {/if}
+</div>

src/lib/components/custom/Views/album-pages-utils.svelte.ts

@@ -0,0 +1,30 @@
+import {type AlbumID3, type GetAlbumList2Response, OpenSubsonic, type Parameter} from "$lib/opensubsonic";
+
+export class AlbumState {
+    list: Array<AlbumID3> = $state(new Array<AlbumID3>())
+    loading: boolean = $state(true)
+    paginating: boolean = $state(false)
+    paginationIncrement: number = $state(100)
+    pagination: number = $state(0)
+    mode: string = $state("alphabeticalByName")
+
+    async fetchAlbums(): Promise<void> {
+        const parameters: Array<Parameter> = [
+            {key: "type", value: this.mode},
+            {key: "size", value: this.paginationIncrement.toString()},
+            {key: "offset", value: this.pagination.toString()},
+        ];
+
+        const data: GetAlbumList2Response = await OpenSubsonic.get("getAlbumList2", parameters);
+        if (data && data.albumList2.album) {
+            this.list = this.list.concat(data.albumList2.album);
+            this.pagination += this.paginationIncrement;
+            this.paginating = false;
+            this.loading = false;
+        }
+    }
+
+    setMode(mode: string): void {
+        this.mode = mode;
+    }
+}

src/routes/+layout.svelte

@@ -5,16 +5,15 @@
     import QueueFrame from "$lib/components/custom/QueueFrame.svelte";
     import {onMount} from "svelte";
     import PlayerControls from "$lib/components/custom/PlayerControls.svelte";
-    import {AlbumView, View} from "$lib/components/custom/Views/views.svelte";
     import PlayerSidebar from "$lib/components/custom/PlayerSidebar.svelte";
+    import {queueState} from "$lib/states/play-queue.svelte";
+    import {playbackState} from "$lib/states/playback-state.svelte";
 
     let { children } = $props();
 
-    let viewMode = $state(View.Albums);
-    let subViewMode = $state(AlbumView.All);
-
     onMount(() => {
-
+        queueState.getPlayQueue(true);
+        playbackState.song = new Audio(); // needed so source is not undefined
     })
 </script>
 
@@ -25,7 +24,9 @@
     <!--<QueueFrame queue={queueState} {fetchQueue} {saveQueue} {removeSongFromQueue} {playSong} currentIndex={currentSong.queueIndex} />-->
     <div class="border border-2 flex-1 grid grid-cols-5 h-1 min-h-fit">
         <PlayerSidebar />
+        <div class="border border-2 col-span-3 overflow-hidden">
             {@render children()}
+        </div>
         <QueueFrame />
     </div>
 

src/routes/+page.svelte

@@ -7,11 +7,6 @@
     import {queueState} from "$lib/states/play-queue.svelte";
     import {playbackState} from "$lib/states/playback-state.svelte";
     import {viewState} from "$lib/states/view-state.svelte";
-
-    onMount(() => {
-        queueState.getPlayQueue(true);
-        playbackState.song = new Audio(); // needed so source is not undefined
-    })
 </script>
 
 <svelte:head>
@@ -19,12 +14,10 @@
     <meta name="robots" content="noindex nofollow" />
 </svelte:head>
 
-<div class="border border-2 col-span-3 overflow-hidden">
-    {#if viewState.current.mode === View.Albums}es
+{#if viewState.current.mode === View.Albums}es
     <AlbumsView />
-    {:else if viewState.current.mode === View.Artists}
+{:else if viewState.current.mode === View.Artists}
     <p>Get Fucked</p>
-    {/if}
-</div>
+{/if}
 
 

src/routes/albums/all/+page.svelte

@@ -0,0 +1,38 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("alphabeticalByName")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />
+

src/routes/albums/favourites/+page.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("starred")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />

src/routes/albums/most-played/+page.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("frequent")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />

src/routes/albums/random/+page.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("random")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />

src/routes/albums/recently-added/+page.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("newest")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />

src/routes/albums/recently-played/+page.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("recent")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />

src/routes/albums/top-rated/+page.svelte

@@ -0,0 +1,37 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {goto} from "$app/navigation";
+    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
+    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";
+
+    let scrollY = $state(0);
+    let scrollYMax = $state(1);
+    let albums: AlbumState = $state(new AlbumState());
+    albums.setMode("highest")
+
+    function updateScroll(self) {
+        scrollY = self.scrollTop;
+        scrollYMax = self.scrollTopMax;
+    }
+
+    $effect(() => {
+        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
+            console.log("triggered")
+            albums.paginating = true;
+            albums.fetchAlbums();
+        }
+    })
+
+    function selectAlbum(albumId) {
+        goto(`/album/${albumId}`);
+        console.log(albumId);
+    }
+
+    onMount(() => {
+        albums.fetchAlbums();
+    })
+</script>
+
+<AlbumComponent {albums} {updateScroll} {selectAlbum} />