Image Link Extractor From YouTube

/**
 * Extracts various thumbnail image links from a given YouTube video URL.
 * @param {Image} originalImg - An original Image object. This parameter is not used in this function but is required for consistency.
 * @param {string} youtubeUrl - The full URL of the YouTube video (e.g., "https://www.youtube.com/watch?v=VIDEO_ID").
 * @returns {HTMLElement} A div element containing a list of thumbnail URLs and their corresponding images.
 */
function processImage(originalImg, youtubeUrl = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ') {

    /**
     * Extracts the 11-character video ID from various YouTube URL formats.
     * @param {string} url - The YouTube URL.
     * @returns {string|null} The video ID or null if not found.
     */
    function extractVideoId(url) {
        if (!url || typeof url !== 'string') {
            return null;
        }
        // This regex covers youtube.com/watch, youtu.be/, youtube.com/embed, and other variations.
        const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
        const match = url.match(regex);
        return match ? match[1] : null;
    }

    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '15px';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.maxWidth = '600px';
    container.style.margin = '0 auto';

    const videoId = extractVideoId(youtubeUrl);

    if (!videoId) {
        container.textContent = 'Invalid YouTube URL. Could not extract a valid video ID.';
        container.style.color = '#d9534f';
        container.style.fontWeight = 'bold';
        return container;
    }

    const heading = document.createElement('h3');
    heading.textContent = `Thumbnails for Video ID: ${videoId}`;
    heading.style.margin = '0 0 15px 0';
    heading.style.color = '#333';
    heading.style.borderBottom = '1px solid #ccc';
    heading.style.paddingBottom = '10px';
    heading.style.wordBreak = 'break-all';
    container.appendChild(heading);

    const thumbnailTypes = [
        { name: 'Maximum Resolution', quality: 'maxresdefault' },
        { name: 'Standard Definition', quality: 'sddefault' },
        { name: 'High Quality', quality: 'hqdefault' },
        { name: 'Medium Quality', quality: 'mqdefault' },
        { name: 'Default', quality: 'default' },
    ];

    thumbnailTypes.forEach(type => {
        const url = `https://img.youtube.com/vi/${videoId}/${type.quality}.jpg`;

        const wrapper = document.createElement('div');
        wrapper.style.marginBottom = '20px';
        wrapper.style.border = '1px solid #ddd';
        wrapper.style.borderRadius = '5px';
        wrapper.style.padding = '10px';
        wrapper.style.backgroundColor = '#fff';

        const title = document.createElement('h4');
        title.textContent = `${type.name} (${type.quality}.jpg)`;
        title.style.margin = '0 0 8px 0';
        title.style.color = '#555';

        const link = document.createElement('a');
        link.href = url;
        link.target = '_blank';
        link.rel = 'noopener noreferrer';
        link.textContent = url;
        link.style.wordBreak = 'break-all';
        link.style.color = '#007bff';
        link.style.textDecoration = 'none';

        const imageContainer = document.createElement('div');
        imageContainer.style.marginTop = '10px';

        const image = new Image();
        image.src = url;
        image.alt = `${type.name} thumbnail for video ${videoId}`;
        image.style.maxWidth = '100%';
        image.style.height = 'auto';
        image.style.display = 'block';
        image.style.border = '1px solid #ddd';
        image.style.borderRadius = '4px';
        image.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

        // Handle cases where a specific thumbnail resolution doesn't exist (e.g., maxresdefault)
        image.onerror = function() {
            this.style.display = 'none';
            const errorMsg = document.createElement('p');
            errorMsg.textContent = `(Image not available at this resolution)`;
            errorMsg.style.color = '#888';
            errorMsg.style.fontStyle = 'italic';
            errorMsg.style.fontSize = '14px';
            errorMsg.style.margin = '10px 0 0 0';
            imageContainer.appendChild(errorMsg);
        };

        imageContainer.appendChild(image);
        wrapper.appendChild(title);
        wrapper.appendChild(link);
        wrapper.appendChild(imageContainer);
        container.appendChild(wrapper);
    });

    return container;
}