valknarandClaude Sonnet 5
0bd36b08c9
buttplug-wasm@3.0.0 still declares buttplug@^4.0.2 as its dependency,
and v5 changed the OutputCmd wire shape (Value: number[] -> number) -
a real protocol difference, not just a type mismatch. Confirmed by
testing against real Lovense hardware that device control still works
in practice, so the bump stands; the risk is documented at the
client.connect() cast in case a future device/build doesn't fare as
well.
Also fixes a Map vs ReadonlyMap mismatch in the version-agnostic
feature-type extraction (v4 returns Map, v5 returns ReadonlyMap) that
surfaced while making this change, and adds a battery indicator to each
connected device's card - reads once on connect, refreshes every 60s,
using device.hasInput("Battery") to detect support.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb
71 lines
2.5 KiB
TypeScript
71 lines
2.5 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 } 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;
|
|
}
|
|
|
|
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,
|
|
}: 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>
|
|
</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>
|
|
);
|
|
}
|