From 28ac0ba620fe822ce3b639a5c722fbe64a5d3491 Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Sun, 6 Jul 2025 10:36:51 +0200
Subject: [PATCH] Fix video and audio streams can be undefined (#997)

---
 frontend/src/components/VideoListItemTable.tsx | 18 ++++++++++++------
 frontend/src/pages/Home.tsx                    |  2 +-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/VideoListItemTable.tsx b/frontend/src/components/VideoListItemTable.tsx
index 83edb39a..3542406c 100644
--- a/frontend/src/components/VideoListItemTable.tsx
+++ b/frontend/src/components/VideoListItemTable.tsx
@@ -6,6 +6,11 @@ import humanFileSize from '../functions/humanFileSize';
 import { FileSizeUnits } from '../api/actions/updateUserConfig';
 import { useUserConfigStore } from '../stores/UserConfigStore';
 
+const StreamsTypeEmun = {
+  Video: 'video',
+  Audio: 'audio',
+};
+
 type VideoListItemProps = {
   videoList: VideoType[] | undefined;
   viewStyle: ViewStylesType;
@@ -35,7 +40,8 @@ const VideoListItemTable = ({ videoList, viewStyle }: VideoListItemProps) => {
 
         <tbody>
           {videoList?.map(({ youtube_id, title, channel, vid_type, media_size, streams }) => {
-            const [videoStream, audioStream] = streams;
+            const videoStream = streams?.find(s => s.type === StreamsTypeEmun.Video);
+            const audioStream = streams?.find(s => s.type === StreamsTypeEmun.Audio);
 
             return (
               <tr key={youtube_id}>
@@ -46,12 +52,12 @@ const VideoListItemTable = ({ videoList, viewStyle }: VideoListItemProps) => {
                   <Link to={Routes.Video(youtube_id)}>{title}</Link>
                 </td>
                 <td>{vid_type}</td>
-                <td>{`${videoStream.width}x${videoStream.height}`}</td>
+                <td>{`${videoStream?.width || '-'}x${videoStream?.height || '-'}`}</td>
                 <td>{humanFileSize(media_size, useSiUnits)}</td>
-                <td>{videoStream.codec || 'unknown'}</td>
-                <td>{humanFileSize(videoStream.bitrate, useSiUnits)}</td>
-                <td>{audioStream.codec || 'unknown'}</td>
-                <td>{humanFileSize(audioStream.bitrate, useSiUnits)}</td>
+                <td>{videoStream?.codec || '-'}</td>
+                <td>{humanFileSize(videoStream?.bitrate || 0, useSiUnits)}</td>
+                <td>{audioStream?.codec || '-'}</td>
+                <td>{humanFileSize(audioStream?.bitrate || 0, useSiUnits)}</td>
               </tr>
             );
           })}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 67fb7fac..291725a6 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -69,7 +69,7 @@ export type VideoType = {
   sponsorblock?: SponsorBlockType;
   playlist: string[];
   stats: StatsType;
-  streams: StreamType[];
+  streams: StreamType[] | undefined;
   subtitles: Subtitles[];
   tags: string[];
   title: string;