jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

spot: isolate input events in saving screen

Browse source
This commit is contained in:
nick-delirium 2025-04-25 14:30:47 +02:00
parent f5f47103c3
commit 324299170e
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
3 changed files with 47 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
spot/bun.lockb
View file

Binary file not shown.

48
spot/entrypoints/content/SavingControls.tsx
View file

@ -38,6 +38,8 @@ function SavingControls({
getVideoData,
getErrorEvents,
}: ISavingControls) {
let nameInputRef: HTMLInputElement;
let descriptionInputRef: HTMLTextAreaElement;
const [name, setName] = createSignal(`Issues in — ${document.title}`);
const [description, setDescription] = createSignal("");
const [currentTime, setCurrentTime] = createSignal(0);
@ -62,6 +64,43 @@ function SavingControls({
});
});
createEffect(() => {
const stopEvents = (e: Event) => {
e.stopPropagation();
e.stopImmediatePropagation();
};
if (nameInputRef) {
nameInputRef.addEventListener('keydown', stopEvents, true);
nameInputRef.addEventListener('keyup', stopEvents, true);
nameInputRef.addEventListener('keypress', stopEvents, true);
nameInputRef.addEventListener('input', stopEvents, true);
nameInputRef.addEventListener('change', stopEvents, true);
onCleanup(() => {
nameInputRef.removeEventListener('keydown', stopEvents, true);
nameInputRef.removeEventListener('keyup', stopEvents, true);
nameInputRef.removeEventListener('keypress', stopEvents, true);
nameInputRef.removeEventListener('input', stopEvents, true);
nameInputRef.removeEventListener('change', stopEvents, true);
});
}
if (descriptionInputRef) {
descriptionInputRef.addEventListener('keydown', stopEvents, true);
descriptionInputRef.addEventListener('keyup', stopEvents, true);
descriptionInputRef.addEventListener('keypress', stopEvents, true);
descriptionInputRef.addEventListener('input', stopEvents, true);
descriptionInputRef.addEventListener('change', stopEvents, true);
onCleanup(() => {
descriptionInputRef.removeEventListener('keydown', stopEvents, true);
descriptionInputRef.removeEventListener('keyup', stopEvents, true);
descriptionInputRef.removeEventListener('keypress', stopEvents, true);
descriptionInputRef.removeEventListener('input', stopEvents, true);
descriptionInputRef.removeEventListener('change', stopEvents, true);
});
}
});
const spacePressed = (e: KeyboardEvent) => {
if (
e.target instanceof HTMLInputElement ||
@ -72,6 +111,7 @@ function SavingControls({
}
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation()
if (e.key === " ") {
if (playing()) {
pause();
@ -456,19 +496,25 @@ function SavingControls({
<div class="mb-4">
<label class={"text-base font-medium mb-2"}>Title</label>
<input
ref={el => nameInputRef = el}
type="text"
placeholder="Name this Spot"
maxlength={64}
value={name()}
onFocus={() => setIsTyping(true)}
onBlur={() => setIsTyping(false)}
onInput={(e) => setName(e.currentTarget.value)}
onInput={(e) => {
e.preventDefault();
e.stopPropagation();
setName(e.currentTarget.value)
}}
class="input input-bordered w-full input-sm text-base mt-1"
/>
</div>
<div>
<label class={"text-base font-medium"}>Comments</label>
<textarea
ref={el => descriptionInputRef = el}
placeholder="Add more details..."
value={description()}
maxLength={256}

2
spot/package.json
View file

@ -20,8 +20,6 @@
"@openreplay/network-proxy": "^1.1.0",
"@thedutchcoder/postcss-rem-to-px": "^0.0.2",
"autoprefixer": "^10.4.21",
"install": "^0.13.0",
"npm": "^10.9.2",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"solid-js": "^1.9.5",