Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-26 02:40:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add button to scroll to bottom of logs (#10006)

Browse Source 
* Add button to scroll to bottom of logs

* Cleanup
This commit is contained in:
Nicolas Mowen 2024-02-23 17:25:00 -07:00 committed by GitHub
parent 74a8fee69c
commit 50ab988d81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import {
} from "@/components/ui/dropdown-menu";
import Heading from "@/components/ui/heading";
import copy from "copy-to-clipboard";
import { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo, useRef, useState } from "react";
import useSWR from "swr";
const logTypes = ["frigate", "go2rtc", "nginx"] as const;
@ -40,6 +40,26 @@ function Logs() {
copy(logs);
}, [logs]);
// scroll to bottom button
const contentRef = useRef<HTMLDivElement | null>(null);
const [endVisible, setEndVisible] = useState(true);
const observer = useRef<IntersectionObserver | null>(null);
const endLogRef = useCallback(
(node: HTMLElement | null) => {
if (observer.current) observer.current.disconnect();
try {
observer.current = new IntersectionObserver((entries) => {
setEndVisible(entries[0].isIntersecting);
});
if (node) observer.current.observe(node);
} catch (e) {
// no op
}
},
[setEndVisible]
);
return (
<div className="relative w-full h-full overflow-hidden">
<div className="flex justify-between items-center">
@ -76,8 +96,26 @@ function Logs() {
</div>
</div>
<div className="absolute left-0 top-16 bottom-2 right-2 overflow-auto font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap">
{!endVisible && (
<div
className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white z-20 p-2"
onClick={() =>
contentRef.current?.scrollTo({
top: contentRef.current?.scrollHeight,
behavior: "smooth",
})
}
>
Jump to Bottom
</div>
)}
<div
ref={contentRef}
className="absolute left-0 top-16 bottom-2 right-2 overflow-auto font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap"
>
{logs}
<div ref={endLogRef} />
</div>
</div>
);