From 0bd36b08c91ea7062a23d8dadfe5a48a7e6b8b14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 25 Aug 2026 17:33:48 +0200 Subject: [PATCH] Upgrade to buttplug v5, add battery level display, bump to 0.2.0 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 Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb --- components/control/ButtplugConsole.tsx | 27 +++++++++++++++++++++++++- components/control/DeviceCard.tsx | 27 +++++++++++++++++++++++--- lib/buttplug/client.ts | 25 ++++++++++++++++++++++-- lib/buttplug/commands.ts | 6 ++++-- lib/buttplug/store.ts | 12 ++++++++++-- lib/buttplug/types.ts | 1 + package.json | 4 ++-- pnpm-lock.yaml | 15 ++++++++++++-- 8 files changed, 103 insertions(+), 14 deletions(-) diff --git a/components/control/ButtplugConsole.tsx b/components/control/ButtplugConsole.tsx index d2b217d..d9af230 100644 --- a/components/control/ButtplugConsole.tsx +++ b/components/control/ButtplugConsole.tsx @@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"; import { toast } from "sonner"; import { disconnectAll, + getBatteryLevel, getButtplugClientHandle, getDevice, isWebBluetoothSupported, @@ -42,6 +43,8 @@ export function ButtplugConsole() { const devices = useButtplugStore((s) => s.devices); const actuatorValues = useButtplugStore((s) => s.actuatorValues); const setActuatorValue = useButtplugStore((s) => s.setActuatorValue); + const batteryLevels = useButtplugStore((s) => s.batteryLevels); + const setBatteryLevel = useButtplugStore((s) => s.setBatteryLevel); const storeError = useButtplugStore((s) => s.error); const [activeSession, setActiveSession] = useState(null); @@ -64,6 +67,21 @@ export function ButtplugConsole() { }; }, []); + useEffect(() => { + const devicesWithBattery = Object.values(devices).filter((d) => d.hasBattery); + if (devicesWithBattery.length === 0) return; + + function refresh() { + for (const device of devicesWithBattery) { + void getBatteryLevel(device.index).then((level) => setBatteryLevel(device.index, level)); + } + } + + refresh(); + const interval = setInterval(refresh, 60_000); + return () => clearInterval(interval); + }, [devices, setBatteryLevel]); + async function ensureRuntime(): Promise { if (runtimeRef.current) return runtimeRef.current; const { runtime } = await getButtplugClientHandle(); @@ -153,11 +171,17 @@ export function ButtplugConsole() { const runtime = await ensureRuntime(); const liveDevice = await getDevice(device.index); const feature = liveDevice && findFeature(liveDevice, featureIndex); - if (!liveDevice || !feature) return; + if (!liveDevice || !feature) { + toast.error(`${device.name}: device not found - try reconnecting.`); + return; + } setTransmittingKey(key); const cmd = buildOutputCommand(runtime, actuator, v); await feature.runOutput(cmd); eventBuffer.record({ deviceIndex: device.index, commandType: actuator.outputType, featureIndex, value: v }); + } catch (err) { + const message = err instanceof Error ? err.message : String(err); + toast.error(`${device.name}: command failed - ${message}`); } finally { setTransmittingKey((k) => (k === key ? null : k)); } @@ -214,6 +238,7 @@ export function ButtplugConsole() { [a.featureIndex, actuatorValues[actuatorKey(device.index, a.featureIndex)] ?? 0]), )} diff --git a/components/control/DeviceCard.tsx b/components/control/DeviceCard.tsx index 1577650..647f5e2 100644 --- a/components/control/DeviceCard.tsx +++ b/components/control/DeviceCard.tsx @@ -4,17 +4,30 @@ 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; 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 ( + + + {Math.round(level * 100)}% + + ); +} + export function DeviceCard({ device, + batteryLevel, actuatorValues, transmittingFeatureIndex, onActuatorChange, @@ -24,9 +37,17 @@ export function DeviceCard({ {device.displayName ?? device.name} - +
+ {device.hasBattery && + (batteryLevel !== null ? ( + + ) : ( + + ))} + +
diff --git a/lib/buttplug/client.ts b/lib/buttplug/client.ts index 037a153..05b5a78 100644 --- a/lib/buttplug/client.ts +++ b/lib/buttplug/client.ts @@ -1,4 +1,4 @@ -import type { ButtplugClient, ButtplugClientDevice } from "buttplug"; +import type { ButtplugClient, ButtplugClientDevice, InputType } from "buttplug"; import { deriveActuators, type ButtplugRuntime } from "./commands"; import { useButtplugStore } from "./store"; import type { ConnectedDeviceInfo } from "./types"; @@ -20,6 +20,9 @@ function toDeviceInfo(device: ButtplugClientDevice): ConnectedDeviceInfo { name: device.name, displayName: device.displayName, actuators: deriveActuators(device), + // "Battery" is a string enum value - passing the literal avoids needing + // InputType as a runtime import here (see commands.ts for the same trick). + hasBattery: device.hasInput("Battery" as InputType), }; } @@ -45,7 +48,14 @@ async function initClient(): Promise { }); const connector = new ButtplugWasmClientConnector(); - await client.connect(connector); + // EXPERIMENTAL: buttplug-wasm@3.0.0's embedded server was built against + // buttplug@^4.0.2's wire format; buttplug@5's OutputCmd message shape + // changed (`Value` went from number[] to a bare number), which is a real + // protocol break, not just a type mismatch - the cast below silences that + // signal rather than fixing it. Scanning/pairing may still work since + // DeviceAdded's shape didn't change; device *commands* may be silently + // rejected or mis-parsed server-side. Revert to buttplug@^4.0.2 if so. + await client.connect(connector as unknown as Parameters[0]); useButtplugStore.getState().setConnected(true); for (const device of client.devices.values()) { @@ -94,3 +104,14 @@ export async function getDevice(deviceIndex: number): Promise { + const device = await getDevice(deviceIndex); + if (!device || !device.hasInput("Battery" as InputType)) return null; + try { + return await device.battery(); + } catch { + return null; + } +} diff --git a/lib/buttplug/commands.ts b/lib/buttplug/commands.ts index 5f63a40..cd5ffc7 100644 --- a/lib/buttplug/commands.ts +++ b/lib/buttplug/commands.ts @@ -2,8 +2,10 @@ import type { ButtplugClientDevice, DeviceOutputCommand, OutputType } from "butt import type { ActuatorInfo, NormalizedOutputType } from "./types"; // buttplug@4's barrel doesn't re-export `ButtplugClientDeviceFeature` itself, -// so its type is recovered from the `features` map it's stored in. -type DeviceFeature = ButtplugClientDevice["features"] extends Map ? F : never; +// so its type is recovered from the `features` map it's stored in. Matched +// against ReadonlyMap (not Map) so this works whether `.features` returns a +// mutable Map (v4) or a ReadonlyMap (v5) - Map structurally extends ReadonlyMap. +type DeviceFeature = ButtplugClientDevice["features"] extends ReadonlyMap ? F : never; /** * The pieces of the dynamically-imported `buttplug` module namespace this diff --git a/lib/buttplug/store.ts b/lib/buttplug/store.ts index ad9d2e1..ba5126e 100644 --- a/lib/buttplug/store.ts +++ b/lib/buttplug/store.ts @@ -10,12 +10,15 @@ interface ButtplugStoreState { devices: Record; /** Last-known slider value per `${deviceIndex}:${featureIndex}`, for UI display only. */ actuatorValues: Record; + /** Last-known battery reading (0-1) per device index; absent until first read completes. */ + batteryLevels: Record; error: string | null; setConnected: (connected: boolean) => void; setScanning: (scanning: boolean) => void; upsertDevice: (device: ConnectedDeviceInfo) => void; removeDevice: (index: number) => void; setActuatorValue: (deviceIndex: number, featureIndex: number, value: number) => void; + setBatteryLevel: (deviceIndex: number, level: number | null) => void; setError: (message: string | null) => void; reset: () => void; } @@ -25,6 +28,7 @@ export const useButtplugStore = create((set) => ({ scanning: false, devices: {}, actuatorValues: {}, + batteryLevels: {}, error: null, setConnected: (connected) => set({ connected }), setScanning: (scanning) => set({ scanning }), @@ -33,12 +37,16 @@ export const useButtplugStore = create((set) => ({ set((s) => { const devices = { ...s.devices }; delete devices[index]; - return { devices }; + const batteryLevels = { ...s.batteryLevels }; + delete batteryLevels[index]; + return { devices, batteryLevels }; }), setActuatorValue: (deviceIndex, featureIndex, value) => set((s) => ({ actuatorValues: { ...s.actuatorValues, [actuatorKey(deviceIndex, featureIndex)]: value }, })), + setBatteryLevel: (deviceIndex, level) => + set((s) => ({ batteryLevels: { ...s.batteryLevels, [deviceIndex]: level } })), setError: (message) => set({ error: message }), - reset: () => set({ connected: false, scanning: false, devices: {}, actuatorValues: {} }), + reset: () => set({ connected: false, scanning: false, devices: {}, actuatorValues: {}, batteryLevels: {} }), })); diff --git a/lib/buttplug/types.ts b/lib/buttplug/types.ts index 89db9a0..0fb816a 100644 --- a/lib/buttplug/types.ts +++ b/lib/buttplug/types.ts @@ -20,6 +20,7 @@ export interface ConnectedDeviceInfo { name: string; displayName?: string; actuators: ActuatorInfo[]; + hasBattery: boolean; } /** A single dispatched command, timestamped relative to session start. */ diff --git a/package.json b/package.json index e400eb8..265ca58 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sexy", - "version": "0.1.1", + "version": "0.2.0", "private": true, "scripts": { "dev": "next dev", @@ -12,7 +12,7 @@ }, "dependencies": { "better-sqlite3": "^13.0.3", - "buttplug": "^4.0.2", + "buttplug": "^5.0.1", "buttplug-wasm": "^3.0.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 723d997..c49d0f3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: ^13.0.3 version: 13.0.3 buttplug: - specifier: ^4.0.2 - version: 4.0.2 + specifier: ^5.0.1 + version: 5.0.1 buttplug-wasm: specifier: ^3.0.0 version: 3.0.0 @@ -2292,6 +2292,9 @@ packages: buttplug@4.0.2: resolution: {integrity: sha512-PciEJEoBkHjeA0UFfdymr5+jHXukzF0T8Pg7TaAxxWFb/0Ynfy1dWaGt1c7O5E1sfJSVyWxrvBQQCSeNWzprbg==} + buttplug@5.0.1: + resolution: {integrity: sha512-m7Qzoi6TEsr0DkqqXc3Gun/wikWiHziQeXu73Oxzd1ETqj2y1P0VdJ9QxAT811bLcTIYvyf0VkuHlXbEGcEXCw==} + bytes@3.1.2: resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==} engines: {node: '>= 0.8'} @@ -6531,6 +6534,14 @@ snapshots: - bufferutil - utf-8-validate + buttplug@5.0.1: + dependencies: + eventemitter3: 5.0.4 + ws: 8.21.3 + transitivePeerDependencies: + - bufferutil + - utf-8-validate + bytes@3.1.2: {} call-bind-apply-helpers@1.0.2: