Phase 2: Docker and OIDC auth

frontend/src/hooks/useMedia.ts

@@ -1,11 +1,20 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { fetchMediaStatus, buildMediaIndex, queryMedia } from "../api/client";
+import {
+	fetchMediaStatus,
+	buildMediaIndex,
+	queryMedia,
+	stopMediaIndexBuild,
+	forceStopMediaIndexBuild,
+} from "../api/client";
 
 export function useMediaStatus() {
 	return useQuery({
 		queryKey: ["media", "status"],
 		queryFn: fetchMediaStatus,
-		staleTime: 60_000,
+		staleTime: 5_000,
+		refetchInterval: (query) =>
+			query.state.data?.build_running ? 1000 : false,
+		refetchIntervalInBackground: true,
 	});
 }
 
@@ -21,6 +30,8 @@ export function useMediaQuery(params: {
 	enabled?: boolean;
 }) {
 	const { enabled = true, ...queryParams } = params;
+
+	// Feature: Sync file browser with selected media path
 	return useQuery({
 		queryKey: ["media", "query", queryParams],
 		queryFn: () => queryMedia(queryParams),
@@ -29,12 +40,36 @@ export function useMediaQuery(params: {
 	});
 }
 
+function invalidateMedia(queryClient: ReturnType<typeof useQueryClient>) {
+	queryClient.invalidateQueries({ queryKey: ["media"] });
+}
+
 export function useBuildIndex() {
 	const queryClient = useQueryClient();
 	return useMutation({
 		mutationFn: buildMediaIndex,
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: ["media"] });
+			invalidateMedia(queryClient);
+		},
+	});
+}
+
+export function useStopBuildIndex() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: stopMediaIndexBuild,
+		onSuccess: () => {
+			invalidateMedia(queryClient);
+		},
+	});
+}
+
+export function useForceStopBuildIndex() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: forceStopMediaIndexBuild,
+		onSuccess: () => {
+			invalidateMedia(queryClient);
 		},
 	});
 }