JavaScript OV Galería Videos - OV

<script>
// ========================================
// CONFIGURACIÓN DEL REPRODUCTOR
// ========================================

const galleryConfig = {
    autoplay: true  // Reproducir siguiente video automáticamente
};

// ========================================
// CONFIGURA TUS VIDEOS AQUÍ
// ========================================

const videos = [
    {
        url: 'youtube:mt6d1LlMX24',
        title: 'Cómo crear un Slider Interactivo con selector de colores en Divi Builder sin plugins',
        description: 'En este tutorial gratuito aprenderás a crear un slider interactivo con un selector de colores en Divi Builder. Y lo mejor es que lo haremos sin plugins. Este slider te puede servir para mostrar productos que tengan diferentes variantes de color en una sección principal. El ejemplo que hacemos está enfocado en autos, pero realmente puede ser aplicado a cualquier otro producto, siguiendo la misma lógica que te enseñaré en el tutorial. ¡Qué lo disfrutes!',
        thumbnail: '', // Opcional: URL de imagen personalizada
        duration: '34:52'
    },
    {
        url: 'youtube:_5B0Mrg0vws',
        title: 'Cómo crear una línea de tiempo (timeline) vertical con Divi Builder sin usar plugins',
        description: 'Construir una línea de tiempo en Divi puede parecer un poco tedioso al principio debido a su estructura modular, pero en este tutorial te guiaré paso a paso, mostrándote trucos, buenas prácticas y soluciones creativas para lograr resultados sorprendentes.',
        duration: '1:01:12'
    },
    {
        url: 'youtube:U6wbOStq5mY',
        title: 'Cómo crear un botón Call-to-Action Dropdown (botón desplegable) en Divi sin plugins',
        description: 'En el diseño web moderno, optimizar el espacio y mejorar la experiencia de usuario son aspectos fundamentales. Una técnica efectiva para conseguirlo es implementar botones call-to-action (CTA) que, al interactuar con ellos, desplieguen un menú con opciones adicionales.',
        duration: '23:51'
    },
  {
        url: 'youtube:yAXnzTn7hQc',
        title: 'Divi CPT Modules: Crea grids, grids con filtros y carruseles dinámicos en WordPress y Divi',
        description: 'Si alguna vez has querido mostrar publicaciones personalizadas en Divi de una manera atractiva y dinámica, Divi CPT Modules es el plugin que necesitas. Con él, puedes diseñar grids, grids con filtros y carruseles dinámicos para cualquier tipo de contenido en WordPress y Divi, ya sea para una inmobiliaria, un blog, recetas, proyectos, portafolios y más.',
        thumbnail: '',
        duration: '2:20:45'
    },
    {
        url: 'youtube:KWJwIWS63y8',
        title: 'Cómo Animar tu Web Divi con ScrollReveal | Sin Plugins',
        description: '📱 Aprende a crear animaciones elegantes en Divi sin necesidad de plugins. En este tutorial te muestro paso a paso cómo implementar ScrollReveal para dar vida a tus páginas web.',
        duration: '35:40'
    },
    {
        url: 'youtube:IHOUjruXOfA',
        title: 'Descarga más de 30 Layouts GRATIS para Divi Builder con este Plugin 🔥',
        description: 'Si eres usuario de Divi Builder, probablemente siempre estés en busca de formas de optimizar tus diseños y crear sitios web más rápidamente. Aquí es donde entra en juego el plugin Layouts for Divi, una herramienta gratuita que te permite acceder a más de 30 diseños profesionales de landing pages listos para usar en tus proyectos web.',
        duration: '17:09'
    },
  {
        url: 'youtube:QQtb6qXHFU4',
        title: 'Crea un popup modal de video en Divi que se active al cargar la página sin plugins',
        description: 'En este nuevo tutorial gratuito para mi canal de YouTube, te enseñaré cómo crear un popup modal de video en Divi que se active automáticamente al cargar la página, sin necesidad de usar plugins.',
        thumbnail: '',
        duration: '22:11'
    },
    {
        url: 'youtube:m8WAGDboiFU',
        title: 'Cómo mostrar un menú secundario al desplazarse por la página en Divi y WordPress sin plugins',
        description: 'En este tutorial gratuito te mostraré cómo implementar un menú secundario que aparece al desplazarse por la página en Divi Theme Builder y WordPress, sin necesidad de recurrir a plugins adicionales.',
        duration: '30:49'
    },
    {
        url: 'youtube:4XmZPgIWt1Q',
        title: 'Reproducir un video al desplazarse con GSAP, ScrollTrigger y Lottie en Divi sin plugins',
        description: 'En este nuevo y emocionante tutorial gratuito, aprenderás a crear una sección principal con un video de fondo que responde al movimiento del scroll. Este impresionante efecto, conocido como "play video on scroll", permite que el video se reproduzca a medida que el usuario se desplaza por la página, captando la atención de manera única y eficaz.',
        duration: '22:49'
    },
    {
        url: 'youtube:sTEhXnydEr4',
        title: 'Cómo animar Elementos Flotantes y crear un efecto "Stacking Sections Scroll" en Divi sin plugins',
        description: '¿Has visto elementos animados flotando y «rebotando» en algunos diseños de sitios web? Esta es una tendencia que se ha utilizado durante un tiempo, pero aún no ha pasado de moda. Por tal motivo, en esta ocasión te mostraré cómo animar Elementos Flotantes en Divi. Además, como efecto extra, te enseñaré cómo implementar un efecto de desplazamiento con secciones apiladas, más conocido como «Stacking Sections Scroll». ¿Lo mejor? No necesitaremos plugins para lograr estos increíbles efectos.',
        duration: '40:49'
    }
];

