Мова

Зв'язатися

Застосунок для Android · з 2024

FlashReader

Читалка, що показує текстовий файл по одному слову в заданому вами темпі та пам'ятає, де ви зупинилися.

Випущено
Зібрані дані
Немає
Ціна
Безкоштовно
  • HTML
  • CSS
  • JavaScript
  • IndexedDB
  • localStorage
  • FileReader API
  • Fullscreen API
  • Cordova Fullscreen plugin (необов'язково)
Google Play play.google.com

Про мене

FlashReader відкриває локальний файл .txt і показує його по одному слову посередині екрана, за замовчуванням кожні 500 мс. Читач задає інтервал, розмір літер, колір літер і колір тла. Увесь текст і позиція слова зберігаються на пристрої, тож після перезапуску той самий файл відкривається на тому самому слові.

Ця сторінка описує вебверсію на flashreader.fun: одна HTML-сторінка з вбудованим JavaScript. Скрипт не робить мережевих запитів і не має аналітики. Застосунок для Android у Google Play — це окрема збірка, вихідний код якої тут не розглядається.

Інженерна робота невелика й конкретна: таймер, що може змінювати темп, не втрачаючи слова; сховище, яке переживає перезапуск; і налаштування, що застосовуються та зберігаються в ту саму мить, коли змінюються.

FlashReader · зосереджене читання

що розв'язано

ПРАЦЮЄз 2024

Цикл слів

у продукті

Що це даєКористувач обирає текстовий файл і читає його слово за словом у рівному темпі, а швидкість може змінити посеред тексту, не втративши місця.

Проблема
Слова мають змінюватися через рівний, заданий користувачем інтервал, і цей інтервал має змінюватися посеред тексту без втрати поточного слова.
Рішення

Один інтервальний таймер переміщує індекс масивом слів. Зміна швидкості зупиняє цей таймер і запускає новий з того самого індексу.

Стек
  • JavaScript
  • setInterval
  • FileReader API
Задачі · 4
Перетворити вибраний текстовий файл на послідовність слівПрочитати файл як UTF-8 через FileReader і розбити за пробілами на масив

Файл надходить зі стандартного поля вибору файлу, обмеженого .txt, тож сторінці не потрібен доступ до файлової системи. action_load_file() читає його через readAsText(file, 'UTF-8') і розбиває результат за одинарними пробілами; розділові знаки лишаються біля свого слова. Необроблений текст також передається в saveFileContent() для наступного сеансу.

Показувати одне слово за такт і ніколи не запускати два таймери одночасноread() виходить, якщо таймер уже працює; кожен такт показує слово й зберігає наступний індекс

read() відмовляється стартувати без завантаженого тексту ('Load text file to read!') і одразу повертається, коли встановлено is_going, тож повторне натискання play не запустить другий інтервал. Кожен такт записує text[position] у #text-zone і зберігає position + 1. togglePlayPause() перемикає між read() і pause() та оновлює кнопку відтворення.

Зміна швидкості посеред читання має застосовуватися негайноЗупинити й перезапустити інтервал із новим періодом, зберігши індекс слова

setInterval не може змінити свій період. updateReadingSpeed() і обробник change поля швидкості викликають pause(), а потім read(), коли читання активне. Індекс живе в об'єкті читалки, тож перезапущений таймер продовжує з наступного слова. Введене значення менше 1 скидається до типових 500 мс.

Кінець тексту: чисто зупинитися або почати спочаткуУ кінці або зупинитися з 'THE END!' і скинути на слово 0, або перейти до слова 0

Такт перевіряє, чи слово за поточним індексом не undefined. Якщо Loop вимкнено, він очищає таймер, показує 'THE END!', зберігає позицію 0 і повертає кнопку відтворення. Якщо Loop увімкнено, він встановлює індекс 0 і продовжує. Вибір Loop зберігається так само, як інші налаштування.

Продовження після перезапуску

у продукті

Що це даєЗакрийте застосунок і поверніться пізніше: той самий текст відкриється на тому самому слові, з тим самим розміром літер і швидкістю, і все це зберігається на пристрої.

Проблема
Увесь текст, позиція слова й налаштування відображення мають пережити закриття сторінки чи застосунку, без сервера.
Рішення

Текст іде в IndexedDB, позиція й налаштування — в localStorage, і обидва зчитуються під час запуску.

Стек
  • IndexedDB
  • localStorage
Задачі · 3
Цілій книзі не місце в localStorageЗберігати необроблений текст в IndexedDB під одним фіксованим ключем; малі значення тримати в localStorage

saveFileContent() кладе текст у сховище 'files' бази 'flashreader' (версія 2) з id 'flashreader_last_text', тож новий файл замінює старий. onupgradeneeded створює сховище, лише якщо його немає, тож відкриття поверх старішої версії не завершується помилкою.

Позиція, кольори, розмір, швидкість, loop та ім'я файлу лишаються в localStorage, де читання під час запуску синхронне.

Знову відкрити останній файл на слові, де читання зупинилосяЗберігати індекс на кожному показаному слові; під час запуску заново завантажити текст і цей індекс

set_position() записує індекс у localStorage (fr_position) на кожному такті, тож закритий або примусово зупинений застосунок втрачає щонайбільше одне слово. Конструктор спершу читає індекс; на DOMContentLoaded getFileContent() завантажує текст з IndexedDB, знову розбиває його й показує 'The last file, <name>, has been loaded' із закликом натиснути play.

Збережені значення можуть бути відсутні або пошкодженіВідновлювати кожне значення окремо із запасними варіантами: позиція 0, розмір 48 px, швидкість 500 мс

Кожен ключ зчитується й застосовується окремо, тож одне пошкоджене значення не блокує решту. Нечислова позиція стає 0, розмір шрифту, що розбирається як 0, повертається до 48 px, швидкість, що розбирається як 0, повертається до 500 мс. Кольори зберігаються без '#' і відновлюються з ним, потім застосовуються до тексту та тла сторінки.

Відображення та керування

у продукті

Що це даєРозмір літер і кольори змінюються під час читання, клавіатурні скорочення керують відтворенням у браузері, а читач може повернутися на десять слів назад або перейти до будь-якого слова.

Проблема
Розмір літер і кольори мають змінюватися під час читання, а в настільному браузері відтворенням слід керувати з клавіатури.
Рішення

Поля панелі інструментів застосовують і зберігають кожну зміну одразу; у браузері клавіатурні скорочення викликають ті самі методи читалки.

Стек
  • JavaScript
  • Keyboard Events
  • Fullscreen API
Задачі · 4
Розмір літер і кольори мають застосовуватися негайно та зберігатисяОбробники change задають стиль напряму й зберігають значення; розмір менший за 8 px стає 8

Обробник кольору шрифту задає колір тексту #text-zone, обробник тла задає тло body, а обробник розміру задає font-size у px із нижньою межею 8. Кожен обробник записує своє значення в localStorage в тому самому кроці, тож окремої дії збереження немає.

У браузері керування з клавіатури не повинно прокручувати сторінку під час читанняSpace, F, Up і Down викликають дії читалки та скасовують типову поведінку браузера

У браузерній версії Space перемикає відтворення й паузу, F перемикає повноекранний режим, Up пришвидшує слова на 10 мс із нижньою межею 50 мс, Down сповільнює на 10 мс. preventDefault() не дає браузеру прокручувати сторінку чи натискати елемент у фокусі. Зміни швидкості проходять через updateReadingSpeed(), тож запущений таймер перезапускається з новим темпом.

Читач пропустив кілька слів і хоче повернутисяСтрілка вліво (в браузері) повертає на 10 слів назад із обмеженням на 0; поле позиції дозволяє перейти до будь-якого слова

skipBackwards() зсуває індекс назад на 10, але не нижче 0, одразу показує це слово й зберігає позицію. Поле позиції на панелі інструментів приймає будь-який номер слова; від'ємні значення стають 0.

Повноекранний режим по-різному працює в різних браузерах і оболонках застосунківСпробувати стандартні та префіксні Fullscreen API, а потім плагін Cordova Fullscreen, якщо сторінка його знайде

enterFullscreen() і exitFullscreen() перебирають стандартний, moz, webkit і ms варіанти. Коли існує глобальний об'єкт Fullscreen, як у плагіні повноекранного режиму Cordova, також викликається Fullscreen.show(). Кнопка і клавіша F використовують ту саму перевірку всіх чотирьох варіантів fullscreenElement.

Цифри

з продукту
  • Типовий темп 500 мс на слово 120 слів на хвилину.
  • Найшвидший темп 50 мс на слово До 1 200 слів на хвилину з клавіатури.
  • Крок швидкості 10 мс Клавіші стрілок вгору й вниз.