Image Thumbnail Downloader For YouTube

/**
 * Fetches a YouTube video thumbnail and returns an HTML element containing the image and a download link.
 * This function ignores the originalImg parameter as its purpose is to fetch a new image from a URL.
 *
 * @param {Image} originalImg - An unused Image object, included to match the required function signature.
 * @param {string} youtubeUrl - The URL of the YouTube video (e.g., "https://www.youtube.com/watch?v=dQw4w9WgXcQ").
 * @param {string} quality - The desired thumbnail quality. Defaults to 'maxresdefault'.
 *                           Possible values: 'maxresdefault' (1280x720), 'sddefault' (640x480),
 *                           'hqdefault' (480x360), 'mqdefault' (320x180), 'default' (120x90).
 *                           The function will fallback to lower qualities if the requested one is not available.
 * @returns {Promise<HTMLElement>} A promise that resolves to an HTML div element containing the thumbnail and a download link, or an error message.
 */
async function processImage(originalImg, youtubeUrl = '', quality = 'maxresdefault') {

    /**
     * Extracts the YouTube video ID from various URL formats.
     * @param {string} url - The YouTube URL.
     * @returns {string|null} The 11-character video ID or null if not found.
     */
    const extractVideoID = (url) => {
        if (!url) return null;
        const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
        const match = url.match(regex);
        return match ? match[1] : null;
    };

    const videoId = extractVideoID(youtubeUrl);

    // Creates a styled message container.
    const createMessageElement = (message) => {
        const element = document.createElement('div');
        element.style.padding = '20px';
        element.style.border = '1px solid #ccc';
        element.style.borderRadius = '8px';
        element.style.textAlign = 'center';
        element.style.fontFamily = 'Arial, sans-serif';
        element.textContent = message;
        return element;
    };

    if (!videoId) {
        return createMessageElement('Please provide a valid YouTube video URL.');
    }

    // List of thumbnail qualities to try, in descending order of resolution.
    const qualityFallbacks = ['maxresdefault', 'sddefault', 'hqdefault', 'mqdefault', 'default'];

    let startIndex = qualityFallbacks.indexOf(quality.toLowerCase());
    if (startIndex === -1) {
        startIndex = 0; // Default to the highest quality if an invalid quality string is provided.
    }

    // Iterate through the qualities starting from the user's choice and falling back.
    for (let i = startIndex; i < qualityFallbacks.length; i++) {
        const currentQuality = qualityFallbacks[i];
        const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/${currentQuality}.jpg`;

        try {
            const response = await fetch(thumbnailUrl);

            // If the response is OK (status 200-299), the thumbnail exists.
            if (response.ok) {
                const blob = await response.blob();
                const objectURL = URL.createObjectURL(blob);

                const container = document.createElement('div');
                container.style.textAlign = 'center';
                container.style.fontFamily = 'Arial, sans-serif';

                const img = document.createElement('img');
                img.src = objectURL;
                img.alt = `YouTube Thumbnail (${currentQuality})`;
                img.style.maxWidth = '100%';
                img.style.height = 'auto';
                img.style.border = '1px solid #ddd';
                img.style.borderRadius = '8px';
                img.style.marginBottom = '15px';
                img.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';

                const link = document.createElement('a');
                link.href = objectURL;
                link.download = `${videoId}_${currentQuality}.jpg`;
                link.textContent = `Download Thumbnail (${currentQuality})`;
                link.style.display = 'inline-block';
                link.style.padding = '10px 20px';
                link.style.backgroundColor = '#FF0000';
                link.style.color = 'white';
                link.style.textDecoration = 'none';
                link.style.borderRadius = '5px';
                link.style.fontWeight = 'bold';
                link.style.transition = 'background-color 0.3s';
                link.onmouseover = () => link.style.backgroundColor = '#c00';
                link.onmouseout = () => link.style.backgroundColor = '#f00';

                container.appendChild(img);
                container.appendChild(link);

                return container; // Success, return the element.
            }
        } catch (error) {
            console.error(`Network error while fetching thumbnail (${currentQuality}):`, error);
            // If there's a network error, we might not be able to fetch any image,
            // so we can break or continue, but continuing might lead to more-of-the-same errors.
            // For now, we let it try the next quality just in case it's a transient issue.
        }
    }

    // If the loop completes, no thumbnail was found.
    return createMessageElement('Could not find a thumbnail for the provided YouTube URL.');
}