Use SDT for Reading Mode and Read Aloud

.gitmodules

@@ -5,3 +5,6 @@
 [submodule "epubjs/epub.js"]
 	path = epubjs/epub.js
 	url = https://github.com/zotero/epub.js.git
+[submodule "structured-document-text"]
+	path = structured-document-text
+	url = https://github.com/zotero/structured-document-text.git

src/common/annotation-manager.js

@@ -14,7 +14,7 @@ class AnnotationManager {
 			colors: [],
 			tags: [],
 			authors: [],
-			hiddenIDs: [],
+			enabledTypes: null,
 		};
 		this._readOnly = options.readOnly;
 		this._authorName = options.authorName;
@@ -399,10 +399,10 @@ class AnnotationManager {
 		this._annotations.forEach(x => delete x._score);
 
 		let annotations = this._annotations.slice();
-		let { tags, colors, authors, query, hiddenIDs } = this._filter;
+		let { tags, colors, authors, query, enabledTypes } = this._filter;
 
-		if (hiddenIDs.length) {
-			annotations = annotations.filter(x => !hiddenIDs.includes(x.id));
+		if (enabledTypes) {
+			annotations = annotations.filter(x => enabledTypes.includes(x.type));
 		}
 
 		if (tags.length || colors.length || authors.length) {

src/common/components/modal-popup/appearance-popup.js

@@ -18,9 +18,9 @@ import IconSplitVertical from '../../../../res/icons/16/split-vertical.svg';
 import IconSpreadEven from '../../../../res/icons/16/spread-even.svg';
 import IconSpreadNone from '../../../../res/icons/16/spread-none.svg';
 import IconSpreadOdd from '../../../../res/icons/16/spread-odd.svg';
-import IconX from '../../../../res/icons/16/x-8.svg';
 import IconOptions from '../../../../res/icons/16/options.svg';
 import IconPlus from '../../../../res/icons/20/plus.svg';
+import IconLoading from '../../../../res/icons/16/loading.svg';
 import { getCurrentColorScheme, getPopupCoordinatesFromClickEvent } from '../../lib/utilities';
 import { ReaderContext } from '../../reader';
 import { DEFAULT_THEMES } from '../../defines';
@@ -260,56 +260,6 @@ function AppearancePopup(props) {
 	return (
 		<div ref={overlayRef} className="toolbar-popup-overlay overlay" onPointerDown={handlePointerDown}>
 			<div className={cx('modal-popup appearance-popup')}>
-				{type === 'pdf' && (
-					<div className="group">
-						<div className="option">
-							<label>{l10n.getString('reader-scroll-mode')}</label>
-							<div className="split-toggle" data-tabstop={1}>
-								<button
-									tabIndex={-1}
-									className={cx({ active: props.viewStats.scrollMode === 0 })}
-									title={l10n.getString('reader-vertical')}
-									onClick={() => props.onChangeScrollMode(0)}
-								><IconScrollVertical/></button>
-								<button
-									tabIndex={-1}
-									className={cx({ active: props.viewStats.scrollMode === 1 })}
-									title={l10n.getString('reader-horizontal')}
-									onClick={() => props.onChangeScrollMode(1)}
-								><IconScrollHorizontal/></button>
-								<button
-									tabIndex={-1}
-									className={cx({ active: props.viewStats.scrollMode === 2 })}
-									title={l10n.getString('reader-wrapped')}
-									onClick={() => props.onChangeScrollMode(2)}
-								><IconScrollWrapped/></button>
-							</div>
-						</div>
-						<div className="option">
-							<label>{l10n.getString('reader-spread-mode')}</label>
-							<div className="split-toggle" data-tabstop={1}>
-								<button
-									tabIndex={-1}
-									className={cx({ active: props.viewStats.spreadMode === 0 })}
-									title={l10n.getString('reader-none')}
-									onClick={() => props.onChangeSpreadMode(0)}
-								><IconSpreadNone/></button>
-								<button
-									tabIndex={-1}
-									className={cx({ active: props.viewStats.spreadMode === 1 })}
-									title={l10n.getString('reader-odd')}
-									onClick={() => props.onChangeSpreadMode(1)}
-								><IconSpreadOdd/></button>
-								<button
-									tabIndex={-1}
-									className={cx({ active: props.viewStats.spreadMode === 2 })}
-									title={l10n.getString('reader-even')}
-									onClick={() => props.onChangeSpreadMode(2)}
-								><IconSpreadEven/></button>
-							</div>
-						</div>
-					</div>
-				)}
 				{type === 'epub' && (
 					<div className="group">
 						<div className="option">
@@ -352,33 +302,89 @@ function AppearancePopup(props) {
 						)}
 					</div>
 				)}
-				{(type === 'epub' || type === 'snapshot') && !(type === 'epub' && props.viewStats.fixedLayout) && (
+				{!(type === 'epub' && props.viewStats.fixedLayout) && (
 					<div className="group">
-						{type === 'snapshot' && (
+						{(type === 'snapshot' || type === 'pdf') && (
 							<div className="option">
 								<label htmlFor="reading-mode-enabled">{l10n.getString('reader-reading-mode')}</label>
-								<input
-									data-tabstop={1}
-									tabIndex={-1}
-									className="switch"
-									type="checkbox"
-									id="reading-mode-enabled"
-									checked={props.viewStats.readingModeEnabled}
-									onChange={e => props.onChangeReadingModeEnabled(e.target.checked)}
-								/>
+								<div className="reading-mode-control">
+									{props.readingModeLoading && (
+										<IconLoading className="loading-spinner" aria-busy={true}/>
+									)}
+									<input
+										data-tabstop={1}
+										tabIndex={-1}
+										className="switch"
+										type="checkbox"
+										id="reading-mode-enabled"
+										checked={props.readingModeEnabled || props.readingModeLoading}
+										disabled={props.readingModeLoading}
+										onChange={e => props.onChangeReadingModeEnabled(e.target.checked)}
+									/>
+								</div>
 							</div>
 						)}
-						{(type === 'epub' || props.viewStats.readingModeEnabled) && (
+						{(type === 'epub' || props.readingModeEnabled) && (
 							<ReflowableAppearanceSection
 								params={props.viewStats.appearance}
-								enablePageWidth={type === 'snapshot'
+								enablePageWidth={type !== 'epub'
 									|| props.viewStats.flowMode !== 'paginated' || props.viewStats.spreadMode === 0}
 								onChange={props.onChangeAppearance}
-								indent={type === 'snapshot'}
+								indent={type === 'snapshot' || type === 'pdf'}
 							/>
 						)}
 					</div>
 				)}
+				{type === 'pdf' && !props.viewStats.readingModeEnabled && (
+					<div className="group">
+						<div className="option">
+							<label>{l10n.getString('reader-scroll-mode')}</label>
+							<div className="split-toggle" data-tabstop={1}>
+								<button
+									tabIndex={-1}
+									className={cx({ active: props.viewStats.scrollMode === 0 })}
+									title={l10n.getString('reader-vertical')}
+									onClick={() => props.onChangeScrollMode(0)}
+								><IconScrollVertical/></button>
+								<button
+									tabIndex={-1}
+									className={cx({ active: props.viewStats.scrollMode === 1 })}
+									title={l10n.getString('reader-horizontal')}
+									onClick={() => props.onChangeScrollMode(1)}
+								><IconScrollHorizontal/></button>
+								<button
+									tabIndex={-1}
+									className={cx({ active: props.viewStats.scrollMode === 2 })}
+									title={l10n.getString('reader-wrapped')}
+									onClick={() => props.onChangeScrollMode(2)}
+								><IconScrollWrapped/></button>
+							</div>
+						</div>
+						<div className="option">
+							<label>{l10n.getString('reader-spread-mode')}</label>
+							<div className="split-toggle" data-tabstop={1}>
+								<button
+									tabIndex={-1}
+									className={cx({ active: props.viewStats.spreadMode === 0 })}
+									title={l10n.getString('reader-none')}
+									onClick={() => props.onChangeSpreadMode(0)}
+								><IconSpreadNone/></button>
+								<button
+									tabIndex={-1}
+									className={cx({ active: props.viewStats.spreadMode === 1 })}
+									title={l10n.getString('reader-odd')}
+									onClick={() => props.onChangeSpreadMode(1)}
+								><IconSpreadOdd/></button>
+								<button
+									tabIndex={-1}
+									className={cx({ active: props.viewStats.spreadMode === 2 })}
+									title={l10n.getString('reader-even')}
+									onClick={() => props.onChangeSpreadMode(2)}
+								><IconSpreadEven/></button>
+							</div>
+						</div>
+					</div>
+				)}
 				<div className="group">
 					<div className="option">
 						<label>{l10n.getString('reader-split-view')}</label>

src/common/components/reader-ui.js

@@ -135,7 +135,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						enableNavigateBack={viewStats.canNavigateBack}
 						enableNavigateToPreviousPage={viewStats.canNavigateToPreviousPage}
 						enableNavigateToNextPage={viewStats.canNavigateToNextPage}
-						readingModeEnabled={viewStats.readingModeEnabled}
+						readingModeEnabled={state.readingModeEnabled}
 						appearancePopup={state.appearancePopup}
 						readAloudState={state.readAloudState}
 						findPopupOpen={findState.popupOpen}
@@ -235,6 +235,8 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						colorScheme={state.colorScheme}
 						lightTheme={state.lightTheme}
 						darkTheme={state.darkTheme}
+						readingModeEnabled={state.readingModeEnabled}
+						readingModeLoading={state.readingModeLoading}
 						splitType={state.splitType}
 						viewStats={viewStats}
 						onChangeSplitType={props.onChangeSplitType}

src/common/components/toolbar.js

@@ -211,7 +211,7 @@ function Toolbar(props) {
 						onClick={() => handleToolClick('note')}
 					><IconNote/></button>
 				</Localized>
-				{props.type === 'pdf' && (
+				{props.type === 'pdf' && !props.readingModeEnabled && (
 					<Localized id="reader-toolbar-text" attrs={{ title: true, 'aria-description': true }}>
 						<button
 							tabIndex={-1}
@@ -221,7 +221,7 @@ function Toolbar(props) {
 						><IconText/></button>
 					</Localized>
 				)}
-				{props.type === 'pdf' && (
+				{props.type === 'pdf' && !props.readingModeEnabled && (
 					<Localized id="reader-toolbar-area" attrs={{ title: true, 'aria-description': true }}>
 						<button
 							tabIndex={-1}
@@ -231,7 +231,7 @@ function Toolbar(props) {
 						><IconImage/></button>
 					</Localized>
 				)}
-				{props.type === 'pdf' && (
+				{props.type === 'pdf' && !props.readingModeEnabled && (
 					<Localized id="reader-toolbar-draw" attrs={{ title: true, 'aria-description': true }}>
 						<button
 							tabIndex={-1}

src/common/read-aloud/controller.ts

@@ -110,6 +110,13 @@ export abstract class ReadAloudController extends EventTarget {
 
 	protected abstract get _segmentProgressSeconds(): number;
 
+	/**
+	 * Index into the active segment's timestamp array for the word currently
+	 * being spoken, or null if no word-level data is available. Updated by the
+	 * controller as audio plays.
+	 */
+	activeTimestampIndex: number | null = null;
+
 	protected get _currentSegment() {
 		return this._segments[this._position];
 	}
@@ -137,6 +144,13 @@ export abstract class ReadAloudController extends EventTarget {
 		this._segments = segments;
 	}
 
+	private _scheduleSpeak(delay: number) {
+		this._delayTimeout = setTimeout(() => {
+			this._delayTimeout = null;
+			this._speak();
+		}, delay);
+	}
+
 	override dispatchEvent(event: Event): boolean {
 		if (this._destroyed) {
 			return false;
@@ -254,10 +268,7 @@ export abstract class ReadAloudController extends EventTarget {
 				if (this._currentSegment?.anchor === 'paragraphStart') {
 					delay += DELAY_PARAGRAPH;
 				}
-				this._delayTimeout = setTimeout(() => {
-					this._delayTimeout = null;
-					this._speak();
-				}, delay);
+				this._scheduleSpeak(delay);
 			}
 		}
 	}

src/common/read-aloud/jump-button.js

@@ -93,17 +93,9 @@ export class ReadAloudJumpButton {
 		this._el.style.display = 'none';
 	}
 
-	/**
-	 * A DOMRect spanning the primary click target of the jump button.
-	 * While the actual click target spans the entire margin from top to bottom,
-	 * this rect is the only area that should prevent the jump button from moving
-	 * while hovered, even if the pointer technically enters another paragraph.
-	 *
-	 * @return {DOMRect | null}
-	 */
-	get iconTargetRect() {
+	iconContainsPoint(x, y) {
 		if (this._el.style.display === 'none') {
-			return null;
+			return false;
 		}
 		let hostRect = this._el.getBoundingClientRect();
 		let rtl = getComputedStyle(this._el).direction === 'rtl';
@@ -113,21 +105,12 @@ export class ReadAloudJumpButton {
 		let iconInlineEnd = 8;
 		let verticalMargin = 4;
 
-		let x, width;
-		if (rtl) {
-			// In RTL, paragraph edge is host's left edge, icon is near the left
-			x = hostRect.left;
-			width = iconInlineEnd + iconSize;
-		}
-		else {
-			// In LTR, paragraph edge is host's right edge, icon is near the right
-			x = hostRect.right - iconInlineEnd - iconSize;
-			width = iconInlineEnd + iconSize;
-		}
-
-		let y = hostRect.top - verticalMargin;
-		let height = iconSize + verticalMargin * 2;
-
-		return new DOMRect(x, y, width, height);
+		let iconLeft = rtl
+			? hostRect.left
+			: hostRect.right - iconInlineEnd - iconSize;
+		let iconRight = iconLeft + iconInlineEnd + iconSize;
+		let iconTop = hostRect.top - verticalMargin;
+		let iconBottom = iconTop + iconSize + verticalMargin * 2;
+		return x >= iconLeft && x <= iconRight && y >= iconTop && y <= iconBottom;
 	}
 }