css tattoo video site

<script>
document.addEventListener('DOMContentLoaded', function () {

    // --- Global flag to track if a resize is actively happening ---
    let isWindowResizing = false;
    let resizeTimeout;

    window.addEventListener('resize', () => {
        isWindowResizing = true;
        document.querySelectorAll('.nlb-video-swiper video').forEach(video => {
            if (video && !video.paused) video.pause();
        });
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            isWindowResizing = false;
        }, 250);
    });
    // --- End of global resize handling ---

    // Helper function to manage the 'controls' attribute
    function manageVideoControls(swiper) {
        if (!swiper || !swiper.slides || swiper.slides.length === 0) return;

        swiper.slides.forEach((slideEl, index) => {
            const video = slideEl.querySelector('video');
            if (video) {
                if (index === swiper.activeIndex) {
                    // Add controls to the active video
                    if (!video.hasAttribute('controls')) {
                        video.setAttribute('controls', '');
                        // console.log(`Controls ADDED to video in active slide ${index}`);
                    }
                } else {
                    // Remove controls from non-active videos
                    if (video.hasAttribute('controls')) {
                        video.removeAttribute('controls');
                        // console.log(`Controls REMOVED from video in non-active slide ${index}`);
                    }
                }
            }
        });
    }

    // Function to handle video playback logic for a given Swiper instance
    // (Based on Step 12's working version)
    function handleVideoPlayback(swiper) {
        if (!swiper || swiper.destroyed) { return; }

        if (isWindowResizing) {
            // console.log(`HVPB: Window is resizing, playback deferred. Active: ${swiper.activeIndex}`);
            return;
        }

        if (swiper.isFirstHandleVideoCall) {
            // console.log(`HVPB First Call (Swiper: ${swiper.el.id}). Active: ${swiper.activeIndex}. Pausing others.`);
            swiper.slides.forEach((slideEl, index) => {
                const video = slideEl.querySelector('video');
                if (video) {
                    if (index !== swiper.activeIndex) {
                        if (!video.paused) video.pause();
                    } else { // Initial active slide
                        if (!video.paused) video.pause(); // Ensure paused (poster setup done in afterInit)
                    }
                }
            });
            swiper.isFirstHandleVideoCall = false;
            return;
        }

        // console.log(`HVPB Subsequent Call (Swiper: ${swiper.el.id}). Active: ${swiper.activeIndex}. Processing.`);
        swiper.slides.forEach((slideEl, index) => {
            const video = slideEl.querySelector('video');
            if (video) {
                if (slideEl.classList.contains('swiper-slide-active')) {
                    if (video.paused) {
                        // console.log(`HVPB: Playing video in active slide ${index}`);
                        if (video.readyState >= 3) {
                            video.play().catch(error => { console.warn(`Video play (readyState >= 3) in active slide ${index} prevented:`, error); });
                        } else {
                            const playWhenReady = () => {
                                video.play().catch(error => { console.warn(`Video play (on canplay) in active slide ${index} prevented:`, error); });
                                video.removeEventListener('canplay', playWhenReady);
                            };
                            video.removeEventListener('canplay', playWhenReady);
                            video.addEventListener('canplay', playWhenReady, { once: true });
                        }
                    }
                } else { // Non-active slides
                    if (!video.paused) {
                        video.pause();
                        // console.log(`HVPB: Paused video in non-active slide ${index}`);
                    }
                }
            }
        });
    }

    const allSliderWrappers = document.querySelectorAll('.nlb-video-slider-wrapper');

    allSliderWrappers.forEach((sliderWrapper, sliderIndex) => {
        const swiperContainerElement = sliderWrapper.querySelector('.nlb-video-swiper');
        if (!swiperContainerElement) return;

        const paginationElement = sliderWrapper.querySelector('.nlb-video-pagination');
        const nextButton = swiperContainerElement.querySelector('.swiper-button-next');
        const prevButton = swiperContainerElement.querySelector('.swiper-button-prev');
        const swiperSlidesElements = swiperContainerElement.querySelectorAll('.swiper-wrapper .swiper-slide');
        const numberOfActualSlides = swiperSlidesElements.length;
        let calculatedInitialSlide = 0;
        if (numberOfActualSlides > 0) calculatedInitialSlide = Math.ceil(numberOfActualSlides / 2) - 1;

        swiperContainerElement.querySelectorAll('video').forEach(video => {
            if (video && !video.paused) video.pause();
            // video.removeAttribute('controls'); // Remove controls from all videos initially
        });

        const nlbVideoSwiper = new Swiper(swiperContainerElement, {
            effect: 'cards', grabCursor: true, loop: false, rewind: true,
            slidesPerView: 'auto', centeredSlides: true, initialSlide: calculatedInitialSlide,
            watchSlidesProgress: true,
            cardsEffect: { slideShadows: false, perSlideRotate: 4, perSlideOffset: 32 },
            navigation: { nextEl: nextButton, prevEl: prevButton },
            pagination: {
                el: paginationElement, clickable: true,
                renderBullet: function (index, className) {
                    let posterUrl = ''; const slideElement = this.slides[index];
                    if (slideElement) {
                        const videoElement = slideElement.querySelector('video');
                        if (videoElement && videoElement.hasAttribute('poster')) posterUrl = videoElement.getAttribute('poster');
                    }
                    return `<div class="${className}"><img src="${posterUrl}" alt="Thumbnail ${index + 1}"></div>`;
                },
            },
            on: {
                init: function (swiper) {
                    // Initial pause of videos within this instance
                    swiper.el.querySelectorAll('video').forEach(video => {
                        if (video && !video.paused) video.pause();
                    });
                    // Manage controls attribute state at init (before afterInit fully runs for poster)
                    // manageVideoControls(swiper); // Potentially call here or ensure afterInit handles it fully
                },
                afterInit: function(swiper) {
                    swiper.isFirstHandleVideoCall = true;
                    manageVideoControls(swiper); // Set controls attribute for active, remove from others

                    if (swiper.slides && swiper.slides.length > swiper.activeIndex) {
                        const activeSlide = swiper.slides[swiper.activeIndex];
                        if (activeSlide) {
                            const video = activeSlide.querySelector('video');
                            if (video) {
                                if (!video.paused) video.pause();
                                video.currentTime = 0;
                                video.load(); // For initial poster fix
                            }
                        }
                    }
                    handleVideoPlayback(swiper); // Will run "first call" logic
                },
                afterResize: function(swiper) {
                    // console.log(`Swiper instance ${sliderIndex + 1} afterResize. Active: ${swiper.activeIndex}.`);
                    manageVideoControls(swiper); // Ensure controls are correct after resize
                    if (swiper.slides && swiper.slides.length > swiper.activeIndex) {
                        const activeSlide = swiper.slides[swiper.activeIndex];
                        if (activeSlide) {
                            const video = activeSlide.querySelector('video');
                            if (video) {
                                if (!video.paused) video.pause();
                                video.currentTime = 0;
                            }
                        }
                    }
                    // If a transitionEnd happens due to resize, HVPB will check global isWindowResizing
                },
                transitionStart: function(swiper) {
                    // Optional: Proactively remove controls from the slide that is *about* to become inactive.
                    // This might help prevent flicker if transitionEnd is too late.
                    // However, it can be complex if the transition is reversed or interrupted.
                    // For now, we rely on transitionEnd.
                },
                transitionEnd: function (swiper) {
                    manageVideoControls(swiper); // Update controls attribute for new active/inactive slides
                    handleVideoPlayback(swiper);
                },
                click: function (swiper, event) {
                    const clickedElement = event.target;
                    if (clickedElement.classList.contains('swiper-video-drag-overlay')) {
                        let parentSlide = clickedElement.closest('.swiper-slide');
                        if (parentSlide && parentSlide === swiper.slides[swiper.activeIndex]) {
                            const video = parentSlide.querySelector('video');
                            if (video) {
                                if (video.paused) {
                                    video.play().catch(err => console.warn(`Swiper click play failed`, err));
                                } else {
                                    video.pause();
                                }
                                swiper.isFirstHandleVideoCall = false;
                            }
                        }
                    }
                }
            }
        });
    });
});
</script>