Refac preemptive image fallback when url is undefined. Ticket: #911

frontend/src/components/ChannelBanner.tsx

@@ -7,9 +7,15 @@ type ChannelIconProps = {
 };
 
 const ChannelBanner = ({ channelId, channelBannerUrl }: ChannelIconProps) => {
+  let src = `${getApiUrl()}${channelBannerUrl}`;
+
+  if (channelBannerUrl === undefined) {
+    src = defaultChannelImage;
+  }
+
   return (
     <img
-      src={`${getApiUrl()}${channelBannerUrl}`}
+      src={src}
       alt={`${channelId}-banner`}
       onError={({ currentTarget }) => {
         currentTarget.onerror = null; // prevents looping

frontend/src/components/ChannelIcon.tsx

@@ -7,9 +7,15 @@ type ChannelIconProps = {
 };
 
 const ChannelIcon = ({ channelId, channelThumbUrl }: ChannelIconProps) => {
+  let src = `${getApiUrl()}${channelThumbUrl}`;
+
+  if (channelThumbUrl === undefined) {
+    src = defaultChannelIcon;
+  }
+
   return (
     <img
-      src={`${getApiUrl()}${channelThumbUrl}`}
+      src={src}
       alt={`${channelId}-thumb`}
       onError={({ currentTarget }) => {
         currentTarget.onerror = null; // prevents looping

frontend/src/components/DownloadListItem.tsx

@@ -22,12 +22,18 @@ const DownloadListItem = ({ download, setRefresh }: DownloadListItemProps) => {
 
   const [hideDownload, setHideDownload] = useState(false);
 
+  let src = `${getApiUrl()}${download.vid_thumb_url}`;
+
+  if (download.vid_thumb_url === undefined) {
+    src = defaultVideoThumb;
+  }
+
   return (
     <div className={`video-item ${view}`} id={`dl-${download.youtube_id}`}>
       <div className={`video-thumb-wrap ${view}`}>
         <div className="video-thumb">
           <img
-            src={`${getApiUrl()}${download.vid_thumb_url}`}
+            src={src}
             alt="video_thumb"
             onError={({ currentTarget }) => {
               currentTarget.onerror = null; // prevents looping

frontend/src/components/PlaylistThumbnail.tsx

@@ -7,9 +7,15 @@ type PlaylistThumbnailProps = {
 };
 
 const PlaylistThumbnail = ({ playlistId, playlistThumbnail }: PlaylistThumbnailProps) => {
+  let src = `${getApiUrl()}${playlistThumbnail}`;
+
+  if (playlistThumbnail === undefined) {
+    src = defaultPlaylistThumbnail;
+  }
+
   return (
     <img
-      src={`${getApiUrl()}${playlistThumbnail}`}
+      src={src}
       alt={`${playlistId}-thumbnail`}
       onError={({ currentTarget }) => {
         currentTarget.onerror = null; // prevents looping

frontend/src/components/VideoListItem.tsx

@@ -36,6 +36,12 @@ const VideoListItem = ({
     return <p>No video found.</p>;
   }
 
+  let videoThumbSrc = `${getApiUrl()}${video.vid_thumb_url}`;
+
+  if (video.vid_thumb_url === undefined) {
+    videoThumbSrc = defaultVideoThumb;
+  }
+
   return (
     <div className={`video-item ${viewLayout}`}>
       <a
@@ -46,7 +52,7 @@ const VideoListItem = ({
         <div className={`video-thumb-wrap ${viewLayout}`}>
           <div className="video-thumb">
             <img
-              src={`${getApiUrl()}${video.vid_thumb_url}`}
+              src={videoThumbSrc}
               alt="video-thumb"
               onError={({ currentTarget }) => {
                 currentTarget.onerror = null; // prevents looping