Album Page Views
This commit is contained in:
parent
99b534e9b5
commit
e2f8adc5db
12 changed files with 335 additions and 28 deletions
|
@ -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>
|
||||||
|
|
20
src/lib/components/custom/Views/AlbumComponent.svelte
Normal file
20
src/lib/components/custom/Views/AlbumComponent.svelte
Normal 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>
|
30
src/lib/components/custom/Views/album-pages-utils.svelte.ts
Normal file
30
src/lib/components/custom/Views/album-pages-utils.svelte.ts
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
38
src/routes/albums/all/+page.svelte
Normal file
38
src/routes/albums/all/+page.svelte
Normal 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} />
|
||||||
|
|
37
src/routes/albums/favourites/+page.svelte
Normal file
37
src/routes/albums/favourites/+page.svelte
Normal 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} />
|
37
src/routes/albums/most-played/+page.svelte
Normal file
37
src/routes/albums/most-played/+page.svelte
Normal 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} />
|
37
src/routes/albums/random/+page.svelte
Normal file
37
src/routes/albums/random/+page.svelte
Normal 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} />
|
37
src/routes/albums/recently-added/+page.svelte
Normal file
37
src/routes/albums/recently-added/+page.svelte
Normal 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} />
|
37
src/routes/albums/recently-played/+page.svelte
Normal file
37
src/routes/albums/recently-played/+page.svelte
Normal 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} />
|
37
src/routes/albums/top-rated/+page.svelte
Normal file
37
src/routes/albums/top-rated/+page.svelte
Normal 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} />
|
Loading…
Reference in a new issue