Add reading time and page info to book display

This commit is contained in:
Roni Laukkarinen
2026-02-01 17:00:42 +02:00
parent b7f303a87b
commit 896955bee6
4 changed files with 33 additions and 2 deletions
+4
View File
@@ -1,3 +1,7 @@
### 2026-02-01: 1.0.2
* Add reading time and page info to book metadata display
### 2026-02-01: 1.0.1
* Persist book metadata to localStorage
+1 -1
View File
@@ -1,6 +1,6 @@
# ⚡ Speed reader
![Version](https://img.shields.io/badge/version-1.0.1-blue?style=for-the-badge)
![Version](https://img.shields.io/badge/version-1.0.2-blue?style=for-the-badge)
![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "rsvp-speed-reader",
"private": true,
"version": "1.0.1",
"version": "1.0.2",
"type": "module",
"scripts": {
"dev": "vite",
+27
View File
@@ -223,6 +223,19 @@ function getWordDelay(word, baseDelay) {
return baseDelay * multiplier;
}
// Format reading time in human-readable format
function formatReadingTime(minutes) {
if (minutes < 1) return "< 1 min";
if (minutes < 60) return `${Math.round(minutes)} min`;
const hours = Math.floor(minutes / 60);
const mins = Math.round(minutes % 60);
if (mins === 0) return `${hours}h`;
return `${hours}h ${mins}m`;
}
// Words per page (standard estimate)
const WORDS_PER_PAGE = 250;
function App() {
// Load settings only once on mount
const [savedSettings] = useState(() => loadSettings());
@@ -662,6 +675,15 @@ function App() {
{bookMetadata.author && (
<div style={styles.bookAuthor}>{bookMetadata.author}</div>
)}
<div style={styles.bookStats}>
{(() => {
const currentPage = Math.floor(currentIndex / WORDS_PER_PAGE) + 1;
const totalPages = Math.max(1, Math.ceil(words.length / WORDS_PER_PAGE));
const remainingWords = words.length - currentIndex;
const remainingMinutes = remainingWords / wpm;
return `Page ${currentPage}/${totalPages} · ${formatReadingTime(remainingMinutes)} left`;
})()}
</div>
</div>
</div>
)}
@@ -1317,6 +1339,11 @@ const styles = {
overflow: "hidden",
textOverflow: "ellipsis",
},
bookStats: {
fontSize: "0.65rem",
color: "#444",
marginTop: "2px",
},
};
export default App;