mARTin-B78
5adba6b4c0
Some checks are pending
Test and SonarQube / quality (push) Waiting to run
Split-screen review: the rendered page (left) with a numbered box per detected block, the extracted text (right) with matching numbers. Clicking either side highlights the other. Checkboxes moved from a flat list into this layout without changing their semantics (still gate what gets narrated). "OCR again": reocr_page() forces one page through the configured vision engine again, replacing only that page's blocks -- deliberately does NOT call build_articles(), so an already-approved article is not silently re-grouped. A magazine-level option re-reads every page and re-runs detection (with a confirmation, since that does reset article status). extract_pages() gained force_vision_ocr to skip its quality gate for this case. Building the numbered-box review immediately did what it was built to do -- surfaced a real bug on live production data (real magazine, real scan, not a synthetic fixture): a photo caption at 49.9% of the page width sat in the gutter between two genuinely separate columns and merged them into one, so every block on the page came back column=0 and reading order fell back to pure top-to-bottom, interleaving the two columns' sentences. Fixed two compounding causes: column boundary detection now excludes blocks much wider than the page's median width, and detect_columns' gutter threshold (3.5%) was itself narrower than some real magazine gutters (~2.1% measured) -- lowered to 1.5%. 10 new/updated tests, including one built directly from the real measured page-17 block coordinates that exposed the bug. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1218 lines
47 KiB
JavaScript
1218 lines
47 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 ────────────────────────────────────────────────────────────────
|
||
|
||
// Remembers which magazine was open so a full page reload or the browser's
|
||
// own Back button (which, unlike in-app navigation, tears down all JS state)
|
||
// lands back on it instead of the empty library — confirmed live as the
|
||
// cause of a user re-uploading the same PDF, creating a duplicate under a
|
||
// completely different kind ("book", via Studio/Reader's own import) because
|
||
// the magazine they had been working on appeared to have vanished.
|
||
const MAG_LAST_DOC_KEY = 'ttsvc_mag_last_doc';
|
||
|
||
async function magOpen(docId) {
|
||
try {
|
||
state.doc = await api('/api/reader/docs/' + docId);
|
||
state.doc.id = docId;
|
||
await magRefreshArticles();
|
||
magShow('contents');
|
||
try { localStorage.setItem(MAG_LAST_DOC_KEY, docId); } catch (_) {}
|
||
if ((state.doc.ingest || {}).status === 'running') pollIngest();
|
||
} catch (e) {
|
||
say('Could not open magazine: ' + e.message, 'err');
|
||
try { localStorage.removeItem(MAG_LAST_DOC_KEY); } catch (_) {}
|
||
}
|
||
}
|
||
|
||
function magForgetLastDoc() {
|
||
try { localStorage.removeItem(MAG_LAST_DOC_KEY); } catch (_) {}
|
||
}
|
||
|
||
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');
|
||
}
|
||
}
|
||
|
||
// "OCR again" for the whole issue: forces every page through the vision
|
||
// engine regardless of its current quality, then re-detects articles --
|
||
// which is why this asks for confirmation. A single page's "OCR again" in
|
||
// review does not touch article grouping; re-reading the whole document
|
||
// does, since detection runs again over the freshly re-read text.
|
||
async function magReocrMagazine() {
|
||
if (!state.doc) return;
|
||
const hasReviewed = state.articles.some((a) => a.status !== 'detected');
|
||
if (hasReviewed && !confirm(
|
||
'Re-reading the whole magazine runs article detection again. ' +
|
||
'Any articles you already approved or rejected will need reviewing again. Continue?'
|
||
)) return;
|
||
try {
|
||
await api('/api/magazine/' + state.doc.id + '/ingest', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ force_vision_ocr: true }),
|
||
});
|
||
pollIngest();
|
||
} catch (e) {
|
||
say('Could not start OCR: ' + e.message, 'err');
|
||
}
|
||
}
|
||
|
||
// "Analysing page 28 of 204" -> a real percentage, not just spinner text.
|
||
function magParsePageProgress(detail) {
|
||
const m = /page (\d+) of (\d+)/i.exec(detail || '');
|
||
if (!m) return null;
|
||
const page = parseInt(m[1], 10), total = parseInt(m[2], 10);
|
||
if (!total) return null;
|
||
return { page, total, pct: Math.min(100, Math.round((page / total) * 100)) };
|
||
}
|
||
|
||
async function pollIngest() {
|
||
const bar = $('mag-ingest-status');
|
||
if (bar) { bar.hidden = false; bar.className = 'mag-status is-running'; }
|
||
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) {
|
||
if (ing.status === 'running') {
|
||
bar.className = 'mag-status is-running';
|
||
const p = magParsePageProgress(detail);
|
||
bar.innerHTML =
|
||
'<div class="mag-ingest-row">' +
|
||
'<span class="mdi mdi-progress-clock mag-ingest-icon"></span>' +
|
||
'<div class="mag-ingest-text">' +
|
||
'<strong>' + esc(detail || 'Analysing…') + '</strong>' +
|
||
(p ? '<div class="mag-ingest-track"><div class="mag-ingest-fill" style="width:' + p.pct + '%"></div></div>' : '') +
|
||
'</div>' +
|
||
(p ? '<span class="mag-ingest-pct">' + p.pct + '%</span>' : '') +
|
||
'</div>';
|
||
} else if (ing.status === 'failed') {
|
||
bar.className = 'mag-status is-failed';
|
||
bar.innerHTML = '<div class="mag-ingest-row"><span class="mdi mdi-alert mag-ingest-icon"></span>' +
|
||
'<span>Ingestion failed: ' + esc(ing.error || '') + '</span></div>';
|
||
} else {
|
||
bar.className = 'mag-status is-done';
|
||
bar.innerHTML = '<div class="mag-ingest-row"><span class="mdi mdi-check-circle mag-ingest-icon"></span>' +
|
||
'<span>' + (ing.articles || 0) + ' article' + (ing.articles === 1 ? '' : 's') + ' detected</span></div>';
|
||
}
|
||
}
|
||
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();
|
||
// The whole review is one page at a time -- showing every page of a
|
||
// 10-page feature stacked at once was unreadable and made the boxes tiny.
|
||
state.reviewSpan = magReviewSpan(article);
|
||
state.reviewPage = state.reviewSpan[0] || null;
|
||
_magReviewChecked = null;
|
||
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);
|
||
}
|
||
|
||
// Offer neighbouring pages too, so a boundary that started a page late (or a
|
||
// jump tail that should have been included) can be corrected without
|
||
// leaving the screen.
|
||
function magReviewSpan(article) {
|
||
if (!article.pages.length) return [];
|
||
return Array.from(new Set(article.pages.concat(
|
||
[article.pages[0] - 1, article.pages[article.pages.length - 1] + 1])))
|
||
.filter((p) => p >= 1 && p <= (state.layout.page_count || 0)).sort((x, y) => x - y);
|
||
}
|
||
|
||
function magReviewGoPage(page) {
|
||
if (!state.reviewSpan.includes(page)) return;
|
||
state.reviewPage = page;
|
||
renderReview();
|
||
}
|
||
|
||
function renderReview() {
|
||
const host = $('mag-review');
|
||
const a = state.article;
|
||
if (!host || !a) return;
|
||
const included = new Set(a.blocks || []);
|
||
const conf = confidenceLabel(a.confidence);
|
||
const page = state.reviewPage;
|
||
const pageMeta = (state.layout.pages || []).find((p) => p.page === page);
|
||
const pageBlocks = page == null ? [] : blocksForPages([page]);
|
||
|
||
const spanIdx = state.reviewSpan.indexOf(page);
|
||
const prevPage = spanIdx > 0 ? state.reviewSpan[spanIdx - 1] : null;
|
||
const nextPage = spanIdx >= 0 && spanIdx < state.reviewSpan.length - 1 ? state.reviewSpan[spanIdx + 1] : null;
|
||
|
||
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. Click a numbered region on the page, ' +
|
||
'or its matching entry on the right, to line the two up.</p>';
|
||
|
||
html += '<div class="mag-review-pagenav">' +
|
||
'<button type="button" class="btn-sm" ' + (prevPage ? '' : 'disabled') +
|
||
' onclick="magReviewGoPage(' + prevPage + ')"><span class="mdi mdi-chevron-left"></span></button>' +
|
||
'<span>Page ' + (page ?? '—') + '</span>' +
|
||
'<button type="button" class="btn-sm" ' + (nextPage ? '' : 'disabled') +
|
||
' onclick="magReviewGoPage(' + nextPage + ')"><span class="mdi mdi-chevron-right"></span></button>' +
|
||
'<span class="mag-review-pagenav-spacer"></span>' +
|
||
'<button type="button" class="btn-sm" id="mag-reocr-btn" onclick="magReocrPage()">' +
|
||
'<span class="mdi mdi-text-recognition"></span> OCR again (this page)</button>' +
|
||
'<span id="mag-reocr-status" class="muted"></span>' +
|
||
'</div>';
|
||
|
||
html += '<div class="mag-review-split">';
|
||
|
||
// Left: the rendered page with a numbered box per block.
|
||
html += '<div class="mag-review-page">';
|
||
if (page != null) {
|
||
html += '<div class="mag-review-page-wrap">' +
|
||
'<img src="/api/magazine/' + state.doc.id + '/pages/' + page + '" alt="Page ' + page + '">';
|
||
pageBlocks.forEach((b, i) => {
|
||
if (!pageMeta) return;
|
||
const on = included.has(b.id);
|
||
const left = (b.bbox[0] / pageMeta.width * 100).toFixed(2);
|
||
const top = (b.bbox[1] / pageMeta.height * 100).toFixed(2);
|
||
const w = (b.bbox[2] / pageMeta.width * 100).toFixed(2);
|
||
const h = (b.bbox[3] / pageMeta.height * 100).toFixed(2);
|
||
html += '<div class="mag-review-box' + (on ? '' : ' is-excluded') + '" data-block="' + esc(b.id) +
|
||
'" style="left:' + left + '%;top:' + top + '%;width:' + w + '%;height:' + h + '%" ' +
|
||
'onclick="magReviewFocusBlock(\'' + esc(b.id) + '\')" title="' + esc(b.type) + '">' +
|
||
'<span class="mag-review-box-num">' + (i + 1) + '</span></div>';
|
||
});
|
||
html += '</div>';
|
||
} else {
|
||
html += '<p class="muted">No page to show.</p>';
|
||
}
|
||
html += '</div>';
|
||
|
||
// Right: the same blocks as text, numbered to match.
|
||
html += '<div class="mag-blocks">';
|
||
pageBlocks.forEach((b, i) => {
|
||
const narratable = ['title', 'deck', 'byline', 'body'].includes(b.type);
|
||
const on = included.has(b.id);
|
||
html += '<label class="mag-block' + (narratable ? '' : ' is-aux') + '" data-block-row="' + esc(b.id) + '" ' +
|
||
'onmouseenter="magReviewHighlightBox(\'' + esc(b.id) + '\')" onmouseleave="magReviewHighlightBox(null)">' +
|
||
'<span class="mag-block-num">' + (i + 1) + '</span>' +
|
||
'<input type="checkbox" ' + (on ? 'checked' : '') + ' data-block="' + esc(b.id) + '" onchange="magReviewToggleBox(this)">' +
|
||
'<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>';
|
||
});
|
||
if (!pageBlocks.length) html += '<p class="muted">Nothing detected on this page.</p>';
|
||
html += '</div>';
|
||
|
||
html += '</div>'; // /mag-review-split
|
||
|
||
html += '<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;
|
||
}
|
||
|
||
// Tracks every ticked block across ALL reviewed pages of this article, not
|
||
// just the one currently on screen -- switching pages must not forget a
|
||
// change made on a previous one.
|
||
let _magReviewChecked = null;
|
||
|
||
function magReviewToggleBox(input) {
|
||
if (!_magReviewChecked) _magReviewChecked = new Set(state.article.blocks || []);
|
||
if (input.checked) _magReviewChecked.add(input.dataset.block);
|
||
else _magReviewChecked.delete(input.dataset.block);
|
||
const box = document.querySelector('.mag-review-box[data-block="' + CSS.escape(input.dataset.block) + '"]');
|
||
if (box) box.classList.toggle('is-excluded', !input.checked);
|
||
}
|
||
|
||
function magReviewFocusBlock(blockId) {
|
||
const cb = document.querySelector('#mag-review input[data-block="' + CSS.escape(blockId) + '"]');
|
||
if (cb) { cb.checked = !cb.checked; magReviewToggleBox(cb); }
|
||
const row = document.querySelector('#mag-review [data-block-row="' + CSS.escape(blockId) + '"]');
|
||
if (row) row.scrollIntoView({ block: 'nearest', behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
|
||
}
|
||
|
||
function magReviewHighlightBox(blockId) {
|
||
document.querySelectorAll('.mag-review-box.is-linked').forEach((el) => el.classList.remove('is-linked'));
|
||
if (!blockId) return;
|
||
const box = document.querySelector('.mag-review-box[data-block="' + CSS.escape(blockId) + '"]');
|
||
if (box) box.classList.add('is-linked');
|
||
}
|
||
|
||
function selectedBlockIds() {
|
||
if (_magReviewChecked) return Array.from(_magReviewChecked);
|
||
return Array.from(document.querySelectorAll('#mag-review input[data-block]:checked'))
|
||
.map((el) => el.dataset.block);
|
||
}
|
||
|
||
async function magReocrPage() {
|
||
const page = state.reviewPage;
|
||
if (page == null) return;
|
||
const btn = $('mag-reocr-btn');
|
||
const statusEl = $('mag-reocr-status');
|
||
if (btn) btn.disabled = true;
|
||
if (statusEl) statusEl.textContent = 'Reading page ' + page + '…';
|
||
let jobId;
|
||
try {
|
||
const r = await api('/api/magazine/' + state.doc.id + '/pages/' + page + '/reocr', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}',
|
||
});
|
||
jobId = r.job_id;
|
||
} catch (e) {
|
||
if (statusEl) statusEl.textContent = '';
|
||
if (btn) btn.disabled = false;
|
||
return say('Could not start OCR: ' + e.message, 'err');
|
||
}
|
||
for (;;) {
|
||
let job;
|
||
try { job = await api('/api/jobs/' + jobId); } catch (_) { break; }
|
||
if (job.done) {
|
||
if (job.error) say('OCR failed: ' + job.error, 'err');
|
||
else say('Page ' + page + ' re-read', 'ok');
|
||
break;
|
||
}
|
||
await new Promise((r) => setTimeout(r, 2000));
|
||
}
|
||
if (btn) btn.disabled = false;
|
||
if (statusEl) statusEl.textContent = '';
|
||
state.layout = null;
|
||
await ensureLayout();
|
||
renderReview();
|
||
}
|
||
|
||
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 ─────────────────────────────────────────────────────────────────────
|
||
|
||
async function magInit() {
|
||
if (!$('mag-library-list')) return; // section not mounted
|
||
magLoadLibrary();
|
||
magLoadVoices();
|
||
setupMagDropzone();
|
||
let lastId = null;
|
||
try { lastId = localStorage.getItem(MAG_LAST_DOC_KEY); } catch (_) {}
|
||
if (lastId) {
|
||
// Confirmed live: without this, a full reload or the browser's own Back
|
||
// button (as opposed to in-app navigation) always dropped back to the
|
||
// empty library, making an in-progress magazine look like it had been
|
||
// lost. If it genuinely no longer exists (deleted elsewhere), fall back
|
||
// to the library rather than getting stuck on a permanent error toast.
|
||
try {
|
||
await api('/api/reader/docs/' + lastId);
|
||
await magOpen(lastId);
|
||
return;
|
||
} catch (_) {
|
||
magForgetLastDoc();
|
||
}
|
||
}
|
||
magShow('library');
|
||
}
|
||
|
||
root.magOpen = magOpen;
|
||
root.magCreate = magCreate;
|
||
root.magIngest = magIngest;
|
||
root.magReview = magReview;
|
||
root.magReviewGoPage = magReviewGoPage;
|
||
root.magReviewFocusBlock = magReviewFocusBlock;
|
||
root.magReviewHighlightBox = magReviewHighlightBox;
|
||
root.magReviewToggleBox = magReviewToggleBox;
|
||
root.magReocrPage = magReocrPage;
|
||
root.magReocrMagazine = magReocrMagazine;
|
||
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);
|