Implement Read Aloud for EPUB and snapshot

Author: AbeJellinek

res/icons/20/advanced-options.svg

@@ -17,6 +17,7 @@ import PasswordPopup from './modal-popup/password-popup';
 import PrintPopup from './modal-popup/print-popup';
 import AppearancePopup from "./modal-popup/appearance-popup";
 import ThemePopup from './modal-popup/theme-popup';
+import ReadAloudPopup from "./utility-popup/read-aloud-popup";
 import { bundle } from '../../fluent';
 
 function View(props) {
@@ -132,7 +133,9 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						enableNavigateBack={viewStats.canNavigateBack}
 						enableNavigateToPreviousPage={viewStats.canNavigateToPreviousPage}
 						enableNavigateToNextPage={viewStats.canNavigateToNextPage}
+						focusModeEnabled={viewStats.focusModeEnabled}
 						appearancePopup={state.appearancePopup}
+						readAloudState={state.readAloudState}
 						findPopupOpen={findState.popupOpen}
 						themes={state.themes}
 						onChangeTheme={props.onChangeTheme}
@@ -151,6 +154,8 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						onChangeTool={props.onChangeTool}
 						onOpenColorContextMenu={props.onOpenColorContextMenu}
 						onToggleAppearancePopup={props.onToggleAppearancePopup}
+						onChangeReadAloudState={props.onChangeReadAloudState}
+						onToggleReadAloud={props.onToggleReadAloud}
 						onToggleFind={props.onToggleFind}
 						onToggleContextPane={props.onToggleContextPane}
 					/>
@@ -252,6 +257,13 @@ const ReaderUI = React.forwardRef((props, ref) => {
 						onClose={props.onCloseThemePopup}
 					/>
 				)}
+				{state.readAloudState.active && (
+					<ReadAloudPopup
+						params={state.readAloudState}
+						onChange={props.onChangeReadAloudState}
+						onClose={() => props.onToggleReadAloud(false)}
+					/>
+				)}
 				<div id="a11yAnnouncement" aria-live="polite"></div>
 			</Fragment>
 		</LocalizationProvider>

res/icons/20/format-text-focus.svg

@@ -14,6 +14,7 @@ import IconChevronLeft from '../../../res/icons/20/chevron-left.svg';
 import IconChevronUp from '../../../res/icons/20/chevron-up.svg';
 import IconChevronDown from '../../../res/icons/20/chevron-down.svg';
 import IconFormatText from '../../../res/icons/20/format-text.svg';
+import IconFormatTextFocus from '../../../res/icons/20/format-text-focus.svg';
 import IconHighlight from '../../../res/icons/20/annotate-highlight.svg';
 import IconUnderline from '../../../res/icons/20/annotate-underline.svg';
 import IconNote from '../../../res/icons/20/annotate-note.svg';
@@ -22,6 +23,7 @@ import IconImage from '../../../res/icons/20/annotate-area.svg';
 import IconInk from '../../../res/icons/20/annotate-ink.svg';
 import IconEraser from '../../../res/icons/20/annotate-eraser.svg';
 import IconFind from '../../../res/icons/20/magnifier.svg';
+import IconReadAloud from '../../../res/icons/20/read-aloud.svg';
 import IconChevronDown8 from '../../../res/icons/8/chevron-8.svg';
 
 function Toolbar(props) {
@@ -111,8 +113,17 @@ function Toolbar(props) {
 					className={cx('toolbar-button', { active: props.appearancePopup })}
 					title={l10n.getString('reader-appearance')}
 					tabIndex={-1}
-					onClick={props.onToggleAppearancePopup}
-				><IconFormatText/></button>
+					onClick={() => props.onToggleAppearancePopup()}
+				>{props.focusModeEnabled ? <IconFormatTextFocus/> : <IconFormatText/>}</button>
+				{['epub', 'snapshot'].includes(props.type) && (
+					<button
+						id="read-aloud"
+						className={cx('toolbar-button', { active: props.readAloudState.active })}
+						title={l10n.getString('reader-read-aloud')}
+						tabIndex={-1}
+						onClick={() => props.onToggleReadAloud()}
+					><IconReadAloud/></button>
+				)}
 				<div className="divider"/>
 				<button
 					id="navigateBack"

res/icons/20/pause.svg

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+
+const EDGE_PADDING = 10;
+
+function UtilityPopup(props) {
+	let { children, className } = props;
+
+	let ref = useRef();
+	let [dragOrigin, setDragOrigin] = useState(null);
+	let [x, setX] = useState(null);
+	let [y, setY] = useState(null);
+
+	let [windowWidth, windowHeight] = useWindowSize();
+
+	useEffect(() => {
+		if (!ref.current || x === null || y === null) {
+			return;
+		}
+		let left = Math.max(Math.min(x, windowWidth - ref.current.offsetWidth - EDGE_PADDING), EDGE_PADDING);
+		let top = Math.max(Math.min(y, windowHeight - ref.current.offsetHeight - EDGE_PADDING), EDGE_PADDING);
+		ref.current.style.left = `${left}px`;
+		ref.current.style.top = `${top}px`;
+	}, [x, y, windowWidth, windowHeight]);
+
+	function getOffset(event) {
+		let boundingRect = ref.current.getBoundingClientRect();
+		return [event.clientX - boundingRect.x, event.clientY - boundingRect.y];
+	}
+
+	let handlePointerDown = (event) => {
+		if (event.button !== 0 || event.target.closest('input, button, select, a')) {
+			return;
+		}
+		ref.current.setPointerCapture(event.pointerId);
+		setDragOrigin(getOffset(event));
+	};
+
+	let handlePointerMove = (event) => {
+		if (!dragOrigin || !ref.current.hasPointerCapture(event.pointerId)) {
+			return;
+		}
+		let x = event.clientX - dragOrigin[0];
+		let y = event.clientY - dragOrigin[1];
+		setX(x);
+		setY(y);
+	};
+
+	let handlePointerUp = (event) => {
+		if (!dragOrigin || !ref.current.hasPointerCapture(event.pointerId)) {
+			return;
+		}
+		ref.current.releasePointerCapture(event.pointerId);
+		setDragOrigin(null);
+	};
+
+	return (
+		<div
+			className={cx('utility-popup', className)}
+			role="application"
+			onPointerDown={handlePointerDown}
+			onPointerMove={handlePointerMove}
+			onPointerUp={handlePointerUp}
+			onPointerCancel={handlePointerUp}
+			style={{ pointerEvents: dragOrigin ? 'none' : 'auto' }}
+			ref={ref}
+		>
+			{children}
+		</div>
+	);
+}
+
+function useWindowSize(win = window) {
+	const [size, setSize] = useState([win.innerWidth, win.innerHeight]);
+
+	useEffect(() => {
+		let handleResize = () => {
+			setSize([win.innerWidth, win.innerHeight]);
+		};
+		win.addEventListener('resize', handleResize);
+		return () => {
+			win.removeEventListener('resize', handleResize);
+		};
+	}, [win]);
+
+	return size;
+}
+
+export default UtilityPopup;