https://tv78.com/wp-content/plugins/arinext-youtube-shorts//js/arinext-youtube-shorts-display.js?ver=1.0.0

1
2/**
3 * YouTube Shorts Display JavaScript
4 * Handles initialization and functionality for the YouTube Shorts carousel
5 */
6 
7document.addEventListener("DOMContentLoaded", function() {
8    // On vérifie si le navigateur supporte l'IntersectionObserver
9    if ("IntersectionObserver" in window) {
10        
11        var iframeObserver = new IntersectionObserver(function(entries, observer) {
12            entries.forEach(function(entry) {
13                // Si l'iframe est visible à l'écran
14                if (entry.isIntersecting) {
15                    var iframe = entry.target;
16                    // On transfère l'URL de data-src vers src
17                    iframe.src = iframe.getAttribute("data-src");
18                    // On arrête de surveiller cet élément (le travail est fait)
19                    iframeObserver.unobserve(iframe);
20                }
21            });
22        }, {
23            rootMargin: "0px 0px 200px 0px" // Astuce : Charge la vidéo 200px AVANT qu'elle n'arrive à l'écran
24        });
25
26        // On lance la surveillance sur toutes les iframes
27        var lazyIframes = document.querySelectorAll(".lazy-iframe");
28        lazyIframes.forEach(function(iframe) {
29            iframeObserver.observe(iframe);
30        });
31    } else {
32        // Fallback pour les très vieux navigateurs : on charge tout tout de suite
33        var lazyIframes = document.querySelectorAll(".lazy-iframe");
34        lazyIframes.forEach(function(iframe) {
35            iframe.src = iframe.getAttribute("data-src");
36        });
37    }
38});
39
40(function($) {
41    'use strict';
42
43    // Main initialization function
44    window.initDyshorts = function(instance) {
45        if (!instance || !instance.instanceId) {
46            console.error('Dyshorts: Invalid instance data');
47            return;
48        }
49
50        var instanceId = instance.instanceId;
51        var desktopColumns = instance.desktopColumns || 4;
52        
53        var desktopCarousel = $('#' + instanceId + '-desktop');
54        var mobileCarousel = $('#' + instanceId + '-mobile');
55        
56        // Function to correctly set up the grid layout
57        function setupGridLayout() {
58            // Enforce grid display for proper column structure
59            $('#' + instanceId + '-desktop .ysd-slide-grid.ysd-columns-' + desktopColumns).css({
60                'display': 'grid',
61                'grid-template-columns': 'repeat(' + desktopColumns + ', minmax(0, 1fr))',
62                'grid-gap': '20px',
63                'width': '100%'
64            });
65            
66            // Ensure each short item has proper width within the grid
67            $('#' + instanceId + '-desktop .ysd-short-item').css({
68                'width': '100%',
69                'height': '100%',
70                'box-sizing': 'border-box'
71            });
72        }
73        
74        // Initialize desktop carousel with dedicated dots container
75        desktopCarousel.slick({
76            dots: true,
77            arrows: false,
78            infinite: false,
79            speed: 500,
80            slidesToShow: 1,
81            slidesToScroll: 1,
82            adaptiveHeight: false,
83            autoplay: false,
84            appendDots: $('#' + instanceId + '-desktop-dots'),
85            dotsClass: 'slick-dots'
86        });
87        
88        // Initialize mobile carousel with dedicated dots container
89        mobileCarousel.slick({
90            dots: true,
91            arrows: false,
92            infinite: false,
93            speed: 300,
94            slidesToShow: 1,
95            slidesToScroll: 1,
96            adaptiveHeight: true,
97            autoplay: false,
98            lazyLoad: 'ondemand',
99            appendDots: $('#' + instanceId + '-mobile-dots'),
100            dotsClass: 'slick-dots',
101            responsive: [
102                {
103                    breakpoint: 480,
104                    settings: {
105                        dots: true,
106                        arrows: false
107                    }
108                }
109            ]
110        });
111        
112        // Setup grid layout after slick initialization
113        setupGridLayout();
114        
115        // Fix layout after slick changes

116        desktopCarousel.on('afterChange', function() {
117            setupGridLayout();
118        });
119        
120        // Lazy load implementation for mobile slides
121        function loadVisibleIframes() {
122            $('#' + instanceId + '-mobile').find('.slick-active .lazy-iframe').each(function() {
123                if ($(this).attr('src') === undefined || $(this).attr('src') === '') {
124                    $(this).attr('src', $(this).data('src'));
125                }
126            });
127        }
128        
129        // Load the first slide's iframe
130        loadVisibleIframes();
131        
132        // Load iframe when slide changes
133        mobileCarousel.on('afterChange', function() {
134            loadVisibleIframes();
135        });
136        
137        // Handle responsive switching with optimizations
138        function setupResponsiveLayout() {
139            if (window.innerWidth <= 768) {
140                desktopCarousel.hide();
141                mobileCarousel.show();
142                $('.desktop-dots').hide();
143                $('.mobile-dots').show();
144                // Only refresh the position, avoid unnecessary redraws
145                mobileCarousel.slick('setPosition');
146                
147                // Ensure dots are visible and properly positioned on mobile
148                $('#' + instanceId + '-mobile-dots').css({
149                    'display': 'block',
150                    'position': 'relative',
151                    'margin-top': '15px',
152                    'text-align': 'center',
153                    'width': '100%'
154                });
155            } else {
156                desktopCarousel.show();
157                mobileCarousel.hide();
158                $('.desktop-dots').show();
159                $('.mobile-dots').hide();
160                // Only refresh the position, avoid unnecessary redraws
161                desktopCarousel.slick('setPosition');
162                // Re-ensure grid layout
163                setupGridLayout();
164            }
165        }
166        
167        // Initial setup
168        setupResponsiveLayout();
169        
170        // Debounce resize handler to improve performance
171        var resizeTimer;
172        $(window).on('resize', function() {
173            clearTimeout(resizeTimer);
174            resizeTimer = setTimeout(function() {
175                setupResponsiveLayout();
176            }, 250);
177        });
178        
179        // Fix any arrow positioning issues by refreshing slick after full page load
180        $(window).on('load', function() {
181            setTimeout(function() {
182                desktopCarousel.slick('setPosition');
183                mobileCarousel.slick('setPosition');
184                setupGridLayout();
185                
186                // Force dots to be visible on mobile
187                if (window.innerWidth <= 768) {
188                    $('#' + instanceId + '-mobile-dots').css({
189                        'display': 'block',
190                        'position': 'relative',
191                        'margin-top': '15px',
192                        'text-align': 'center',
193                        'width': '100%'
194                    });
195                }
196            }, 100);
197        });
198    };
199
200    // Document ready handler for any global initialization
201    $(document).ready(function() {
202        // This space intentionally left mostly empty
203        // Individual carousel instances will be initialized through the initYoutubeShorts function
204        // which is called via inline scripts for each shortcode instance
205    });
206
207})(jQuery);