Fix missing thumbnails: Add error handling to image/video elements with fallback to YouTube defaults

docker-compose.yml

@@ -4,9 +4,9 @@
 version: '3.8'
 
 services:
-  kv-tube-app:
+  kv-tube:
     image: git.khoavo.myds.me/vndangkhoa/kv-tube:v4.0.8
-    container_name: kv-tube-app
+    container_name: kv-tube
     platform: linux/amd64
     restart: unless-stopped
     ports:

frontend/app/components/VideoCard.tsx

@@ -51,6 +51,10 @@ function VideoCard({ video, hideChannelAvatar }: { video: VideoData; hideChannel
                     style={{ objectFit: 'cover', backgroundColor: 'var(--yt-hover)' }}
                     className="videocard-thumb"
                     priority={false}
+                    onError={(e) => {
+                        e.target.onError = null; // Prevent infinite loop
+                        e.target.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                    }}
                 />
                 {video.duration && !video.is_mix && (
                     <div className="duration-badge" style={{ position: 'absolute', bottom: '8px', right: '8px' }}>

frontend/app/feed/library/page.tsx

@@ -144,12 +144,16 @@ export default async function LibraryPage() {
                                 }}
                             >
                                 <div style={{ position: 'relative', aspectRatio: '16/9', borderRadius: '12px', overflow: 'hidden' }}>
-                                    <img
-                                        src={video.thumbnail}
-                                        alt={video.title}
-                                        className="videocard-thumb"
-                                        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                                    />
+                                     <img
+                                         src={video.thumbnail}
+                                         alt={video.title}
+                                         className="videocard-thumb"
+                                         style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                         onError={(e) => {
+                                             e.target.onError = null; // Prevent infinite loop
+                                             e.target.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                                         }}
+                                     />
                                     {video.duration && (
                                         <div className="duration-badge">{video.duration}</div>
                                     )}

frontend/app/feed/subscriptions/page.tsx

@@ -119,11 +119,15 @@ export default async function SubscriptionsPage() {
                                     className="card-hover-lift"
                                 >
                                     <div style={{ position: 'relative', aspectRatio: '16/9', borderRadius: '12px', overflow: 'hidden' }}>
-                                        <img
-                                            src={video.thumbnail}
-                                            alt={video.title}
-                                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                                        />
+                                     <img
+                                             src={video.thumbnail}
+                                             alt={video.title}
+                                             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                             onError={(e) => {
+                                                 e.target.onError = null; // Prevent infinite loop
+                                                 e.target.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                                             }}
+                                         />
                                         {video.duration && (
                                             <div className="duration-badge">{video.duration}</div>
                                         )}

frontend/app/search/page.tsx

@@ -82,12 +82,16 @@ async function SearchResults({ query }: { query: string }) {
                         {/* Thumbnail */}
                         <div style={{ position: 'relative', width: '360px', minWidth: '360px', aspectRatio: '16/9', flexShrink: 0, overflow: 'hidden', borderRadius: '8px' }} className="search-result-thumb-container">
                             {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img
-                                src={v.thumbnail}
-                                alt={v.title}
-                                style={{ width: '100%', height: '100%', objectFit: 'cover', backgroundColor: '#272727' }}
-                                className="search-result-thumb"
-                            />
+                             <img
+                                 src={v.thumbnail}
+                                 alt={v.title}
+                                 style={{ width: '100%', height: '100%', objectFit: 'cover', backgroundColor: '#272727' }}
+                                 className="search-result-thumb"
+                                 onError={(e) => {
+                                     e.target.onError = null; // Prevent infinite loop
+                                     e.target.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                                 }}
+                             />
                             {v.duration && (
                                 <span className="duration-badge" style={{ position: 'absolute', bottom: '8px', right: '8px' }}>
                                     {v.duration}
@@ -108,10 +112,18 @@ async function SearchResults({ query }: { query: string }) {
                             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
                                 <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                     <div style={{ width: '24px', height: '24px', borderRadius: '50%', background: 'var(--yt-avatar-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', color: '#fff', overflow: 'hidden', fontWeight: 600 }}>
-                                        {v.avatar_url ? (
-                                            // eslint-disable-next-line @next/next/no-img-element
-                                            <img src={v.avatar_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-                                        ) : firstLetter}
+                                         {v.avatar_url ? (
+                                             // eslint-disable-next-line @next/next/no-img-element
+                                             <img 
+                                                 src={v.avatar_url} 
+                                                 alt="" 
+                                                 style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                                 onError={(e) => {
+                                                     e.target.onError = null; // Prevent infinite loop
+                                                     e.target.src = 'https://i.ytimg.com/img/channels/c_ip_m_default.jpg'; // Fallback to YouTube's default channel avatar
+                                                 }}
+                                             />
+                                         ) : firstLetter}
                                     </div>
                                     <span style={{ fontSize: '12px', color: 'var(--yt-text-secondary)' }}>{v.uploader}</span>
                                 </div>

frontend/app/watch/Comments.tsx

@@ -115,13 +115,17 @@ export default function Comments({ videoId }: CommentsProps) {
                 {comments.map((c) => (
                     <div key={c.id} style={{ display: 'flex', gap: '16px', marginBottom: '20px' }}>
                         <div style={{ position: 'relative', width: '40px', height: '40px', borderRadius: '50%', overflow: 'hidden', flexShrink: 0, backgroundColor: 'var(--yt-hover)' }}>
-                            <Image
-                                src={c.author_thumbnail || 'https://i.ytimg.com/img/channels/c_ip_m_default.jpg'}
-                                alt={c.author}
-                                fill
-                                sizes="40px"
-                                style={{ objectFit: 'cover' }}
-                            />
+                             <Image
+                                 src={c.author_thumbnail || 'https://i.ytimg.com/img/channels/c_ip_m_default.jpg'}
+                                 alt={c.author}
+                                 fill
+                                 sizes="40px"
+                                 style={{ objectFit: 'cover' }}
+                                 onError={(e) => {
+                                     e.target.onError = null; // Prevent infinite loop
+                                     e.target.src = 'https://i.ytimg.com/img/channels/c_ip_m_default.jpg'; // Fallback to YouTube's default channel avatar
+                                 }}
+                             />
                         </div>
                         <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, gap: '4px' }}>
                             <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px' }}>

frontend/app/watch/PlaylistPanel.tsx

@@ -93,13 +93,17 @@ export default function PlaylistPanel({ videos, currentVideoId, listId, title }:
                                 borderRadius: '8px',
                                 overflow: 'hidden'
                             }}>
-                                <Image
-                                    src={video.thumbnail}
-                                    alt={video.title}
-                                    fill
-                                    sizes="100px"
-                                    style={{ objectFit: 'cover' }}
-                                />
+                                 <Image
+                                     src={video.thumbnail}
+                                     alt={video.title}
+                                     fill
+                                     sizes="100px"
+                                     style={{ objectFit: 'cover' }}
+                                     onError={(e) => {
+                                         e.target.onError = null; // Prevent infinite loop
+                                         e.target.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                                     }}
+                                 />
                                 {video.duration && (
                                     <div style={{
                                         position: 'absolute',

frontend/app/watch/RelatedVideos.tsx

@@ -49,7 +49,15 @@ export default async function RelatedVideos({ videoId, title, uploader }: { vide
                 return (
                     <Link key={video.id} href={`/watch?v=${video.id}`} className={`related-video-item fade-in-up ${staggerClass}`} style={{ opacity: 0 }}>
                         <div className="related-thumb-container">
-                            <img src={video.thumbnail} alt={video.title} className="related-thumb-img" />
+                             <img 
+                                 src={video.thumbnail} 
+                                 alt={video.title} 
+                                 className="related-thumb-img"
+                                 onError={(e) => {
+                                     e.target.onError = null; // Prevent infinite loop
+                                     e.target.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                                 }}
+                             />
                             {video.duration && (
                                 <div className="duration-badge">
                                     {video.duration}

frontend/app/watch/VideoPlayer.tsx

@@ -557,18 +557,22 @@ export default function VideoPlayer({ videoId, title }: VideoPlayerProps) {
                 </div>
             )}
 
-            <video
-                ref={videoRef}
-                style={{ ...videoStyle, visibility: isLoading ? 'hidden' : 'visible' }}
-                controls
-                playsInline
-                webkit-playsinline="true"
-                x5-playsinline="true"
-                x5-video-player-type="h5"
-                x5-video-player-fullscreen="true"
-                preload="auto"
-                poster={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
-            />
+                <video
+                    ref={videoRef}
+                    style={{ ...videoStyle, visibility: isLoading ? 'hidden' : 'visible' }}
+                    controls
+                    playsInline
+                    webkit-playsinline="true"
+                    x5-playsinline="true"
+                    x5-video-player-type="h5"
+                    x5-video-player-fullscreen="true"
+                    preload="auto"
+                    poster={`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`}
+                    onError={(e) => {
+                        e.target.onError = null; // Prevent infinite loop
+                        e.target.poster = 'https://i.ytimg.com/vi/default/hqdefault.jpg'; // Fallback to YouTube's default thumbnail
+                    }}
+                />
 
             <audio ref={audioRef} style={{ display: 'none' }} />