Phase 2: Docker and OIDC auth

frontend/src/pages/Media.tsx

@@ -1,15 +1,49 @@
-import { useState, useCallback, useRef } from "react";
-import { AgGridReact } from "ag-grid-react";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { DataGrid } from "@mui/x-data-grid";
+import type { GridColDef } from "@mui/x-data-grid";
+import {
+	Alert,
+	Box,
+	Button,
+	Card,
+	CardContent,
+	LinearProgress,
+	FormControl,
+	Grid,
+	InputLabel,
+	MenuItem,
+	Select,
+	Stack,
+	TextField,
+	Typography,
+} from "@mui/material";
 import {
 	useMediaStatus,
 	useMediaQuery,
 	useBuildIndex,
+	useStopBuildIndex,
+	useForceStopBuildIndex,
 } from "../hooks/useMedia";
 import type { MediaItem } from "../types";
 
+function formatDuration(seconds: number | null | undefined): string {
+	if (seconds == null || Number.isNaN(seconds)) return "-";
+	const total = Math.max(0, Math.round(seconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor((total % 3600) / 60);
+	const secs = total % 60;
+	if (hours > 0) return `${hours}h ${minutes}m ${secs}s`;
+	if (minutes > 0) return `${minutes}m ${secs}s`;
+	return `${secs}s`;
+}
+
 export function Media() {
+	const navigate = useNavigate();
 	const { data: status } = useMediaStatus();
 	const buildIndex = useBuildIndex();
+	const stopBuildIndex = useStopBuildIndex();
+	const forceStopBuildIndex = useForceStopBuildIndex();
 
 	const [search, setSearch] = useState("");
 	const [types, setTypes] = useState("Movie,Episode");
@@ -30,181 +64,341 @@ export function Media() {
 		enabled: status?.exists ?? false,
 	});
 
-	const gridRef = useRef<AgGridReact<MediaItem>>(null);
-
-	const columnDefs = [
-		{ field: "title" as const, headerName: "Title", minWidth: 150 },
-		{ field: "series" as const, headerName: "Series", minWidth: 120 },
-		{ field: "season" as const, headerName: "Season", maxWidth: 95 },
-		{ field: "episode" as const, headerName: "Episode", maxWidth: 105 },
-		{ field: "type" as const, headerName: "Type", maxWidth: 100 },
-		{ field: "year" as const, headerName: "Year", maxWidth: 90 },
-		{
-			field: "runtime_min" as const,
-			headerName: "Runtime (min)",
-			maxWidth: 125,
-		},
-		{ field: "size" as const, headerName: "Size", maxWidth: 120 },
-		{ field: "bitrate" as const, headerName: "Bitrate", maxWidth: 125 },
-		{ field: "hdr" as const, headerName: "HDR", maxWidth: 80 },
-		{ field: "video" as const, headerName: "Video codec", maxWidth: 120 },
-		{ field: "resolution" as const, headerName: "Resolution", maxWidth: 120 },
-		{ field: "date_added" as const, headerName: "Date added", maxWidth: 120 },
-		{ field: "library" as const, headerName: "Library", maxWidth: 140 },
-		{ field: "path" as const, headerName: "Path", minWidth: 200 },
+	const columns: GridColDef<MediaItem>[] = [
+		{ field: "title", headerName: "Title", minWidth: 180, flex: 1.2 },
+		{ field: "series", headerName: "Series", minWidth: 140, flex: 1 },
+		{ field: "season", headerName: "Season", width: 90 },
+		{ field: "episode", headerName: "Episode", width: 100 },
+		{ field: "type", headerName: "Type", width: 100 },
+		{ field: "year", headerName: "Year", width: 90 },
+		{ field: "runtime_min", headerName: "Runtime", width: 110 },
+		{ field: "size", headerName: "Size", width: 120 },
+		{ field: "bitrate", headerName: "Bitrate", width: 130 },
+		{ field: "hdr", headerName: "HDR", width: 80 },
+		{ field: "video", headerName: "Video codec", width: 130 },
+		{ field: "resolution", headerName: "Resolution", width: 120 },
+		{ field: "date_added", headerName: "Date added", width: 120 },
+		{ field: "library", headerName: "Library", width: 140 },
+		{ field: "path", headerName: "Path", minWidth: 240, flex: 1.2 },
 	];
 
-	const onGridReady = useCallback(() => {
-		gridRef.current?.api?.sizeColumnsToFit();
-	}, []);
+	const rows = useMemo(
+		() =>
+			(queryResult?.items ?? []).map((item) => ({
+				...item,
+				id: item.id || item.path,
+			})),
+		[queryResult],
+	);
 
 	const page = Math.floor(offset / limit) + 1;
-	const totalPages = queryResult ? Math.ceil(queryResult.total / limit) : 1;
+	const totalPages = queryResult
+		? Math.max(1, Math.ceil(queryResult.total / limit))
+		: 1;
+	const buildRunning = status?.build_running ?? false;
+	const buildProgress = status?.build_progress ?? null;
+	const buildLibraryProgress = status?.build_library_progress ?? null;
+	const buildCancelRequested = status?.build_cancel_requested ?? false;
+	const buildLabel = buildRunning
+		? status?.build_message || "Building media index..."
+		: status?.build_error
+			? `Build failed: ${status.build_error}`
+			: "";
+	const elapsedLabel = formatDuration(status?.build_elapsed_seconds);
+	const etaLabel =
+		buildRunning && status?.build_eta_seconds != null
+			? formatDuration(status.build_eta_seconds)
+			: "-";
+	const libraryElapsedLabel = formatDuration(
+		status?.build_library_elapsed_seconds,
+	);
+	const libraryEtaLabel =
+		buildRunning && status?.build_library_eta_seconds != null
+			? formatDuration(status.build_library_eta_seconds)
+			: "-";
+	const libraryLabel =
+		status?.build_current_library ||
+		(status?.build_library_index && status?.build_libraries_total
+			? `Library ${status.build_library_index} / ${status.build_libraries_total}`
+			: "Current library");
 
 	return (
-		<div className="space-y-4">
-			{/* Status and controls */}
-			<div className="flex items-center gap-4">
+		<Stack spacing={2}>
+			<Stack
+				direction="row"
+				spacing={1.5}
+				sx={{ alignItems: "center", flexWrap: "wrap" }}
+			>
+				<Typography variant="h5">Media</Typography>
 				{status?.exists ? (
-					<span className="text-sm text-gray-600">
+					<Typography variant="body2" color="text.secondary">
 						Index: {status.item_count.toLocaleString()} items
-						{status.updated_at_label && ` | updated ${status.updated_at_label}`}
-					</span>
+						{status.updated_at_label
+							? ` | updated ${status.updated_at_label}`
+							: ""}
+					</Typography>
 				) : (
-					<span className="text-sm text-amber-600">No index built yet.</span>
+					<Alert severity="warning" sx={{ py: 0 }}>
+						No index built yet.
+					</Alert>
 				)}
-				<button
+				<Button
+					variant="outlined"
 					onClick={() => buildIndex.mutate()}
-					disabled={buildIndex.isPending}
-					className="px-3 py-1 text-sm rounded border hover:bg-gray-50 disabled:opacity-50"
+					disabled={
+						buildIndex.isPending || buildRunning || buildCancelRequested
+					}
 				>
-					{buildIndex.isPending ? "Building..." : "Build index"}
-				</button>
-			</div>
+					{buildIndex.isPending || buildRunning ? "Building..." : "Build index"}
+				</Button>
+				{buildRunning && (
+					<>
+						<Button
+							variant="outlined"
+							color="error"
+							onClick={() => stopBuildIndex.mutate()}
+							disabled={stopBuildIndex.isPending || buildCancelRequested}
+						>
+							{buildCancelRequested || stopBuildIndex.isPending
+								? "Stopping..."
+								: "Stop build"}
+						</Button>
+						<Button
+							variant="outlined"
+							color="warning"
+							onClick={() => forceStopBuildIndex.mutate()}
+							disabled={forceStopBuildIndex.isPending}
+						>
+							{forceStopBuildIndex.isPending
+								? "Force stopping..."
+								: "Force stop"}
+						</Button>
+					</>
+				)}
+				{(buildRunning || status?.build_error) && (
+					<Box sx={{ width: "100%", minWidth: 260, flexBasis: "100%" }}>
+						<Stack spacing={1}>
+							<Typography
+								variant="body2"
+								color={status?.build_error ? "error" : "text.secondary"}
+							>
+								{buildLabel ||
+									(buildRunning
+										? "Building media index..."
+										: status?.build_error || "")}
+							</Typography>
 
-			{/* Filters */}
-			<div className="flex flex-wrap gap-3 items-end">
-				<div>
-					<label className="text-xs text-gray-500 block">Search</label>
-					<input
-						type="text"
-						value={search}
-						onChange={(e) => {
-							setSearch(e.target.value);
-							setOffset(0);
-						}}
-						className="border rounded px-2 py-1 text-sm w-48"
-						placeholder="Search title, series, path..."
-					/>
-				</div>
-				<div>
-					<label className="text-xs text-gray-500 block">Types</label>
-					<select
-						value={types}
-						onChange={(e) => {
-							setTypes(e.target.value);
-							setOffset(0);
-						}}
-						className="border rounded px-2 py-1 text-sm"
-					>
-						<option value="Movie,Episode">Movies + Episodes</option>
-						<option value="Movie">Movies only</option>
-						<option value="Episode">Episodes only</option>
-						<option value="Movie,Episode,Video">All video</option>
-					</select>
-				</div>
-				<div>
-					<label className="text-xs text-gray-500 block">HDR</label>
-					<select
-						value={hdrFilter}
-						onChange={(e) => {
-							setHdrFilter(e.target.value);
-							setOffset(0);
-						}}
-						className="border rounded px-2 py-1 text-sm"
-					>
-						<option value="All">All</option>
-						<option value="HDR only">HDR only</option>
-						<option value="SDR/unknown only">SDR/unknown only</option>
-					</select>
-				</div>
-				<div>
-					<label className="text-xs text-gray-500 block">Sort</label>
-					<select
-						value={sortKey}
-						onChange={(e) => setSortKey(e.target.value)}
-						className="border rounded px-2 py-1 text-sm"
-					>
-						<option value="title">Title</option>
-						<option value="series">Series</option>
-						<option value="size">Size</option>
-						<option value="bitrate">Bitrate</option>
-						<option value="runtime">Runtime</option>
-						<option value="year">Year</option>
-						<option value="date_added">Date added</option>
-						<option value="resolution">Resolution</option>
-					</select>
-				</div>
-				<div>
-					<label className="text-xs text-gray-500 block">Order</label>
-					<select
-						value={sortOrder}
-						onChange={(e) => setSortOrder(e.target.value)}
-						className="border rounded px-2 py-1 text-sm"
-					>
-						<option value="Ascending">Ascending</option>
-						<option value="Descending">Descending</option>
-					</select>
-				</div>
-			</div>
+							<Stack spacing={0.35}>
+								<Typography variant="caption" color="text.secondary">
+									Overall:{" "}
+									{buildProgress != null
+										? `${Math.round(buildProgress * 100)}%`
+										: "pending"}
+									{buildRunning
+										? ` • elapsed ${elapsedLabel} • eta ${etaLabel}`
+										: ""}
+								</Typography>
+								<LinearProgress
+									variant={
+										buildProgress != null ? "determinate" : "indeterminate"
+									}
+									value={
+										buildProgress != null
+											? Math.max(0, Math.min(100, buildProgress * 100))
+											: undefined
+									}
+								/>
+								<Typography variant="caption" color="text.secondary">
+									{status?.build_items_processed?.toLocaleString() ?? 0}/
+									{status?.build_items_total?.toLocaleString() ?? 0} items
+								</Typography>
+							</Stack>
+
+							<Stack spacing={0.35}>
+								<Typography variant="caption" color="text.secondary">
+									Current: {libraryLabel}
+									{buildRunning
+										? ` • elapsed ${libraryElapsedLabel} • eta ${libraryEtaLabel}`
+										: ""}
+								</Typography>
+								<LinearProgress
+									variant={
+										buildLibraryProgress != null
+											? "determinate"
+											: "indeterminate"
+									}
+									value={
+										buildLibraryProgress != null
+											? Math.max(0, Math.min(100, buildLibraryProgress * 100))
+											: undefined
+									}
+								/>
+								<Typography variant="caption" color="text.secondary">
+									{status?.build_library_items_processed?.toLocaleString() ?? 0}
+									/{status?.build_library_items_total?.toLocaleString() ?? 0}{" "}
+									items
+								</Typography>
+							</Stack>
+						</Stack>
+					</Box>
+				)}
+			</Stack>
+
+			<Card variant="outlined">
+				<CardContent>
+					<Grid container spacing={1.5}>
+						<Grid size={{ xs: 12, md: 4 }}>
+							<TextField
+								fullWidth
+								label="Search"
+								size="small"
+								value={search}
+								onChange={(e) => {
+									setSearch(e.target.value);
+									setOffset(0);
+								}}
+							/>
+						</Grid>
+						<Grid size={{ xs: 6, md: 2 }}>
+							<FormControl fullWidth size="small">
+								<InputLabel>Types</InputLabel>
+								<Select
+									label="Types"
+									value={types}
+									onChange={(e) => {
+										setTypes(e.target.value);
+										setOffset(0);
+									}}
+								>
+									<MenuItem value="Movie,Episode">Movies + Episodes</MenuItem>
+									<MenuItem value="Movie">Movies only</MenuItem>
+									<MenuItem value="Episode">Episodes only</MenuItem>
+									<MenuItem value="Movie,Episode,Video">All video</MenuItem>
+								</Select>
+							</FormControl>
+						</Grid>
+						<Grid size={{ xs: 6, md: 2 }}>
+							<FormControl fullWidth size="small">
+								<InputLabel>HDR</InputLabel>
+								<Select
+									label="HDR"
+									value={hdrFilter}
+									onChange={(e) => {
+										setHdrFilter(e.target.value);
+										setOffset(0);
+									}}
+								>
+									<MenuItem value="All">All</MenuItem>
+									<MenuItem value="HDR only">HDR only</MenuItem>
+									<MenuItem value="SDR/unknown only">SDR/unknown only</MenuItem>
+								</Select>
+							</FormControl>
+						</Grid>
+						<Grid size={{ xs: 6, md: 2 }}>
+							<FormControl fullWidth size="small">
+								<InputLabel>Sort</InputLabel>
+								<Select
+									label="Sort"
+									value={sortKey}
+									onChange={(e) => setSortKey(e.target.value)}
+								>
+									{[
+										["title", "Title"],
+										["series", "Series"],
+										["size", "Size"],
+										["bitrate", "Bitrate"],
+										["runtime", "Runtime"],
+										["year", "Year"],
+										["date_added", "Date added"],
+										["resolution", "Resolution"],
+									].map(([k, l]) => (
+										<MenuItem key={k} value={k}>
+											{l}
+										</MenuItem>
+									))}
+								</Select>
+							</FormControl>
+						</Grid>
+						<Grid size={{ xs: 6, md: 2 }}>
+							<FormControl fullWidth size="small">
+								<InputLabel>Order</InputLabel>
+								<Select
+									label="Order"
+									value={sortOrder}
+									onChange={(e) => setSortOrder(e.target.value)}
+								>
+									<MenuItem value="Ascending">Ascending</MenuItem>
+									<MenuItem value="Descending">Descending</MenuItem>
+								</Select>
+							</FormControl>
+						</Grid>
+					</Grid>
+				</CardContent>
+			</Card>
 
-			{/* Results info */}
 			{queryResult && (
-				<p className="text-xs text-gray-500">
+				<Typography variant="caption" color="text.secondary">
 					Showing {queryResult.items.length} of{" "}
 					{queryResult.total.toLocaleString()} items | Page {page} of{" "}
 					{totalPages}
-				</p>
+				</Typography>
 			)}
 
-			{/* AG Grid table */}
 			{status?.exists && (
-				<div className="ag-theme-alpine" style={{ height: 600, width: "100%" }}>
-					<AgGridReact<MediaItem>
-						ref={gridRef}
-						rowData={queryResult?.items ?? []}
-						columnDefs={columnDefs}
-						rowSelection="single"
-						onGridReady={onGridReady}
+				<Box
+					sx={{
+						height: 640,
+						bgcolor: "background.paper",
+						border: 1,
+						borderColor: "divider",
+						borderRadius: 2,
+					}}
+				>
+					<DataGrid
+						rows={rows}
+						columns={columns}
 						loading={isLoading}
-						suppressCellFocus
-						animateRows={false}
+						checkboxSelection={false}
+						disableRowSelectionOnClick
+						onRowClick={(params) => {
+							const row = params.row as MediaItem;
+							navigate(`/files?path=${encodeURIComponent(row.path)}`);
+						}}
+						pageSizeOptions={[100]}
+						hideFooter
+						sx={{
+							"& .MuiDataGrid-columnHeaders": {
+								fontWeight: 700,
+								backgroundColor: "action.hover",
+							},
+						}}
 					/>
-				</div>
+				</Box>
 			)}
 
-			{/* Pagination */}
 			{queryResult && totalPages > 1 && (
-				<div className="flex gap-2 items-center">
-					<button
+				<Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+					<Button
+						variant="outlined"
+						size="small"
 						onClick={() => setOffset(Math.max(0, offset - limit))}
 						disabled={page <= 1}
-						className="px-3 py-1 text-sm rounded border disabled:opacity-50"
 					>
 						Prev
-					</button>
-					<span className="text-sm">
+					</Button>
+					<Typography variant="body2">
 						Page {page} / {totalPages}
-					</span>
-					<button
+					</Typography>
+					<Button
+						variant="outlined"
+						size="small"
 						onClick={() => setOffset(offset + limit)}
 						disabled={page >= totalPages}
-						className="px-3 py-1 text-sm rounded border disabled:opacity-50"
 					>
 						Next
-					</button>
-				</div>
+					</Button>
+				</Stack>
 			)}
-		</div>
+		</Stack>
 	);
 }