{{ extends 'global/IntroPage.html' }}
{{ block title }}Video 4 of 4: Three-by-Three Example{{ endblock }}

{{ block page_body }}

<div style="position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 6px;">
    <iframe id="vimeo-player"
        src="https://player.vimeo.com/video/1195682306?autoplay=1"
        allowfullscreen
        allow="autoplay; fullscreen; picture-in-picture"
        style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none;">
    </iframe>
</div>

<p></p>
<div id="next-btn-wrapper" style="display: none;">
    {{ next_button }}
</div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    const player = new Vimeo.Player(document.getElementById('vimeo-player'));

    let maxWatched = 0;

    player.on('timeupdate', function (data) {
        if (data.seconds > maxWatched + 1) {
            player.setCurrentTime(maxWatched);
            return;
        }
        if (data.seconds > maxWatched) {
            maxWatched = data.seconds;
        }
    });

    player.on('ended', function () {
        document.getElementById('next-btn-wrapper').style.display = '';
    });

    // Debug shortcut: Shift+Alt+D reveals next button without watching video
    document.addEventListener('keydown', function (e) {
        if (e.shiftKey && e.altKey && e.key === 'D') {
            document.getElementById('next-btn-wrapper').style.display = '';
        }
    });

    document.addEventListener('visibilitychange', function () {
        if (document.hidden) player.pause();
    });

    window.addEventListener('blur', function () {
        player.pause();
    });

    // Catches OS-level workspace switches (e.g. macOS Spaces) that don't fire blur/visibilitychange
    setInterval(function () {
        if (!document.hasFocus()) player.pause();
    }, 500);
</script>

{{ endblock }}