multiple triggers can trigger at once

This commit is contained in:
Josh Hawkins 2025-10-27 13:01:37 -05:00
parent 07b5652ab7
commit 51f5d4cbda

View File

@ -91,7 +91,7 @@ export default function TriggerView({
const [showCreate, setShowCreate] = useState(false); const [showCreate, setShowCreate] = useState(false);
const [showDelete, setShowDelete] = useState(false); const [showDelete, setShowDelete] = useState(false);
const [selectedTrigger, setSelectedTrigger] = useState<Trigger | null>(null); const [selectedTrigger, setSelectedTrigger] = useState<Trigger | null>(null);
const [triggeredTrigger, setTriggeredTrigger] = useState<string>(); const [triggeredTrigger, setTriggeredTrigger] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const cameraName = useCameraFriendlyName(selectedCamera); const cameraName = useCameraFriendlyName(selectedCamera);
@ -128,16 +128,32 @@ export default function TriggerView({
mutate(); mutate();
setTriggeredTrigger(triggers_status_ws.name); setTriggeredTrigger((prev) => {
const current = prev || [];
const isFirstTrigger = current.length === 0;
if (!current.includes(triggers_status_ws.name)) {
const newTriggers = [...current, triggers_status_ws.name];
// Only scroll if this is the first triggered trigger
if (isFirstTrigger) {
const target = document.querySelector(
`#trigger-${triggers_status_ws.name}`,
);
if (target) {
target.scrollIntoView({
block: "center",
behavior: "smooth",
inline: "nearest",
});
}
}
return newTriggers;
}
return current;
});
const target = document.querySelector( const target = document.querySelector(
`#trigger-${triggers_status_ws.name}`, `#trigger-${triggers_status_ws.name}`,
); );
if (target) { if (target) {
target.scrollIntoView({
block: "center",
behavior: "smooth",
inline: "nearest",
});
const ring = target.querySelector(".trigger-ring"); const ring = target.querySelector(".trigger-ring");
if (ring) { if (ring) {
ring.classList.add(`outline-selected`); ring.classList.add(`outline-selected`);
@ -146,6 +162,9 @@ export default function TriggerView({
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
ring.classList.remove(`outline-selected`); ring.classList.remove(`outline-selected`);
ring.classList.add("outline-transparent"); ring.classList.add("outline-transparent");
setTriggeredTrigger((prev) =>
(prev || []).filter((name) => name !== triggers_status_ws.name),
);
}, 3000); }, 3000);
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
} }
@ -387,6 +406,7 @@ export default function TriggerView({
setShowCreate(false); setShowCreate(false);
setShowDelete(false); setShowDelete(false);
setUnsavedChanges(false); setUnsavedChanges(false);
setTriggeredTrigger([]);
} }
}, [selectedCamera, setUnsavedChanges]); }, [selectedCamera, setUnsavedChanges]);
@ -500,7 +520,7 @@ export default function TriggerView({
<div <div
className={cn( className={cn(
"trigger-ring pointer-events-none absolute inset-0 z-10 size-full rounded-md outline outline-[3px] -outline-offset-[2.8px] duration-500", "trigger-ring pointer-events-none absolute inset-0 z-10 size-full rounded-md outline outline-[3px] -outline-offset-[2.8px] duration-500",
triggeredTrigger === trigger.name triggeredTrigger.includes(trigger.name)
? "shadow-selected outline-selected" ? "shadow-selected outline-selected"
: "outline-transparent duration-500", : "outline-transparent duration-500",
)} )}