feat: remove dependency on 3rd-party YouTube API for thumbnails and title

[kraj2503]

YouTube Thumbnail Integration and Next.js Configuration Updates

Overview

This PR updates the YouTube video integration by switching from the YouTube Search API to the oEmbed API for video details, adds support for YouTube thumbnails, and updates the Next.js configuration for image domains.

Changes Made

API Integration Changes

• Replaced YouTube Search API with YouTube oEmbed API for video details:

const res = await axios.get(
  `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`
);

• Updated video metadata parsing:
  • Title: res.data.title ?? "Can't find video"
  • Thumbnail: https://img.youtube.com/vi/${videoId}/mqdefault.jpg

UI Component Updates

• Replaced LiteYouTubeEmbed with native Image component for thumbnails:

{inputLink && !loading && (() => {
  const match = inputLink.match(YT_REGEX);
  if (match) {
    const extractedId = match[1];
    return (
      <div className="mt-4">
        <Image
          src={`https://img.youtube.com/vi/${extractedId}/maxresdefault.jpg`}
          alt="Thumbnail"
          width={480}
          height={320}
        />
      </div>
    );
  }
})()}

Next.js Configuration Updates

• Updated next.config.js to include img.youtube.com in allowed image domains:

images: {
  domains: ['images.unsplash.com', 'i.ytimg.com', 'img.youtube.com'],
}

Benefits

• Reduced API dependencies by using oEmbed
• Improved thumbnail loading performance
• More reliable video metadata fetching
• Better error handling for missing video data