Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

WebUI Fixes (#10608)

Browse Source 
* Fix camera with -

* Fix not playing player after making slight adjustment

* Fix hovering getting stuck
This commit is contained in:
Nicolas Mowen 2024-03-22 08:31:20 -06:00 committed by GitHub
parent df6c3b14dd
commit 83517f59b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/player/PreviewPlayer.tsx
View File

@ -352,7 +352,8 @@ function PreviewFramesPlayer({
} }
return previewFrames.map((frame) => return previewFrames.map((frame) =>
parseFloat(frame.split("-")[1].slice(undefined, -5)), // @ts-expect-error we know this item will exist
parseFloat(frame.split("-").slice(undefined, -5)),
); );
}, [previewFrames]); }, [previewFrames]);

14
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -171,7 +171,7 @@ export default function PreviewThumbnailPlayer({
{...swipeHandlers} {...swipeHandlers}
> >
{playingBack && ( {playingBack && (
<div className="absolute inset-0 animate-in fade-in"> <div className="absolute inset-0 animate-in fade-in pointer-events-none">
<PreviewContent <PreviewContent
review={review} review={review}
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
@ -486,10 +486,10 @@ function VideoPreview({
); );
return ( return (
<div className="relative size-full aspect-video bg-black"> <div className="relative size-full aspect-video bg-black pointer-events-none">
<video <video
ref={playerRef} ref={playerRef}
className="size-full aspect-video bg-black" className="size-full aspect-video bg-black pointer-events-none"
autoPlay autoPlay
playsInline playsInline
preload="auto" preload="auto"
@ -500,7 +500,7 @@ function VideoPreview({
</video> </video>
<Slider <Slider
ref={sliderRef} ref={sliderRef}
className="absolute inset-x-0 bottom-0 z-30" className="absolute inset-x-0 bottom-0 z-30 pointer-events-none"
value={[progress]} value={[progress]}
onValueChange={onManualSeek} onValueChange={onManualSeek}
onValueCommit={onStopManualSeek} onValueCommit={onStopManualSeek}
@ -654,7 +654,7 @@ function InProgressPreview({
} }
return ( return (
<div className="relative size-full flex items-center bg-black"> <div className="relative size-full flex items-center bg-black pointer-events-none">
<img <img
className="size-full object-contain" className="size-full object-contain"
src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`} src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
@ -681,8 +681,8 @@ function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
} }
return isSafari ? ( return isSafari ? (
<div className={`absolute inset-0 bg-gray-300`} /> <div className={`absolute inset-0 bg-gray-300 pointer-events-none`} />
) : ( ) : (
<Skeleton className={`absolute inset-0`} /> <Skeleton className={`absolute inset-0 pointer-events-none`} />
); );
} }

4
web/src/components/player/dynamic/DynamicVideoController.ts
View File

@ -42,6 +42,10 @@ export class DynamicVideoController {
} }
} }
play() {
this.playerController.play();
}
pause() { pause() {
this.playerController.pause(); this.playerController.pause();
} }

2
web/src/views/events/RecordingView.tsx
View File

@ -147,6 +147,8 @@ export function RecordingView({
} else { } else {
updateSelectedSegment(currentTime, true); updateSelectedSegment(currentTime, true);
} }
} else {
mainControllerRef.current?.play();
} }
} }
// we only want to seek when current time doesn't match the player update time // we only want to seek when current time doesn't match the player update time