{# Embedded HTML5 audio, with optional force-listen gating and telemetry.

   Audio always uses native controls — there is no `minimal_controls` because
   the scrubber doubles as the only progress indicator the participant has.
   When `force_listen` is on, a snap-back guard prevents seeking past the
   supposed playhead position.

   When `id` is set, three telemetry columns are written: {id}_started
   (epoch seconds when first played, 0 if never), {id}_ended (epoch seconds
   at last observed activity), and {id}_listened (accumulated forward play
   time in seconds, excluding seeks and background-tab playback).

   Args:
       id (str, optional): When set, telemetry is recorded; when omitted,
           the clip is purely embedded and produces no database columns.
       src (str): URL of the audio file.
       autoplay (bool, optional): Start playback as soon as the page loads.
           Defaults to False.
       force_listen (bool, optional): When true, the Continue button is
           disabled until the participant has listened to at least
           completion_threshold of the clip. Defaults to False.
       completion_threshold (float, optional): Fraction of total duration
           that counts as "listened". Defaults to 0.98.

   Example:
       {
           "questiontype": "audio",
           "id": "new_audio",
           "instructions": "",
           "src": "/static/clip.mp3",
           "force_listen": false,
           "completion_threshold": 0.98
       }
#}
{% set fl = question.force_listen|default(false) %}
{% set threshold = question.completion_threshold|default(0.98) %}
{% set prior_started = question.prior_started|default(0) %}
{% set prior_ended = question.prior_ended|default(0) %}
{% set prior_listened = question.prior_listened|default(0) %}

<div class="bofs-audio-wrapper" style="display: inline-block;">
    <audio class="bofs-audio"
           {% if question.autoplay %}autoplay{% endif %}
           controls
           controlsList="nodownload noremoteplayback"
           preload="auto">
        <source src="{{ question.src }}">
        Your browser does not support HTML5 audio.
    </audio>
    {% if question.id %}
    <input type="hidden" name="{{ question.id }}_started"  class="bofs-audio-started"  value="{{ prior_started }}">
    <input type="hidden" name="{{ question.id }}_ended"    class="bofs-audio-ended"    value="{{ prior_ended }}">
    <input type="hidden" name="{{ question.id }}_listened" class="bofs-audio-listened" value="{{ prior_listened }}">
    {% endif %}
</div>

<script>
(function() {
    // Shared media gate — see video.html for the full definition. Audio
    // questions register themselves under the 'audio' kind so the notice
    // text and pluralisation account for both video and audio at once.
    if (!window.bofsMediaGate) {
        window.bofsMediaGate = (function() {
            var counts = { video: 0, audio: 0 };
            var deferred = false;
            function btn() { return document.getElementById('btnNext'); }
            function noticeText() {
                if (counts.video > 0 && counts.audio > 0) {
                    return 'Please play all media before continuing.';
                }
                if (counts.video > 0) {
                    return counts.video > 1
                        ? 'Please watch the videos before continuing.'
                        : 'Please watch the video before continuing.';
                }
                return counts.audio > 1
                    ? 'Please listen to the audio clips before continuing.'
                    : 'Please listen to the audio before continuing.';
            }
            function update() {
                // The questionnaire template renders btnNext *after* the
                // questions, so at script-parse time btnNext doesn't exist
                // yet. Defer the DOM work until DOMContentLoaded.
                if (document.readyState === 'loading') {
                    if (!deferred) {
                        deferred = true;
                        document.addEventListener('DOMContentLoaded', function() {
                            deferred = false;
                            update();
                        }, { once: true });
                    }
                    return;
                }
                var b = btn();
                var existing = document.getElementById('bofs-media-gate-msg');
                if (counts.video + counts.audio === 0) {
                    if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
                    if (b) b.disabled = false;
                    return;
                }
                if (b) b.disabled = true;
                if (!existing && b && b.parentNode) {
                    existing = document.createElement('span');
                    existing.id = 'bofs-media-gate-msg';
                    existing.className = 'bofs-media-gate-msg';
                    existing.style.marginRight = '12px';
                    existing.style.fontStyle = 'italic';
                    existing.style.color = '#6c757d';
                    b.parentNode.insertBefore(existing, b);
                }
                if (existing) existing.textContent = noticeText();
            }
            return {
                require: function(kind) { counts[kind]++; update(); },
                satisfy: function(kind) {
                    counts[kind] = Math.max(0, counts[kind] - 1);
                    update();
                }
            };
        })();
    }

    var wrapper = document.currentScript.previousElementSibling;
    var aud = wrapper.querySelector('audio');
    var startedField  = wrapper.querySelector('.bofs-audio-started');
    var endedField    = wrapper.querySelector('.bofs-audio-ended');
    var listenedField = wrapper.querySelector('.bofs-audio-listened');
    var forceListen = {{ 'true' if fl else 'false' }};
    var threshold = {{ threshold }};

    var startedAt = parseFloat(startedField ? startedField.value : 0) || 0;
    var listenedSeconds = parseFloat(listenedField ? listenedField.value : 0) || 0;
    var lastTime = 0;
    var supposedTime = 0;
    var completed = false;
    var gateRegistered = false;

    function now() { return Date.now() / 1000; }
    function setEnded() { if (endedField) endedField.value = now(); }
    function persistListened() {
        if (listenedField) listenedField.value = listenedSeconds;
    }

    function checkCompletion() {
        if (completed || !aud.duration || isNaN(aud.duration)) return;
        if (listenedSeconds / aud.duration >= threshold) {
            completed = true;
            if (gateRegistered) {
                window.bofsMediaGate.satisfy('audio');
                gateRegistered = false;
            }
        }
    }

    if (forceListen) {
        var initialDuration = aud.duration;
        if (initialDuration && listenedSeconds / initialDuration >= threshold) {
            completed = true;
        } else {
            window.bofsMediaGate.require('audio');
            gateRegistered = true;
        }
    }

    // Pin playback rate so users can't speed through.
    aud.addEventListener('ratechange', function() {
        if (aud.playbackRate !== 1) aud.playbackRate = 1;
    });

    // Snap-back guard: audio always shows native controls, so when force_listen
    // is on we always defend against scrubbing past the supposed playhead.
    if (forceListen) {
        aud.addEventListener('seeking', function() {
            if (Math.abs(aud.currentTime - supposedTime) > 0.5) {
                aud.currentTime = supposedTime;
            }
        });
    }

    aud.addEventListener('timeupdate', function() {
        if (aud.seeking || aud.paused) {
            lastTime = aud.currentTime;
            return;
        }
        var delta = aud.currentTime - lastTime;
        if (delta > 0 && delta < 1.0 && document.visibilityState === 'visible') {
            listenedSeconds += delta;
            supposedTime = aud.currentTime;
            persistListened();
            setEnded();
        }
        lastTime = aud.currentTime;
        if (forceListen) checkCompletion();
    });

    aud.addEventListener('play', function() {
        lastTime = aud.currentTime;
        if (startedAt === 0) {
            startedAt = now();
            if (startedField) startedField.value = startedAt;
        }
        setEnded();
    });
    aud.addEventListener('pause', setEnded);
    aud.addEventListener('ended', function() {
        setEnded();
        if (forceListen) checkCompletion();
    });

    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState !== 'visible' && !aud.paused) aud.pause();
    });
    window.addEventListener('blur', function() { if (!aud.paused) aud.pause(); });
})();
</script>