 +
+ ')
';
+}
+
+async function magRead(articleId, opts) {
const a = state.articles.find((x) => x.id === articleId);
if (!a) return;
state.article = a;
@@ -406,7 +457,10 @@ async function magRead(articleId) {
} catch (e) {
return say('Could not load article text: ' + e.message, 'err');
}
- const saved = (state.doc.progress || {})[a.id];
+ 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();
@@ -426,8 +480,13 @@ function renderArticle() {
: 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) =>
+ '' + esc(w) + '').join(' ');
return '<' + tag + ' class="mag-s' + (open === 'span' ? '' : '') + '" data-i="' + i + '" ' +
- 'onclick="magSeek(' + i + ')">' + esc(s.text) + ' ';
+ 'onclick="magSeek(' + i + ')">' + wordsHtml + ' ';
}).join('');
highlight(state.idx);
}
@@ -436,13 +495,54 @@ 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() {
@@ -508,46 +608,104 @@ async function magPlay() {
state.playing = true;
state.cancel = false;
syncPlayButton();
+ let finishedArticle = false;
try {
while (state.idx < state.sentences.length && !state.cancel) {
highlight(state.idx);
- const text = state.sentences[state.idx].text;
+ const sentence = state.sentences[state.idx];
let blob;
try {
- blob = await fetchTtsPreviewBlob(voice, text, 'mp3');
+ blob = await fetchTtsPreviewBlob(voice, sentence.text, 'mp3');
} catch (e) {
say('Synthesis failed: ' + e.message, 'err');
break;
}
if (state.cancel) break;
- await playBlob(blob);
+ 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 (state.idx >= state.sentences.length) {
- state.idx = state.sentences.length - 1;
+ }
+ 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) {
+function playBlob(blob, sentence) {
return new Promise((resolve) => {
const url = URL.createObjectURL(blob);
const audio = new Audio(url);
state.audio = audio;
- const done = () => { URL.revokeObjectURL(url); state.audio = null; resolve(); };
+ 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 (_) {} }
@@ -557,11 +715,13 @@ function magPause() {
function syncPlayButton() {
const btn = $('mag-play');
- if (!btn) return;
- btn.innerHTML = state.playing
- ? ' Pause'
- : ' Listen';
- btn.setAttribute('aria-label', state.playing ? 'Pause narration' : 'Play narration');
+ if (btn) {
+ btn.innerHTML = state.playing
+ ? ' Pause'
+ : ' Listen';
+ btn.setAttribute('aria-label', state.playing ? 'Pause narration' : 'Play narration');
+ }
+ if (state.driving) syncDrivingPlayButton();
}
let _saveTimer = null;
@@ -707,10 +867,45 @@ function magShow(view) {
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
+ ? ''
+ : '';
+ btn.setAttribute('aria-label', state.playing ? 'Pause' : 'Play');
+}
+
// ── Boot ─────────────────────────────────────────────────────────────────────
function magInit() {
@@ -736,6 +931,10 @@ 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 };
diff --git a/static/js/utils.js b/static/js/utils.js
index bf6152f..e66b706 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -1112,11 +1112,18 @@ function _wfUpdateHeaderNav(anyState, curIdx) {
const nextStep = curIdx >= 0 ? _wfNeighbor(curIdx, 1) : null;
const curStep = curIdx >= 0 ? WF_STEPS[curIdx] : null;
document.querySelectorAll('.section-head').forEach(head => {
- // Studio has its own self-contained 4-phase nav (studio.js) — this
- // stepper's Previous/Next buttons are hardcoded to the old s-reader/
- // s-library/s-rehearser sections and don't know about Studio's phases,
- // so injecting them here just breaks navigation when clicked.
- if (head.closest('#s-caststudio')) {
+ // This stepper's Previous/Next buttons are hardcoded to the audiobook
+ // pipeline's three destinations (s-reader, s-library, s-rehearser) — an
+ // allowlist, not a blocklist, since every OTHER section (Studio has its
+ // own 4-phase nav; Engines, Magazines, Settings, etc. have nothing to do
+ // with this pipeline at all) would otherwise need to be named here one
+ // at a time as each one was noticed showing a "Step 1/8" bar and a
+ // "Cast Audiobook" button that make no sense on that page. Confirmed
+ // live: this exact bleed-through appeared on Engines (LLM/STT/TTS/OCR/
+ // Image Generation all share one .section-head) before this became an
+ // allowlist.
+ const onPipelinePage = !!head.closest('#s-reader, #s-library, #s-rehearser');
+ if (!onPipelinePage) {
const staleNav = head.querySelector('.wf-header-nav');
if (staleNav) staleNav.hidden = true;
const staleHint = head.nextElementSibling?.classList?.contains('wf-step-hint') ? head.nextElementSibling : null;
diff --git a/static/sections/s-llms.html b/static/sections/s-llms.html
index b4b95c5..613c665 100644
--- a/static/sections/s-llms.html
+++ b/static/sections/s-llms.html
@@ -807,6 +807,42 @@
+ Used by Magazine ingestion when a page needs OCR, or when its existing text scores poorly. Tesseract (bundled, no setup) is always the fallback if this is unreachable.
+