Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-07-30 13:48:07 +02:00
Code Issues Projects Releases Wiki Activity

More UI tweaks (#10974)

Browse Source 
* Show loading indicator when switching between preview and recording if it takes a while

* Scroll down to avoid automatic upscroll
This commit is contained in:
Nicolas Mowen 2024-04-14 14:43:43 -06:00 committed by GitHub
parent 7f424bb3f8
commit d7ae0eedf8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -8,6 +8,7 @@ import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
import { DynamicVideoController } from "./DynamicVideoController"; import { DynamicVideoController } from "./DynamicVideoController";
import HlsVideoPlayer from "../HlsVideoPlayer"; import HlsVideoPlayer from "../HlsVideoPlayer";
import { TimeRange } from "@/types/timeline"; import { TimeRange } from "@/types/timeline";
import ActivityIndicator from "@/components/indicators/activity-indicator";
/** /**
* Dynamically switches between video playback and scrubbing preview player. * Dynamically switches between video playback and scrubbing preview player.
@ -77,6 +78,7 @@ export default function DynamicVideoPlayer({
// initial state // initial state
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [loadingTimeout, setLoadingTimeout] = useState<NodeJS.Timeout>();
const [source, setSource] = useState( const [source, setSource] = useState(
`${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`, `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
); );
@ -84,8 +86,8 @@ export default function DynamicVideoPlayer({
// start at correct time // start at correct time
useEffect(() => { useEffect(() => {
if (isScrubbing) { if (!isScrubbing) {
setIsLoading(true); setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
} }
}, [isScrubbing]); }, [isScrubbing]);
@ -133,7 +135,7 @@ export default function DynamicVideoPlayer({
setSource( setSource(
`${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`, `${apiHost}vod/${camera}/start/${timeRange.after}/end/${timeRange.before}/master.m3u8`,
); );
setIsLoading(true); setLoadingTimeout(setTimeout(() => setIsLoading(true), 1000));
controller.newPlayback({ controller.newPlayback({
recordings: recordings ?? [], recordings: recordings ?? [],
@ -158,6 +160,10 @@ export default function DynamicVideoPlayer({
playerRef.current?.pause(); playerRef.current?.pause();
} }
if (loadingTimeout) {
clearTimeout(loadingTimeout);
}
setIsLoading(false); setIsLoading(false);
}} }}
/> />
@ -172,6 +178,9 @@ export default function DynamicVideoPlayer({
setPreviewController(previewController); setPreviewController(previewController);
}} }}
/> />
{isLoading && (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x1/2 -translate-y-1/2" />
)}
</> </>
); );
} }

3
web/src/pages/Logs.tsx
View File

@ -279,6 +279,9 @@ function Logs() {
} }
}) })
.catch(() => {}); .catch(() => {});
contentRef.current?.scrollBy({
top: 10,
});
} }
}); });
if (node) startObserver.current.observe(node); if (node) startObserver.current.observe(node);