dtourolle/jellytau
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 38 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/routes/library/+page.svelte
+48 -40
View File
@@ -43,17 +43,21 @@
});
async function handleLibraryClick(lib: Library) {
// Route to dedicated music library page
if (lib.collectionType === "music") {
library.setCurrentLibrary(lib);
goto("/library/music");
return;
}
try {
// Route to dedicated music library page
if (lib.collectionType === "music") {
library.setCurrentLibrary(lib);
await goto("/library/music");
return;
}
// For other library types, load items normally
library.setCurrentLibrary(lib);
library.clearGenres();
await library.loadItems(lib.id);
// For other library types, load items normally
library.setCurrentLibrary(lib);
library.clearGenres();
await library.loadItems(lib.id);
} catch (error) {
console.error("Navigation error:", error);
}
}
async function handleGenreFilterChange() {
@@ -64,35 +68,39 @@
}
}
function handleItemClick(item: MediaItem | Library) {
if ("type" in item) {
// It's a MediaItem
const mediaItem = item as MediaItem;
switch (mediaItem.type) {
case "Series":
case "Movie":
case "MusicAlbum":
case "MusicArtist":
case "Folder":
case "CollectionFolder":
case "Playlist":
case "Channel":
case "ChannelFolderItem":
// Navigate to detail view
goto(`/library/${mediaItem.id}`);
break;
case "Episode":
// Episodes play directly
goto(`/player/${mediaItem.id}`);
break;
default:
// For other items, try detail page first
goto(`/library/${mediaItem.id}`);
break;
async function handleItemClick(item: MediaItem | Library) {
try {
if ("type" in item) {
// It's a MediaItem
const mediaItem = item as MediaItem;
switch (mediaItem.type) {
case "Series":
case "Movie":
case "MusicAlbum":
case "MusicArtist":
case "Folder":
case "CollectionFolder":
case "Playlist":
case "Channel":
case "ChannelFolderItem":
// Navigate to detail view
await goto(`/library/${mediaItem.id}`);
break;
case "Episode":
// Episodes play directly
await goto(`/player/${mediaItem.id}`);
break;
default:
// For other items, try detail page first
await goto(`/library/${mediaItem.id}`);
break;
}
} else {
// It's a Library
await handleLibraryClick(item as Library);
}
} else {
// It's a Library
handleLibraryClick(item as Library);
} catch (error) {
console.error("Navigation error:", error);
}
}
@@ -180,11 +188,11 @@
<p>No libraries found</p>
</div>
{:else}
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
{#each $libraries as lib (lib.id)}
<MediaCard
item={lib}
size="medium"
size="large"
onclick={() => handleLibraryClick(lib)}
/>
{/each}
src/routes/library/music/+page.svelte
+9 -15
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import { goto } from "$app/navigation";
interface Category {
id: string;
name: string;
@@ -46,10 +44,6 @@
route: "/library/music/genres",
},
];
function handleCategoryClick(route: string) {
goto(route);
}
</script>
<div class="space-y-8">
@@ -59,27 +53,27 @@
<h1 class="text-3xl font-bold text-white">Music Library</h1>
<p class="text-gray-400 mt-1">Choose a category to browse</p>
</div>
<button
onclick={() => goto('/library')}
class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white"
<a
href="/library"
class="p-2 rounded-lg hover:bg-white/10 transition-colors text-gray-400 hover:text-white inline-block"
title="Back to libraries"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
</a>
</div>
<!-- Category Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
{#each categories as category (category.id)}
<button
onclick={() => handleCategoryClick(category.route)}
class="group relative bg-[var(--color-surface)] rounded-xl p-8 hover:bg-[var(--color-surface-hover)] transition-all duration-200 text-left overflow-hidden"
<a
href={category.route}
class="group relative bg-[var(--color-surface)] rounded-xl p-8 hover:bg-[var(--color-surface-hover)] transition-all duration-200 text-left overflow-hidden cursor-pointer active:scale-95 block no-underline"
>
<!-- Background gradient -->
<div
class="absolute inset-0 bg-gradient-to-br from-[var(--color-jellyfin)]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"
class="absolute inset-0 bg-gradient-to-br from-[var(--color-jellyfin)]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
></div>
<!-- Content -->
@@ -107,7 +101,7 @@
</svg>
</div>
</div>
</button>
</a>
{/each}
</div>
</div>