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

spot fix error markers boundary

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

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

@ -18,7 +18,7 @@ interface ISavingControls {
},
) => void;
getVideoData: () => Promise<any>;
getErrorEvents: () => Promise<{title:string,time:number}>
getErrorEvents: () => Promise<{title:string,time:number}[]>
}
const base64ToBlob = (base64: string) => {
@ -51,7 +51,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
createEffect(() => {
setTrimBounds([0, 0]);
getErrorEvents().then(r => {
getErrorEvents().then((r) => {
setErrorEvents(r)
})
});
@ -219,6 +219,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
videoDuration = await getDuration();
}
setDuration(videoDuration);
setErrorEvents(errorEvents.filter((ev: { time: number }) => ev.time < videoDuration))
void generateThumbnail();
};
@ -324,15 +325,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
</div>
<div class={"card py-1 px-2"}>
{errorEvents().length ? (
<div class={'relative w-full h-4'}>
{errorEvents().map(e => (
<div
class={'w-3 h-3 rounded-full bg-red-600 absolute tooltip'}
style={{ top: '2px', left: `${(e.time/duration()) * 100}%` }}
data-tip={e.title}
/>
))}
</div>
<div class={'relative w-full h-4'} />
) : null}
<div class={"flex items-center gap-2"}>
<div
@ -372,6 +365,15 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
onMouseMove={onDrag}
onMouseUp={endDrag}
>
<div class={"absolute h-4 w-full"} style="top:-20px;">
{errorEvents().map(e => (
<div
class={'w-3 h-3 rounded-full bg-red-600 absolute tooltip'}
style={{ top: '2px', left: `${(e.time/duration()) * 100}%` }}
data-tip={e.title}
/>
))}
</div>
<div
class="marker start"
onMouseDown={startDrag("start")}