From 3efff2cfd682dee4712f4312178e43853b755e7c Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Sun, 1 Sep 2024 22:12:28 -0700
Subject: [PATCH] improve end reason in list ui

* in backend, save the full reason, not just the most direct error,
  which is often the useless `UNKNOWN`

* in UI, instead of wrapping in `<Typography>` which just resorts in
  a weird ransom-note mixed size look, reserve space for or actually
  use an icon.
---
 server/src/streamer.rs    |  2 +-
 ui/src/List/VideoList.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/server/src/streamer.rs b/server/src/streamer.rs
index e266c09..c14470b 100644
--- a/server/src/streamer.rs
+++ b/server/src/streamer.rs
@@ -204,7 +204,7 @@ where
             let frame = match frame {
                 Ok(f) => f,
                 Err(e) => {
-                    let _ = w.close(None, Some(e.to_string()));
+                    let _ = w.close(None, Some(e.chain().to_string()));
                     return Err(e);
                 }
             };
diff --git a/ui/src/List/VideoList.tsx b/ui/src/List/VideoList.tsx
index 0e426ea..6eff739 100644
--- a/ui/src/List/VideoList.tsx
+++ b/ui/src/List/VideoList.tsx
@@ -12,7 +12,8 @@ import TableRow, { TableRowProps } from "@mui/material/TableRow";
 import Skeleton from "@mui/material/Skeleton";
 import Alert from "@mui/material/Alert";
 import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
+import ErrorIcon from "@mui/icons-material/Error";
+import Icon from "@mui/material/Icon";
 
 interface Props {
   stream: Stream;
@@ -153,12 +154,15 @@ const Row = ({
   <TableRow {...rest}>
     <TableCell align="right">{start}</TableCell>
     <TableCell align="right">
+      {end}
       {endReason !== undefined ? (
         <Tooltip title={endReason}>
-          <Typography>{end}</Typography>
+          <Icon sx={{ verticalAlign: "bottom", marginLeft: ".5em" }}>
+            <ErrorIcon />
+          </Icon>
         </Tooltip>
       ) : (
-        end
+        <Icon sx={{ verticalAlign: "bottom", marginLeft: ".5em" }} />
       )}
     </TableCell>
     <TableCell align="right" className="opt">