266 lines
8.9 KiB
TypeScript
266 lines
8.9 KiB
TypeScript
import { useState } from 'react';
|
|
import type { AgentAction, AgentView, WatchState } from '@stream-control/shared';
|
|
import { findRecordingPreset } from '@stream-control/shared';
|
|
import { formatBytes, formatPercent, formatRelative, formatTimecode } from '../format';
|
|
|
|
interface Props {
|
|
agent: AgentView;
|
|
selected: boolean;
|
|
onToggleSelect: (id: string) => void;
|
|
onCommand: (id: string, action: AgentAction, params?: Record<string, unknown>) => Promise<void>;
|
|
onOpenSettings: (agent: AgentView) => void;
|
|
onOpenHistory: (agent: AgentView) => void;
|
|
}
|
|
|
|
export function AgentCard({
|
|
agent,
|
|
selected,
|
|
onToggleSelect,
|
|
onCommand,
|
|
onOpenSettings,
|
|
onOpenHistory,
|
|
}: Props) {
|
|
const [pending, setPending] = useState<AgentAction | null>(null);
|
|
const { status } = agent;
|
|
|
|
async function run(action: AgentAction, params?: Record<string, unknown>) {
|
|
setPending(action);
|
|
try {
|
|
await onCommand(agent.id, action, params);
|
|
} finally {
|
|
setPending(null);
|
|
}
|
|
}
|
|
|
|
const busy = pending !== null;
|
|
const obsReady = agent.online && status.obsConnected;
|
|
|
|
const watch = status.watch;
|
|
const presetLabel = findRecordingPreset(agent.recording.presetId)?.label ?? null;
|
|
const pausedLabel = watch?.autoPaused ? 'Pause · show privé' : 'En pause';
|
|
|
|
const state = !agent.online
|
|
? { label: 'Hors-ligne', tone: 'offline' as const }
|
|
: !status.obsConnected
|
|
? { label: 'OBS déconnecté', tone: 'warn' as const }
|
|
: status.recording
|
|
? {
|
|
label: status.recordPaused ? pausedLabel : 'Enregistre',
|
|
tone: status.recordPaused ? ('warn' as const) : ('rec' as const),
|
|
}
|
|
: { label: 'Prêt', tone: 'ok' as const };
|
|
|
|
return (
|
|
<article className={`card tone-${state.tone}${selected ? ' selected' : ''}`}>
|
|
<header className="card-head">
|
|
<label className="select">
|
|
<input
|
|
type="checkbox"
|
|
checked={selected}
|
|
onChange={() => onToggleSelect(agent.id)}
|
|
aria-label={`Sélectionner ${agent.name}`}
|
|
/>
|
|
</label>
|
|
<div className="identity">
|
|
<h2>{agent.name}</h2>
|
|
<span className="muted small">
|
|
{agent.hostname ?? '—'} · {agent.platform}
|
|
{agent.agentVersion ? ` · v${agent.agentVersion}` : ''}
|
|
{status.buildId ? ` · build ${status.buildId}` : ''}
|
|
</span>
|
|
</div>
|
|
{agent.recording.enabled && presetLabel && (
|
|
<span className="badge" title="Preset d'enregistrement piloté depuis le dashboard">
|
|
{presetLabel}
|
|
</span>
|
|
)}
|
|
<span className={`badge ${state.tone}`}>{state.label}</span>
|
|
<button className="icon" onClick={() => onOpenHistory(agent)} title="Historique de cette VM">
|
|
🕘
|
|
</button>
|
|
<button className="icon" onClick={() => onOpenSettings(agent)} title="Configuration">
|
|
⚙
|
|
</button>
|
|
</header>
|
|
|
|
{status.obsError && !status.obsConnected && (
|
|
<p className="error small">{status.obsError}</p>
|
|
)}
|
|
|
|
{watch?.enabled && (
|
|
<WatchStrip
|
|
watch={watch}
|
|
busy={busy}
|
|
onCheck={() => void run('watch.check')}
|
|
onFullscreen={() => void run('hotkey.fullscreen')}
|
|
/>
|
|
)}
|
|
|
|
<div className="metrics">
|
|
<Metric label="Durée" value={formatTimecode(status.recordTimecode)} mono />
|
|
<Metric label="Fichier" value={formatBytes(status.recordBytes)} />
|
|
<Metric label="Disque libre" value={formatBytes(status.diskFreeBytes)} />
|
|
<Metric label="CPU OBS" value={formatPercent(status.cpuUsage)} />
|
|
<Metric label="FPS" value={status.fps ? status.fps.toFixed(0) : '—'} />
|
|
<Metric label="Frames perdues" value={String(status.droppedFrames ?? '—')} />
|
|
</div>
|
|
|
|
<div className="row">
|
|
<label className="field grow">
|
|
<span>Scène</span>
|
|
<select
|
|
value={status.currentScene ?? ''}
|
|
disabled={!obsReady || busy || status.scenes.length === 0}
|
|
onChange={(event) => void run('scene.set', { scene: event.target.value })}
|
|
>
|
|
{status.scenes.length === 0 && <option value="">— aucune scène —</option>}
|
|
{status.scenes.map((scene) => (
|
|
<option key={scene} value={scene}>
|
|
{scene}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="actions">
|
|
{status.recording ? (
|
|
<>
|
|
<button className="danger" disabled={busy} onClick={() => void run('record.stop')}>
|
|
■ Arrêter
|
|
</button>
|
|
{status.recordPaused ? (
|
|
<button disabled={busy} onClick={() => void run('record.resume')}>
|
|
▶ Reprendre
|
|
</button>
|
|
) : (
|
|
<button disabled={busy} onClick={() => void run('record.pause')}>
|
|
⏸ Pause
|
|
</button>
|
|
)}
|
|
<button disabled={busy} onClick={() => void run('record.split')}>
|
|
✂ Découper
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button className="primary" disabled={!obsReady || busy} onClick={() => void run('record.start')}>
|
|
● Enregistrer
|
|
</button>
|
|
)}
|
|
|
|
{status.streaming ? (
|
|
<button className="danger ghost" disabled={busy} onClick={() => void run('stream.stop')}>
|
|
Arrêter le stream
|
|
</button>
|
|
) : (
|
|
<button className="ghost" disabled={!obsReady || busy} onClick={() => void run('stream.start')}>
|
|
Lancer le stream
|
|
</button>
|
|
)}
|
|
|
|
{status.obsConnected ? (
|
|
<button className="ghost" disabled={!agent.online || busy} onClick={() => void run('obs.disconnect')}>
|
|
Détacher OBS
|
|
</button>
|
|
) : (
|
|
<button className="ghost" disabled={!agent.online || busy} onClick={() => void run('obs.connect')}>
|
|
Connecter OBS
|
|
</button>
|
|
)}
|
|
|
|
{status.canSelfUpdate && (
|
|
<button
|
|
className="ghost"
|
|
disabled={!agent.online || busy || status.recording}
|
|
title={
|
|
status.recording
|
|
? 'Enregistrement en cours — la mise à jour est refusée'
|
|
: 'Télécharger et installer la dernière version de l\'agent'
|
|
}
|
|
onClick={() => {
|
|
if (confirm(`Mettre à jour « ${agent.name} » ? L'agent redémarrera.`)) {
|
|
void run('agent.update');
|
|
}
|
|
}}
|
|
>
|
|
⬆ Mettre à jour
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<footer className="card-foot muted small">
|
|
<span title={status.recordDirectory ?? ''}>
|
|
{status.lastRecordingPath
|
|
? `Dernier fichier : ${basename(status.lastRecordingPath)}`
|
|
: (status.recordDirectory ?? 'Dossier inconnu')}
|
|
</span>
|
|
<span>vu {formatRelative(agent.lastSeenAt)}</span>
|
|
</footer>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
const WATCH_LABELS: Record<WatchState['state'], { text: string; tone: string }> = {
|
|
public: { text: 'public', tone: 'ok' },
|
|
private: { text: 'show privé', tone: 'rec' },
|
|
offline: { text: 'hors-ligne', tone: 'offline' },
|
|
unknown: { text: 'inconnu', tone: 'offline' },
|
|
};
|
|
|
|
function WatchStrip({
|
|
watch,
|
|
busy,
|
|
onCheck,
|
|
onFullscreen,
|
|
}: {
|
|
watch: WatchState;
|
|
busy: boolean;
|
|
onCheck: () => void;
|
|
onFullscreen: () => void;
|
|
}) {
|
|
const info = WATCH_LABELS[watch.state];
|
|
const stale = watch.lastCheckedAt > 0 && Date.now() - watch.lastCheckedAt > 60_000;
|
|
|
|
return (
|
|
<div className="watch">
|
|
<div className="watch-head">
|
|
<span className={`badge ${info.tone}`}>{info.text}</span>
|
|
<span className="watch-name" title={`${watch.provider} · ${watch.username}`}>
|
|
{watch.username || '(aucun pseudo)'}
|
|
</span>
|
|
<div className="spacer" />
|
|
<button className="icon" disabled={busy} onClick={onCheck} title="Sonder maintenant">
|
|
⟳
|
|
</button>
|
|
<button className="icon" disabled={busy} onClick={onFullscreen} title="Remettre en plein écran">
|
|
⛶
|
|
</button>
|
|
</div>
|
|
|
|
{watch.lastError ? (
|
|
<span className="small error">Sonde en échec : {watch.lastError}</span>
|
|
) : (
|
|
<span className="small muted">
|
|
{watch.rawStatus ? `statut brut « ${watch.rawStatus} »` : 'pas encore sondé'}
|
|
{watch.autoPaused && ' · pause automatique active'}
|
|
{stale && ' · dernière sonde ancienne'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Metric({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
|
|
return (
|
|
<div className="metric">
|
|
<span className="metric-label">{label}</span>
|
|
<span className={`metric-value${mono ? ' mono' : ''}`}>{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function basename(filePath: string): string {
|
|
const parts = filePath.split(/[\\/]/);
|
|
return parts[parts.length - 1] ?? filePath;
|
|
}
|