Initial implementation of Bluetooth toy control app

Next.js app with a browser-side buttplug/buttplug-wasm control layer
(server never touches real-time device commands), SQLite storage via
Drizzle, single-secret auth, recordings/replay with device remapping,
a usage stats dashboard, Docker deployment, and Gitea CI.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb

components/recordings/ReplayPlayer.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { DeviceScanPanel } from "@/components/control/DeviceScanPanel";
+import { DeviceRemapDialog } from "./DeviceRemapDialog";
+import { getButtplugClientHandle, startScanning, stopScanning } from "@/lib/buttplug/client";
+import { eventBuffer } from "@/lib/buttplug/event-buffer";
+import { RecordingPlayer, type RecordingEventRow } from "@/lib/buttplug/player";
+import { useButtplugStore } from "@/lib/buttplug/store";
+import type { ActuatorInfo } from "@/lib/buttplug/types";
+import type { RecordingDeviceSlot } from "@/lib/db/schema";
+import { Pause, Play } from "lucide-react";
+
+interface RecordingResponse {
+  recording: {
+    id: number;
+    name: string;
+    durationMs: number;
+    deviceSlots: RecordingDeviceSlot[];
+  };
+  events: RecordingEventRow[];
+}
+
+function formatTime(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
+}
+
+export function ReplayPlayer({ recordingId }: { recordingId: number }) {
+  const router = useRouter();
+  const scanning = useButtplugStore((s) => s.scanning);
+  const devices = useButtplugStore((s) => s.devices);
+  const connectedDevices = useMemo(() => Object.values(devices), [devices]);
+
+  const [data, setData] = useState<RecordingResponse | null>(null);
+  const [showRemap, setShowRemap] = useState(false);
+  const [player, setPlayer] = useState<RecordingPlayer | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [elapsedMs, setElapsedMs] = useState(0);
+
+  useEffect(() => {
+    fetch(`/api/recordings/${recordingId}`)
+      .then((r) => r.json())
+      .then(setData)
+      .catch(() => toast.error("Could not load recording"));
+  }, [recordingId]);
+
+  async function handleConfirmRemap(mapping: Map<number, number>) {
+    if (!data) return;
+    setShowRemap(false);
+
+    const orderedSlots = data.recording.deviceSlots.filter((s) => mapping.has(s.sourceSessionDeviceId));
+    const body = {
+      kind: "replay" as const,
+      replayedRecordingId: data.recording.id,
+      devices: orderedSlots.map((slot) => {
+        const deviceIndex = mapping.get(slot.sourceSessionDeviceId)!;
+        const device = connectedDevices.find((d) => d.index === deviceIndex)!;
+        return { slotLabel: slot.slotLabel, bleName: device.name };
+      }),
+    };
+
+    const res = await fetch("/api/play-sessions", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      toast.error("Could not start replay session");
+      return;
+    }
+    const result: { session: { id: number; startedAt: number }; sessionDevices: { id: number }[] } =
+      await res.json();
+
+    eventBuffer.start(result.session.id, result.session.startedAt);
+    const sessionDeviceIdToDeviceIndex = new Map<number, number>();
+    orderedSlots.forEach((slot, i) => {
+      const deviceIndex = mapping.get(slot.sourceSessionDeviceId)!;
+      const newSessionDeviceId = result.sessionDevices[i]?.id;
+      if (newSessionDeviceId !== undefined) {
+        eventBuffer.registerSessionDevice(deviceIndex, newSessionDeviceId);
+        sessionDeviceIdToDeviceIndex.set(slot.sourceSessionDeviceId, deviceIndex);
+      }
+    });
+
+    const actuatorsByDeviceIndex = new Map<number, ActuatorInfo[]>(
+      connectedDevices.map((d) => [d.index, d.actuators]),
+    );
+
+    const { runtime } = await getButtplugClientHandle();
+    const instance = new RecordingPlayer({
+      events: data.events,
+      sessionDeviceIdToDeviceIndex,
+      actuatorsByDeviceIndex,
+      runtime,
+      onProgress: (elapsed) => setElapsedMs(elapsed),
+      onComplete: async () => {
+        setPlaying(false);
+        eventBuffer.stop();
+        await fetch(`/api/play-sessions/${result.session.id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ status: "completed" }),
+        });
+        toast.success("Replay finished");
+      },
+    });
+    setPlayer(instance);
+    instance.play();
+    setPlaying(true);
+  }
+
+  if (!data) {
+    return <p className="text-sm text-muted-foreground">Loading recording...</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle>{data.recording.name}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {!player ? (
+            <>
+              <p className="text-sm text-muted-foreground">
+                Connect the devices you want to replay onto, then match them to the recording&apos;s
+                original device slots.
+              </p>
+              <div className="flex items-center gap-3">
+                <DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
+                <Button
+                  onClick={async () => {
+                    await getButtplugClientHandle();
+                    setShowRemap(true);
+                  }}
+                  disabled={connectedDevices.length === 0}
+                >
+                  Match devices & replay
+                </Button>
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-col gap-3">
+              <Slider
+                value={[elapsedMs]}
+                max={data.recording.durationMs}
+                onValueChange={([v]) => player.seek(v)}
+              />
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">
+                  {formatTime(elapsedMs)} / {formatTime(data.recording.durationMs)}
+                </span>
+                <Button
+                  size="icon"
+                  variant="outline"
+                  onClick={() => {
+                    if (playing) {
+                      player.pause();
+                      setPlaying(false);
+                    } else {
+                      player.play();
+                      setPlaying(true);
+                    }
+                  }}
+                >
+                  {playing ? <Pause className="size-4" /> : <Play className="size-4" />}
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <DeviceRemapDialog
+        open={showRemap}
+        deviceSlots={data.recording.deviceSlots}
+        connectedDevices={connectedDevices}
+        onCancel={() => setShowRemap(false)}
+        onConfirm={(mapping) => void handleConfirmRemap(mapping)}
+      />
+
+      <Button variant="ghost" size="sm" onClick={() => router.push("/recordings")}>
+        Back to recordings
+      </Button>
+    </div>
+  );
+}