// ========================================
// CÓDIGO DE LA GALERÍA (NO MODIFICAR)
// ========================================

let currentVideoIndex = 0;

function parseVideoUrl(url) {
    if (url.includes(':') && !url.includes('http')) {
        const [platform, id] = url.split(':');
        return { platform, id };
    }

    if (url.includes('youtube.com') || url.includes('youtu.be')) {
        let id;
        if (url.includes('youtu.be/')) {
            id = url.split('youtu.be/')[1].split('?')[0];
        } else {
            id = url.split('v=')[1]?.split('&')[0];
        }
        return { platform: 'youtube', id };
    }

    if (url.includes('vimeo.com')) {
        const id = url.split('vimeo.com/')[1].split('?')[0];
        return { platform: 'vimeo', id };
    }

    return null;
}

function getEmbedUrl(url, autoplay = false) {
    const parsed = parseVideoUrl(url);
    if (!parsed) return '';

    if (parsed.platform === 'youtube') {
        if (galleryConfig.autoplay) {
            return `https://www.youtube.com/embed/${parsed.id}?enablejsapi=1&autoplay=${autoplay ? 1 : 0}`;
        }
        return `https://www.youtube.com/embed/${parsed.id}?autoplay=${autoplay ? 1 : 0}`;
    } else if (parsed.platform === 'vimeo') {
        return `https://player.vimeo.com/video/${parsed.id}?autoplay=${autoplay ? 1 : 0}`;
    }

    return '';
}

function getThumbnail(url, customThumbnail) {
    if (customThumbnail) return customThumbnail;

    const parsed = parseVideoUrl(url);
    if (!parsed) return '';

    if (parsed.platform === 'youtube') {
        return `https://img.youtube.com/vi/${parsed.id}/mqdefault.jpg`;
    } else if (parsed.platform === 'vimeo') {
        return `https://vumbnail.com/${parsed.id}.jpg`;
    }

    return '';
}

function loadVideo(index, autoplay = false) {
    currentVideoIndex = index;
    const video = videos[index];

    const iframe = document.getElementById('ovGvMainVideo');
    iframe.src = getEmbedUrl(video.url, autoplay);

    document.getElementById('ovGvCurrentTitle').textContent = video.title;
    document.getElementById('ovGvCurrentDescription').textContent = video.description || '';

    document.querySelectorAll('.ov-gv-video-item').forEach((item, i) => {
        if (i === index) {
            item.classList.add('ov-gv-active');
            item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        } else {
            item.classList.remove('ov-gv-active');
        }
    });
}

function createVideoList() {
    const videoList = document.getElementById('ovGvVideoList');

    videos.forEach((video, index) => {
        const item = document.createElement('div');
        item.className = 'ov-gv-video-item';
        if (index === 0) item.classList.add('ov-gv-active');

        const thumbnailUrl = getThumbnail(video.url, video.thumbnail);

        item.innerHTML = `
            <div class="ov-gv-thumbnail-wrapper">
                <img src="${thumbnailUrl}" alt="${video.title}" class="ov-gv-thumbnail" loading="lazy">
                <span class="ov-gv-video-number">${index + 1}</span>
                ${video.duration ? `<span class="ov-gv-duration">${video.duration}</span>` : ''}
            </div>
            <div class="ov-gv-video-details">
                <div class="ov-gv-title">${video.title}</div>
                ${video.description ? `<div class="ov-gv-subtitle">${video.description}</div>` : ''}
            </div>
        `;

        item.addEventListener('click', () => loadVideo(index, true));
        videoList.appendChild(item);
    });

    document.getElementById('ovGvVideoCount').textContent = `${videos.length} videos`;
}

function playNextVideo() {
    if (currentVideoIndex < videos.length - 1) {
        loadVideo(currentVideoIndex + 1, true);
    } else if (galleryConfig.autoplay) {
        loadVideo(0, true);
    }
}

window.addEventListener('message', function(event) {
    if (event.origin === 'https://www.youtube.com' || event.origin === 'https://player.vimeo.com') {
        try {
            const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;

            if (data.event === 'onStateChange' && data.info === 0) {
                if (galleryConfig.autoplay) playNextVideo();
            }

            if (data.event === 'ended') {
                if (galleryConfig.autoplay) playNextVideo();
            }
        } catch (e) {}
    }
});

// Inicializar la galería cuando el DOM esté listo
function initGallery() {
    createVideoList();
    loadVideo(0, false);
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initGallery);
} else {
    initGallery();
}
</script>