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
2026-08-25 07:51:38 +02:00
commit 1119c8eea0
112 changed files with 15522 additions and 0 deletions
@@ -0,0 +1,74 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getRecording } from "@/lib/db/queries/recordings";
+import { Play } from "lucide-react";
+
+export const dynamic = "force-dynamic";
+
+function formatDuration(ms: number): string {
+  const totalSeconds = Math.round(ms / 1000);
+  return `${Math.floor(totalSeconds / 60)}:${(totalSeconds % 60).toString().padStart(2, "0")}`;
+}
+
+export default async function RecordingDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const result = await getRecording(Number(id));
+  if (!result) notFound();
+
+  const { recording } = result;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="font-display text-2xl font-semibold">{recording.name}</h1>
+          {recording.description && <p className="text-sm text-muted-foreground">{recording.description}</p>}
+        </div>
+        <Button asChild>
+          <Link href={`/recordings/${recording.id}/replay`}>
+            <Play className="size-4" /> Replay
+          </Link>
+        </Button>
+      </div>
+
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Details</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
+          <div>
+            <span className="text-muted-foreground">Duration: </span>
+            {formatDuration(recording.durationMs)}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Plays: </span>
+            {recording.playCount}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Created: </span>
+            {new Date(recording.createdAt).toLocaleString()}
+          </div>
+          <div>
+            <span className="text-muted-foreground">Last played: </span>
+            {recording.lastPlayedAt ? new Date(recording.lastPlayedAt).toLocaleString() : "Never"}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bp-glass">
+        <CardHeader>
+          <CardTitle className="text-base">Devices in this recording</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-1">
+          {recording.deviceSlots.map((slot) => (
+            <div key={slot.sourceSessionDeviceId} className="text-sm">
+              {slot.slotLabel} <span className="text-muted-foreground">({slot.recordedBleName})</span>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,11 @@
+import { ReplayPlayerLoader } from "@/components/recordings/ReplayPlayerLoader";
+
+export default async function ReplayPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <div className="flex flex-col gap-6">
+      <h1 className="font-display text-2xl font-semibold">Replay</h1>
+      <ReplayPlayerLoader recordingId={Number(id)} />
+    </div>
+  );
+}