Fix TypeScript errors in onError handlers for image/video elements
This commit is contained in:
parent
1a04f8f486
commit
82a51b7ee4
8 changed files with 34 additions and 18 deletions
|
|
@ -52,8 +52,10 @@ function VideoCard({ video, hideChannelAvatar }: { video: VideoData; hideChannel
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.src !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
img.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{video.duration && !video.is_mix && (
|
||||
|
|
|
|||
|
|
@ -150,8 +150,10 @@ export default async function LibraryPage() {
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.src !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
img.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{video.duration && (
|
||||
|
|
|
|||
|
|
@ -124,8 +124,10 @@ export default async function SubscriptionsPage() {
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.src !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
img.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{video.duration && (
|
||||
|
|
|
|||
|
|
@ -88,8 +88,10 @@ async function SearchResults({ query }: { query: string }) {
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.src !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
img.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{v.duration && (
|
||||
|
|
@ -119,8 +121,9 @@ async function SearchResults({ query }: { query: string }) {
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
img.onerror = null;
|
||||
img.src = 'https://i.ytimg.com/img/channels/c_ip_m_default.jpg'; // Fallback to YouTube's default channel avatar
|
||||
}}
|
||||
/>
|
||||
) : firstLetter}
|
||||
|
|
|
|||
|
|
@ -122,8 +122,9 @@ export default function Comments({ videoId }: CommentsProps) {
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
img.onerror = null;
|
||||
img.src = 'https://i.ytimg.com/img/channels/c_ip_m_default.jpg'; // Fallback to YouTube's default channel avatar
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,8 +100,10 @@ export default function PlaylistPanel({ videos, currentVideoId, listId, title }:
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.src !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
img.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{video.duration && (
|
||||
|
|
|
|||
|
|
@ -54,8 +54,10 @@ export default async function RelatedVideos({ videoId, title, uploader }: { vide
|
|||
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
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.src !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
img.src = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{video.duration && (
|
||||
|
|
|
|||
|
|
@ -569,8 +569,10 @@ export default function VideoPlayer({ videoId, title }: VideoPlayerProps) {
|
|||
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
|
||||
const video = e.target as HTMLVideoElement;
|
||||
if (video.poster !== 'https://i.ytimg.com/vi/default/hqdefault.jpg') {
|
||||
video.poster = 'https://i.ytimg.com/vi/default/hqdefault.jpg';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue