Album Page Views

This commit is contained in:
Neshura 2024-04-30 05:19:41 +02:00
parent 99b534e9b5
commit e2f8adc5db
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
12 changed files with 335 additions and 28 deletions

View file

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

View file

@ -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>

View file

@ -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;
}
}

View file

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

View file

@ -7,11 +7,6 @@
import {queueState} from "$lib/states/play-queue.svelte"; import {queueState} from "$lib/states/play-queue.svelte";
import {playbackState} from "$lib/states/playback-state.svelte"; import {playbackState} from "$lib/states/playback-state.svelte";
import {viewState} from "$lib/states/view-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> </script>
<svelte:head> <svelte:head>
@ -19,12 +14,10 @@
<meta name="robots" content="noindex nofollow" /> <meta name="robots" content="noindex nofollow" />
</svelte:head> </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 />
<AlbumsView /> {:else if viewState.current.mode === View.Artists}
{:else if viewState.current.mode === View.Artists} <p>Get Fucked</p>
<p>Get Fucked</p> {/if}
{/if}
</div>

View file

@ -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} />

View file

@ -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} />

View file

@ -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} />

View file

@ -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} />

View file

@ -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} />

View file

@ -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} />

View file

@ -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} />