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.2 KiB
Svelte
108 lines
3.2 KiB
Svelte
<!-- TRACES: UR-010 | DR-037 -->
|
|
<script lang="ts">
|
|
import { onMount, onDestroy } from "svelte";
|
|
import { commands } from "$lib/api/bindings";
|
|
import { sessions, controllableSessions, selectedSession } from "$lib/stores";
|
|
import SessionPickerModal from "./SessionPickerModal.svelte";
|
|
|
|
interface Props {
|
|
size?: "sm" | "md" | "lg";
|
|
className?: string;
|
|
}
|
|
|
|
let { size = "md", className = "" }: Props = $props();
|
|
|
|
let showPicker = $state(false);
|
|
|
|
// Size classes
|
|
const sizeClasses = {
|
|
sm: "w-4 h-4",
|
|
md: "w-5 h-5",
|
|
lg: "w-6 h-6",
|
|
};
|
|
|
|
const buttonSizeClasses = {
|
|
sm: "p-1.5",
|
|
md: "p-2",
|
|
lg: "p-2.5",
|
|
};
|
|
|
|
function handleClick() {
|
|
showPicker = true;
|
|
}
|
|
|
|
function closePicker() {
|
|
showPicker = false;
|
|
}
|
|
|
|
// Set polling hints when component mounts/unmounts
|
|
onMount(async () => {
|
|
// Initial manual refresh to get sessions
|
|
sessions.refresh();
|
|
|
|
// Set initial hint based on connection state
|
|
const hint = isConnected ? "cast_active" : "cast_discovery";
|
|
await commands.sessionsSetPollingHint(hint);
|
|
});
|
|
|
|
onDestroy(async () => {
|
|
// Reset to normal polling when component unmounts
|
|
await commands.sessionsSetPollingHint("normal");
|
|
});
|
|
|
|
// Update polling hint when connection state changes
|
|
$effect(() => {
|
|
const hint = isConnected ? "cast_active" : "cast_discovery";
|
|
commands.sessionsSetPollingHint(hint);
|
|
});
|
|
|
|
const isConnected = $derived($selectedSession !== null);
|
|
const sessionCount = $derived($controllableSessions.length);
|
|
</script>
|
|
|
|
<button
|
|
onclick={handleClick}
|
|
class="{buttonSizeClasses[size]} {className} rounded-lg transition-colors relative {isConnected
|
|
? 'text-[var(--color-jellyfin)] hover:bg-[var(--color-jellyfin)]/10'
|
|
: 'text-gray-400 hover:text-white hover:bg-white/10'}"
|
|
title={isConnected
|
|
? `Casting to ${$selectedSession?.deviceName}`
|
|
: sessionCount > 0
|
|
? `Cast to ${sessionCount} available device${sessionCount !== 1 ? "s" : ""}`
|
|
: "No devices available"}
|
|
aria-label="Cast"
|
|
>
|
|
<!-- Cast Icon -->
|
|
<svg class={sizeClasses[size]} fill="currentColor" viewBox="0 0 24 24">
|
|
{#if isConnected}
|
|
<!-- Connected cast icon -->
|
|
<path
|
|
d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zM21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
|
/>
|
|
{:else}
|
|
<!-- Standard cast icon -->
|
|
<path
|
|
d="M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z"
|
|
/>
|
|
{/if}
|
|
</svg>
|
|
|
|
<!-- Badge for available sessions count -->
|
|
{#if !isConnected && sessionCount > 0}
|
|
<span
|
|
class="absolute -top-1 -right-1 w-4 h-4 bg-[var(--color-jellyfin)] text-white text-[10px] font-bold rounded-full flex items-center justify-center"
|
|
>
|
|
{sessionCount}
|
|
</span>
|
|
{/if}
|
|
|
|
<!-- Connected indicator -->
|
|
{#if isConnected}
|
|
<span
|
|
class="absolute bottom-0 right-0 w-2 h-2 bg-[var(--color-jellyfin)] rounded-full border-2 border-[var(--color-surface)]"
|
|
></span>
|
|
{/if}
|
|
</button>
|
|
|
|
<SessionPickerModal isOpen={showPicker} onClose={closePicker} />
|