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

spot prevent empty titles

Browse source
This commit is contained in:
nick-delirium 2024-09-04 15:37:37 +02:00
parent 3c8b9c13b9
commit 1d47d77dda
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 32 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@ interface ISavingControls {
}, },
) => void; ) => void;
getVideoData: () => Promise<any>; getVideoData: () => Promise<any>;
getErrorEvents: () => Promise<{title:string,time:number}[]> getErrorEvents: () => Promise<{ title: string; time: number }[]>;
} }
const base64ToBlob = (base64: string) => { const base64ToBlob = (base64: string) => {
@ -33,8 +33,12 @@ const base64ToBlob = (base64: string) => {
return new Blob([ab], { type: "video/webm" }); return new Blob([ab], { type: "video/webm" });
}; };
function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingControls) { function SavingControls({
const [name, setName] = createSignal(`Issues in — ${document.title}`); onClose,
getVideoData,
getErrorEvents,
}: ISavingControls) {
const [name, setName] = createSignal(`Issues in — ${document.title}`);
const [description, setDescription] = createSignal(""); const [description, setDescription] = createSignal("");
const [currentTime, setCurrentTime] = createSignal(0); const [currentTime, setCurrentTime] = createSignal(0);
const [duration, setDuration] = createSignal(0); const [duration, setDuration] = createSignal(0);
@ -47,13 +51,13 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
const [endPos, setEndPos] = createSignal(100); const [endPos, setEndPos] = createSignal(100);
const [dragging, setDragging] = createSignal<string | null>(null); const [dragging, setDragging] = createSignal<string | null>(null);
const [isTyping, setIsTyping] = createSignal(false); const [isTyping, setIsTyping] = createSignal(false);
const [errorEvents, setErrorEvents] = createSignal([]) const [errorEvents, setErrorEvents] = createSignal([]);
createEffect(() => { createEffect(() => {
setTrimBounds([0, 0]); setTrimBounds([0, 0]);
getErrorEvents().then((r) => { getErrorEvents().then((r) => {
setErrorEvents(r) setErrorEvents(r);
}) });
}); });
const spacePressed = (e: KeyboardEvent) => { const spacePressed = (e: KeyboardEvent) => {
@ -64,8 +68,8 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
) { ) {
return; return;
} }
e.preventDefault() e.preventDefault();
e.stopPropagation() e.stopPropagation();
if (e.key === " ") { if (e.key === " ") {
if (playing()) { if (playing()) {
pause(); pause();
@ -80,7 +84,6 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
onCleanup(() => window.removeEventListener("keydown", spacePressed)); onCleanup(() => window.removeEventListener("keydown", spacePressed));
}); });
const convertToPercentage = (clientX: number, element: HTMLElement) => { const convertToPercentage = (clientX: number, element: HTMLElement) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const x = clientX - rect.left; const x = clientX - rect.left;
@ -137,6 +140,9 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
let videoRef: HTMLVideoElement; let videoRef: HTMLVideoElement;
const onSave = async () => { const onSave = async () => {
if (!name()) {
return;
}
setProcessing(true); setProcessing(true);
const thumbnail = await generateThumbnail(); const thumbnail = await generateThumbnail();
setProcessing(false); setProcessing(false);
@ -219,7 +225,9 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
videoDuration = await getDuration(); videoDuration = await getDuration();
} }
setDuration(videoDuration); setDuration(videoDuration);
setErrorEvents(errorEvents.filter((ev: { time: number }) => ev.time < videoDuration)) setErrorEvents(
errorEvents.filter((ev: { time: number }) => ev.time < videoDuration),
);
void generateThumbnail(); void generateThumbnail();
}; };
@ -325,7 +333,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
</div> </div>
<div class={"card py-1 px-2"}> <div class={"card py-1 px-2"}>
{errorEvents().length ? ( {errorEvents().length ? (
<div class={'relative w-full h-4'} /> <div class={"relative w-full h-4"} />
) : null} ) : null}
<div class={"flex items-center gap-2"}> <div class={"flex items-center gap-2"}>
<div <div
@ -366,10 +374,15 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
onMouseUp={endDrag} onMouseUp={endDrag}
> >
<div class={"absolute h-4 w-full"} style="top:-20px;"> <div class={"absolute h-4 w-full"} style="top:-20px;">
{errorEvents().map(e => ( {errorEvents().map((e) => (
<div <div
class={'w-3 h-3 rounded-full bg-red-600 absolute tooltip'} class={
style={{ top: '2px', left: `${(e.time/duration()) * 100}%` }} "w-3 h-3 rounded-full bg-red-600 absolute tooltip"
}
style={{
top: "2px",
left: `${(e.time / duration()) * 100}%`,
}}
data-tip={e.title} data-tip={e.title}
/> />
))} ))}
@ -469,7 +482,11 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
onClick={onSave} onClick={onSave}
class={"btn btn-primary btn-sm text-white text-base"} class={
name().length
? "btn btn-primary btn-sm text-white text-base"
: "btn-disabled btn btn-sm text-white text-base"
}
> >
Save Spot Save Spot
</div> </div>