{"version":3,"file":"beefbar-media.js","names":[],"sources":["../resources/modern-javascript/beefbar-media.js"],"sourcesContent":["document.addEventListener('DOMContentLoaded', () => {\n    const wrappers = document.querySelectorAll(\n        '[data-beefbar-animation-wrapper]'\n    );\n    const isMobile = window.matchMedia('(max-width: 34.375em)').matches;\n    const isSafari =\n        /Safari/i.test(navigator.userAgent) &&\n        !/Chrome|Chromium|Android/i.test(navigator.userAgent);\n\n    if (\n        !wrappers.length ||\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    ) {\n        return;\n    }\n\n    /**\n     * Use animated WebP when Safari cannot preserve transparent WebM video.\n     */\n    const usesSafariFallback = wrapper =>\n        isSafari && wrapper.hasAttribute('data-beefbar-transparent-animation');\n\n    /**\n     * Show the animated WebP when the preferred video cannot be played.\n     */\n    const showFallback = wrapper => {\n        const fallback = wrapper.querySelector(\n            '[data-beefbar-animation-fallback]'\n        );\n\n        if (!fallback || fallback.dataset.beefbarFallbackInitialised) {\n            return;\n        }\n\n        fallback.dataset.beefbarFallbackInitialised = 'true';\n\n        const activateFallback = () => {\n            wrapper.classList.remove('beefbar-media--motion-ready');\n            wrapper.classList.add('beefbar-media--motion-fallback');\n        };\n\n        if (fallback.complete && fallback.naturalWidth) {\n            activateFallback();\n            return;\n        }\n\n        fallback.addEventListener('load', activateFallback, { once: true });\n        fallback.addEventListener(\n            'error',\n            () => {\n                // Leave the static poster visible when the fallback cannot load.\n            },\n            { once: true }\n        );\n\n        fallback.loading = 'eager';\n\n        if (!fallback.src) {\n            fallback.src = fallback.dataset.src;\n        }\n    };\n\n    /**\n     * Add the deferred source and start an animation.\n     */\n    const loadAnimation = wrapper => {\n        const video = wrapper.querySelector('[data-beefbar-animation]');\n        const source = video?.querySelector('source[data-src]');\n\n        if (!video || !source) {\n            return;\n        }\n\n        const playAnimation = () => {\n            video\n                .play()\n                .then(() => {\n                    wrapper.classList.remove(\n                        'beefbar-media--motion-fallback'\n                    );\n                    wrapper.classList.add('beefbar-media--motion-ready');\n                })\n                .catch(() => showFallback(wrapper));\n        };\n\n        if (video.dataset.beefbarAnimationInitialised) {\n            if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {\n                playAnimation();\n            }\n            return;\n        }\n\n        video.dataset.beefbarAnimationInitialised = 'true';\n        video.addEventListener('canplay', playAnimation, { once: true });\n        video.addEventListener('error', () => showFallback(wrapper), {\n            once: true,\n        });\n        source.src = source.dataset.src;\n        video.load();\n    };\n\n    /**\n     * Start decorative motion when the browser has idle time after first paint.\n     */\n    const scheduleAnimation = callback => {\n        if (typeof window.requestIdleCallback === 'function') {\n            window.requestIdleCallback(callback, { timeout: 1200 });\n            return;\n        }\n\n        window.setTimeout(callback, 100);\n    };\n\n    const deferredWrappers = [];\n\n    wrappers.forEach(wrapper => {\n        if (isMobile && wrapper.hasAttribute('data-beefbar-desktop-only')) {\n            return;\n        }\n\n        const immediate = Boolean(\n            wrapper.querySelector('[data-beefbar-animation-immediate]')\n        );\n\n        if (usesSafariFallback(wrapper)) {\n            if (immediate) {\n                showFallback(wrapper);\n                return;\n            }\n\n            deferredWrappers.push(wrapper);\n            return;\n        }\n\n        if (immediate) {\n            scheduleAnimation(() => loadAnimation(wrapper));\n            return;\n        }\n\n        deferredWrappers.push(wrapper);\n    });\n\n    if (!deferredWrappers.length) {\n        return;\n    }\n\n    const observer = new IntersectionObserver(\n        entries => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    if (usesSafariFallback(entry.target)) {\n                        showFallback(entry.target);\n                        observer.unobserve(entry.target);\n                        return;\n                    }\n\n                    loadAnimation(entry.target);\n                    return;\n                }\n\n                if (!usesSafariFallback(entry.target)) {\n                    entry.target\n                        .querySelector('[data-beefbar-animation]')\n                        ?.pause();\n                }\n            });\n        },\n        { rootMargin: isMobile ? '100px 0px' : '300px 0px' }\n    );\n\n    deferredWrappers.forEach(wrapper => observer.observe(wrapper));\n});\n"],"mappings":"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"}