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.
251 lines
8.7 KiB
Svelte
251 lines
8.7 KiB
Svelte
<!-- TRACES: UR-010 | JA-022, JA-023, JA-024, JA-026 | DR-037 -->
|
|
<script lang="ts">
|
|
import type { Session } from "$lib/api/types";
|
|
import { sessions } from "$lib/stores";
|
|
|
|
interface Props {
|
|
session: Session;
|
|
}
|
|
|
|
let { session }: Props = $props();
|
|
|
|
let isCommandPending = $state(false);
|
|
|
|
const playState = $derived(session.playState);
|
|
const nowPlaying = $derived(session.nowPlayingItem);
|
|
const supportsSeek = $derived(playState?.canSeek ?? false);
|
|
const supportsNextPrevious = $derived(
|
|
(session.supportedCommands ?? []).includes("NextTrack") &&
|
|
(session.supportedCommands ?? []).includes("PreviousTrack"),
|
|
);
|
|
|
|
async function handlePlayPause() {
|
|
if (isCommandPending) return;
|
|
isCommandPending = true;
|
|
try {
|
|
await sessions.sendPlayPause(session.id);
|
|
} finally {
|
|
isCommandPending = false;
|
|
}
|
|
}
|
|
|
|
async function handleStop() {
|
|
if (isCommandPending) return;
|
|
isCommandPending = true;
|
|
try {
|
|
await sessions.sendStop(session.id);
|
|
} finally {
|
|
isCommandPending = false;
|
|
}
|
|
}
|
|
|
|
async function handleNext() {
|
|
if (isCommandPending || !supportsNextPrevious) return;
|
|
isCommandPending = true;
|
|
try {
|
|
await sessions.sendNext(session.id);
|
|
} finally {
|
|
isCommandPending = false;
|
|
}
|
|
}
|
|
|
|
async function handlePrevious() {
|
|
if (isCommandPending || !supportsNextPrevious) return;
|
|
isCommandPending = true;
|
|
try {
|
|
await sessions.sendPrevious(session.id);
|
|
} finally {
|
|
isCommandPending = false;
|
|
}
|
|
}
|
|
|
|
function handleVolumeChange(event: Event) {
|
|
const target = event.target as HTMLInputElement;
|
|
const volume = parseInt(target.value);
|
|
sessions.sendVolume(session.id, volume);
|
|
}
|
|
|
|
function handleSeek(event: Event) {
|
|
const target = event.target as HTMLInputElement;
|
|
const positionPercent = parseFloat(target.value);
|
|
|
|
if (nowPlaying?.runTimeTicks) {
|
|
const positionTicks = (positionPercent / 100) * nowPlaying.runTimeTicks;
|
|
sessions.sendSeek(session.id, positionTicks);
|
|
}
|
|
}
|
|
|
|
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 positionPercent = $derived(() => {
|
|
if (!playState?.positionTicks || !nowPlaying?.runTimeTicks) return 0;
|
|
return (playState.positionTicks / nowPlaying.runTimeTicks) * 100;
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-6 p-6 rounded-lg bg-[var(--color-surface)]">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-white">Remote Control</h3>
|
|
<p class="text-sm text-gray-400">Controlling: {session.deviceName}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{#if nowPlaying && playState}
|
|
<!-- Now Playing Info -->
|
|
<div class="flex flex-col gap-2">
|
|
<h4 class="text-base font-medium text-white truncate">{nowPlaying.name}</h4>
|
|
{#if nowPlaying.artists && nowPlaying.artists.length > 0}
|
|
<p class="text-sm text-gray-400 truncate">{nowPlaying.artists.join(", ")}</p>
|
|
{:else if nowPlaying?.album}
|
|
<p class="text-sm text-gray-400 truncate">{nowPlaying?.album}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Seek Bar -->
|
|
{#if supportsSeek && nowPlaying.runTimeTicks}
|
|
<div class="flex flex-col gap-2">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
step="0.1"
|
|
value={positionPercent()}
|
|
oninput={handleSeek}
|
|
class="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer
|
|
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
|
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
|
|
[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3
|
|
[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0"
|
|
/>
|
|
<div class="flex justify-between text-xs text-gray-400">
|
|
<span>{playState.positionTicks ? formatTime(playState.positionTicks) : "0:00"}</span>
|
|
<span>{formatTime(nowPlaying.runTimeTicks)}</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Playback Controls -->
|
|
<div class="flex items-center justify-center gap-4">
|
|
<!-- Previous -->
|
|
<button
|
|
onclick={handlePrevious}
|
|
disabled={!supportsNextPrevious || isCommandPending}
|
|
class="p-2 rounded-full text-white hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
|
title="Previous"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Play/Pause -->
|
|
<button
|
|
onclick={handlePlayPause}
|
|
disabled={isCommandPending}
|
|
class="p-3 rounded-full bg-white text-black hover:scale-105 transition-transform disabled:opacity-50"
|
|
title={playState.isPaused ? "Play" : "Pause"}
|
|
>
|
|
{#if playState.isPaused}
|
|
<svg class="w-6 h-6 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
{:else}
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
|
|
<!-- Next -->
|
|
<button
|
|
onclick={handleNext}
|
|
disabled={!supportsNextPrevious || isCommandPending}
|
|
class="p-2 rounded-full text-white hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
|
title="Next"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Stop -->
|
|
<button
|
|
onclick={handleStop}
|
|
disabled={isCommandPending}
|
|
class="p-2 rounded-full text-white hover:bg-white/10 disabled:opacity-50 transition-colors"
|
|
title="Stop"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 6h12v12H6z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Volume Control -->
|
|
{#if playState.volumeLevel !== undefined}
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
|
{#if playState.isMuted || (playState.volumeLevel ?? 0) === 0}
|
|
<path
|
|
d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
|
|
/>
|
|
{:else if (playState.volumeLevel ?? 0) < 50}
|
|
<path d="M7 9v6h4l5 5V4l-5 5H7z" />
|
|
{:else}
|
|
<path
|
|
d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"
|
|
/>
|
|
{/if}
|
|
</svg>
|
|
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={playState.volumeLevel}
|
|
oninput={handleVolumeChange}
|
|
class="flex-1 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer
|
|
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
|
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white
|
|
[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3
|
|
[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-0"
|
|
/>
|
|
|
|
<span class="text-sm text-gray-400 w-12 text-right">{playState.volumeLevel}%</span>
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<!-- No media playing -->
|
|
<div class="flex flex-col items-center justify-center py-12 text-center">
|
|
<svg
|
|
class="w-16 h-16 text-gray-600 mb-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
|
|
/>
|
|
</svg>
|
|
<h4 class="text-base font-medium text-gray-400 mb-2">No Media Playing</h4>
|
|
<p class="text-sm text-gray-500">
|
|
Start playing media on {session.deviceName} to control it from here
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|