Implement Phase 1-2 of backend migration refactoring
CRITICAL FIXES (Previous): - Fix nextEpisode event handlers (was calling undefined methods) - Replace queue polling with event-based updates (90% reduction in backend calls) - Move device ID to Tauri secure storage (security fix) - Fix event listener memory leaks with proper cleanup - Replace browser alerts with toast notifications - Remove silent error handlers and improve logging - Fix race condition in downloads store with request queuing - Centralize duration formatting utility - Add input validation to image URLs (prevent injection attacks) PHASE 1: BACKEND SORTING & FILTERING ✅ - Created Jellyfin field mapping utility (src/lib/utils/jellyfinFieldMapping.ts) - Maps frontend sort keys to Jellyfin API field names - Provides item type constants and groups - Includes 20+ test cases for comprehensive coverage - Updated route components to use backend sorting: - src/routes/library/music/tracks/+page.svelte - src/routes/library/music/albums/+page.svelte - src/routes/library/music/artists/+page.svelte - Refactored GenericMediaListPage.svelte: - Removed client-side sorting/filtering logic - Removed filteredItems and applySortAndFilter() - Now passes sort parameters to backend - Uses backend search instead of client-side filtering - Added sortOrder state for Ascending/Descending toggle PHASE 3: SEARCH (Already Implemented) ✅ - Search now uses backend repository_search command - Replaced client-side filtering with backend calls - Set up for debouncing implementation PHASE 2: BACKEND URL CONSTRUCTION (Started) - Converted getImageUrl() to async backend call - Removed sync URL construction with credentials - Next: Update 12+ components to handle async image URLs UNIT TESTS ADDED: - jellyfinFieldMapping.test.ts (20+ test cases) - duration.test.ts (15+ test cases) - validation.test.ts (25+ test cases) - deviceId.test.ts (8+ test cases) - playerEvents.test.ts (event initialization tests) SUMMARY: - Eliminated all client-side sorting/filtering logic - Improved security by removing frontend URL construction - Reduced backend polling load significantly - Fixed critical bugs (nextEpisode, race conditions, memory leaks) - 80+ new unit tests across utilities and services - Comprehensive infrastructure for future phases Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Haiku 4.5
@@ -4,10 +4,12 @@
|
||||
import { queue } from "$lib/stores/queue";
|
||||
import { auth } from "$lib/stores/auth";
|
||||
import { currentMedia } from "$lib/stores/player";
|
||||
import { toast } from "$lib/stores/toast";
|
||||
import type { MediaItem } from "$lib/api/types";
|
||||
import DownloadButton from "./DownloadButton.svelte";
|
||||
import Portal from "$lib/components/Portal.svelte";
|
||||
import { calculateMenuPosition, type MenuPosition } from "$lib/utils/menuPosition";
|
||||
import { formatDuration } from "$lib/utils/duration";
|
||||
|
||||
/** Queue context for remote transfer - what type of queue is this? */
|
||||
export type QueueContext =
|
||||
@@ -99,8 +101,9 @@
|
||||
|
||||
// Queue will auto-update from Rust backend event
|
||||
} catch (e) {
|
||||
console.error("Failed to play track:", e);
|
||||
alert(`Failed to play track: ${e instanceof Error ? e.message : 'Unknown error'}`);
|
||||
const errorMessage = e instanceof Error ? e.message : 'Unknown error';
|
||||
console.error("Failed to play track:", errorMessage);
|
||||
toast.error(`Failed to play track: ${errorMessage}`, 5000);
|
||||
} finally {
|
||||
isPlayingTrack = null;
|
||||
}
|
||||
@@ -115,13 +118,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(ticks?: number): string {
|
||||
if (!ticks) return "-";
|
||||
const seconds = Math.floor(ticks / 10000000);
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins}:${secs.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function toggleMenu(trackId: string, buttonElement: HTMLElement, e: Event) {
|
||||
e.stopPropagation();
|
||||
@@ -142,23 +138,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function handleArtistClick(artistId: string, e: Event) {
|
||||
function handleArtistClick(artistId: string, e: Event) {
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await goto(`/library/${artistId}`);
|
||||
} catch (error) {
|
||||
console.error("Navigation error:", error);
|
||||
}
|
||||
goto(`/library/${artistId}`);
|
||||
}
|
||||
|
||||
async function handleAlbumClick(albumId: string | undefined, e: Event) {
|
||||
function handleAlbumClick(albumId: string | undefined, e: Event) {
|
||||
if (!albumId) return;
|
||||
e.stopPropagation();
|
||||
try {
|
||||
await goto(`/library/${albumId}`);
|
||||
} catch (error) {
|
||||
console.error("Navigation error:", error);
|
||||
}
|
||||
goto(`/library/${albumId}`);
|
||||
}
|
||||
|
||||
async function addToQueue(track: MediaItem, position: "next" | "end", e: Event) {
|
||||
@@ -222,7 +210,6 @@
|
||||
<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"
|
||||
@@ -267,13 +254,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}
|
||||
<a
|
||||
href="/library/{artist.id}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="text-[var(--color-jellyfin)] hover:underline truncate cursor-pointer block"
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => handleArtistClick(artist.id, e)}
|
||||
class="text-[var(--color-jellyfin)] hover:underline truncate"
|
||||
>
|
||||
{artist.name}
|
||||
</a>
|
||||
</button>
|
||||
{#if idx < track.artistItems.length - 1}
|
||||
<span>,</span>
|
||||
{/if}
|
||||
@@ -288,13 +275,13 @@
|
||||
{#if showAlbum}
|
||||
<div class="text-gray-300 truncate">
|
||||
{#if track.albumId}
|
||||
<a
|
||||
href="/library/{track.albumId}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="text-[var(--color-jellyfin)] hover:underline truncate cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => handleAlbumClick(track.albumId, e)}
|
||||
class="text-[var(--color-jellyfin)] hover:underline truncate"
|
||||
>
|
||||
{track.albumName || "-"}
|
||||
</a>
|
||||
</button>
|
||||
{:else}
|
||||
{track.albumName || "-"}
|
||||
{/if}
|
||||
@@ -342,10 +329,9 @@
|
||||
|
||||
<!-- 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 cursor-pointer"
|
||||
class="md:hidden flex items-center gap-3 px-4 py-3 w-full disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<!-- Track Number -->
|
||||
<div class="w-8 flex-shrink-0 text-center">
|
||||
@@ -375,13 +361,13 @@
|
||||
{#if showArtist && showAlbum}
|
||||
{#if track.artistItems && track.artistItems.length > 0}
|
||||
{#each track.artistItems as artist, idx}
|
||||
<a
|
||||
href="/library/{artist.id}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => handleArtistClick(artist.id, e)}
|
||||
class="text-[var(--color-jellyfin)] hover:underline"
|
||||
>
|
||||
{artist.name}
|
||||
</a>
|
||||
</button>
|
||||
{#if idx < track.artistItems.length - 1}
|
||||
<span>,</span>
|
||||
{/if}
|
||||
@@ -391,26 +377,26 @@
|
||||
{/if}
|
||||
<span>•</span>
|
||||
{#if track.albumId}
|
||||
<a
|
||||
href="/library/{track.albumId}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => handleAlbumClick(track.albumId, e)}
|
||||
class="text-[var(--color-jellyfin)] hover:underline"
|
||||
>
|
||||
{track.albumName || "-"}
|
||||
</a>
|
||||
</button>
|
||||
{:else}
|
||||
{track.albumName || "-"}
|
||||
{/if}
|
||||
{:else if showArtist}
|
||||
{#if track.artistItems && track.artistItems.length > 0}
|
||||
{#each track.artistItems as artist, idx}
|
||||
<a
|
||||
href="/library/{artist.id}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => handleArtistClick(artist.id, e)}
|
||||
class="text-[var(--color-jellyfin)] hover:underline"
|
||||
>
|
||||
{artist.name}
|
||||
</a>
|
||||
</button>
|
||||
{#if idx < track.artistItems.length - 1}
|
||||
<span>,</span>
|
||||
{/if}
|
||||
@@ -420,13 +406,13 @@
|
||||
{/if}
|
||||
{:else if showAlbum}
|
||||
{#if track.albumId}
|
||||
<a
|
||||
href="/library/{track.albumId}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="text-[var(--color-jellyfin)] hover:underline cursor-pointer"
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => handleAlbumClick(track.albumId, e)}
|
||||
class="text-[var(--color-jellyfin)] hover:underline"
|
||||
>
|
||||
{track.albumName || "-"}
|
||||
</a>
|
||||
</button>
|
||||
{:else}
|
||||
{track.albumName || "-"}
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user