valknarandClaude Sonnet 5
5484d3cefe
- Fix device rename input collapsing on mobile (fixed width vs w-full inside an auto-layout table column). - Add cascade-delete confirmation for sessions with a saved recording. - Fix header connection LED: derive state from scanning/device-count/ recording instead of the Buttplug client's raw connected flag; drop the label text and hide the indicator entirely when idle. - Add a per-device disconnect button (stop + remove from store, the closest equivalent Buttplug's protocol allows per device). - Fix replay ending early: duration now comes from the recording's actual durationMs, not the last event's timestamp. - Replay robustness: show which devices are being replayed to, reset actuators to zero on start/play/pause, fully disconnect devices and the whole client on stop/unmount, surface command failures via toast. - Stop flagging the header LED red during replay - recording is only for live sessions. - Add page-number pagination to recordings/sessions/devices lists. - Wordmark SEXY -> Sexy; add proper per-page <title>s including dynamic titles for recording/session detail and replay pages. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ActuatorSlider } from "./ActuatorSlider";
|
|
import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
|
|
import { Battery, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning, Unlink } from "lucide-react";
|
|
|
|
interface DeviceCardProps {
|
|
device: ConnectedDeviceInfo;
|
|
batteryLevel: number | null;
|
|
actuatorValues: Record<number, number>;
|
|
transmittingFeatureIndex: number | null;
|
|
onActuatorChange: (featureIndex: number, value: number) => void;
|
|
onStop: () => void;
|
|
onDisconnect: () => void;
|
|
}
|
|
|
|
function BatteryIndicator({ level }: { level: number }) {
|
|
const Icon = level < 0.15 ? BatteryWarning : level < 0.4 ? BatteryLow : level < 0.8 ? BatteryMedium : BatteryFull;
|
|
return (
|
|
<span className={`flex items-center gap-1 ${level < 0.15 ? "text-destructive" : "text-muted-foreground"}`}>
|
|
<Icon className="size-3.5" />
|
|
<span className="bp-readout text-xs">{Math.round(level * 100)}%</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function DeviceCard({
|
|
device,
|
|
batteryLevel,
|
|
actuatorValues,
|
|
transmittingFeatureIndex,
|
|
onActuatorChange,
|
|
onStop,
|
|
onDisconnect,
|
|
}: DeviceCardProps) {
|
|
return (
|
|
<Card className="bp-glass">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-3">
|
|
<span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
|
|
<div className="flex items-center gap-3">
|
|
{device.hasBattery &&
|
|
(batteryLevel !== null ? (
|
|
<BatteryIndicator level={batteryLevel} />
|
|
) : (
|
|
<Battery className="size-3.5 text-muted-foreground" aria-label="Reading battery level" />
|
|
))}
|
|
<Button variant="outline" size="sm" onClick={onStop}>
|
|
Stop
|
|
</Button>
|
|
<Button variant="ghost" size="icon-sm" onClick={onDisconnect} aria-label="Disconnect device">
|
|
<Unlink className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<div className="bp-hairline mx-4" />
|
|
<CardContent className="flex flex-col gap-3 pt-3">
|
|
{device.actuators.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No controllable actuators reported.</p>
|
|
) : (
|
|
device.actuators.map((actuator) => (
|
|
<ActuatorSlider
|
|
key={actuator.featureIndex}
|
|
actuator={actuator}
|
|
value={actuatorValues[actuator.featureIndex] ?? 0}
|
|
transmitting={transmittingFeatureIndex === actuator.featureIndex}
|
|
onChange={(value) => onActuatorChange(actuator.featureIndex, value)}
|
|
/>
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|