https://bextsa.com/wp-content/themes/poket-child/widgets-elementor…/js/bexts-video-toggle-sync.js?ver=1.4

1(function ($) {
2    'use strict';
3    
4    // Función central que sincroniza el reproductor principal
5    const syncVideoDisplay = ($item, $wrapper) => {
6        const newTitle = $item.data('video-title');
7        const newUrl = $item.data('video-url');
8        const newImage = $item.data('video-image'); 
9        
10        const widgetId = $wrapper.attr('id').split('-').pop();
11        const $titleDisplay = $wrapper.find('.sync-title-area h2');
12        const $playerContainer = $wrapper.find('.video-player-display');
13        
14        // Determinar el tipo de fuente
15        const isEmbed = newUrl.includes('youtube.com') || newUrl.includes('vimeo.com');
16
17        // 1. Detener cualquier video actual
18        $playerContainer.find('iframe, video').each(function() {
19            if (this.tagName === 'VIDEO' && typeof this.pause === 'function') {
20                this.pause();
21            }
22            if (this.tagName === 'IFRAME') {
23                // Reiniciar fuente para detener el video de YouTube/Vimeo
24                $(this).attr('src', ''); 
25            }
26        });
27
28        // 2. Actualizar el Título
29        $titleDisplay.text(newTitle);
30
31        // 3. Reemplazar el reproductor (manteniendo la relación de aspecto)
32        let newPlayerHtml = '';
33
34        if (isEmbed) {
35            newPlayerHtml = `
36                <iframe 
37                    class="embed-responsive-item" 
38                    id="video-iframe-${widgetId}"
39                    allowfullscreen 
40                    allow="autoplay; encrypted-media" 
41                    src="${newUrl}">
42                </iframe>
43            `;
44        } else {
45            newPlayerHtml = `
46                <video 
47                    id="video-player-${widgetId}" 
48                    class="embed-responsive-item" 
49                    controls 
50                    poster="${newImage}"
51                    src="${newUrl}">
52                    ${'Tu navegador no soporta el tag de video.'}
53                </video>
54            `;
55        }
56        
57        // Reemplazar el contenido con el nuevo reproductor
58        $playerContainer.fadeOut(300, function() {
59            $playerContainer.html(newPlayerHtml).fadeIn(300);
60        });
61        
62        // 4. Actualizar estado 'active' para resaltado visual
63        $wrapper.find('.video-thumbnail-item').removeClass('active');
64        $item.addClass('active');
65    };
66
67    // Inicialización del widget
68    const initVideoSyncWidget = ($scope) => {
69        const $widgets = $scope ? $scope.find('.poket-video-sync-wrapper') : $('.poket-video-sync-wrapper');
70
71        $widgets.each(function() {
72            const $wrapper = $(this);
73            
74            // Escuchar el evento de CLICK en el elemento de miniatura
75            $wrapper.find('.carousel-item').on('click', function (e) {
76                e.preventDefault(); 
77                const $item = $(this).find('.video-thumbnail-item');
78                syncVideoDisplay($item, $wrapper);
79            });
80        });
81    };
82    
83    // Carga de Elementor
84    $(window).on('elementor/frontend/init', function () {
85        elementorFrontend.hooks.addAction('frontend/element_ready/video_toggle_sync', initVideoSyncWidget);
86    });
87
88    // Carga inicial 
89    $(document).ready(function() {
90        initVideoSyncWidget();
91    });
92
93})(jQuery);