mARTin-B78
3c210df8a4
Two real bugs, both confirmed live: 1. dragover's preventDefault() was gated on dataTransfer.types including 'Files' -- during a real OS file drag, Chromium does not reliably populate that list synchronously on every dragover event, so the condition failed often enough that preventDefault was silently skipped. Per the HTML5 DnD spec, an element only becomes a valid drop target once dragover (and, in some browsers, dragenter) has been cancelled -- without that, the browser falls through to its native "open the dropped file" behaviour, which is exactly what was reported. Removed the gate entirely; dragenter is now also handled, not just dragover. 2. No page-wide safety net existed, so a drop landing even slightly outside the dropzone element bubbled to the browser's default action uncontested. Added a window-level dragover/drop preventDefault installed once regardless of which section is active. This also explains the "no hover highlight" symptom: the same gated-preventDefault bug meant dragover never reliably reached the class-toggle code either. Verified live: dragenter/dragover/drop each report defaultPrevented, the highlight class appears on dragenter and clears on drop, the dropped file populates the hidden input, and a drop dispatched directly on <body> (simulating one that misses the zone) is also intercepted by the new window-level guard. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1010 lines
38 KiB
JavaScript
1010 lines
38 KiB
JavaScript
// Magazine reader — contents tree, article review, dual reading views,
|
||
// sentence-highlighted playback and podcast mode.
|
||
//
|
||
// The canonical object is the ARTICLE, not the page (see
|
||
// architecture/magazine-ingestion.md). Nothing is narrated until a human has
|
||
// approved the detected boundaries, so the review screen is on the critical
|
||
// path rather than an optional extra.
|
||
//
|
||
// Two views stay linked: the reflowed article (comfortable reading, sentence
|
||
// highlighting) and the original PDF page (the visual source of truth). Every
|
||
// block carries page + bbox, so either view can jump to the other.
|
||
(function (root) {
|
||
'use strict';
|
||
|
||
const MAG = root.TTVC = root.TTVC || {};
|
||
const state = {
|
||
docs: [],
|
||
doc: null, // { id, title, issue, ingest, ... }
|
||
articles: [],
|
||
layout: null, // { page_count, pages[], blocks[] }
|
||
article: null, // the article being read or reviewed
|
||
sentences: [], // [{ text, blockId, page, bbox }]
|
||
images: [], // current article's figures, in reading order
|
||
view: 'library', // library | contents | review | read
|
||
pane: 'reflow', // reflow | pdf
|
||
playing: false,
|
||
cancel: false,
|
||
idx: 0, // current sentence
|
||
audio: null,
|
||
voices: [],
|
||
podcast: null,
|
||
queue: [], // article ids for "play all" (empty = not queued)
|
||
queueIndex: -1,
|
||
driving: false, // large-control, minimal-interaction view
|
||
karaoke: true, // word-level highlighting (approximate, see estimateWordTimings)
|
||
};
|
||
MAG.magazine = state;
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g,
|
||
(c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||
|
||
function say(msg, kind) { if (typeof toast === 'function') toast(msg, kind || ''); }
|
||
|
||
async function api(path, opts) {
|
||
const r = await fetch(path, opts);
|
||
if (!r.ok) {
|
||
let detail = r.statusText;
|
||
try { detail = (await r.json()).detail || detail; } catch (_) {}
|
||
throw new Error(detail);
|
||
}
|
||
const type = r.headers.get('content-type') || '';
|
||
return type.includes('json') ? r.json() : r;
|
||
}
|
||
|
||
function fmtDuration(seconds) {
|
||
const s = Math.max(0, Math.round(seconds || 0));
|
||
if (s < 60) return s + ' sec';
|
||
const m = Math.round(s / 60);
|
||
return m < 60 ? m + ' min' : Math.floor(m / 60) + ' h ' + (m % 60) + ' min';
|
||
}
|
||
|
||
function fmtPages(pages) {
|
||
if (!pages || !pages.length) return '—';
|
||
if (pages.length === 1) return 'p. ' + pages[0];
|
||
// Non-contiguous page lists are the norm once a feature jumps, and showing
|
||
// "18–88" for pages [18, 88] would misdescribe it as a 70-page article.
|
||
const runs = [];
|
||
let start = pages[0], prev = pages[0];
|
||
for (let i = 1; i <= pages.length; i++) {
|
||
if (pages[i] === prev + 1) { prev = pages[i]; continue; }
|
||
runs.push(start === prev ? String(start) : start + '–' + prev);
|
||
start = prev = pages[i];
|
||
}
|
||
return 'pp. ' + runs.join(', ');
|
||
}
|
||
|
||
// ── Library ──────────────────────────────────────────────────────────────────
|
||
|
||
async function magLoadLibrary() {
|
||
const data = await api('/api/reader/docs');
|
||
state.docs = (data.docs || []).filter((d) => d.kind === 'magazine');
|
||
renderLibrary();
|
||
}
|
||
|
||
function renderLibrary() {
|
||
const host = $('mag-library-list');
|
||
if (!host) return;
|
||
if (!state.docs.length) {
|
||
host.innerHTML =
|
||
'<p class="muted" style="padding:18px 0">No magazines yet. Add one to get started — ' +
|
||
'upload a PDF and the articles are detected for you.</p>';
|
||
return;
|
||
}
|
||
host.innerHTML = state.docs.map((d) => {
|
||
const ing = d.ingest || {};
|
||
const badge = ing.status === 'done'
|
||
? '<span class="mag-pill ok">' + (ing.articles || 0) + ' articles</span>'
|
||
: ing.status === 'running' ? '<span class="mag-pill warn">ingesting…</span>'
|
||
: ing.status === 'failed' ? '<span class="mag-pill bad">failed</span>'
|
||
: '<span class="mag-pill">not ingested</span>';
|
||
return '<button type="button" class="mag-card" onclick="magOpen(\'' + d.id + '\')">' +
|
||
'<span class="mag-card-title">' + esc(d.title || 'Untitled') + '</span>' +
|
||
'<span class="mag-card-sub">' + esc(d.issue || '') + '</span>' +
|
||
badge + '</button>';
|
||
}).join('');
|
||
}
|
||
|
||
// ── Add-magazine dropzone (mirrors reader.js's setupReaderDropzone) ─────────
|
||
const MAG_DROPZONE_DEFAULT_NOTE = 'Scanned issues work too — pages without selectable text are read with OCR.';
|
||
|
||
function magShowDroppedFile(file) {
|
||
const noteEl = $('mag-dropzone-note');
|
||
if (noteEl) noteEl.textContent = file ? file.name : MAG_DROPZONE_DEFAULT_NOTE;
|
||
}
|
||
|
||
let _magDropGuardInstalled = false;
|
||
|
||
function setupMagDropzone() {
|
||
const zone = $('mag-dropzone');
|
||
const input = $('mag-new-file');
|
||
if (!zone || !input) return;
|
||
|
||
// A page-wide safety net: if a drop ever lands outside the zone (or the
|
||
// zone's own handler below fails to intercept it for any reason), the
|
||
// browser's native behaviour is to navigate to/open the dropped file --
|
||
// confirmed live as exactly what happened before this existed. Installed
|
||
// once regardless of which section is active, since a stray drop can land
|
||
// anywhere on the page.
|
||
if (!_magDropGuardInstalled) {
|
||
_magDropGuardInstalled = true;
|
||
window.addEventListener('dragover', (e) => { e.preventDefault(); });
|
||
window.addEventListener('drop', (e) => { e.preventDefault(); });
|
||
}
|
||
|
||
if (zone.dataset.magDropzoneWired) return;
|
||
zone.dataset.magDropzoneWired = '1';
|
||
|
||
// dragenter AND dragover both need preventDefault() -- some browsers only
|
||
// arm the element as a valid drop target once dragenter itself has been
|
||
// cancelled, not just the dragover events that follow it. Not gated on
|
||
// dataTransfer.types: during a real OS file drag, Chromium does not
|
||
// always populate that list synchronously on every one of these events,
|
||
// and gating on it here (confirmed live) silently skipped preventDefault
|
||
// often enough that neither the hover highlight nor the drop interception
|
||
// ever fired -- the browser fell through to opening the file itself.
|
||
const armDropTarget = (e) => { e.preventDefault(); zone.classList.add('dragover'); };
|
||
zone.addEventListener('dragenter', armDropTarget);
|
||
zone.addEventListener('dragover', armDropTarget);
|
||
zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
|
||
zone.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
zone.classList.remove('dragover');
|
||
const file = e.dataTransfer?.files?.[0];
|
||
if (!file) return;
|
||
if (file.type !== 'application/pdf' && !/\.pdf$/i.test(file.name)) {
|
||
return say('Only PDF files are supported', 'err');
|
||
}
|
||
// Route the dropped file through the same hidden <input> magCreate()
|
||
// already reads, so drag-and-drop and "Choose file" share one code path.
|
||
const dt = new DataTransfer();
|
||
dt.items.add(file);
|
||
input.files = dt.files;
|
||
magShowDroppedFile(file);
|
||
});
|
||
input.addEventListener('change', () => magShowDroppedFile(input.files?.[0]));
|
||
}
|
||
|
||
async function magCreate() {
|
||
const title = ($('mag-new-title')?.value || '').trim();
|
||
const issue = ($('mag-new-issue')?.value || '').trim();
|
||
const file = $('mag-new-file')?.files?.[0];
|
||
if (!title) return say('Give the magazine a title', 'err');
|
||
if (!file) return say('Choose or drop the PDF', 'err');
|
||
try {
|
||
const { id } = await api('/api/magazine/docs', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ title, issue }),
|
||
});
|
||
await api('/api/reader/docs/' + id + '/source?ext=pdf', { method: 'PUT', body: file });
|
||
say('Magazine added — starting ingestion', 'ok');
|
||
if ($('mag-new-title')) $('mag-new-title').value = '';
|
||
if ($('mag-new-issue')) $('mag-new-issue').value = '';
|
||
if ($('mag-new-file')) $('mag-new-file').value = '';
|
||
magShowDroppedFile(null);
|
||
await magOpen(id);
|
||
await magIngest();
|
||
} catch (e) {
|
||
say('Could not add magazine: ' + e.message, 'err');
|
||
}
|
||
}
|
||
|
||
// ── Ingestion ────────────────────────────────────────────────────────────────
|
||
|
||
async function magOpen(docId) {
|
||
try {
|
||
state.doc = await api('/api/reader/docs/' + docId);
|
||
state.doc.id = docId;
|
||
await magRefreshArticles();
|
||
magShow('contents');
|
||
if ((state.doc.ingest || {}).status === 'running') pollIngest();
|
||
} catch (e) {
|
||
say('Could not open magazine: ' + e.message, 'err');
|
||
}
|
||
}
|
||
|
||
async function magIngest() {
|
||
if (!state.doc) return;
|
||
try {
|
||
await api('/api/magazine/' + state.doc.id + '/ingest', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({}),
|
||
});
|
||
pollIngest();
|
||
} catch (e) {
|
||
say('Ingestion could not start: ' + e.message, 'err');
|
||
}
|
||
}
|
||
|
||
async function pollIngest() {
|
||
const bar = $('mag-ingest-status');
|
||
if (bar) bar.hidden = false;
|
||
for (;;) {
|
||
let data;
|
||
try {
|
||
data = await api('/api/magazine/' + state.doc.id + '/ingest/status');
|
||
} catch (_) { break; }
|
||
const ing = data.ingest || {};
|
||
const detail = (data.job || {}).detail || '';
|
||
if (bar) {
|
||
bar.innerHTML = ing.status === 'running'
|
||
? '<span class="mdi mdi-progress-clock"></span> ' + esc(detail || 'Analysing…')
|
||
: ing.status === 'failed'
|
||
? '<span class="mdi mdi-alert"></span> Ingestion failed: ' + esc(ing.error || '')
|
||
: '<span class="mdi mdi-check"></span> ' + (ing.articles || 0) + ' articles detected';
|
||
}
|
||
if (ing.status !== 'running') {
|
||
if (ing.status === 'done') await magRefreshArticles();
|
||
break;
|
||
}
|
||
await new Promise((r) => setTimeout(r, 2000));
|
||
}
|
||
}
|
||
|
||
async function magRefreshArticles() {
|
||
if (!state.doc) return;
|
||
try {
|
||
const data = await api('/api/magazine/' + state.doc.id + '/articles');
|
||
state.articles = data.articles || [];
|
||
state.doc.progress = data.progress || {};
|
||
state.doc.podcast = data.podcast || { hosts: [] };
|
||
state.doc.default_voice = data.default_voice || '';
|
||
} catch (_) {
|
||
state.articles = [];
|
||
}
|
||
renderContents();
|
||
}
|
||
|
||
// ── Contents tree ────────────────────────────────────────────────────────────
|
||
|
||
function confidenceLabel(c) {
|
||
if (c >= 0.85) return { cls: 'ok', text: Math.round(c * 100) + '% · listed in contents' };
|
||
if (c >= 0.5) return { cls: 'warn', text: Math.round(c * 100) + '% · from headline — check boundaries' };
|
||
return { cls: 'bad', text: Math.round(c * 100) + '% · little body copy — likely not an article' };
|
||
}
|
||
|
||
function renderContents() {
|
||
const host = $('mag-contents');
|
||
if (!host) return;
|
||
const title = $('mag-doc-title');
|
||
if (title && state.doc) {
|
||
title.textContent = (state.doc.title || 'Magazine') +
|
||
(state.doc.issue ? ' — ' + state.doc.issue : '');
|
||
}
|
||
if (!state.articles.length) {
|
||
host.innerHTML = '<p class="muted">No articles yet. Run ingestion to detect them.</p>';
|
||
return;
|
||
}
|
||
const bySection = new Map();
|
||
state.articles.forEach((a) => {
|
||
const key = a.section || 'Articles';
|
||
if (!bySection.has(key)) bySection.set(key, []);
|
||
bySection.get(key).push(a);
|
||
});
|
||
|
||
let html = '';
|
||
bySection.forEach((arts, section) => {
|
||
html += '<div class="mag-section"><h4>' + esc(section) + '</h4><ul class="mag-toc">';
|
||
arts.forEach((a) => {
|
||
const conf = confidenceLabel(a.confidence);
|
||
const done = a.status === 'approved';
|
||
const progress = (state.doc.progress || {})[a.id];
|
||
html += '<li class="mag-toc-row' + (done ? ' is-approved' : '') + '">' +
|
||
'<div class="mag-toc-main">' +
|
||
'<span class="mag-toc-title">' + esc(a.title || 'Untitled') + '</span>' +
|
||
(a.author ? '<span class="mag-toc-by">by ' + esc(a.author) + '</span>' : '') +
|
||
'</div>' +
|
||
'<div class="mag-toc-meta">' +
|
||
'<span>' + fmtPages(a.pages) + '</span>' +
|
||
'<span>' + fmtDuration(a.estimated_seconds) + '</span>' +
|
||
'<span class="mag-pill ' + conf.cls + '" title="' + esc(conf.text) + '">' +
|
||
Math.round(a.confidence * 100) + '%</span>' +
|
||
'<span class="mag-pill ' + (done ? 'ok' : '') + '">' +
|
||
(done ? 'approved' : a.status === 'rejected' ? 'rejected' : 'needs review') + '</span>' +
|
||
'</div>' +
|
||
'<div class="mag-toc-actions">' +
|
||
'<button type="button" class="btn-sm" onclick="magReview(\'' + a.id + '\')">Review</button>' +
|
||
(done
|
||
? '<button type="button" class="btn-sm primary" onclick="magRead(\'' + a.id + '\')">' +
|
||
(progress ? 'Continue' : 'Listen') + '</button>'
|
||
: '') +
|
||
'</div></li>';
|
||
});
|
||
html += '</ul></div>';
|
||
});
|
||
host.innerHTML = html;
|
||
}
|
||
|
||
// ── Review (Stage D) ─────────────────────────────────────────────────────────
|
||
|
||
async function magReview(articleId) {
|
||
const article = state.articles.find((a) => a.id === articleId);
|
||
if (!article) return;
|
||
state.article = article;
|
||
await ensureLayout();
|
||
magShow('review');
|
||
renderReview();
|
||
}
|
||
|
||
async function ensureLayout() {
|
||
if (state.layout) return;
|
||
try {
|
||
state.layout = await api('/api/magazine/' + state.doc.id + '/layout');
|
||
} catch (e) {
|
||
say('Could not load layout: ' + e.message, 'err');
|
||
state.layout = { blocks: [], pages: [], page_count: 0 };
|
||
}
|
||
}
|
||
|
||
function blocksForPages(pages) {
|
||
const want = new Set(pages || []);
|
||
return (state.layout.blocks || [])
|
||
.filter((b) => want.has(b.page))
|
||
.sort((a, b) => a.page - b.page || a.reading_order - b.reading_order);
|
||
}
|
||
|
||
function renderReview() {
|
||
const host = $('mag-review');
|
||
const a = state.article;
|
||
if (!host || !a) return;
|
||
const included = new Set(a.blocks || []);
|
||
// Offer neighbouring pages too, so a boundary that started a page late can be
|
||
// corrected without leaving the screen.
|
||
const span = a.pages.length
|
||
? Array.from(new Set(a.pages.concat([a.pages[0] - 1, a.pages[a.pages.length - 1] + 1])))
|
||
.filter((p) => p >= 1 && p <= (state.layout.page_count || 0)).sort((x, y) => x - y)
|
||
: [];
|
||
const conf = confidenceLabel(a.confidence);
|
||
|
||
let html =
|
||
'<div class="mag-review-head">' +
|
||
'<label>Title<input id="mag-rev-title" type="text" value="' + esc(a.title) + '"></label>' +
|
||
'<label>Author<input id="mag-rev-author" type="text" value="' + esc(a.author) + '"></label>' +
|
||
'<div class="mag-pill ' + conf.cls + '">' + esc(conf.text) + '</div>' +
|
||
'</div>' +
|
||
'<p class="muted">Untick anything that is not part of this article — a sidebar, an advert, ' +
|
||
'or a neighbouring piece. Only ticked text is read aloud.</p>';
|
||
|
||
let currentPage = null;
|
||
html += '<div class="mag-blocks">';
|
||
blocksForPages(span).forEach((b) => {
|
||
if (b.page !== currentPage) {
|
||
currentPage = b.page;
|
||
html += '<h5 class="mag-page-head">Page ' + b.page +
|
||
' <button type="button" class="btn-sm" onclick="magPeekPage(' + b.page + ')">' +
|
||
'Show original</button></h5>';
|
||
}
|
||
const narratable = ['title', 'deck', 'byline', 'body'].includes(b.type);
|
||
const on = included.has(b.id);
|
||
html += '<label class="mag-block' + (narratable ? '' : ' is-aux') + '">' +
|
||
'<input type="checkbox" ' + (on ? 'checked' : '') + ' data-block="' + esc(b.id) + '">' +
|
||
'<span class="mag-block-type">' + esc(b.type) + '</span>' +
|
||
'<span class="mag-block-text">' + esc(b.text.slice(0, 220)) +
|
||
(b.text.length > 220 ? '…' : '') + '</span></label>';
|
||
});
|
||
html += '</div>' +
|
||
'<div class="mag-review-foot">' +
|
||
'<button type="button" class="btn" onclick="magShow(\'contents\')">Back to contents</button>' +
|
||
'<button type="button" class="btn" onclick="magSetStatus(\'rejected\')">Not an article</button>' +
|
||
'<button type="button" class="btn primary" onclick="magApprove()">Approve</button>' +
|
||
'</div>';
|
||
host.innerHTML = html;
|
||
}
|
||
|
||
function selectedBlockIds() {
|
||
return Array.from(document.querySelectorAll('#mag-review input[data-block]:checked'))
|
||
.map((el) => el.dataset.block);
|
||
}
|
||
|
||
async function magApprove() {
|
||
const a = state.article;
|
||
if (!a) return;
|
||
const blocks = selectedBlockIds();
|
||
if (!blocks.length) return say('Tick at least one block before approving', 'err');
|
||
try {
|
||
const updated = await api('/api/magazine/' + state.doc.id + '/articles/' + a.id, {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
blocks,
|
||
status: 'approved',
|
||
title: ($('mag-rev-title')?.value || a.title).trim(),
|
||
author: ($('mag-rev-author')?.value || a.author).trim(),
|
||
}),
|
||
});
|
||
Object.assign(a, updated);
|
||
say('Approved — ready to listen', 'ok');
|
||
await magRefreshArticles();
|
||
magShow('contents');
|
||
} catch (e) {
|
||
say('Could not approve: ' + e.message, 'err');
|
||
}
|
||
}
|
||
|
||
async function magSetStatus(status) {
|
||
const a = state.article;
|
||
if (!a) return;
|
||
try {
|
||
const updated = await api('/api/magazine/' + state.doc.id + '/articles/' + a.id, {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ status }),
|
||
});
|
||
Object.assign(a, updated);
|
||
await magRefreshArticles();
|
||
magShow('contents');
|
||
} catch (e) {
|
||
say('Could not update: ' + e.message, 'err');
|
||
}
|
||
}
|
||
|
||
// ── Reading: sentences, both views ───────────────────────────────────────────
|
||
|
||
// Sentence splitting keeps each piece tied to its source block, so highlighting
|
||
// in the reflowed view can drive the page shown in the PDF view.
|
||
function splitSentences(blocks) {
|
||
const out = [];
|
||
blocks.forEach((b) => {
|
||
const parts = String(b.text || '')
|
||
.split(/(?<=[.!?…])\s+(?=[A-ZÀ-Ü»„"'‘])/)
|
||
.map((s) => s.trim()).filter(Boolean);
|
||
(parts.length ? parts : [b.text]).forEach((text) => {
|
||
if (text && text.trim()) {
|
||
out.push({
|
||
text: text.trim(), blockId: b.id, page: b.page, bbox: b.bbox, type: b.type,
|
||
// Used to pick "the image reached so far" during playback (see
|
||
// currentImageIndex) -- the backend already computes this per
|
||
// block relative to the whole page, not just this article.
|
||
readingOrder: b.reading_order || 0,
|
||
words: text.trim().split(/\s+/).filter(Boolean),
|
||
});
|
||
}
|
||
});
|
||
});
|
||
return out;
|
||
}
|
||
|
||
// The current article's figures, in reading order, resolved from the full
|
||
// layout (fetched once) filtered to this article's own image ids. Kept
|
||
// separate from state.sentences because an image has no sentence of its
|
||
// own -- it is matched to "the most recent sentence at or before it".
|
||
function articleImages(article) {
|
||
const ids = new Set(article.images || []);
|
||
return (state.layout.images || [])
|
||
.filter((img) => ids.has(img.id))
|
||
.sort((a, b) => (a.reading_order || 0) - (b.reading_order || 0));
|
||
}
|
||
|
||
// The image to show once sentence `i` has been reached: the last image
|
||
// whose position in the page's reading order is at or before that
|
||
// sentence's own block. Falls back to the first image before any text has
|
||
// caught up to it, so a lead photo is not left blank at the very start.
|
||
function currentImageIndex(i) {
|
||
if (!state.images.length) return -1;
|
||
const order = (state.sentences[i] || {}).readingOrder || 0;
|
||
let found = -1;
|
||
for (let k = 0; k < state.images.length; k++) {
|
||
if ((state.images[k].reading_order || 0) <= order) found = k;
|
||
else break;
|
||
}
|
||
return found === -1 ? 0 : found;
|
||
}
|
||
|
||
function renderCurrentImage(i) {
|
||
const host = $('mag-read-image');
|
||
if (!host) return;
|
||
const idx = currentImageIndex(i);
|
||
if (idx < 0) { host.hidden = true; return; }
|
||
const img = state.images[idx];
|
||
if (state._shownImageId === img.id) { host.hidden = false; return; }
|
||
state._shownImageId = img.id;
|
||
host.hidden = false;
|
||
host.innerHTML = '<img src="/api/magazine/' + state.doc.id + '/images/' + encodeURIComponent(img.filename) +
|
||
'" alt="Figure from page ' + img.page + '" loading="lazy">';
|
||
}
|
||
|
||
async function magRead(articleId, opts) {
|
||
const a = state.articles.find((x) => x.id === articleId);
|
||
if (!a) return;
|
||
state.article = a;
|
||
await ensureLayout();
|
||
try {
|
||
const data = await api('/api/magazine/' + state.doc.id + '/articles/' + a.id + '/text?captions=' +
|
||
($('mag-read-captions')?.checked ? 1 : 0));
|
||
state.sentences = splitSentences(data.blocks || []);
|
||
} catch (e) {
|
||
return say('Could not load article text: ' + e.message, 'err');
|
||
}
|
||
state.images = articleImages(a);
|
||
state._shownImageId = null;
|
||
const forceStart = opts && opts.fromStart;
|
||
const saved = !forceStart && (state.doc.progress || {})[a.id];
|
||
state.idx = saved && saved.sentence < state.sentences.length ? saved.sentence : 0;
|
||
magShow('read');
|
||
renderArticle();
|
||
loadPodcastIfAny();
|
||
}
|
||
|
||
function renderArticle() {
|
||
const host = $('mag-article');
|
||
const a = state.article;
|
||
if (!host || !a) return;
|
||
$('mag-read-title').textContent = a.title || 'Untitled';
|
||
$('mag-read-by').textContent = a.author ? 'By ' + a.author : '';
|
||
$('mag-read-pages').textContent = fmtPages(a.pages);
|
||
|
||
host.innerHTML = state.sentences.map((s, i) => {
|
||
const tag = s.type === 'title' ? 'h2' : s.type === 'deck' ? 'p class="mag-deck"'
|
||
: s.type === 'byline' ? 'p class="mag-byline"' : s.type === 'caption'
|
||
? 'p class="mag-caption"' : 'span';
|
||
const open = tag.split(' ')[0];
|
||
// Each word gets its own span so playback can highlight it individually
|
||
// (see estimateWordTimings) -- sentence-level highlighting alone doesn't
|
||
// need this, but word-level does and this markup serves both.
|
||
const wordsHtml = s.words.map((w, j) =>
|
||
'<span class="mag-w" data-w="' + j + '">' + esc(w) + '</span>').join(' ');
|
||
return '<' + tag + ' class="mag-s' + (open === 'span' ? '' : '') + '" data-i="' + i + '" ' +
|
||
'onclick="magSeek(' + i + ')">' + wordsHtml + '</' + open + '> ';
|
||
}).join('');
|
||
highlight(state.idx);
|
||
}
|
||
|
||
function highlight(i) {
|
||
document.querySelectorAll('#mag-article [data-i]').forEach((el) => {
|
||
el.classList.toggle('is-current', Number(el.dataset.i) === i);
|
||
});
|
||
clearWordHighlight();
|
||
const el = document.querySelector('#mag-article [data-i="' + i + '"]');
|
||
if (el && !prefersReducedMotion()) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
||
else if (el) el.scrollIntoView({ block: 'center' });
|
||
const s = state.sentences[i];
|
||
if (s && state.pane === 'pdf') showPage(s.page, s.bbox);
|
||
renderCurrentImage(i);
|
||
const counter = $('mag-read-progress');
|
||
if (counter) counter.textContent = (i + 1) + ' / ' + state.sentences.length;
|
||
const qText = state.queue.length ? 'Article ' + (state.queueIndex + 1) + ' / ' + state.queue.length : '';
|
||
['mag-queue-progress', 'mag-queue-progress-2'].forEach((id) => {
|
||
const el = $(id);
|
||
if (el) el.textContent = qText;
|
||
});
|
||
}
|
||
|
||
function clearWordHighlight() {
|
||
document.querySelectorAll('#mag-article .mag-w.is-current').forEach((el) => el.classList.remove('is-current'));
|
||
}
|
||
|
||
// ── Word-level highlighting (approximate) ────────────────────────────────
|
||
// No forced-alignment or TTS timestamp source exists in this pipeline, so
|
||
// per-word timing is ESTIMATED, not measured: each word's share of the
|
||
// sentence's real (measured) audio duration is proportional to its own
|
||
// character length, with a small fixed share added per word so short words
|
||
// are not given an unrealistically instant duration. This is a common
|
||
// karaoke approximation, not true alignment -- it can drift on sentences
|
||
// with heavy punctuation-driven pauses.
|
||
function estimateWordTimings(words, totalSeconds) {
|
||
if (!words.length || !totalSeconds) return [];
|
||
const FIXED = 0.6; // arbitrary units, shifts weight toward evening out short words
|
||
const weights = words.map((w) => Math.max(1, w.replace(/[.,!?;:"'()«»„"]/g, '').length) + FIXED);
|
||
const total = weights.reduce((a, b) => a + b, 0);
|
||
let t = 0;
|
||
return weights.map((w) => {
|
||
const dur = totalSeconds * (w / total);
|
||
const start = t;
|
||
t += dur;
|
||
return { start, end: t };
|
||
});
|
||
}
|
||
|
||
function highlightWord(sentenceIdx, wordIdx) {
|
||
const sentenceEl = document.querySelector('#mag-article [data-i="' + sentenceIdx + '"]');
|
||
if (!sentenceEl) return;
|
||
sentenceEl.querySelectorAll('.mag-w').forEach((el) => {
|
||
el.classList.toggle('is-current', Number(el.dataset.w) === wordIdx);
|
||
});
|
||
}
|
||
|
||
function prefersReducedMotion() {
|
||
try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }
|
||
catch (_) { return false; }
|
||
}
|
||
|
||
function magSeek(i) {
|
||
state.idx = Math.max(0, Math.min(state.sentences.length - 1, i));
|
||
highlight(state.idx);
|
||
saveProgress();
|
||
}
|
||
|
||
function magSetPane(pane) {
|
||
state.pane = pane;
|
||
const reflow = $('mag-pane-reflow'), pdf = $('mag-pane-pdf');
|
||
if (reflow) reflow.hidden = pane !== 'reflow';
|
||
if (pdf) pdf.hidden = pane !== 'pdf';
|
||
document.querySelectorAll('[data-mag-pane]').forEach((b) => {
|
||
const on = b.dataset.magPane === pane;
|
||
b.classList.toggle('active', on);
|
||
b.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||
});
|
||
if (pane === 'pdf') {
|
||
const s = state.sentences[state.idx];
|
||
if (s) showPage(s.page, s.bbox);
|
||
}
|
||
}
|
||
|
||
function showPage(page, bbox) {
|
||
const img = $('mag-page-img');
|
||
const box = $('mag-page-box');
|
||
if (!img) return;
|
||
const src = '/api/magazine/' + state.doc.id + '/pages/' + page;
|
||
if (img.getAttribute('src') !== src) img.setAttribute('src', src);
|
||
img.setAttribute('alt', 'Page ' + page + ' of ' + (state.doc.title || 'the magazine'));
|
||
const label = $('mag-page-label');
|
||
if (label) label.textContent = 'Page ' + page;
|
||
if (!box || !bbox) return;
|
||
// The layout stores PDF user-space units; the rendered PNG is a different
|
||
// size, so scale by the page dimensions rather than assuming they match.
|
||
const meta = (state.layout.pages || []).find((p) => p.page === page);
|
||
if (!meta) { box.hidden = true; return; }
|
||
box.hidden = false;
|
||
box.style.left = (bbox[0] / meta.width * 100) + '%';
|
||
box.style.top = (bbox[1] / meta.height * 100) + '%';
|
||
box.style.width = (bbox[2] / meta.width * 100) + '%';
|
||
box.style.height = (bbox[3] / meta.height * 100) + '%';
|
||
}
|
||
|
||
function magPeekPage(page) {
|
||
magShow('read');
|
||
magSetPane('pdf');
|
||
showPage(page, null);
|
||
}
|
||
|
||
// ── Playback ─────────────────────────────────────────────────────────────────
|
||
|
||
async function magPlay() {
|
||
if (state.playing) return magPause();
|
||
const voice = ($('mag-voice')?.value || state.doc.default_voice || '').trim();
|
||
if (!voice) return say('Pick a narrator voice first', 'err');
|
||
state.playing = true;
|
||
state.cancel = false;
|
||
syncPlayButton();
|
||
let finishedArticle = false;
|
||
try {
|
||
while (state.idx < state.sentences.length && !state.cancel) {
|
||
highlight(state.idx);
|
||
const sentence = state.sentences[state.idx];
|
||
let blob;
|
||
try {
|
||
blob = await fetchTtsPreviewBlob(voice, sentence.text, 'mp3');
|
||
} catch (e) {
|
||
say('Synthesis failed: ' + e.message, 'err');
|
||
break;
|
||
}
|
||
if (state.cancel) break;
|
||
await playBlob(blob, sentence);
|
||
if (state.cancel) break;
|
||
state.idx += 1;
|
||
saveProgress();
|
||
}
|
||
finishedArticle = state.idx >= state.sentences.length && !state.cancel;
|
||
} finally {
|
||
state.playing = false;
|
||
state.cancel = false;
|
||
syncPlayButton();
|
||
}
|
||
if (finishedArticle) {
|
||
state.idx = state.sentences.length - 1;
|
||
if (state.queue.length && state.queueIndex < state.queue.length - 1) {
|
||
// Play-all: move straight to the next approved article rather than
|
||
// stopping -- the whole point of a queue is not touching the screen
|
||
// between articles.
|
||
state.queueIndex += 1;
|
||
await magRead(state.queue[state.queueIndex], { fromStart: true });
|
||
magPlay();
|
||
} else {
|
||
state.queue = [];
|
||
state.queueIndex = -1;
|
||
say('Article finished', 'ok');
|
||
}
|
||
}
|
||
}
|
||
|
||
function playBlob(blob, sentence) {
|
||
return new Promise((resolve) => {
|
||
const url = URL.createObjectURL(blob);
|
||
const audio = new Audio(url);
|
||
state.audio = audio;
|
||
let timings = null;
|
||
const onTimeUpdate = () => {
|
||
if (!state.karaoke || !sentence || !sentence.words.length) return;
|
||
if (!timings) {
|
||
if (!audio.duration || !isFinite(audio.duration)) return;
|
||
timings = estimateWordTimings(sentence.words, audio.duration);
|
||
}
|
||
const t = audio.currentTime;
|
||
const wi = timings.findIndex((w) => t >= w.start && t < w.end);
|
||
if (wi !== -1) highlightWord(state.idx, wi);
|
||
};
|
||
if (state.karaoke) audio.addEventListener('timeupdate', onTimeUpdate);
|
||
const done = () => {
|
||
audio.removeEventListener('timeupdate', onTimeUpdate);
|
||
URL.revokeObjectURL(url);
|
||
state.audio = null;
|
||
resolve();
|
||
};
|
||
audio.onended = done;
|
||
audio.onerror = done;
|
||
audio.play().catch(done);
|
||
});
|
||
}
|
||
|
||
// ── Play all approved articles in sequence ──────────────────────────────
|
||
async function magPlayAll() {
|
||
const ids = state.articles.filter((a) => a.status === 'approved').map((a) => a.id);
|
||
if (!ids.length) return say('Approve at least one article first', 'err');
|
||
state.queue = ids;
|
||
state.queueIndex = 0;
|
||
await magRead(ids[0], { fromStart: true });
|
||
magPlay();
|
||
}
|
||
|
||
function magStopQueue() {
|
||
state.queue = [];
|
||
state.queueIndex = -1;
|
||
['mag-queue-progress', 'mag-queue-progress-2'].forEach((id) => {
|
||
const el = $(id);
|
||
if (el) el.textContent = '';
|
||
});
|
||
}
|
||
|
||
async function magQueueNext() {
|
||
if (!state.queue.length || state.queueIndex >= state.queue.length - 1) return;
|
||
const wasPlaying = state.playing;
|
||
if (wasPlaying) magPause();
|
||
state.queueIndex += 1;
|
||
await magRead(state.queue[state.queueIndex], { fromStart: true });
|
||
if (wasPlaying) magPlay();
|
||
}
|
||
|
||
function magPause() {
|
||
state.cancel = true;
|
||
if (state.audio) { try { state.audio.pause(); } catch (_) {} }
|
||
state.playing = false;
|
||
syncPlayButton();
|
||
}
|
||
|
||
function syncPlayButton() {
|
||
const btn = $('mag-play');
|
||
if (btn) {
|
||
btn.innerHTML = state.playing
|
||
? '<span class="mdi mdi-pause"></span> Pause'
|
||
: '<span class="mdi mdi-play"></span> Listen';
|
||
btn.setAttribute('aria-label', state.playing ? 'Pause narration' : 'Play narration');
|
||
}
|
||
if (state.driving) syncDrivingPlayButton();
|
||
}
|
||
|
||
let _saveTimer = null;
|
||
function saveProgress() {
|
||
if (!state.doc || !state.article) return;
|
||
clearTimeout(_saveTimer);
|
||
_saveTimer = setTimeout(() => {
|
||
fetch('/api/magazine/' + state.doc.id + '/progress', {
|
||
method: 'PATCH',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ article: state.article.id, sentence: state.idx }),
|
||
}).catch(() => {});
|
||
}, 800);
|
||
}
|
||
|
||
// ── Podcast mode ─────────────────────────────────────────────────────────────
|
||
|
||
async function magLoadVoices() {
|
||
try {
|
||
const data = await api('/api/voices');
|
||
state.voices = data.voices || data || [];
|
||
} catch (_) { state.voices = []; }
|
||
const options = '<option value="">— pick a voice —</option>' +
|
||
state.voices.map((v) => {
|
||
const id = v.id || v.name || v;
|
||
return '<option value="' + esc(id) + '">' + esc(v.name || id) + '</option>';
|
||
}).join('');
|
||
['mag-voice', 'mag-host-a', 'mag-host-b', 'mag-host-c'].forEach((id) => {
|
||
const el = $(id);
|
||
if (el) {
|
||
const keep = el.value;
|
||
el.innerHTML = options;
|
||
if (keep) el.value = keep;
|
||
}
|
||
});
|
||
const def = state.doc && state.doc.default_voice;
|
||
if (def && $('mag-voice') && !$('mag-voice').value) $('mag-voice').value = def;
|
||
}
|
||
|
||
async function loadPodcastIfAny() {
|
||
state.podcast = null;
|
||
renderPodcast();
|
||
// has_podcast comes from the articles listing so an article that never had
|
||
// a script generated skips the request entirely, rather than a 404 on
|
||
// every open.
|
||
if (!state.article || !state.article.has_podcast) return;
|
||
try {
|
||
state.podcast = await api('/api/magazine/' + state.doc.id + '/articles/' +
|
||
state.article.id + '/podcast');
|
||
} catch (_) { /* generated flag was stale — treat as none */ }
|
||
renderPodcast();
|
||
}
|
||
|
||
async function magGeneratePodcast() {
|
||
const a = state.article;
|
||
if (!a) return;
|
||
if (a.status !== 'approved') {
|
||
return say('Approve the article first — unreviewed boundaries may include an advert', 'err');
|
||
}
|
||
const hosts = ['mag-host-a', 'mag-host-b', 'mag-host-c']
|
||
.map((id) => ($(id)?.value || '').trim())
|
||
.filter(Boolean)
|
||
.map((voice, i) => ({ voice, name: ($('mag-host-name-' + 'abc'[i])?.value || '').trim() }));
|
||
if (hosts.length < 2) return say('Pick at least two host voices', 'err');
|
||
|
||
const btn = $('mag-podcast-gen');
|
||
if (btn) { btn.disabled = true; btn.textContent = 'Writing script…'; }
|
||
try {
|
||
state.podcast = await api('/api/magazine/' + state.doc.id + '/articles/' + a.id + '/podcast', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ hosts }),
|
||
});
|
||
a.has_podcast = true;
|
||
say('Podcast script ready', 'ok');
|
||
renderPodcast();
|
||
} catch (e) {
|
||
say('Could not generate: ' + e.message, 'err');
|
||
} finally {
|
||
if (btn) { btn.disabled = false; btn.textContent = 'Generate script'; }
|
||
}
|
||
}
|
||
|
||
function renderPodcast() {
|
||
const host = $('mag-podcast-script');
|
||
if (!host) return;
|
||
if (!state.podcast) {
|
||
host.innerHTML = '<p class="muted">No podcast script yet. Pick two or three voices and ' +
|
||
'generate one — the hosts discuss this article for someone who has not read it.</p>';
|
||
const play = $('mag-podcast-play');
|
||
if (play) play.hidden = true;
|
||
return;
|
||
}
|
||
const names = {};
|
||
(state.podcast.hosts || []).forEach((h) => { names[h.label] = h.name || ('Host ' + h.label); });
|
||
host.innerHTML = '<ol class="mag-turns">' + (state.podcast.turns || []).map((t, i) =>
|
||
'<li data-turn="' + i + '"><b>' + esc(names[t.host] || t.host) + '</b> ' +
|
||
esc(t.text) + '</li>').join('') + '</ol>';
|
||
const play = $('mag-podcast-play');
|
||
if (play) play.hidden = false;
|
||
}
|
||
|
||
async function magPlayPodcast() {
|
||
if (state.playing) return magPause();
|
||
if (!state.podcast) return;
|
||
const voiceOf = {};
|
||
(state.podcast.hosts || []).forEach((h) => { voiceOf[h.label] = h.voice; });
|
||
state.playing = true;
|
||
state.cancel = false;
|
||
const btn = $('mag-podcast-play');
|
||
if (btn) btn.textContent = 'Pause';
|
||
try {
|
||
const turns = state.podcast.turns || [];
|
||
for (let i = 0; i < turns.length && !state.cancel; i++) {
|
||
document.querySelectorAll('#mag-podcast-script [data-turn]').forEach((el) => {
|
||
el.classList.toggle('is-current', Number(el.dataset.turn) === i);
|
||
});
|
||
const voice = voiceOf[turns[i].host];
|
||
if (!voice) continue;
|
||
let blob;
|
||
try { blob = await fetchTtsPreviewBlob(voice, turns[i].text, 'mp3'); }
|
||
catch (e) { say('Synthesis failed: ' + e.message, 'err'); break; }
|
||
if (state.cancel) break;
|
||
await playBlob(blob);
|
||
}
|
||
} finally {
|
||
state.playing = false;
|
||
state.cancel = false;
|
||
if (btn) btn.textContent = 'Play podcast';
|
||
}
|
||
}
|
||
|
||
// ── View switching ───────────────────────────────────────────────────────────
|
||
|
||
function magShow(view) {
|
||
state.view = view;
|
||
['library', 'contents', 'review', 'read'].forEach((v) => {
|
||
const el = $('mag-view-' + v);
|
||
if (el) el.hidden = v !== view;
|
||
});
|
||
if (view !== 'read') magPause();
|
||
}
|
||
|
||
function magBackToContents() {
|
||
magPause();
|
||
magStopQueue();
|
||
state.driving = false;
|
||
magShow('contents');
|
||
magRefreshArticles();
|
||
}
|
||
|
||
// ── Driving mode ──────────────────────────────────────────────────────────
|
||
// Large, minimal-interaction controls for listening without looking at the
|
||
// screen (see Manual.md's planned driving-mode behaviour). Reuses whatever
|
||
// is already playing/queued rather than starting its own playback path --
|
||
// entering driving mode does not interrupt an article already in progress.
|
||
function magToggleDriving() {
|
||
state.driving = !state.driving;
|
||
const overlay = $('mag-driving');
|
||
if (overlay) overlay.hidden = !state.driving;
|
||
if (state.driving) renderDriving();
|
||
}
|
||
|
||
function renderDriving() {
|
||
const a = state.article;
|
||
if (!a) return;
|
||
const titleEl = $('mag-driving-title');
|
||
if (titleEl) titleEl.textContent = a.title || 'Untitled';
|
||
const byEl = $('mag-driving-by');
|
||
if (byEl) byEl.textContent = a.author ? 'By ' + a.author : '';
|
||
syncDrivingPlayButton();
|
||
const qEl = $('mag-driving-queue');
|
||
if (qEl) qEl.hidden = !state.queue.length;
|
||
}
|
||
|
||
function syncDrivingPlayButton() {
|
||
const btn = $('mag-driving-play');
|
||
if (!btn) return;
|
||
btn.innerHTML = state.playing
|
||
? '<span class="mdi mdi-pause"></span>'
|
||
: '<span class="mdi mdi-play"></span>';
|
||
btn.setAttribute('aria-label', state.playing ? 'Pause' : 'Play');
|
||
}
|
||
|
||
// ── Boot ─────────────────────────────────────────────────────────────────────
|
||
|
||
function magInit() {
|
||
if (!$('mag-library-list')) return; // section not mounted
|
||
magLoadLibrary();
|
||
magLoadVoices();
|
||
setupMagDropzone();
|
||
magShow('library');
|
||
}
|
||
|
||
root.magOpen = magOpen;
|
||
root.magCreate = magCreate;
|
||
root.magIngest = magIngest;
|
||
root.magReview = magReview;
|
||
root.magApprove = magApprove;
|
||
root.magSetStatus = magSetStatus;
|
||
root.magRead = magRead;
|
||
root.magSeek = magSeek;
|
||
root.magPlay = magPlay;
|
||
root.magPause = magPause;
|
||
root.magSetPane = magSetPane;
|
||
root.magPeekPage = magPeekPage;
|
||
root.magShow = magShow;
|
||
root.magBackToContents = magBackToContents;
|
||
root.magGeneratePodcast = magGeneratePodcast;
|
||
root.magPlayPodcast = magPlayPodcast;
|
||
root.magPlayAll = magPlayAll;
|
||
root.magQueueNext = magQueueNext;
|
||
root.magStopQueue = magStopQueue;
|
||
root.magToggleDriving = magToggleDriving;
|
||
root.magInit = magInit;
|
||
MAG.magazineApi = { load: magLoadLibrary, refresh: magRefreshArticles, splitSentences, fmtPages };
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', magInit);
|
||
} else {
|
||
magInit();
|
||
}
|
||
|
||
})(window);
|