dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
108 lines
3.7 KiB
Svelte
108 lines
3.7 KiB
Svelte
<!-- TRACES: UR-010 | DR-037 -->
|
|
<script lang="ts">
|
|
import type { Session } from "$lib/api/types";
|
|
import CachedImage from "$lib/components/common/CachedImage.svelte";
|
|
|
|
interface Props {
|
|
session: Session;
|
|
selected?: boolean;
|
|
onclick?: () => void;
|
|
}
|
|
|
|
let { session, selected = false, onclick }: Props = $props();
|
|
|
|
function formatTime(ticks: number): string {
|
|
const seconds = Math.floor(ticks / 10000000);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
|
|
if (hours > 0) {
|
|
return `${hours}:${String(minutes % 60).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
|
|
}
|
|
return `${minutes}:${String(seconds % 60).padStart(2, "0")}`;
|
|
}
|
|
|
|
const playState = $derived(session.playState);
|
|
const nowPlaying = $derived(session.nowPlayingItem);
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
{onclick}
|
|
class="w-full p-4 rounded-lg border-2 transition-all text-left
|
|
{selected
|
|
? 'border-[var(--color-jellyfin)] bg-[var(--color-jellyfin)]/10'
|
|
: 'border-[var(--color-surface)] bg-[var(--color-surface)] hover:border-[var(--color-jellyfin)]/50'}"
|
|
>
|
|
<!-- Session header -->
|
|
<div class="flex items-start gap-3 mb-2">
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="font-semibold text-white truncate">{session.deviceName}</h3>
|
|
<p class="text-sm text-gray-400 truncate">{session.client} • {session.userName}</p>
|
|
</div>
|
|
|
|
{#if selected}
|
|
<div class="flex-shrink-0 w-2 h-2 rounded-full bg-[var(--color-jellyfin)]"></div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Now playing -->
|
|
{#if nowPlaying && playState}
|
|
<div class="flex items-center gap-3 mt-3 pt-3 border-t border-white/10">
|
|
<div class="w-12 h-12 rounded overflow-hidden flex-shrink-0">
|
|
<CachedImage
|
|
itemId={nowPlaying.id ?? ""}
|
|
imageType="Primary"
|
|
tag={nowPlaying.primaryImageTag}
|
|
maxWidth={80}
|
|
alt={nowPlaying.name ?? undefined}
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-white truncate">{nowPlaying.name}</p>
|
|
{#if nowPlaying.artists && nowPlaying.artists.length > 0}
|
|
<p class="text-xs text-gray-400 truncate">{nowPlaying.artists.join(", ")}</p>
|
|
{:else if nowPlaying.album}
|
|
<p class="text-xs text-gray-400 truncate">{nowPlaying.album}</p>
|
|
{/if}
|
|
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<div class="flex items-center gap-1">
|
|
{#if playState.isPaused}
|
|
<svg class="w-3 h-3 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
|
|
</svg>
|
|
<span class="text-xs text-gray-400">Paused</span>
|
|
{:else}
|
|
<svg
|
|
class="w-3 h-3 text-[var(--color-jellyfin)]"
|
|
fill="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
<span class="text-xs text-[var(--color-jellyfin)]">Playing</span>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if playState.positionTicks}
|
|
<span class="text-xs text-gray-500">•</span>
|
|
<span class="text-xs text-gray-400">{formatTime(playState.positionTicks)}</span>
|
|
{/if}
|
|
|
|
{#if playState.volumeLevel !== undefined}
|
|
<span class="text-xs text-gray-500">•</span>
|
|
<span class="text-xs text-gray-400">Vol {playState.volumeLevel}%</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="mt-3 pt-3 border-t border-white/10">
|
|
<p class="text-sm text-gray-500 italic">No media playing</p>
|
|
</div>
|
|
{/if}
|
|
</button>
|