From 5efcfb8b6173b16f522c6849039132fed538afa4 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 24 Jan 2024 12:35:26 +0100
Subject: [PATCH] Move scrubbing vtt parsing to a hook

---
 .../ui/src/player/components/scrubber.tsx     | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/front/packages/ui/src/player/components/scrubber.tsx b/front/packages/ui/src/player/components/scrubber.tsx
index 835bb95a..1686e334 100644
--- a/front/packages/ui/src/player/components/scrubber.tsx
+++ b/front/packages/ui/src/player/components/scrubber.tsx
@@ -31,9 +31,9 @@ import { toTimerString } from "./left-buttons";
 
 type Thumb = { to: number; url: string; x: number; y: number; width: number; height: number };
 
-export const BottomScrubber = ({ url }: { url: string }) => {
-	const { css } = useYoshiki();
-	const { data, error } = useFetch(BottomScrubber.query(url));
+export const useScrubber = (url: string) => {
+	const { data, error } = useFetch(useScrubber.query(url));
+	// TODO: put the info here on the react-query cache to prevent multiples runs of this
 	const info = useMemo(() => {
 		if (!data) return [];
 
@@ -67,6 +67,21 @@ export const BottomScrubber = ({ url }: { url: string }) => {
 		return ret;
 	}, [data]);
 
+	return { info, error } as const;
+};
+
+useScrubber.query = (url: string): QueryIdentifier<string> => ({
+	path: ["video", url, "thumbnails.vtt"],
+	parser: null!,
+	options: {
+		plainText: true,
+	},
+});
+
+export const BottomScrubber = ({ url }: { url: string }) => {
+	const { css } = useYoshiki();
+	const { info, error } = useScrubber(url);
+
 	const progress = useAtomValue(progressAtom);
 	const duration = useAtomValue(durationAtom);
 
@@ -142,11 +157,3 @@ export const BottomScrubber = ({ url }: { url: string }) => {
 		</View>
 	);
 };
-
-BottomScrubber.query = (url: string): QueryIdentifier<string> => ({
-	path: ["video", url, "thumbnails.vtt"],
-	parser: null!,
-	options: {
-		plainText: true,
-	},
-});