shaunrd0/musicseerr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: musicSource in popular, trending & your-top pages (#45)

Browse Source 
* refactor: musicSource in popular page

* refactor: remove musicSourceStore from trending and yourTop pages

* replace original SourceSwitcher
This commit is contained in:
Arno
2026-04-13 14:53:57 +02:00
committed by GitHub
parent 3cf6b6cf9b
commit e523f2ccca
3 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/popular/+page.svelte
+18 -12
View File
@@ -1,22 +1,25 @@
<script lang="ts">
import { onMount } from 'svelte';
import TimeRangeView from '$lib/components/TimeRangeView.svelte';
import SourceSwitcher from '$lib/components/SourceSwitcher.svelte';
import { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
import { type MusicSource } from '$lib/stores/musicSource';
import { Disc3 } from 'lucide-svelte';
import type { PageProps } from './$types';
import { PersistedState } from 'runed';
import { PAGE_SOURCE_KEYS } from '$lib/constants';
import SimpleSourceSwitcher from '$lib/components/SimpleSourceSwitcher.svelte';
let source: MusicSource | null = $state(null);
const { data }: PageProps = $props();
onMount(async () => {
await musicSourceStore.load();
source = musicSourceStore.getPageSource('popular');
});
// svelte-ignore state_referenced_locally
let activeSource = new PersistedState<MusicSource>(
PAGE_SOURCE_KEYS['popular'],
data.primarySource
);
function handleSourceChange(nextSource: MusicSource) {
source = nextSource;
activeSource.current = nextSource;
}
let sourceLabel = $derived(source === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
let sourceLabel = $derived(activeSource.current === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
</script>
<svelte:head>
@@ -25,14 +28,17 @@
<div class="space-y-4 px-4 sm:px-6 lg:px-8">
<div class="flex justify-end">
<SourceSwitcher pageKey="popular" onSourceChange={handleSourceChange} />
<SimpleSourceSwitcher
currentSource={activeSource.current}
onSourceChange={handleSourceChange}
/>
</div>
<TimeRangeView
itemType="album"
endpoint="/api/v1/home/popular/albums"
title="Popular Right Now"
subtitle={`Most listened albums on ${sourceLabel}`}
{source}
source={activeSource.current}
errorIcon={Disc3}
/>
</div>
frontend/src/routes/trending/+page.svelte
+18 -12
View File
@@ -1,22 +1,25 @@
<script lang="ts">
import { onMount } from 'svelte';
import TimeRangeView from '$lib/components/TimeRangeView.svelte';
import SourceSwitcher from '$lib/components/SourceSwitcher.svelte';
import { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
import { type MusicSource } from '$lib/stores/musicSource';
import { Mic } from 'lucide-svelte';
import { PersistedState } from 'runed';
import { PAGE_SOURCE_KEYS } from '$lib/constants';
import type { PageProps } from './$types';
import SimpleSourceSwitcher from '$lib/components/SimpleSourceSwitcher.svelte';
let source: MusicSource | null = $state(null);
const { data }: PageProps = $props();
onMount(async () => {
await musicSourceStore.load();
source = musicSourceStore.getPageSource('trending');
});
// svelte-ignore state_referenced_locally
let activeSource = new PersistedState<MusicSource>(
PAGE_SOURCE_KEYS['trending'],
data.primarySource
);
function handleSourceChange(nextSource: MusicSource) {
source = nextSource;
activeSource.current = nextSource;
}
let sourceLabel = $derived(source === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
let sourceLabel = $derived(activeSource.current === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
</script>
<svelte:head>
@@ -25,14 +28,17 @@
<div class="space-y-4 px-4 sm:px-6 lg:px-8">
<div class="flex justify-end">
<SourceSwitcher pageKey="trending" onSourceChange={handleSourceChange} />
<SimpleSourceSwitcher
currentSource={activeSource.current}
onSourceChange={handleSourceChange}
/>
</div>
<TimeRangeView
itemType="artist"
endpoint="/api/v1/home/trending/artists"
title="Trending Artists"
subtitle={`Most listened artists on ${sourceLabel}`}
{source}
source={activeSource.current}
errorIcon={Mic}
/>
</div>
frontend/src/routes/your-top/+page.svelte
+18 -12
View File
@@ -1,22 +1,25 @@
<script lang="ts">
import { onMount } from 'svelte';
import TimeRangeView from '$lib/components/TimeRangeView.svelte';
import SourceSwitcher from '$lib/components/SourceSwitcher.svelte';
import { musicSourceStore, type MusicSource } from '$lib/stores/musicSource';
import { type MusicSource } from '$lib/stores/musicSource';
import { Disc3 } from 'lucide-svelte';
import { PersistedState } from 'runed';
import { PAGE_SOURCE_KEYS } from '$lib/constants';
import type { PageProps } from './$types';
import SimpleSourceSwitcher from '$lib/components/SimpleSourceSwitcher.svelte';
let source: MusicSource | null = $state(null);
const { data }: PageProps = $props();
onMount(async () => {
await musicSourceStore.load();
source = musicSourceStore.getPageSource('yourTop');
});
// svelte-ignore state_referenced_locally
let activeSource = new PersistedState<MusicSource>(
PAGE_SOURCE_KEYS['yourTop'],
data.primarySource
);
function handleSourceChange(nextSource: MusicSource) {
source = nextSource;
activeSource.current = nextSource;
}
let sourceLabel = $derived(source === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
let sourceLabel = $derived(activeSource.current === 'lastfm' ? 'Last.fm' : 'ListenBrainz');
</script>
<svelte:head>
@@ -25,14 +28,17 @@
<div class="space-y-4 px-4 sm:px-6 lg:px-8">
<div class="flex justify-end">
<SourceSwitcher pageKey="yourTop" onSourceChange={handleSourceChange} />
<SimpleSourceSwitcher
currentSource={activeSource.current}
onSourceChange={handleSourceChange}
/>
</div>
<TimeRangeView
itemType="album"
endpoint="/api/v1/home/your-top/albums"
title="Your Top Albums"
subtitle={`Your most listened albums on ${sourceLabel}`}
{source}
source={activeSource.current}
errorIcon={Disc3}
/>
</div>