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

hook

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-26 12:24:09 -06:00
parent a4ac35a454
commit d0270548d1
2 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ import {
import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
import axios from "axios";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import useImageLoaded from "@/hooks/use-image-loaded";
import { Skeleton } from "../ui/skeleton";
type PreviewPlayerProps = {
@ -37,27 +38,6 @@ type Preview = {
end: number;
};
const useImageLoaded = (): [
React.RefObject<HTMLImageElement>,
boolean,
() => void,
] => {
const [loaded, setLoaded] = useState(false);
const ref = useRef<HTMLImageElement>(null);
const onLoad = () => {
setLoaded(true);
};
useEffect(() => {
if (ref.current && ref.current?.complete) {
onLoad();
}
});
return [ref, loaded, onLoad];
};
export default function PreviewThumbnailPlayer({
review,
relevantPreview,
@ -71,6 +51,7 @@ export default function PreviewThumbnailPlayer({
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [playback, setPlayback] = useState(false);
const [progress, setProgress] = useState(0);
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
const playingBack = useMemo(() => playback, [playback, autoPlayback]);
@ -115,8 +96,6 @@ export default function PreviewThumbnailPlayer({
[hoverTimeout, review]
);
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
// date
const formattedDate = useFormattedTimestamp(

24
web/src/hooks/use-image-loaded.ts Normal file
View File

@ -0,0 +1,24 @@
import { useEffect, useRef, useState } from "react";
const useImageLoaded = (): [
React.RefObject<HTMLImageElement>,
boolean,
() => void,
] => {
const [loaded, setLoaded] = useState(false);
const ref = useRef<HTMLImageElement>(null);
const onLoad = () => {
setLoaded(true);
};
useEffect(() => {
if (ref.current && ref.current?.complete) {
onLoad();
}
});
return [ref, loaded, onLoad];
};
export default useImageLoaded;