feat: UI cleanup on dashboard

Author: ashhhleyyy

src/app/dashboard/streams/page.tsx

@@ -13,6 +13,17 @@ import Link from 'next/link';
 
 export default async function StreamsPage() {
   const streams = await prisma.stream.findMany({
+    select: {
+      fixtureId: true,
+      name: true,
+      state: true,
+      ingestPoint: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+    },
     orderBy: {
       fixtureId: 'asc',
     },
@@ -21,14 +32,18 @@ export default async function StreamsPage() {
   const rows = streams.map((stream) => (
     <TableTr key={stream.fixtureId}>
       <TableTd>
-        <StreamStatusIndicator stream={stream} />
+        <StreamStatusIndicator
+          state={stream.state}
+          ingestPointId={stream?.ingestPoint?.id}
+        />
       </TableTd>
       <TableTd>
         <Link href={`/dashboard/streams/${stream.fixtureId}`}>
           {stream.name}
         </Link>
       </TableTd>
       <TableTd>{stream.fixtureId}</TableTd>
+      <TableTd>{stream.ingestPoint?.name ?? '<unset>'}</TableTd>
     </TableTr>
   ));
 
@@ -43,6 +58,7 @@ export default async function StreamsPage() {
             <TableTh>Status</TableTh>
             <TableTh>Name</TableTh>
             <TableTh>Fixture ID</TableTh>
+            <TableTh>Ingest</TableTh>
           </TableTr>
         </TableThead>
         <TableTbody>{rows}</TableTbody>

src/components/DashboardShell.tsx

@@ -25,6 +25,7 @@ export default function DashboardShell({
   return (
     <AppShell
       header={{ height: 60 }}
+      footer={{ height: 40 }}
       navbar={{
         width: 300,
         breakpoint: 'sm',

src/components/StreamPlayer.tsx

@@ -132,7 +132,7 @@ function StreamPlayerInner({ streamId, isLive, logPlayerErrors }: Props) {
         'StreamPlayerInner initialised when HLS is not supported. This should not happen!'
       );
     }
-  }, [streamUrl]);
+  }, [streamUrl, logPlayerErrors]);
 
   const togglePause = useCallback(() => {
     if (!audio.current) return;

src/components/StreamStatusIndicator.tsx

@@ -1,14 +1,20 @@
-import { Stream } from '@prisma/client';
+import { StreamState } from '@prisma/client';
 import { IconAlertTriangle, IconHeadphones } from '@tabler/icons-react';
 
 import unavailable from '@/components/StreamStatusIndicator/unavailable.svg';
 import live from '@/components/StreamStatusIndicator/live.svg';
 import Image from 'next/image';
 
-export function StreamStatusIndicator({ stream }: { stream: Stream }) {
-  switch (stream.state) {
+export function StreamStatusIndicator({
+  state,
+  ingestPointId,
+}: {
+  state: StreamState;
+  ingestPointId?: string;
+}) {
+  switch (state) {
     case 'Pending':
-      return stream.ingestPointId ? (
+      return ingestPointId ? (
         <Image alt="Pending" src={unavailable} />
       ) : (
         <IconAlertTriangle title="Ingest not configured" color="orange" />