Streamline the Replay view with the Control view
Page title is now "{session name} - Replay" (matching generateMetadata)
instead of a bare "Replay" heading with the name duplicated inside a
Card title. Dropped that redundant outer Card - the pre-connection
scan/match buttons now sit in a flat row below the header, same as
Control's scan/record row, with the same "no devices connected" hint
card shown underneath when nothing's connected yet. Playback controls
once a replay starts still live in a card, matching DeviceCard's style.
Also gave "Match & replay" a Play icon.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
This commit is contained in:
Claude Sonnet 5
@@ -5,14 +5,21 @@ import { getSessionName } from "@/lib/db/queries/sessions";
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const name = await getSessionName(Number(id));
|
||||
return { title: name ? `Replay ${name}` : "Replay" };
|
||||
return { title: name ? `${name} - Replay` : "Replay" };
|
||||
}
|
||||
|
||||
export default async function ReplayPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const name = await getSessionName(Number(id));
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<h1 className="font-heading text-2xl font-semibold">Replay</h1>
|
||||
<div>
|
||||
<h1 className="font-heading text-2xl font-semibold">{name ?? `Session #${id}`} - Replay</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Connect the devices you want to replay onto, then match them to this session's original device
|
||||
slots and play its recorded intensity back live over Web Bluetooth.
|
||||
</p>
|
||||
</div>
|
||||
<ReplayPlayerLoader sessionId={Number(id)} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { DeviceScanPanel } from "@/components/control/DeviceScanPanel";
|
||||
@@ -137,109 +137,115 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card className="bp-glass">
|
||||
<CardHeader>
|
||||
<CardTitle>{data.session.name ?? `Session #${data.session.id}`}</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 session's
|
||||
{!player ? (
|
||||
<>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
await getButtplugClientHandle();
|
||||
setShowRemap(true);
|
||||
} catch {
|
||||
toast.error("Could not connect to Buttplug client");
|
||||
}
|
||||
}}
|
||||
disabled={connectedDevices.length === 0 || starting}
|
||||
>
|
||||
{starting ? (
|
||||
"Starting..."
|
||||
) : (
|
||||
<>
|
||||
<Play className="size-3.5" /> Match & replay
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{connectedDevices.length === 0 && (
|
||||
<Card className="bp-glass">
|
||||
<CardContent className="py-6 text-sm text-muted-foreground">
|
||||
No devices connected yet. Scan to discover nearby toys, then match them to this session's
|
||||
original device slots.
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<DeviceScanPanel scanning={scanning} onScan={() => void startScanning()} onStopScan={() => void stopScanning()} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Card className="bp-glass">
|
||||
<CardContent className="flex flex-col gap-3 py-6">
|
||||
{replayTargets.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{replayTargets.map((t) => (
|
||||
<span
|
||||
key={t.slotLabel}
|
||||
className="bp-readout rounded-md border border-border bg-card/60 px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
{t.slotLabel} → {t.deviceName}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Slider
|
||||
value={[elapsedMs]}
|
||||
max={data.session.durationMs}
|
||||
onValueChange={([v]) => player.seek(v)}
|
||||
/>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<span className="bp-readout text-xs text-muted-foreground">
|
||||
{formatTime(elapsedMs)} / {formatTime(data.session.durationMs)}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await getButtplugClientHandle();
|
||||
setShowRemap(true);
|
||||
} catch {
|
||||
toast.error("Could not connect to Buttplug client");
|
||||
if (playing) {
|
||||
player.pause();
|
||||
setPlaying(false);
|
||||
} else {
|
||||
player.play();
|
||||
setPlaying(true);
|
||||
}
|
||||
// Toggling either way leaves the toy holding whatever intensity was
|
||||
// last sent - zero it out so pause always actually stops the device,
|
||||
// and resume always starts from a clean, known state.
|
||||
await resetReplayDevices();
|
||||
}}
|
||||
disabled={connectedDevices.length === 0 || starting}
|
||||
aria-label={playing ? "Pause" : "Play"}
|
||||
>
|
||||
{starting ? "Starting..." : "Match devices & replay"}
|
||||
{playing ? <Pause className="size-4" /> : <Play className="size-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={async () => {
|
||||
player.stop();
|
||||
setPlaying(false);
|
||||
setElapsedMs(0);
|
||||
// Fully disconnect every device that took part in this replay,
|
||||
// not just stop the player - see handleDisconnectDevice in
|
||||
// ButtplugConsole for why "stop + remove from store" is the
|
||||
// closest equivalent Buttplug's protocol allows per-device.
|
||||
await Promise.all(
|
||||
replayDeviceIndexes.map(async (deviceIndex) => {
|
||||
const liveDevice = await getDevice(deviceIndex);
|
||||
await liveDevice?.stop().catch(() => {});
|
||||
removeDevice(deviceIndex);
|
||||
}),
|
||||
);
|
||||
setPlayer(null);
|
||||
setReplayTargets([]);
|
||||
setReplayDeviceIndexes([]);
|
||||
}}
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{replayTargets.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{replayTargets.map((t) => (
|
||||
<span
|
||||
key={t.slotLabel}
|
||||
className="bp-readout rounded-md border border-border bg-card/60 px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
{t.slotLabel} → {t.deviceName}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Slider
|
||||
value={[elapsedMs]}
|
||||
max={data.session.durationMs}
|
||||
onValueChange={([v]) => player.seek(v)}
|
||||
/>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="bp-readout text-xs text-muted-foreground">
|
||||
{formatTime(elapsedMs)} / {formatTime(data.session.durationMs)}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
if (playing) {
|
||||
player.pause();
|
||||
setPlaying(false);
|
||||
} else {
|
||||
player.play();
|
||||
setPlaying(true);
|
||||
}
|
||||
// Toggling either way leaves the toy holding whatever intensity was
|
||||
// last sent - zero it out so pause always actually stops the device,
|
||||
// and resume always starts from a clean, known state.
|
||||
await resetReplayDevices();
|
||||
}}
|
||||
aria-label={playing ? "Pause" : "Play"}
|
||||
>
|
||||
{playing ? <Pause className="size-4" /> : <Play className="size-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={async () => {
|
||||
player.stop();
|
||||
setPlaying(false);
|
||||
setElapsedMs(0);
|
||||
// Fully disconnect every device that took part in this replay,
|
||||
// not just stop the player - see handleDisconnectDevice in
|
||||
// ButtplugConsole for why "stop + remove from store" is the
|
||||
// closest equivalent Buttplug's protocol allows per-device.
|
||||
await Promise.all(
|
||||
replayDeviceIndexes.map(async (deviceIndex) => {
|
||||
const liveDevice = await getDevice(deviceIndex);
|
||||
await liveDevice?.stop().catch(() => {});
|
||||
removeDevice(deviceIndex);
|
||||
}),
|
||||
);
|
||||
setPlayer(null);
|
||||
setReplayTargets([]);
|
||||
setReplayDeviceIndexes([]);
|
||||
}}
|
||||
>
|
||||
Stop
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<DeviceRemapDialog
|
||||
open={showRemap}
|
||||
|
||||
Reference in New Issue
Block a user