Refac extract VideoThumbnail into a component

frontend/src/components/DownloadListItem.tsx

@@ -6,9 +6,8 @@ import formatDate from '../functions/formatDates';
 import Button from './Button';
 import deleteDownloadById from '../api/actions/deleteDownloadById';
 import updateDownloadQueueStatusById from '../api/actions/updateDownloadQueueStatusById';
-import getApiUrl from '../configuration/getApiUrl';
 import { useUserConfigStore } from '../stores/UserConfigStore';
-import defaultVideoThumb from '/img/default-video-thumb.jpg';
+import VideoThumbnail from './VideoThumbail';
 
 type DownloadListItemProps = {
   download: Download;
@@ -22,24 +21,11 @@ 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
+          <VideoThumbnail videoThumbUrl={download.vid_thumb_url} />
-            src={src}
-            alt="video_thumb"
-            onError={({ currentTarget }) => {
-              currentTarget.onerror = null; // prevents looping
-              currentTarget.src = defaultVideoThumb;
-            }}
-          />
 
           <div className="video-tags">
             {showIgnored && <span>ignored</span>}

frontend/src/components/VideoListItem.tsx

@@ -4,14 +4,13 @@ import { VideoType, ViewLayoutType } from '../pages/Home';
 import iconPlay from '/img/icon-play.svg';
 import iconDotMenu from '/img/icon-dot-menu.svg';
 import iconClose from '/img/icon-close.svg';
-import defaultVideoThumb from '/img/default-video-thumb.jpg';
 import updateWatchedState from '../api/actions/updateWatchedState';
 import formatDate from '../functions/formatDates';
 import WatchedCheckBox from './WatchedCheckBox';
 import MoveVideoMenu from './MoveVideoMenu';
 import { useState } from 'react';
-import getApiUrl from '../configuration/getApiUrl';
 import deleteVideoProgressById from '../api/actions/deleteVideoProgressById';
+import VideoThumbnail from './VideoThumbail';
 
 type VideoListItemProps = {
   video: VideoType;
@@ -36,12 +35,6 @@ 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
@@ -51,14 +44,7 @@ const VideoListItem = ({
       >
         <div className={`video-thumb-wrap ${viewLayout}`}>
           <div className="video-thumb">
-            <img
+            <VideoThumbnail videoThumbUrl={video.vid_thumb_url} />
-              src={videoThumbSrc}
-              alt="video-thumb"
-              onError={({ currentTarget }) => {
-                currentTarget.onerror = null; // prevents looping
-                currentTarget.src = defaultVideoThumb;
-              }}
-            />
 
             {video.player.progress && (
               <div

frontend/src/components/VideoThumbail.tsx

@@ -0,0 +1,27 @@
+import getApiUrl from '../configuration/getApiUrl';
+import defaultVideoThumb from '/img/default-video-thumb.jpg';
+
+type VideoThumbailProps = {
+  videoThumbUrl: string | undefined;
+};
+
+const VideoThumbnail = ({ videoThumbUrl }: VideoThumbailProps) => {
+  let src = `${getApiUrl()}${videoThumbUrl}`;
+
+  if (videoThumbUrl === undefined) {
+    src = defaultVideoThumb;
+  }
+
+  return (
+    <img
+      src={src}
+      alt="video_thumb"
+      onError={({ currentTarget }) => {
+        currentTarget.onerror = null; // prevents looping
+        currentTarget.src = defaultVideoThumb;
+      }}
+    />
+  );
+};
+
+export default VideoThumbnail;