From d0270548d1dfb225e5a28b8662ba4f56e0fdc343 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:24:09 -0600
Subject: [PATCH] hook

---
 .../player/PreviewThumbnailPlayer.tsx         | 25 ++-----------------
 web/src/hooks/use-image-loaded.ts             | 24 ++++++++++++++++++
 2 files changed, 26 insertions(+), 23 deletions(-)
 create mode 100644 web/src/hooks/use-image-loaded.ts

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index d42fe150c..7b5ffac64 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -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(
diff --git a/web/src/hooks/use-image-loaded.ts b/web/src/hooks/use-image-loaded.ts
new file mode 100644
index 000000000..b64258c88
--- /dev/null
+++ b/web/src/hooks/use-image-loaded.ts
@@ -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;