administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 03:35:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix scrolling behavior

Browse Source
This commit is contained in:
Nick Mowen 2023-12-15 09:37:49 -07:00
parent ac83da09ea
commit 2db3ea61ea
2 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-new/src/App.tsx
View File

@ -27,9 +27,9 @@ function App() {
<BrowserRouter>
<Wrapper>
<Header onToggleNavbar={toggleNavbar} />
<div className="grid grid-cols-[auto,1fr] flex-grow-1 md:overflow-auto">
<div className="grid grid-cols-[auto,1fr] flex-grow-1 overflow-auto">
<Sidebar sheetOpen={sheetOpen} setSheetOpen={setSheetOpen} />
<div className="overflow-x-hidden px-4 py-2 w-screen md:w-full">
<div id="pageRoot" className="overflow-x-hidden px-4 py-2 md:w-full">
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/live" element={<Live />} />

63
web-new/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -48,43 +48,52 @@ export default function PreviewThumbnailPlayer({
playerRef.current.currentTime(startTs - relevantPreview.start);
}
},
[relevantPreview, startTs]
[relevantPreview, startTs, playerRef]
);
const observer = useRef<IntersectionObserver | null>();
const autoPlayObserver = useRef<IntersectionObserver | null>();
const preloadObserver = useRef<IntersectionObserver | null>();
const inViewRef = useCallback(
(node: HTMLElement | null) => {
if (observer.current) {
return;
if (!preloadObserver.current) {
try {
preloadObserver.current = new IntersectionObserver(
(entries) => {
const [{ isIntersecting }] = entries;
setVisible(isIntersecting);
},
{
threshold: 0,
root: document.getElementById("pageRoot"),
rootMargin: "10% 0px 25% 0px",
}
);
if (node) preloadObserver.current.observe(node);
} catch (e) {
// no op
}
}
try {
observer.current = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
if (entries[0].intersectionRatio == 1.0) {
if (shouldAutoPlay) {
onPlayback(true);
}
if (shouldAutoPlay && !autoPlayObserver.current) {
try {
autoPlayObserver.current = new IntersectionObserver(
(entries) => {
const [{ isIntersecting }] = entries;
if (isIntersecting) {
onPlayback(true);
} else {
setVisible(true);
}
} else {
if (shouldAutoPlay) {
onPlayback(false);
}
setVisible(false);
}
},
{ threshold: [0.0, 1.0], rootMargin: "10% 0% 25% 0%" }
);
if (node) observer.current.observe(node);
} catch (e) {
// no op
},
{ threshold: 1.0 }
);
if (node) autoPlayObserver.current.observe(node);
} catch (e) {
// no op
}
}
},
[observer, onPlayback]
[preloadObserver, autoPlayObserver, onPlayback]
);
let content;
@ -137,7 +146,7 @@ export default function PreviewThumbnailPlayer({
return (
<AspectRatio
ref={inViewRef}
ref={relevantPreview ? inViewRef : null}
ratio={16 / 9}
className="bg-black flex justify-center items-center"
onMouseEnter={() => onPlayback(true)}