dtourolle/jellytau
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 40 Wiki Activity

Fix Android navigation and improve UI responsiveness

Browse Source 
- Convert music category buttons from <button> to native <a> links for better Android compatibility
- Convert artist/album nested buttons in TrackList to <a> links to fix HTML validation issues
- Add event handlers with proper stopPropagation to maintain click behavior
- Increase library overview card sizes from medium to large (50% bigger)
- Increase thumbnail sizes in list view from 10x10 to 16x16
- Add console logging for debugging click events on mobile
- Remove preventDefault() handlers that were blocking Android touch events

These changes resolve navigation issues on Android devices where buttons weren't responding to taps. Native <a> links provide better cross-platform compatibility and allow SvelteKit to handle navigation more reliably.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
dtourolle
2026-01-27 16:04:57 +01:00
co-authored by Claude Haiku 4.5
parent e560543181
commit 544ea43a84
14 changed files with 949 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/library/TrackList.svelte
+45 -35
View File
@@ -142,15 +142,23 @@
}
}
function handleArtistClick(artistId: string, e: Event) {
async function handleArtistClick(artistId: string, e: Event) {
e.stopPropagation();
goto(`/library/${artistId}`);
try {
await goto(`/library/${artistId}`);
} catch (error) {
console.error("Navigation error:", error);
}
}
function handleAlbumClick(albumId: string | undefined, e: Event) {
async function handleAlbumClick(albumId: string | undefined, e: Event) {
if (!albumId) return;
e.stopPropagation();
goto(`/library/${albumId}`);
try {
await goto(`/library/${albumId}`);
} catch (error) {
console.error("Navigation error:", error);
}
}
async function addToQueue(track: MediaItem, position: "next" | "end", e: Event) {
@@ -214,6 +222,7 @@
<div class="w-full group hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors relative {currentlyPlayingId === track.id ? 'bg-[var(--color-jellyfin)]/10 border-l-4 border-[var(--color-jellyfin)]' : ''}">
<!-- Desktop View -->
<button
type="button"
onclick={() => handleTrackClick(track, index)}
disabled={isPlayingTrack !== null}
class="hidden md:grid gap-4 px-4 py-3 items-center w-full text-left cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
@@ -258,13 +267,13 @@
<div class="text-gray-300 truncate flex flex-wrap items-center gap-1">
{#if track.artistItems && track.artistItems.length > 0}
{#each track.artistItems as artist, idx}
<button
type="button"
onclick={(e) => handleArtistClick(artist.id, e)}
class="text-[var(--color-jellyfin)] hover:underline truncate"
<a
href="/library/{artist.id}"
onclick={(e) => e.stopPropagation()}
class="text-[var(--color-jellyfin)] hover:underline truncate cursor-pointer block"
>
{artist.name}
</button>
</a>
{#if idx < track.artistItems.length - 1}
<span>,</span>
{/if}
@@ -279,13 +288,13 @@
{#if showAlbum}
<div class="text-gray-300 truncate">
{#if track.albumId}
<button
type="button"
onclick={(e) => handleAlbumClick(track.albumId, e)}
class="text-[var(--color-jellyfin)] hover:underline truncate"
<a
href="/library/{track.albumId}"
onclick={(e) => e.stopPropagation()}
class="text-[var(--color-jellyfin)] hover:underline truncate cursor-pointer"
>
{track.albumName || "-"}
</button>
</a>
{:else}
{track.albumName || "-"}
{/if}
@@ -333,9 +342,10 @@
<!-- Mobile View -->
<button
type="button"
onclick={() => handleTrackClick(track, index)}
disabled={isPlayingTrack !== null}
class="md:hidden flex items-center gap-3 px-4 py-3 w-full disabled:opacity-50 disabled:cursor-not-allowed"
class="md:hidden flex items-center gap-3 px-4 py-3 w-full disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
>
<!-- Track Number -->
<div class="w-8 flex-shrink-0 text-center">
@@ -365,13 +375,13 @@
{#if showArtist && showAlbum}
{#if track.artistItems && track.artistItems.length > 0}
{#each track.artistItems as artist, idx}
<button
type="button"
onclick={(e) => handleArtistClick(artist.id, e)}
class="text-[var(--color-jellyfin)] hover:underline"
<a
href="/library/{artist.id}"
onclick={(e) => e.stopPropagation()}
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
>
{artist.name}
</button>
</a>
{#if idx < track.artistItems.length - 1}
<span>,</span>
{/if}
@@ -381,26 +391,26 @@
{/if}
<span>•</span>
{#if track.albumId}
<button
type="button"
onclick={(e) => handleAlbumClick(track.albumId, e)}
class="text-[var(--color-jellyfin)] hover:underline"
<a
href="/library/{track.albumId}"
onclick={(e) => e.stopPropagation()}
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
>
{track.albumName || "-"}
</button>
</a>
{:else}
{track.albumName || "-"}
{/if}
{:else if showArtist}
{#if track.artistItems && track.artistItems.length > 0}
{#each track.artistItems as artist, idx}
<button
type="button"
onclick={(e) => handleArtistClick(artist.id, e)}
class="text-[var(--color-jellyfin)] hover:underline"
<a
href="/library/{artist.id}"
onclick={(e) => e.stopPropagation()}
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
>
{artist.name}
</button>
</a>
{#if idx < track.artistItems.length - 1}
<span>,</span>
{/if}
@@ -410,13 +420,13 @@
{/if}
{:else if showAlbum}
{#if track.albumId}
<button
type="button"
onclick={(e) => handleAlbumClick(track.albumId, e)}
class="text-[var(--color-jellyfin)] hover:underline"
<a
href="/library/{track.albumId}"
onclick={(e) => e.stopPropagation()}
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
>
{track.albumName || "-"}
</button>
</a>
{:else}
{track.albumName || "-"}
{/if}