'
+ + '';
+ }).join('');
- var wrap = document.createElement('div');
- wrap.className = 'img-wrap';
- var img = document.createElement('img');
- img.loading = 'lazy';
- img.decoding = 'async';
- img.alt = s.com || s.sci;
- img.src = imgUrl(s.sci, s.com);
- wrap.appendChild(img);
-
- var h3 = document.createElement('h3');
- h3.textContent = s.com || s.sci;
- var sci = document.createElement('p');
- sci.className = 'sci';
- var em = document.createElement('em');
- em.textContent = s.sci;
- sci.appendChild(em);
-
- card.appendChild(stat);
- card.appendChild(wrap);
- card.appendChild(h3);
- card.appendChild(sci);
- card.addEventListener('click', function () { openDetail(s); });
- grid.appendChild(card);
+ // Wire audio playback + spectrogram load.
+ // - Only one card plays at a time. Clicking play on a different card
+ // stops the current one first.
+ // - The spectrogram is lazily fetched on first play (saves a Pi hit
+ // for every card visible on initial render).
+ // - If the recording endpoint 404s (no detection yet for this
+ // species), the button reverts and shows "no audio".
+ var currentAudio = null;
+ var currentBtn = null;
+ function setBtnState(btn, state) {
+ btn.setAttribute('data-state', state);
+ if (state === 'playing') {
+ btn.setAttribute('data-active', 'true');
+ btn.innerHTML = ICON_PAUSE + 'stop';
+ } else if (state === 'loading') {
+ btn.setAttribute('data-active', 'true');
+ btn.innerHTML = ICON_PLAY + '...';
+ } else if (state === 'missing') {
+ btn.setAttribute('data-active', 'false');
+ btn.innerHTML = ICON_PLAY + 'no audio';
+ setTimeout(function () {
+ if (btn.getAttribute('data-state') === 'missing') {
+ btn.innerHTML = ICON_PLAY + 'play';
+ btn.setAttribute('data-state', 'idle');
+ }
+ }, 2200);
+ } else {
+ btn.setAttribute('data-active', 'false');
+ btn.innerHTML = ICON_PLAY + 'play';
+ }
+ }
+ function clearProgressOn(card) {
+ if (!card) return;
+ var sw = card.querySelector('.spectro-wrap');
+ if (sw) sw.style.setProperty('--prog', '0%');
+ card.removeAttribute('data-playing');
+ }
+ function stopCurrent() {
+ if (currentAudio) {
+ try { currentAudio.pause(); } catch (e) {}
+ currentAudio = null;
+ }
+ if (currentBtn) {
+ var card = currentBtn.closest('.bird-card');
+ clearProgressOn(card);
+ setBtnState(currentBtn, 'idle');
+ currentBtn = null;
+ }
+ }
+ grid.querySelectorAll('[data-action="play"]').forEach(function (btn) {
+ btn.addEventListener('click', function () {
+ var card = btn.closest('.bird-card');
+ if (btn === currentBtn) { stopCurrent(); return; }
+ stopCurrent();
+ setBtnState(btn, 'loading');
+ currentBtn = btn;
+ // Kick off spectrogram load in parallel (it's a separate request).
+ var spectroWrap = card.querySelector('.spectro-wrap');
+ if (spectroWrap && !spectroWrap.firstChild) {
+ var img = document.createElement('img');
+ img.loading = 'lazy';
+ img.alt = '';
+ img.src = card.dataset.spectro;
+ img.addEventListener('error', function () { spectroWrap.removeChild(img); });
+ spectroWrap.appendChild(img);
+ }
+ // Start audio.
+ var audio = new Audio(card.dataset.audio);
+ audio.addEventListener('canplay', function () {
+ if (currentBtn !== btn) return; // user clicked away
+ setBtnState(btn, 'playing');
+ card.setAttribute('data-playing', 'true');
+ audio.play();
+ });
+ // Progress bar on the spectrogram strip.
+ audio.addEventListener('timeupdate', function () {
+ if (currentBtn !== btn) return;
+ var pct = audio.duration ? (audio.currentTime / audio.duration * 100) : 0;
+ if (spectroWrap) spectroWrap.style.setProperty('--prog', pct.toFixed(1) + '%');
+ });
+ audio.addEventListener('ended', function () {
+ if (currentBtn === btn) stopCurrent();
+ });
+ audio.addEventListener('error', function () {
+ if (currentBtn === btn) {
+ setBtnState(btn, 'missing');
+ clearProgressOn(card);
+ currentAudio = null; currentBtn = null;
+ }
+ });
+ currentAudio = audio;
+ audio.load();
+ });
});
+
+ // Spectrogram click = scrub to that position (if playing) or restart.
+ grid.addEventListener('click', function (ev) {
+ var sw = ev.target.closest && ev.target.closest('.spectro-wrap');
+ if (!sw || !sw.firstChild) return;
+ var card = sw.closest('.bird-card');
+ var btn = card.querySelector('[data-action="play"]');
+ // If this card is the active one, scrub.
+ if (currentBtn === btn && currentAudio && currentAudio.duration) {
+ var rect = sw.getBoundingClientRect();
+ var pct = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width));
+ currentAudio.currentTime = pct * currentAudio.duration;
+ } else {
+ // Otherwise start playback from the top.
+ btn.click();
+ }
+ });
+ }
+
+ function renderWindowDependent() {
+ // Things that change with the time-window picker. drawHistograms is
+ // here too now that its X-axis spans the selected window (was only
+ // re-drawn on full refreshAll before).
+ renderCollageFromData();
+ drawHistograms();
+ renderStatsLists();
+ renderAtlas();
+ }
+ function renderTimeIndependent() {
+ // Stats charts + atlas/stats lists that derive from non-window data
+ // (totals, lifelist, timeseries).
+ drawHistograms();
+ renderStatsLists();
+ renderAtlas();
+ }
+
+ function refreshRecent() {
+ // Capture the window this fetch was issued for. If the user
+ // changes the picker again before it resolves — or a slower poll
+ // lands later — we discard the stale response so the collage
+ // never reverts to a different window.
+ var forHours = currentHours;
+ return fetchJson('../api/birdnet-api.php?action=recent&hours=' + forHours)
+ .then(function (j) {
+ if (forHours !== currentHours) return; // window changed mid-flight
+ DATA.recent = j; renderWindowDependent();
+ })
+ .catch(function (e) { console.warn('recent fetch failed', e); });
+ }
+ function refreshAll() {
+ var forHours = currentHours;
+ return Promise.all([
+ fetchJson('../api/birdnet-api.php?action=stats').catch(function () { return null; }),
+ fetchJson('../api/birdnet-api.php?action=lifelist').catch(function () { return null; }),
+ fetchJson('../api/birdnet-api.php?action=timeseries&days=30').catch(function () { return null; }),
+ fetchJson('../api/birdnet-api.php?action=firstseen&limit=10').catch(function () { return null; }),
+ fetchJson('../api/birdnet-api.php?action=recent&hours=' + forHours).catch(function () { return null; }),
+ ]).then(function (parts) {
+ DATA.stats = parts[0];
+ DATA.lifelist = parts[1];
+ DATA.timeseries = parts[2];
+ DATA.firstseen = parts[3];
+ // Only accept the recent slice if the window hasn't changed
+ // since this poll started — otherwise keep what's there.
+ if (forHours === currentHours && parts[4]) DATA.recent = parts[4];
+ recomputeDerived();
+ renderTimeIndependent();
+ renderCollageFromData();
+ });
+ }
+
+ // Kick off the initial fetch. Renders pull from DATA as soon as it
+ // populates; until then the page sits with empty histograms + lists.
+ refreshAll();
+
+ // Hook into the window picker so the data refetches on change.
+ winBtns.forEach(function (b) {
+ b.addEventListener('click', function () { refreshRecent(); });
+ });
+
+ // ---- Realtime polling ----
+ // Every POLL_MS the page refetches the live data set so the collage,
+ // stats, and atlas reflect new detections without a manual reload.
+ // We use refreshAll() (cheap: 5 small JSON fetches) so the dependent
+ // text/charts update too. Polling pauses when the tab is hidden and
+ // resumes (with an immediate fetch) when it becomes visible again.
+ var POLL_MS = 30 * 1000;
+ var pollTimer = null;
+ function startPolling() {
+ stopPolling();
+ pollTimer = setInterval(function () {
+ if (document.hidden) return;
+ refreshAll();
+ }, POLL_MS);
+ }
+ function stopPolling() { if (pollTimer) { clearInterval(pollTimer); pollTimer = null; } }
+ document.addEventListener('visibilitychange', function () {
+ if (document.hidden) {
+ stopPolling();
+ } else {
+ // Force an immediate refresh on return so the user sees fresh
+ // data right away, then resume normal polling cadence.
+ refreshAll();
+ startPolling();
+ }
+ });
+ startPolling();
+
+ // ---- Menu dropdown ----
+ var dd = document.getElementById('menu-dd');
+ var menuBtn = document.getElementById('menuBtn');
+ var locked = document.getElementById('dd-locked');
+ var items = document.getElementById('dd-items');
+ var lockHint= document.getElementById('lockHint');
+ function openDd() { dd.classList.add('open'); dd.setAttribute('aria-hidden','false'); setTimeout(function () { document.getElementById('lockPass').focus(); }, 100); }
+ function closeDd() { dd.classList.remove('open'); dd.setAttribute('aria-hidden','true'); }
+ function toggleDd(){ dd.classList.contains('open') ? closeDd() : openDd(); }
+ menuBtn.addEventListener('click', function (e) { e.stopPropagation(); toggleDd(); });
+ document.addEventListener('click', function (e) { if (!dd.contains(e.target) && e.target !== menuBtn) closeDd(); });
+ document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeDd(); });
+
+ // Session is now an HTTP-only cookie set by /api/auth/login — we no
+ // longer cache the Basic-auth password in sessionStorage where any
+ // page-scoped script could read it. authHdr is kept around as a
+ // transient value for the legacy-UI warm-up POST only, and is never
+ // persisted.
+ // Drop any prior sessionStorage we left behind (security cleanup —
+ // previous builds stored Basic auth across reloads).
+ try { sessionStorage.removeItem('apt-birds-auth'); } catch (e) {}
+ var authHdr = null;
+
+ // Probe the cookie session: hit /api/menu without any header. If the
+ // worker accepts the cookie we skip the lock screen; if it 401s we
+ // show the lock as usual.
+ function tryAutoUnlock() {
+ fetch('../api/menu.php', { credentials: 'same-origin' }).then(function (r) {
+ if (r.status === 200) {
+ return r.json().then(function (j) { renderMenu(j.items || []); });
+ }
+ }).catch(function () {});
+ }
+ tryAutoUnlock();
+
+ document.getElementById('unlockForm').addEventListener('submit', function (e) {
+ e.preventDefault();
+ var u = 'monalisa';
+ var p = document.getElementById('lockPass').value;
+ var hdr = 'Basic ' + btoa(u + ':' + p);
+ // POST the credentials to /api/auth/login — the worker validates
+ // them, sets an HTTP-only signed session cookie, and replies 200.
+ // We never store the password anywhere on the client.
+ fetch('/api/auth/login', {
+ method: 'POST',
+ headers: { 'Authorization': hdr },
+ credentials: 'same-origin',
+ }).then(function (r) {
+ if (r.status === 200) {
+ // Cookie is set — fetch the drawer JSON the same way every
+ // protected endpoint will be called from now on (cookie-based).
+ return fetch('../api/menu.php', { credentials: 'same-origin' })
+ .then(function (m) { return m.json(); })
+ .then(function (j) { renderMenu(j.items || []); });
+ } else if (r.status === 401) {
+ lockHint.textContent = 'wrong password.';
+ lockHint.classList.add('lock-err');
+ } else {
+ lockHint.textContent = 'auth unavailable.';
+ lockHint.classList.add('lock-err');
+ }
+ }).catch(function () {
+ lockHint.textContent = 'network error.';
+ lockHint.classList.add('lock-err');
+ });
+ });
+
+ // Render the unlocked drawer:
+ // - inline LIVE AUDIO player (streams icecast through the worker tunnel)
+ // - collapsible SETTINGS section (closed by default to avoid mis-clicks)
+ // - small ADVANCED TOOLS grid for the rest of BirdNET-Pi (still
+ // opens externally; rebuilding all of these in our design is on
+ // the follow-up list)
+ function renderMenu(menu) {
+ locked.style.display = 'none';
+ items.classList.add('show');
+ var liveAudioIcon = '';
+ var stopIcon = '';
+ var specOnIcon = '';
+ // Build the diagnostic shortcuts (system / logs / tools). With
+ // native:true they navigate in-page; otherwise they keep the old
+ // open-in-new-tab behavior for the legacy BirdNET-Pi screens.
+ var linksHtml = menu.map(function (it) {
+ var label = (it.label || '').replace('today’s detections', 'today');
+ var attrs = it.native ? '' : ' target="_blank" rel="noopener"';
+ var cls = it.native ? '' : ' class="ext"';
+ return '' + label + '';
+ }).join('');
+ items.innerHTML =
+ '
'
+ + ' '
+ + '
Live audiostream from the mic
'
+ + ' '
+ + '
'
+ // Spectrogram canvas is always present; it stays a dark inert
+ // strip until the stream is on, then the FFT loop paints it in
+ // real time. No separate toggle.
+ + ''
+ + ''
+ + '
' + linksHtml + '
';
+
+ // Live audio + realtime spectrogram. The audio element and the
+ // FFT analyser share one AudioContext; once .play() is called the
+ // analyser starts painting the canvas via rAF. No timeout — we
+ // surface the natural error event or success ("playing") only.
+ var liveBox = document.getElementById('liveAudio');
+ var liveBtn = document.getElementById('liveAudioBtn');
+ var spectroEl = document.getElementById('liveSpectro');
+ var statusEl = document.getElementById('liveStatus');
+ var liveEl = null, audioCtx = null, srcNode = null, analyser = null;
+ var specRaf = null;
+
+ function setStatus(msg, isErr) {
+ statusEl.textContent = msg || '';
+ statusEl.className = 'live-status' + (isErr ? ' err' : '');
+ }
+ function startAudio() {
+ // Create the Audio element and resolve on the first "playing"
+ // event (success). The browser will hang the network request
+ // open for an icecast stream — that's normal — and "playing"
+ // fires as soon as the first audio frame is decoded. We don't
+ // race a timeout because icecast can take 1–10s to warm up
+ // depending on tunnel + bitrate.
+ return new Promise(function (resolve, reject) {
+ liveEl = new Audio('?t=' + Date.now());
+ // No crossOrigin — the stream is same-origin via the worker
+ // and crossOrigin='anonymous' would require CORS headers
+ // icecast doesn't send.
+ var settled = false;
+ liveEl.addEventListener('playing', function () {
+ if (settled) return;
+ settled = true; resolve();
+ });
+ liveEl.addEventListener('error', function () {
+ if (settled) return;
+ settled = true;
+ reject(new Error('stream error — check /#admin=system'));
+ });
+ liveEl.play().catch(function (e) {
+ if (settled) return;
+ settled = true; reject(e);
+ });
+ });
+ }
+ function stopAudio() {
+ if (specRaf) { cancelAnimationFrame(specRaf); specRaf = null; }
+ if (liveEl) { try { liveEl.pause(); } catch (e) {} liveEl.src = ''; liveEl = null; }
+ if (srcNode) { try { srcNode.disconnect(); } catch (e) {} srcNode = null; }
+ if (analyser) { try { analyser.disconnect(); } catch (e) {} analyser = null; }
+ liveBox.setAttribute('data-on', 'false');
+ liveBtn.innerHTML = liveAudioIcon + 'listen';
+ // Clear the spectrogram canvas so it returns to its quiet state.
+ var ctx = spectroEl.getContext('2d');
+ ctx.fillStyle = getComputedStyle(document.documentElement)
+ .getPropertyValue('--paper-2').trim() || '#efe8d8';
+ ctx.fillRect(0, 0, spectroEl.width, spectroEl.height);
+ }
+ function attachSpectrogram() {
+ if (!liveEl) return;
+ if (!audioCtx) {
+ var Ctx = window.AudioContext || window.webkitAudioContext;
+ if (!Ctx) return;
+ audioCtx = new Ctx();
+ }
+ if (audioCtx.state === 'suspended') audioCtx.resume();
+ try {
+ srcNode = audioCtx.createMediaElementSource(liveEl);
+ } catch (e) {
+ // MediaElementSource throws if the Audio is already wired up
+ // (e.g. user toggled listen off then on). Best effort — let
+ // the audio still play, just skip the spectrogram.
+ return;
+ }
+ analyser = audioCtx.createAnalyser();
+ analyser.fftSize = 1024;
+ analyser.smoothingTimeConstant = 0.7;
+ srcNode.connect(analyser);
+ analyser.connect(audioCtx.destination);
+ drawSpectrogram();
+ }
+ function drawSpectrogram() {
+ var ctx = spectroEl.getContext('2d');
+ var W = spectroEl.width, H = spectroEl.height;
+ // Read palette tokens for ink + paper so the live spectrogram
+ // visually matches the recording-row spectrograms.
+ var cs = getComputedStyle(document.documentElement);
+ var paper = cs.getPropertyValue('--paper-2').trim() || '#efe8d8';
+ ctx.fillStyle = paper;
+ ctx.fillRect(0, 0, W, H);
+ var bins = new Uint8Array(analyser.frequencyBinCount);
+ function tick() {
+ if (!analyser) return;
+ var img = ctx.getImageData(1, 0, W - 1, H);
+ ctx.putImageData(img, 0, 0);
+ ctx.clearRect(W - 1, 0, 1, H);
+ analyser.getByteFrequencyData(bins);
+ var n = bins.length;
+ var lo = Math.floor(n * 250 / 24000);
+ var hi = Math.floor(n * 12000 / 24000);
+ for (var y = 0; y < H; y++) {
+ var t = 1 - y / H;
+ var idx = Math.round(lo + (hi - lo) * Math.pow(t, 1.6));
+ var v = (bins[idx] || 0) / 255;
+ var e = v * v * (3 - 2 * v);
+ // Paper (245,240,230) → ink (26,22,18) ramp.
+ var r = 245 + Math.round((26 - 245) * e);
+ var g = 240 + Math.round((22 - 240) * e);
+ var b = 230 + Math.round((18 - 230) * e);
+ ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+ ctx.fillRect(W - 1, y, 1, 1);
+ }
+ specRaf = requestAnimationFrame(tick);
+ }
+ tick();
+ }
+
+ // Paint the spectrogram in its quiet/initial state.
+ (function () {
+ var ctx = spectroEl.getContext('2d');
+ var paper = getComputedStyle(document.documentElement)
+ .getPropertyValue('--paper-2').trim() || '#efe8d8';
+ ctx.fillStyle = paper;
+ ctx.fillRect(0, 0, spectroEl.width, spectroEl.height);
+ })();
+
+ liveBtn.addEventListener('click', function (ev) {
+ // Important: stop the click from propagating up to the
+ // document-level "click outside drawer" handler, which would
+ // close the dropdown.
+ ev.stopPropagation();
+ var on = liveBox.getAttribute('data-on') === 'true';
+ if (on) { setStatus(''); stopAudio(); return; }
+ liveBox.setAttribute('data-on', 'true');
+ liveBtn.innerHTML = stopIcon + 'stop';
+ setStatus('connecting…');
+ startAudio()
+ .then(function () { setStatus('streaming from pi'); attachSpectrogram(); })
+ .catch(function (err) {
+ stopAudio();
+ var msg = (err && err.message) || 'stream unavailable';
+ if (msg.indexOf('NotAllowed') !== -1 || msg.indexOf('user') !== -1) {
+ setStatus('browser blocked autoplay — tap listen again', true);
+ } else {
+ setStatus(msg, true);
+ }
+ });
+ });
+ }
+
+ // Pending changes (key → value), saved on click of the Save button.
+ var pending = {};
+
+ function setSaveState(msg, cls) {
+ var el = document.getElementById('saveState');
+ if (el) { el.textContent = msg || ''; el.className = 'save-state' + (cls ? ' ' + cls : ''); }
+ var btn = document.getElementById('saveBtn');
+ if (btn) btn.disabled = Object.keys(pending).length === 0;
+ }
+
+ function loadSettings() {
+ fetch('/api/config', { credentials: 'same-origin', cache: 'no-store' })
+ .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+ .then(function (cfg) {
+ var v = cfg.values || {};
+ var preserve = cfg.preserve;
+ var html = ''
+ + settingsToggle('preserve', 'Preserve all recordings', 'don’t auto-delete', preserve)
+ + settingsSlider('CONFIDENCE', 'Confidence threshold', 'min score to log a detection', v.CONFIDENCE, 0.1, 0.95, 0.05, 2)
+ + settingsSlider('SENSITIVITY', 'Sensitivity', 'analyzer sensitivity', v.SENSITIVITY, 0.5, 1.5, 0.05, 2)
+ + settingsSlider('OVERLAP', 'Chunk overlap', 'seconds analyzed per pass', v.OVERLAP, 0, 2.5, 0.1, 1)
+ + settingsSegmented('FULL_DISK', 'When disk fills', '', v.FULL_DISK, [
+ { v: 'keep', label: 'keep' },
+ { v: 'purge', label: 'purge' },
+ ])
+ + '
'
+ + ' '
+ + ' '
+ + '
';
+ var body = document.getElementById('settingsBody');
+ if (body) body.innerHTML = html;
+ wireSettingsControls();
+ var saveBtn = document.getElementById('saveBtn');
+ if (saveBtn) saveBtn.addEventListener('click', saveSettings);
+ })
+ .catch(function (err) {
+ var body = document.getElementById('settingsBody');
+ if (body) body.innerHTML =
+ '
A tiny microphone identifies every passing bird with Cornell's BirdNET. Each species shows up as an illustration in the collage, sized by how often it's been heard.
'
+ + '