107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { updateParticleProperties } from "@/lib/firestore-particles";
|
|
import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
|
|
import type { Particle } from "@/api/types";
|
|
import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
|
|
|
|
interface RenameStreamOverlayProps {
|
|
networkId: string;
|
|
streamParticle: Particle & { type: "stream" };
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function RenameStreamOverlay({
|
|
networkId,
|
|
streamParticle,
|
|
onClose,
|
|
}: RenameStreamOverlayProps) {
|
|
// Suspend stream playback
|
|
useEffect(() => {
|
|
const { suspend, release } = usePlaybackSuspenderStore.getState();
|
|
suspend();
|
|
return release;
|
|
}, []);
|
|
|
|
const [name, setName] = useState(streamParticle.properties.name);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const trimmed = name.trim();
|
|
const canSave =
|
|
!saving &&
|
|
trimmed.length > 0 &&
|
|
trimmed !== streamParticle.properties.name;
|
|
|
|
const handleSave = useCallback(async () => {
|
|
if (!canSave) return;
|
|
setSaving(true);
|
|
try {
|
|
const docPath = toFirestoreDocPath(particlePath(networkId, [streamParticle.id]));
|
|
await updateParticleProperties<"stream">(docPath, { name: trimmed });
|
|
onClose();
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [canSave, networkId, onClose, streamParticle.id, trimmed]);
|
|
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onClose();
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handler, { capture: true });
|
|
return () => window.removeEventListener("keydown", handler, { capture: true });
|
|
}, [onClose]);
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[100]">
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
<div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-sm font-semibold text-white/70">Rename stream</h2>
|
|
<span className="text-xs text-white/30">
|
|
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
Esc
|
|
</kbd>{" "}
|
|
to close
|
|
</span>
|
|
</div>
|
|
|
|
<Input
|
|
type="text"
|
|
autoFocus
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
onFocus={(e) => e.currentTarget.select()}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
handleSave();
|
|
}
|
|
}}
|
|
placeholder="Stream name"
|
|
className="border-white/10 bg-white/5 text-white placeholder-white/30 focus-visible:border-white/30 focus-visible:ring-0"
|
|
/>
|
|
|
|
<div className="mt-4 flex items-center justify-end gap-2">
|
|
<Button variant="ghost" size="sm" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
<Button size="sm" onClick={handleSave} disabled={!canSave}>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|