Phase 2: Docker and OIDC auth

frontend/src/components/NowPlaying.tsx

@@ -1,46 +1,22 @@
+import { Card, CardContent } from "@mui/material";
 import type { NowPlayingSession } from "../types";
+import { SessionActivityPanel } from "./SessionActivityPanel";
 
 interface Props {
 	sessions: NowPlayingSession[];
+	onSelectSession?: (session: NowPlayingSession) => void;
 }
 
-export function NowPlaying({ sessions }: Props) {
-	if (sessions.length === 0) {
-		return (
-			<p className="text-sm text-gray-500">
-				No active playback sessions right now.
-			</p>
-		);
-	}
-
+export function NowPlaying({ sessions, onSelectSession }: Props) {
 	return (
-		<div className="overflow-x-auto">
-			<table className="w-full text-sm border-collapse">
-				<thead>
-					<tr className="border-b text-left text-gray-600">
-						<th className="py-2 pr-4">User</th>
-						<th className="py-2 pr-4">Title</th>
-						<th className="py-2 pr-4">Type</th>
-						<th className="py-2 pr-4">State</th>
-						<th className="py-2 pr-4">Transcoding</th>
-						<th className="py-2 pr-4">Transcode type</th>
-						<th className="py-2 pr-4">Device</th>
-					</tr>
-				</thead>
-				<tbody>
-					{sessions.map((s) => (
-						<tr key={s.session_id} className="border-b hover:bg-gray-50">
-							<td className="py-2 pr-4 font-medium">{s.user}</td>
-							<td className="py-2 pr-4">{s.title}</td>
-							<td className="py-2 pr-4">{s.type}</td>
-							<td className="py-2 pr-4">{s.state}</td>
-							<td className="py-2 pr-4">{s.transcoding}</td>
-							<td className="py-2 pr-4">{s.transcoding_type}</td>
-							<td className="py-2 pr-4">{s.device}</td>
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</div>
+		<Card variant="outlined">
+			<CardContent>
+				<SessionActivityPanel
+					sessions={sessions}
+					onSelectSession={onSelectSession}
+					emptyMessage="No recent user activity sessions right now."
+				/>
+			</CardContent>
+		</Card>
 	);
 }