release: version 0.9.31 (#839)

To enable background playback in Android, go to Settings > Apps & Notifications > Readest > Battery > Battery Optimization, and disable battery optimization for Readest.

README.md

@@ -26,7 +26,7 @@
   <a href="#screenshots">Screenshots</a> •
   <a href="#downloads">Downloads</a> •
   <a href="#getting-started">Getting Started</a> •
-  <a href="#contributors">Contributors</a> •
+  <a href="#troubleshooting">Troubleshooting</a> •
   <a href="#license">License</a>
 </p>
 
@@ -199,6 +199,39 @@ nix develop ./ops#android # enter a dev shell for the android app
 
 Please check the [wiki][link-gh-wiki] of this project for more information on development.
 
+## Troubleshooting
+
+### 1. Readest Won’t Launch on Windows (Missing Edge WebView2 Runtime)
+
+**Symptom**
+
+- When you double-click readest.exe, nothing happens. No window appears, and Task Manager does not show the process.
+- This can affect both the standard installer and the portable version.
+
+**Cause**
+
+- Microsoft Edge WebView2 Runtime is either missing, outdated, or improperly installed on your system. Readest depends on WebView2 to render the interface on Windows.
+
+**How to Fix**
+
+1. Check if WebView2 is installed
+   - Open “Add or Remove Programs” (a.k.a. Apps & features) on Windows. Look for “Microsoft Edge WebView2 Runtime.”
+2. Install or Update WebView2
+   - Download the WebView2 Runtime directly from Microsoft: [link](https://developer.microsoft.com/en-us/microsoft-edge/webview2?form=MA13LH).
+   - If you prefer an offline installer, download the offline package and run it as an Administrator.
+3. Re-run Readest
+   - After installing/updating WebView2, launch readest.exe again.
+   - If you still encounter problems, reboot your PC and try again.
+
+**Additional Tips**
+
+- If reinstalling once doesn’t work, uninstall Edge WebView2 completely, then reinstall it with Administrator privileges.
+- Verify your Windows installation has the latest updates from Microsoft.
+
+**Still Stuck?**
+
+- See Issue [readest/readest#358](https://github.com/readest/readest/issues/358) for further details, or head over to our [Discord][link-discord] server and open a support discussion with detailed logs of your environment and the steps you’ve taken.
+
 ## Contributors
 
 Readest is open-source, and contributions are welcome! Feel free to open issues, suggest features, or submit pull requests. Please **review our [contributing guidelines](CONTRIBUTING.md) before you start**. We also welcome you to join our [Discord][link-discord] community for either support or contributing guidance.

apps/readest-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.9.30",
+  "version": "0.9.31",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",

apps/readest-app/public/locales/ar/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "فشل في تحليل ملف EPUB.",
   "This book format is not supported.": "هذا تنسيق الكتاب غير مدعوم.",
   "Unable to fetch the translation. Please log in first and try again.": "تعذر جلب الترجمة. يرجى تسجيل الدخول أولاً ثم المحاولة مرة أخرى.",
-  "Group": "تجميع"
+  "Group": "تجميع",
+  "Always on Top": "دائمًا في المقدمة",
+  "No Timeout": "لا مهلة",
+  "{{value}} minute": "{{value}} دقيقة",
+  "{{value}} minutes": "{{value}} دقائق",
+  "{{value}} hour": "{{value}} ساعة",
+  "{{value}} hours": "{{value}} ساعات",
+  "CJK Font": "خط CJK",
+  "Clear Search": "مسح البحث"
 }

apps/readest-app/public/locales/de/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Fehler beim Parsen der EPUB-Datei.",
   "This book format is not supported.": "Dieses Buchformat wird nicht unterstützt.",
   "Unable to fetch the translation. Please log in first and try again.": "Übersetzung konnte nicht abgerufen werden. Bitte zuerst anmelden und erneut versuchen.",
-  "Group": "Gruppieren"
+  "Group": "Gruppieren",
+  "Always on Top": "Immer im Vordergrund",
+  "No Timeout": "Kein Timeout",
+  "{{value}} minute": "{{value}} Minute",
+  "{{value}} minutes": "{{value}} Minuten",
+  "{{value}} hour": "{{value}} Stunde",
+  "{{value}} hours": "{{value}} Stunden",
+  "CJK Font": "CJK-Schriftart",
+  "Clear Search": "Suche löschen"
 }

apps/readest-app/public/locales/el/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Αποτυχία ανάλυσης του αρχείου EPUB.",
   "This book format is not supported.": "Αυτή η μορφή βιβλίου δεν υποστηρίζεται.",
   "Unable to fetch the translation. Please log in first and try again.": "Αδυναμία λήψης της μετάφρασης. Παρακαλώ συνδεθείτε πρώτα και δοκιμάστε ξανά.",
-  "Group": "Ομάδα"
+  "Group": "Ομάδα",
+  "Always on Top": "Πάντα στην κορυφή",
+  "No Timeout": "Χωρίς χρονικό όριο",
+  "{{value}} minute": "{{value}} λεπτό",
+  "{{value}} minutes": "{{value}} λεπτά",
+  "{{value}} hour": "{{value}} ώρα",
+  "{{value}} hours": "{{value}} ώρες",
+  "CJK Font": "Γραμματοσειρά CJK",
+  "Clear Search": "Καθαρισμός αναζήτησης"
 }

apps/readest-app/public/locales/es/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Error al analizar el archivo EPUB.",
   "This book format is not supported.": "Este formato de libro no es compatible.",
   "Unable to fetch the translation. Please log in first and try again.": "No se puede obtener la traducción. Por favor, inicia sesión primero e inténtalo de nuevo.",
-  "Group": "Grupo"
+  "Group": "Grupo",
+  "Always on Top": "Siempre en la parte superior",
+  "No Timeout": "Sin tiempo de espera",
+  "{{value}} minute": "{{value}} minuto",
+  "{{value}} minutes": "{{value}} minutos",
+  "{{value}} hour": "{{value}} hora",
+  "{{value}} hours": "{{value}} horas",
+  "CJK Font": "Fuente CJK",
+  "Clear Search": "Limpiar búsqueda"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Échec de l'analyse du fichier EPUB.",
   "This book format is not supported.": "Ce format de livre n'est pas pris en charge.",
   "Unable to fetch the translation. Please log in first and try again.": "Impossible de récupérer la traduction. Veuillez d'abord vous connecter et réessayer.",
-  "Group": "Groupe"
+  "Group": "Groupe",
+  "Always on Top": "Toujours au-dessus",
+  "No Timeout": "Aucun délai d'attente",
+  "{{value}} minute": "{{value}} minute",
+  "{{value}} minutes": "{{value}} minutes",
+  "{{value}} hour": "{{value}} heure",
+  "{{value}} hours": "{{value}} heures",
+  "CJK Font": "Police CJK",
+  "Clear Search": "Effacer la recherche"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "EPUB फ़ाइल को पार्स करने में विफल।",
   "This book format is not supported.": "यह पुस्तक प्रारूप समर्थित नहीं है।",
   "Unable to fetch the translation. Please log in first and try again.": "अनुवाद प्राप्त करने में असमर्थ। कृपया पहले लॉग इन करें और पुनः प्रयास करें।",
-  "Group": "समूह"
+  "Group": "समूह",
+  "Always on Top": "सर्वोच्च पर हमेशा",
+  "No Timeout": "कोई समय समाप्त नहीं",
+  "{{value}} minute": "{{value}} मिनट",
+  "{{value}} minutes": "{{value}} मिनट",
+  "{{value}} hour": "{{value}} घंटा",
+  "{{value}} hours": "{{value}} घंटे",
+  "CJK Font": "CJK फ़ॉन्ट",
+  "Clear Search": "खोज साफ करें"
 }

apps/readest-app/public/locales/id/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Gagal mengurai file EPUB.",
   "This book format is not supported.": "Format buku ini tidak didukung.",
   "Unable to fetch the translation. Please log in first and try again.": "Tidak dapat mengambil terjemahan. Silakan masuk terlebih dahulu dan coba lagi.",
-  "Group": "Grup"
+  "Group": "Grup",
+  "Always on Top": "Selalu di Atas",
+  "No Timeout": "Tidak Ada Waktu Habis",
+  "{{value}} minute": "{{value}} menit",
+  "{{value}} minutes": "{{value}} menit",
+  "{{value}} hour": "{{value}} jam",
+  "{{value}} hours": "{{value}} jam",
+  "CJK Font": "Font CJK",
+  "Clear Search": "Hapus Pencarian"
 }

apps/readest-app/public/locales/it/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Impossibile analizzare il file EPUB.",
   "This book format is not supported.": "Questo formato di libro non è supportato.",
   "Unable to fetch the translation. Please log in first and try again.": "Impossibile recuperare la traduzione. Accedi prima e riprova.",
-  "Group": "Gruppo"
+  "Group": "Gruppo",
+  "Always on Top": "Sempre in primo piano",
+  "No Timeout": "Nessun timeout",
+  "{{value}} minute": "{{value}} minuto",
+  "{{value}} minutes": "{{value}} minuti",
+  "{{value}} hour": "{{value}} ora",
+  "{{value}} hours": "{{value}} ore",
+  "CJK Font": "Font CJK",
+  "Clear Search": "Cancella ricerca"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "EPUBファイルの解析に失敗しました。",
   "This book format is not supported.": "この書籍形式はサポートされていません。",
   "Unable to fetch the translation. Please log in first and try again.": "翻訳を取得できません。まずログインして再試行してください。",
-  "Group": "グループ"
+  "Group": "グループ",
+  "Always on Top": "常に最前面",
+  "No Timeout": "タイムアウトなし",
+  "{{value}} minute": "{{value}}分",
+  "{{value}} minutes": "{{value}}分",
+  "{{value}} hour": "{{value}}時間",
+  "{{value}} hours": "{{value}}時間",
+  "CJK Font": "CJKフォント",
+  "Clear Search": "検索をクリア"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "EPUB 파일 구문 분석 실패.",
   "This book format is not supported.": "이 책 형식은 지원되지 않습니다.",
   "Unable to fetch the translation. Please log in first and try again.": "번역을 가져올 수 없습니다. 먼저 로그인하고 다시 시도하세요.",
-  "Group": "그룹"
+  "Group": "그룹",
+  "Always on Top": "항상 위에",
+  "No Timeout": "타임아웃 없음",
+  "{{value}} minute": "{{value}} 분",
+  "{{value}} minutes": "{{value}} 분",
+  "{{value}} hour": "{{value}} 시간",
+  "{{value}} hours": "{{value}} 시간",
+  "CJK Font": "CJK 글꼴",
+  "Clear Search": "검색 지우기"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Nie udało się przeanalizować pliku EPUB.",
   "This book format is not supported.": "Ten format książki nie jest obsługiwany.",
   "Unable to fetch the translation. Please log in first and try again.": "Nie można pobrać tłumaczenia. Proszę najpierw się zalogować i spróbować ponownie.",
-  "Group": "Grupa"
+  "Group": "Grupa",
+  "Always on Top": "Zawsze na wierzchu",
+  "No Timeout": "Brak limitu czasu",
+  "{{value}} minute": "{{value}} minuta",
+  "{{value}} minutes": "{{value}} minut",
+  "{{value}} hour": "{{value}} godzina",
+  "{{value}} hours": "{{value}} godziny",
+  "CJK Font": "Czcionka CJK",
+  "Clear Search": "Wyczyść wyszukiwanie"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Falha ao analisar o arquivo EPUB.",
   "This book format is not supported.": "Este formato de livro não é suportado.",
   "Unable to fetch the translation. Please log in first and try again.": "Não foi possível buscar a tradução. Faça login primeiro e tente novamente.",
-  "Group": "Grupo"
+  "Group": "Grupo",
+  "Always on Top": "Sempre no Topo",
+  "No Timeout": "Sem Tempo Limite",
+  "{{value}} minute": "{{value}} minuto",
+  "{{value}} minutes": "{{value}} minutos",
+  "{{value}} hour": "{{value}} hora",
+  "{{value}} hours": "{{value}} horas",
+  "CJK Font": "Fonte CJK",
+  "Clear Search": "Limpar Pesquisa"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Не удалось разобрать файл EPUB.",
   "This book format is not supported.": "Этот формат книги не поддерживается.",
   "Unable to fetch the translation. Please log in first and try again.": "Не удалось получить перевод. Пожалуйста, войдите в систему и попробуйте снова.",
-  "Group": "Группа"
+  "Group": "Группа",
+  "Always on Top": "Всегда сверху",
+  "No Timeout": "Нет таймаута",
+  "{{value}} minute": "{{value}} минута",
+  "{{value}} minutes": "{{value}} минуты",
+  "{{value}} hour": "{{value}} час",
+  "{{value}} hours": "{{value}} часа",
+  "CJK Font": "CJK Шрифт",
+  "Clear Search": "Очистить поиск"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "EPUB dosyası ayrıştırılamadı.",
   "This book format is not supported.": "Bu kitap formatı desteklenmiyor.",
   "Unable to fetch the translation. Please log in first and try again.": "Çeviri alınamıyor. Lütfen önce giriş yapın ve tekrar deneyin.",
-  "Group": "Grup"
+  "Group": "Grup",
+  "Always on Top": "Her Zaman Üstte",
+  "No Timeout": "Zaman Aşımı Yok",
+  "{{value}} minute": "{{value}} dakika",
+  "{{value}} minutes": "{{value}} dakika",
+  "{{value}} hour": "{{value}} saat",
+  "{{value}} hours": "{{value}} saat",
+  "CJK Font": "CJK Yazı Tipi",
+  "Clear Search": "Aramayı Temizle"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Не вдалося розібрати файл EPUB.",
   "This book format is not supported.": "Цей формат книги не підтримується.",
   "Unable to fetch the translation. Please log in first and try again.": "Не вдалося отримати переклад. Будь ласка, спочатку увійдіть у систему та спробуйте ще раз.",
-  "Group": "Група"
+  "Group": "Група",
+  "Always on Top": "Завжди зверху",
+  "No Timeout": "Без тайм-ауту",
+  "{{value}} minute": "{{value}} хвилина",
+  "{{value}} minutes": "{{value}} хвилин",
+  "{{value}} hour": "{{value}} година",
+  "{{value}} hours": "{{value}} години",
+  "CJK Font": "CJK шрифт",
+  "Clear Search": "Очистити пошук"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "Không thể phân tích tệp EPUB.",
   "This book format is not supported.": "Định dạng sách này không được hỗ trợ.",
   "Unable to fetch the translation. Please log in first and try again.": "Không thể tải dịch vụ. Vui lòng đăng nhập trước và thử lại.",
-  "Group": "Nhóm"
+  "Group": "Nhóm",
+  "Always on Top": "Luôn ở trên cùng",
+  "No Timeout": "Không có thời gian chờ",
+  "{{value}} minute": "{{value}} phút",
+  "{{value}} minutes": "{{value}} phút",
+  "{{value}} hour": "{{value}} giờ",
+  "{{value}} hours": "{{value}} giờ",
+  "CJK Font": "Phông chữ CJK",
+  "Clear Search": "Xóa tìm kiếm"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -230,7 +230,7 @@
   "Maximum Column Height": "最大列高",
   "Maximum Column Width": "最大列宽",
   "Continuous Scroll": "连续滚动",
-  "Fullscreen": "全屏",
+  "Fullscreen": "全屏显示",
   "No supported files found. Supported formats: {{formats}}": "未找到支持的文件。支持的格式：{{formats}}",
   "Drop to Import Books": "拖放导入书籍",
   "Custom": "自定义",
@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "无法解析 EPUB 文件。",
   "This book format is not supported.": "不支持此书籍格式。",
   "Unable to fetch the translation. Please log in first and try again.": "无法获取翻译。请登录后重试。",
-  "Group": "分组"
+  "Group": "分组",
+  "Always on Top": "窗口置顶",
+  "No Timeout": "关闭定时",
+  "{{value}} minute": "{{value}}分钟",
+  "{{value}} minutes": "{{value}}分钟",
+  "{{value}} hour": "{{value}}小时",
+  "{{value}} hours": "{{value}}小时",
+  "CJK Font": "中文字体",
+  "Clear Search": "清除搜索"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -265,5 +265,13 @@
   "Failed to parse the EPUB file.": "無法解析 EPUB 文件。",
   "This book format is not supported.": "不支援此書籍格式。",
   "Unable to fetch the translation. Please log in first and try again.": "無法獲取翻譯。請先登入然後重試。",
-  "Group": "分組"
+  "Group": "分組",
+  "Always on Top": "視窗置頂",
+  "No Timeout": "關閉定時",
+  "{{value}} minute": "{{value}}分鐘",
+  "{{value}} minutes": "{{value}}分鐘",
+  "{{value}} hour": "{{value}}小時",
+  "{{value}} hours": "{{value}}小時",
+  "CJK Font": "中文字體",
+  "Clear Search": "清除搜索"
 }

apps/readest-app/release-notes.json

@@ -1,5 +1,17 @@
 {
   "releases": {
+    "0.9.31": {
+      "date": "2025-04-08",
+      "notes": [
+        "iOS: Text-to-Speech (TTS) now works in the background",
+        "Android: Import files from native file manager",
+        "Desktop: Add option to keep window on top",
+        "Vertical layout for highlighting tools",
+        "Added options to auto-stop TTS after timeout",
+        "Added book search functionality in bookshelf",
+        "Improved font support for CJK users"
+      ]
+    },
     "0.9.30": {
       "date": "2025-04-05",
       "notes": [

apps/readest-app/src-tauri/capabilities/default.json

@@ -63,6 +63,7 @@
     "core:window:allow-start-dragging",
     "core:window:allow-toggle-maximize",
     "core:window:allow-set-fullscreen",
+    "core:window:allow-set-always-on-top",
     "log:default",
     "shell:default",
     "process:default",

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/build.rs

@@ -2,6 +2,7 @@ const COMMANDS: &[&str] = &[
     "auth_with_safari",
     "auth_with_custom_tab",
     "copy_uri_to_path",
+    "use_background_audio",
 ];
 
 fn main() {

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/ios/Sources/NativeBridgePlugin.swift

@@ -1,4 +1,6 @@
 import AuthenticationServices
+import AVFoundation
+import MediaPlayer
 import SwiftRs
 import Tauri
 import UIKit
@@ -8,9 +10,33 @@ class SafariAuthRequestArgs: Decodable {
   let authUrl: String
 }
 
+class UseBackgroundAudioRequestArgs: Decodable {
+  let enabled: Bool
+}
+
 class NativeBridgePlugin: Plugin {
   private var authSession: ASWebAuthenticationSession?
 
+  @objc public func use_background_audio(_ invoke: Invoke) {
+    do {
+      let args = try invoke.parseArgs(UseBackgroundAudioRequestArgs.self)
+      let enabled = args.enabled
+      let session = AVAudioSession.sharedInstance()
+      if enabled {
+        try session.setCategory(.playback, mode: .default, options: [.mixWithOthers])
+        try session.setActive(true)
+        print("AVAudioSession activated")
+      } else {
+        try session.setActive(false)
+        MPNowPlayingInfoCenter.default().nowPlayingInfo = nil
+        print("AVAudioSession deactivated")
+      }
+      invoke.resolve()
+    } catch {
+      print("Failed to set up audio session:", error)
+    }
+  }
+
   @objc public func auth_with_safari(_ invoke: Invoke) throws {
     let args = try invoke.parseArgs(SafariAuthRequestArgs.self)
     let authUrl = URL(string: args.authUrl)!

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/autogenerated/commands/use_background_audio.toml

@@ -0,0 +1,13 @@
+# Automatically generated - DO NOT EDIT!
+
+"$schema" = "../../schemas/schema.json"
+
+[[permission]]
+identifier = "allow-use-background-audio"
+description = "Enables the use_background_audio command without any pre-configured scope."
+commands.allow = ["use_background_audio"]
+
+[[permission]]
+identifier = "deny-use-background-audio"
+description = "Denies the use_background_audio command without any pre-configured scope."
+commands.deny = ["use_background_audio"]

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/autogenerated/reference.md

@@ -7,6 +7,7 @@ Default permissions for the plugin
 - `allow-auth-with-safari`
 - `allow-auth-with-custom-tab`
 - `allow-copy-uri-to-path`
+- `allow-use-background-audio`
 
 ## Permission Table
 
@@ -92,6 +93,32 @@ Enables the copy_uri_to_path command without any pre-configured scope.
 
 Denies the copy_uri_to_path command without any pre-configured scope.
 
+</td>
+</tr>
+
+<tr>
+<td>
+
+`native-bridge:allow-use-background-audio`
+
+</td>
+<td>
+
+Enables the use_background_audio command without any pre-configured scope.
+
+</td>
+</tr>
+
+<tr>
+<td>
+
+`native-bridge:deny-use-background-audio`
+
+</td>
+<td>
+
+Denies the use_background_audio command without any pre-configured scope.
+
 </td>
 </tr>
 </table>

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/default.toml

@@ -1,3 +1,3 @@
 [default]
 description = "Default permissions for the plugin"
-permissions = ["allow-auth-with-safari", "allow-auth-with-custom-tab", "allow-copy-uri-to-path"]
+permissions = ["allow-auth-with-safari", "allow-auth-with-custom-tab", "allow-copy-uri-to-path", "allow-use-background-audio"]

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/schemas/schema.json

@@ -331,10 +331,22 @@
           "markdownDescription": "Denies the copy_uri_to_path command without any pre-configured scope."
         },
         {
-          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`",
+          "description": "Enables the use_background_audio command without any pre-configured scope.",
+          "type": "string",
+          "const": "allow-use-background-audio",
+          "markdownDescription": "Enables the use_background_audio command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the use_background_audio command without any pre-configured scope.",
+          "type": "string",
+          "const": "deny-use-background-audio",
+          "markdownDescription": "Denies the use_background_audio command without any pre-configured scope."
+        },
+        {
+          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`\n- `allow-use-background-audio`",
           "type": "string",
           "const": "default",
-          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`"
+          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`\n- `allow-use-background-audio`"
         }
       ]
     }

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/commands.rs

@@ -27,3 +27,11 @@ pub(crate) async fn copy_uri_to_path<R: Runtime>(
 ) -> Result<CopyURIResponse> {
     app.native_bridge().copy_uri_to_path(payload)
 }
+
+#[command]
+pub(crate) async fn use_background_audio<R: Runtime>(
+    app: AppHandle<R>,
+    payload: UseBackgroundAudioRequest,
+) -> Result<()> {
+    app.native_bridge().use_background_audio(payload)
+}

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/desktop.rs

@@ -25,4 +25,8 @@ impl<R: Runtime> NativeBridge<R> {
     pub fn copy_uri_to_path(&self, _payload: CopyURIRequest) -> crate::Result<CopyURIResponse> {
         Err(crate::Error::UnsupportedPlatformError)
     }
+
+    pub fn use_background_audio(&self, _payload: UseBackgroundAudioRequest) -> crate::Result<()> {
+        Err(crate::Error::UnsupportedPlatformError)
+    }
 }

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/lib.rs

@@ -40,6 +40,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             commands::auth_with_safari,
             commands::auth_with_custom_tab,
             commands::copy_uri_to_path,
+            commands::use_background_audio,
         ])
         .setup(|app, api| {
             #[cfg(mobile)]

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/mobile.rs

@@ -47,3 +47,11 @@ impl<R: Runtime> NativeBridge<R> {
             .map_err(Into::into)
     }
 }
+
+impl<R: Runtime> NativeBridge<R> {
+    pub fn use_background_audio(&self, payload: UseBackgroundAudioRequest) -> crate::Result<()> {
+        self.0
+            .run_mobile_plugin("use_background_audio", payload)
+            .map_err(Into::into)
+    }
+}

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/models.rs

@@ -25,3 +25,9 @@ pub struct CopyURIResponse {
     pub success: bool,
     pub error: Option<String>,
 }
+
+#[derive(Debug, Deserialize, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct UseBackgroundAudioRequest {
+    pub enabled: bool,
+}

apps/readest-app/src/app/library/components/Bookshelf.tsx

@@ -10,6 +10,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { navigateToLibrary, navigateToReader } from '@/utils/nav';
+import { formatAuthors, formatTitle } from '@/utils/book';
 import { isMd5 } from '@/utils/md5';
 
 import Alert from '@/components/Alert';
@@ -49,6 +50,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const [showSelectModeActions, setShowSelectModeActions] = useState(false);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   const [showGroupingModal, setShowGroupingModal] = useState(false);
+  const [queryTerm, setQueryTerm] = useState<string | null>(null);
   const [navBooksGroup, setNavBooksGroup] = useState<BooksGroup | null>(null);
   const [importBookUrl] = useState(searchParams?.get('url') || '');
   const isImportingBook = useRef(false);
@@ -86,6 +88,12 @@ const Bookshelf: React.FC<BookshelfProps> = ({
 
   useEffect(() => {
     const group = searchParams?.get('group') || '';
+    const query = searchParams?.get('q') || '';
+    if (query) {
+      setQueryTerm(query);
+    } else {
+      setQueryTerm(null);
+    }
     if (group) {
       const booksGroup = allBookshelfItems.find(
         (item) => 'name' in item && item.id === group,
@@ -93,11 +101,11 @@ const Bookshelf: React.FC<BookshelfProps> = ({
       if (booksGroup) {
         setNavBooksGroup(booksGroup);
       } else {
-        navigateToLibrary(router);
+        navigateToLibrary(router, query ? `q=${query}` : undefined);
       }
     } else {
       setNavBooksGroup(null);
-      navigateToLibrary(router);
+      navigateToLibrary(router, query ? `q=${query}` : undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams, libraryBooks, showGroupingModal]);
@@ -137,6 +145,18 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   };
 
   const currentBookshelfItems = navBooksGroup ? navBooksGroup.books : allBookshelfItems;
+  const bookFilter = (item: Book, queryTerm: string) => {
+    if (item.deletedAt) return false;
+    const searchTerm = new RegExp(queryTerm, 'i');
+    const title = formatTitle(item.title);
+    const authors = formatAuthors(item.author);
+    return searchTerm.test(title) || searchTerm.test(authors);
+  };
+  const filteredBookshelfItems = currentBookshelfItems.filter((item) => {
+    if ('name' in item) return item.books.some((book) => bookFilter(book, queryTerm || ''));
+    else if (queryTerm) return bookFilter(item, queryTerm);
+    return true;
+  });
 
   return (
     <div className='bookshelf'>
@@ -146,7 +166,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
           'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12',
         )}
       >
-        {currentBookshelfItems.map((item, index) => (
+        {filteredBookshelfItems.map((item, index) => (
           <BookshelfItem
             key={`library-item-${index}`}
             item={item}

apps/readest-app/src/app/library/components/BookshelfItem.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { navigateToLibrary, navigateToReader } from '@/utils/nav';
 import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
@@ -94,6 +94,7 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
 }) => {
   const _ = useTranslation();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { envConfig, appService } = useEnv();
   const { settings } = useSettingsStore();
   const { updateBook } = useLibraryStore();
@@ -133,7 +134,9 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
     if (isSelectMode) {
       toggleSelection(group.id);
     } else {
-      navigateToLibrary(router, `group=${group.id}`);
+      const params = new URLSearchParams(searchParams?.toString());
+      params.set('group', group.id);
+      navigateToLibrary(router, `${params.toString()}`);
     }
   };
 

apps/readest-app/src/app/library/components/LibraryHeader.tsx

@@ -1,17 +1,18 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
 import { PiSelectionAllDuotone } from 'react-icons/pi';
-import { MdOutlineMenu } from 'react-icons/md';
-import { MdArrowBackIosNew } from 'react-icons/md';
+import { MdOutlineMenu, MdArrowBackIosNew } from 'react-icons/md';
+import { IoMdCloseCircle } from 'react-icons/io';
 
 import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { useTrafficLightStore } from '@/store/trafficLightStore';
 import { navigateToLibrary } from '@/utils/nav';
+import { throttle } from '@/utils/throttle';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SettingsMenu from './SettingsMenu';
@@ -40,6 +41,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     setTrafficLightVisibility,
     cleanupTrafficLightListeners,
   } = useTrafficLightStore();
+  const [searchQuery, setSearchQuery] = useState(searchParams?.get('q') ?? '');
 
   const headerRef = useRef<HTMLDivElement>(null);
   const iconSize16 = useResponsiveSize(16);
@@ -49,6 +51,26 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     onToggleSelectMode,
   });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const throttledUpdateQueryParam = useCallback(
+    throttle((value: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
+      if (value) {
+        params.set('q', value);
+      } else {
+        params.delete('q');
+      }
+      router.push(`?${params.toString()}`);
+    }, 1000),
+    [searchParams],
+  );
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newQuery = e.target.value;
+    setSearchQuery(newQuery);
+    throttledUpdateQueryParam(newQuery);
+  };
+
   useEffect(() => {
     if (!appService?.hasTrafficLight) return;
 
@@ -93,7 +115,9 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             </span>
             <input
               type='text'
+              value={searchQuery}
               placeholder={_('Search Books...')}
+              onChange={handleSearchChange}
               spellCheck='false'
               className={clsx(
                 'input rounded-badge bg-base-300/50 h-9 w-full pl-10 pr-10 sm:h-7',
@@ -103,6 +127,19 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             />
           </div>
           <div className='absolute right-4 flex items-center space-x-2 text-gray-500 sm:space-x-4'>
+            {searchQuery && (
+              <button
+                type='button'
+                onClick={() => {
+                  setSearchQuery('');
+                  throttledUpdateQueryParam('');
+                }}
+                className='text-gray-400 hover:text-gray-600'
+                aria-label={_('Clear Search')}
+              >
+                <IoMdCloseCircle className='h-4 w-4' />
+              </button>
+            )}
             <span className='bg-base-content/50 mx-2 h-4 w-[0.5px]'></span>
             <Dropdown
               className='exclude-title-bar-mousedown dropdown-bottom flex h-6 cursor-pointer justify-center'

apps/readest-app/src/app/library/components/SettingsMenu.tsx

@@ -14,7 +14,7 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { getStoragePlanData } from '@/utils/access';
 import { navigateToLogin, navigateToProfile } from '@/utils/nav';
-import { tauriHandleToggleFullScreen } from '@/utils/window';
+import { tauriHandleSetAlwaysOnTop, tauriHandleToggleFullScreen } from '@/utils/window';
 import { QuotaType } from '@/types/user';
 import MenuItem from '@/components/MenuItem';
 import Quota from '@/components/Quota';
@@ -32,6 +32,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
   const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
   const [isAutoCheckUpdates, setIsAutoCheckUpdates] = useState(settings.autoCheckUpdates);
+  const [isAlwaysOnTop, setIsAlwaysOnTop] = useState(settings.alwaysOnTop);
   const [isScreenWakeLock, setIsScreenWakeLock] = useState(settings.screenWakeLock);
   const [isAutoImportBooksOnOpen, setIsAutoImportBooksOnOpen] = useState(
     settings.autoImportBooksOnOpen,
@@ -66,6 +67,15 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
     setIsDropdownOpen?.(false);
   };
 
+  const toggleAlwaysOnTop = () => {
+    settings.alwaysOnTop = !settings.alwaysOnTop;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsAlwaysOnTop(settings.alwaysOnTop);
+    tauriHandleSetAlwaysOnTop(settings.alwaysOnTop);
+    setIsDropdownOpen?.(false);
+  };
+
   const toggleAutoUploadBooks = () => {
     settings.autoUpload = !settings.autoUpload;
     setSettings(settings);
@@ -174,13 +184,20 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
           onClick={toggleAutoCheckUpdates}
         />
       )}
+      <hr className='border-base-200 my-1' />
+      {appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
+      {appService?.hasWindow && (
+        <MenuItem
+          label={_('Always on Top')}
+          icon={isAlwaysOnTop ? <MdCheck className='text-base-content' /> : undefined}
+          onClick={toggleAlwaysOnTop}
+        />
+      )}
       <MenuItem
         label={_('Keep Screen Awake')}
         icon={isScreenWakeLock ? <MdCheck className='text-base-content' /> : undefined}
         onClick={toggleScreenWakeLock}
       />
-      <hr className='border-base-200 my-1' />
-      {appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
       <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />
       {isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}

apps/readest-app/src/app/library/page.tsx

@@ -31,7 +31,7 @@ import { useDemoBooks } from './hooks/useDemoBooks';
 import { useBooksSync } from './hooks/useBooksSync';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
-import { tauriQuitApp } from '@/utils/window';
+import { tauriHandleSetAlwaysOnTop, tauriQuitApp } from '@/utils/window';
 
 import { AboutWindow } from '@/components/AboutWindow';
 import { Toast } from '@/components/Toast';
@@ -104,6 +104,9 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
         await checkForAppUpdates(_);
       }
     };
+    if (settings.alwaysOnTop) {
+      tauriHandleSetAlwaysOnTop(settings.alwaysOnTop);
+    }
     doCheckAppUpdates();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings]);
@@ -161,9 +164,11 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
 
   useEffect(() => {
     const libraryPage = document.querySelector('.library-page');
-    libraryPage?.addEventListener('dragover', handleDragOver as unknown as EventListener);
-    libraryPage?.addEventListener('dragleave', handleDragLeave as unknown as EventListener);
-    libraryPage?.addEventListener('drop', handleDrop as unknown as EventListener);
+    if (!appService?.isMobile) {
+      libraryPage?.addEventListener('dragover', handleDragOver as unknown as EventListener);
+      libraryPage?.addEventListener('dragleave', handleDragLeave as unknown as EventListener);
+      libraryPage?.addEventListener('drop', handleDrop as unknown as EventListener);
+    }
 
     if (isTauriAppPlatform()) {
       const unlisten = getCurrentWebview().onDragDropEvent((event) => {
@@ -182,9 +187,11 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
     }
 
     return () => {
-      libraryPage?.removeEventListener('dragover', handleDragOver as unknown as EventListener);
-      libraryPage?.removeEventListener('dragleave', handleDragLeave as unknown as EventListener);
-      libraryPage?.removeEventListener('drop', handleDrop as unknown as EventListener);
+      if (!appService?.isMobile) {
+        libraryPage?.removeEventListener('dragover', handleDragOver as unknown as EventListener);
+        libraryPage?.removeEventListener('dragleave', handleDragLeave as unknown as EventListener);
+        libraryPage?.removeEventListener('drop', handleDrop as unknown as EventListener);
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageRef.current]);
@@ -334,7 +341,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   const selectFilesTauri = async () => {
     const exts = appService?.isAndroidApp ? [] : SUPPORTED_FILE_EXTS;
     const files = (await appService?.selectFiles(_('Select Books'), exts)) || [];
-    return files.filter((file) => SUPPORTED_FILE_EXTS.some((ext) => file.endsWith(`.${ext}`)));
+    // Cannot filter out files on Android since some content providers may not return the file name
+    return files;
   };
 
   const selectFilesWeb = () => {

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -58,9 +58,9 @@ const FoliateViewer: React.FC<{
     const { detail } = event as CustomEvent;
     detail.data = Promise.resolve(detail.data)
       .then((data) => {
-        const viewSettings = getViewSettings(bookKey)!;
+        const viewSettings = getViewSettings(bookKey);
         if (detail.type === 'text/css') return transformStylesheet(data);
-        if (detail.type === 'application/xhtml+xml') {
+        if (viewSettings && detail.type === 'application/xhtml+xml') {
           const ctx = {
             bookKey,
             viewSettings,

apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 import Popup from '@/components/Popup';
 import PopupButton from './PopupButton';
@@ -8,6 +9,7 @@ import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface AnnotationPopupProps {
   dir: 'ltr' | 'rtl';
+  isVertical: boolean;
   buttons: Array<{ tooltipText: string; Icon: React.ElementType; onClick: () => void }>;
   position: Position;
   trianglePosition: Position;
@@ -24,6 +26,7 @@ const OPTIONS_PADDING_PIX = 16;
 
 const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
   dir,
+  isVertical,
   buttons,
   position,
   trianglePosition,
@@ -39,17 +42,20 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
   return (
     <div dir={dir}>
       <Popup
-        width={popupWidth}
-        height={popupHeight}
+        width={isVertical ? popupHeight : popupWidth}
+        height={isVertical ? popupWidth : popupHeight}
         position={position}
         trianglePosition={trianglePosition}
-        className='selection-popup bg-gray-600 px-4 text-white'
+        className='selection-popup bg-gray-600 text-white'
         triangleClassName='text-gray-600'
       >
         <div
-          className='selection-buttons flex items-center justify-between'
+          className={clsx(
+            'selection-buttons flex items-center justify-between p-2',
+            isVertical ? 'flex-col' : 'flex-row',
+          )}
           style={{
-            height: popupHeight,
+            height: isVertical ? popupWidth : popupHeight,
           }}
         >
           {buttons.map((button, index) => (
@@ -65,15 +71,27 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
       </Popup>
       {highlightOptionsVisible && (
         <HighlightOptions
+          isVertical={isVertical}
           style={{
-            width: `${popupWidth}px`,
-            height: `${popupHeight}px`,
-            left: `${position.point.x}px`,
-            top: `${
-              position.point.y +
-              (highlightOptionsHeightPx + highlightOptionsPaddingPx) *
-                (trianglePosition.dir === 'up' ? -1 : 1)
-            }px`,
+            width: `${isVertical ? popupHeight : popupWidth}px`,
+            height: `${isVertical ? popupWidth : popupHeight}px`,
+            ...(isVertical
+              ? {
+                  left: `${
+                    position.point.x +
+                    (highlightOptionsHeightPx + highlightOptionsPaddingPx) *
+                      (trianglePosition.dir === 'left' ? -1 : 1)
+                  }px`,
+                  top: `${position.point.y}px`,
+                }
+              : {
+                  left: `${position.point.x}px`,
+                  top: `${
+                    position.point.y +
+                    (highlightOptionsHeightPx + highlightOptionsPaddingPx) *
+                      (trianglePosition.dir === 'up' ? -1 : 1)
+                  }px`,
+                }),
           }}
           selectedStyle={selectedStyle}
           selectedColor={selectedColor}

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -259,8 +259,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       const annotPopupPos = getPopupPosition(
         triangPos,
         rect,
-        annotPopupWidth,
-        annotPopupHeight,
+        viewSettings.vertical ? annotPopupHeight : annotPopupWidth,
+        viewSettings.vertical ? annotPopupWidth : annotPopupHeight,
         popupPadding,
       );
       if (isTextSelected.current && annotPopupPos.dir === 'down' && osPlatform === 'android') {
@@ -577,6 +577,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       {showAnnotPopup && trianglePosition && annotPopupPosition && (
         <AnnotationPopup
           dir={viewSettings.rtl ? 'rtl' : 'ltr'}
+          isVertical={viewSettings.vertical}
           buttons={buttons}
           position={annotPopupPosition}
           trianglePosition={trianglePosition}

apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx

@@ -9,6 +9,7 @@ const styles = ['highlight', 'underline', 'squiggly'] as HighlightStyle[];
 const colors = ['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[];
 
 interface HighlightOptionsProps {
+  isVertical: boolean;
   style: React.CSSProperties;
   selectedStyle: HighlightStyle;
   selectedColor: HighlightColor;
@@ -17,6 +18,7 @@ interface HighlightOptionsProps {
 
 const HighlightOptions: React.FC<HighlightOptionsProps> = ({
   style,
+  isVertical,
   selectedStyle: _selectedStyle,
   selectedColor: _selectedColor,
   onHandleHighlight,
@@ -44,13 +46,22 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
     onHandleHighlight(true);
   };
   return (
-    <div className='highlight-options absolute flex items-center justify-between' style={style}>
-      <div className='flex gap-2' style={{ height: size28 }}>
+    <div
+      className={clsx(
+        'highlight-options absolute flex items-center justify-between',
+        isVertical ? 'flex-col' : 'flex-row',
+      )}
+      style={style}
+    >
+      <div
+        className={clsx('flex gap-2', isVertical ? 'flex-col' : 'flex-row')}
+        style={isVertical ? { width: size28 } : { height: size28 }}
+      >
         {styles.map((style) => (
           <button
             key={style}
             onClick={() => handleSelectStyle(style)}
-            className={`flex items-center justify-center rounded-full bg-gray-700 p-0`}
+            className='flex items-center justify-center rounded-full bg-gray-700 p-0'
             style={{ width: size28, height: size28, minHeight: size28 }}
           >
             <div
@@ -78,8 +89,11 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
       </div>
 
       <div
-        className='flex items-center justify-center gap-2 rounded-3xl bg-gray-700 px-2'
-        style={{ height: size28 }}
+        className={clsx(
+          'flex items-center justify-center gap-2 rounded-3xl bg-gray-700',
+          isVertical ? 'flex-col py-2' : 'flex-row px-2',
+        )}
+        style={isVertical ? { width: size28 } : { height: size28 }}
       >
         {colors.map((color) => (
           <button

apps/readest-app/src/app/reader/components/annotator/PopupButton.tsx

@@ -20,7 +20,7 @@ const PopupButton: React.FC<PopupButtonProps> = ({ showTooltip, tooltipText, Ico
     >
       <button
         onClick={handleClick}
-        className='my-2 flex h-8 min-h-8 w-8 items-center justify-center p-0'
+        className='flex h-8 min-h-8 w-8 items-center justify-center p-0'
       >
         <Icon />
       </button>

apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx

@@ -41,7 +41,10 @@ const FontDropdown: React.FC<DropdownProps> = ({
       </button>
       <ul
         tabIndex={0}
-        className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
+        className={clsx(
+          'dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0',
+          'inline max-h-80 overflow-y-scroll',
+        )}
       >
         {options.map(({ option, label }) => (
           <li key={option} onClick={() => onSelect(option)}>

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react';
 
 import {
   ANDROID_FONTS,
+  CJK_FONTS_PATTENS,
+  CJK_NAMES_PATTENS,
   IOS_FONTS,
   LINUX_FONTS,
   MACOS_FONTS,
@@ -14,7 +16,7 @@ import {
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useEnv } from '@/context/EnvContext';
-import { getOSPlatform } from '@/utils/misc';
+import { getOSPlatform, isCJKEnv } from '@/utils/misc';
 import { getSysFontsList } from '@/utils/font';
 import { isTauriAppPlatform } from '@/services/environment';
 import { saveViewSettings } from '../../utils/viewSettingsHelper';
@@ -63,8 +65,9 @@ const FontFace = ({
 const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
-  const { getViewSettings } = useReaderStore();
+  const { getView, getViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
+  const view = getView(bookKey)!;
 
   const fontFamilyOptions = [
     {
@@ -103,6 +106,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [minFontSize, setMinFontSize] = useState(viewSettings.minimumFontSize!);
   const [overrideFont, setOverrideFont] = useState(viewSettings.overrideFont!);
   const [defaultFont, setDefaultFont] = useState(viewSettings.defaultFont!);
+  const [defaultCJKFont, setDefaultCJKFont] = useState(viewSettings.defaultCJKFont!);
   const [serifFont, setSerifFont] = useState(viewSettings.serifFont!);
   const [sansSerifFont, setSansSerifFont] = useState(viewSettings.sansSerifFont!);
   const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!);
@@ -122,6 +126,11 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultFont]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'defaultCJKFont', defaultCJKFont);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultCJKFont]);
+
   useEffect(() => {
     saveViewSettings(envConfig, bookKey, 'defaultFontSize', defaultFontSize);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -224,6 +233,19 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               />
             </div>
 
+            {(isCJKEnv() || view?.language.isCJK) && (
+              <FontFace
+                className='config-item-top'
+                family='serif'
+                label={_('CJK Font')}
+                options={sysFonts.filter(
+                  (font) => CJK_FONTS_PATTENS.test(font) || CJK_NAMES_PATTENS.test(font),
+                )}
+                selected={defaultCJKFont}
+                onSelect={setDefaultCJKFont}
+              />
+            )}
+
             <div className='config-item'>
               <span className=''>{_('Override Book Font')}</span>
               <input

apps/readest-app/src/app/reader/components/tts/TTSControl.tsx

@@ -11,6 +11,7 @@ import { eventDispatcher } from '@/utils/event';
 import { parseSSMLLang } from '@/utils/ssml';
 import { getOSPlatform } from '@/utils/misc';
 import { throttle } from '@/utils/throttle';
+import { invokeUseBackgroundAudio } from '@/utils/bridge';
 import Popup from '@/components/Popup';
 import TTSPanel from './TTSPanel';
 import TTSIcon from './TTSIcon';
@@ -33,21 +34,42 @@ const TTSControl = () => {
   const [panelPosition, setPanelPosition] = useState<Position>();
   const [trianglePosition, setTrianglePosition] = useState<Position>();
 
+  const [timeoutOption, setTimeoutOption] = useState(0);
+  const [timeoutTimestamp, setTimeoutTimestamp] = useState(0);
+  const [timeoutFunc, setTimeoutFunc] = useState<ReturnType<typeof setTimeout> | null>(null);
+
   const popupWidth = useResponsiveSize(POPUP_WIDTH);
   const popupHeight = useResponsiveSize(POPUP_HEIGHT);
   const popupPadding = useResponsiveSize(POPUP_PADDING);
 
   const iconRef = useRef<HTMLDivElement>(null);
   const ttsControllerRef = useRef<TTSController | null>(null);
+  const unblockerAudioRef = useRef<HTMLAudioElement | null>(null);
 
   // this enables WebAudio to play even when the mute toggle switch is ON
   const unblockAudio = () => {
-    const audio = document.createElement('audio');
-    audio.setAttribute('x-webkit-airplay', 'deny');
-    audio.preload = 'auto';
-    audio.loop = true;
-    audio.src = SILENCE_DATA;
-    audio.play();
+    if (unblockerAudioRef.current) return;
+    unblockerAudioRef.current = document.createElement('audio');
+    unblockerAudioRef.current.setAttribute('x-webkit-airplay', 'deny');
+    unblockerAudioRef.current.preload = 'auto';
+    unblockerAudioRef.current.loop = true;
+    unblockerAudioRef.current.src = SILENCE_DATA;
+    unblockerAudioRef.current.play();
+  };
+
+  const releaseUnblockAudio = () => {
+    if (!unblockerAudioRef.current) return;
+    try {
+      unblockerAudioRef.current.pause();
+      unblockerAudioRef.current.currentTime = 0;
+      unblockerAudioRef.current.removeAttribute('src');
+      unblockerAudioRef.current.src = '';
+      unblockerAudioRef.current.load();
+      unblockerAudioRef.current = null;
+      console.log('Unblock audio released');
+    } catch (err) {
+      console.warn('Error releasing unblock audio:', err);
+    }
   };
 
   useEffect(() => {
@@ -94,6 +116,9 @@ const TTSControl = () => {
     setShowIndicator(true);
 
     try {
+      if (appService?.isIOSApp) {
+        await invokeUseBackgroundAudio({ enabled: true });
+      }
       if (getOSPlatform() === 'ios' || appService?.isIOSApp) {
         unblockAudio();
       }
@@ -121,11 +146,8 @@ const TTSControl = () => {
     }
   };
 
-  const handleTTSStop = async (event: CustomEvent) => {
-    const { bookKey: stopBookKey } = event.detail;
-    if (bookKey === stopBookKey) {
-      handleStop();
-    }
+  const handleTTSStop = async () => {
+    handleStop();
   };
 
   const handleQueryIsSpeaking = () => {
@@ -177,6 +199,12 @@ const TTSControl = () => {
       setShowPanel(false);
       setShowIndicator(false);
     }
+    if (appService?.isIOSApp) {
+      await invokeUseBackgroundAudio({ enabled: false });
+    }
+    if (getOSPlatform() === 'ios' || appService?.isIOSApp) {
+      releaseUnblockAudio();
+    }
   };
 
   // rate range: 0.5 - 3, 1.0 is normal speed
@@ -230,6 +258,23 @@ const TTSControl = () => {
     return '';
   };
 
+  const handleSelectTimeout = (value: number) => {
+    setTimeoutOption(value);
+    if (timeoutFunc) {
+      clearTimeout(timeoutFunc);
+    }
+    if (value > 0) {
+      setTimeoutFunc(
+        setTimeout(() => {
+          handleStop();
+        }, value * 1000),
+      );
+      setTimeoutTimestamp(Date.now() + value * 1000);
+    } else {
+      setTimeoutTimestamp(0);
+    }
+  };
+
   const updatePanelPosition = () => {
     if (iconRef.current) {
       const rect = iconRef.current.getBoundingClientRect();
@@ -296,14 +341,16 @@ const TTSControl = () => {
             bookKey={bookKey}
             ttsLang={ttsLang}
             isPlaying={isPlaying}
+            timeoutOption={timeoutOption}
+            timeoutTimestamp={timeoutTimestamp}
             onTogglePlay={handleTogglePlay}
             onBackward={handleBackward}
             onForward={handleForward}
-            onStop={handleStop}
             onSetRate={handleSetRate}
             onGetVoices={handleGetVoices}
             onSetVoice={handleSetVoice}
             onGetVoiceId={handleGetVoiceId}
+            onSelectTimeout={handleSelectTimeout}
           />
         </Popup>
       )}

apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import React, { useState, ChangeEvent, useEffect } from 'react';
-import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdStop } from 'react-icons/md';
+import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdAlarm } from 'react-icons/md';
 import { RiVoiceAiFill } from 'react-icons/ri';
 import { MdCheck } from 'react-icons/md';
 import { TTSVoice } from '@/services/tts';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
-import { useTranslation } from '@/hooks/useTranslation';
+import { TranslationFunc, useTranslation } from '@/hooks/useTranslation';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize';
 
@@ -14,28 +14,104 @@ type TTSPanelProps = {
   bookKey: string;
   ttsLang: string;
   isPlaying: boolean;
+  timeoutOption: number;
+  timeoutTimestamp: number;
   onTogglePlay: () => void;
   onBackward: () => void;
   onForward: () => void;
-  onStop: () => void;
   onSetRate: (rate: number) => void;
   onGetVoices: (lang: string) => Promise<TTSVoice[]>;
   onSetVoice: (voice: string) => void;
   onGetVoiceId: () => string;
+  onSelectTimeout: (value: number) => void;
+};
+
+const getTTSTimeoutOptions = (_: TranslationFunc) => {
+  return [
+    {
+      label: _('No Timeout'),
+      value: 0,
+    },
+    {
+      label: _('{{value}} minute', { value: 1 }),
+      value: 60,
+    },
+    {
+      label: _('{{value}} minutes', { value: 3 }),
+      value: 180,
+    },
+    {
+      label: _('{{value}} minutes', { value: 5 }),
+      value: 300,
+    },
+    {
+      label: _('{{value}} minutes', { value: 10 }),
+      value: 600,
+    },
+    {
+      label: _('{{value}} minutes', { value: 20 }),
+      value: 1200,
+    },
+    {
+      label: _('{{value}} minutes', { value: 30 }),
+      value: 1800,
+    },
+    {
+      label: _('{{value}} minutes', { value: 45 }),
+      value: 2700,
+    },
+    {
+      label: _('{{value}} hour', { value: 1 }),
+      value: 3600,
+    },
+    {
+      label: _('{{value}} hours', { value: 2 }),
+      value: 7200,
+    },
+    {
+      label: _('{{value}} hours', { value: 3 }),
+      value: 10800,
+    },
+    {
+      label: _('{{value}} hours', { value: 4 }),
+      value: 14400,
+    },
+    {
+      label: _('{{value}} hours', { value: 6 }),
+      value: 21600,
+    },
+    {
+      label: _('{{value}} hours', { value: 8 }),
+      value: 28800,
+    },
+  ];
+};
+
+const getCountdownTime = (timeout: number) => {
+  const now = Date.now();
+  if (timeout > now) {
+    const remainingTime = Math.floor((timeout - now) / 1000);
+    const minutes = Math.floor(remainingTime / 3600) * 60 + Math.floor((remainingTime % 3600) / 60);
+    const seconds = remainingTime % 60;
+    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  }
+  return '';
 };
 
 const TTSPanel = ({
   bookKey,
   ttsLang,
   isPlaying,
+  timeoutOption,
+  timeoutTimestamp,
   onTogglePlay,
   onBackward,
   onForward,
-  onStop,
   onSetRate,
   onGetVoices,
   onSetVoice,
   onGetVoiceId,
+  onSelectTimeout,
 }: TTSPanelProps) => {
   const _ = useTranslation();
   const { envConfig } = useEnv();
@@ -47,6 +123,10 @@ const TTSPanel = ({
   const [rate, setRate] = useState(viewSettings?.ttsRate ?? 1.0);
   const [selectedVoice, setSelectedVoice] = useState(viewSettings?.ttsVoice ?? '');
 
+  const [timeoutCountdown, setTimeoutCountdown] = useState(() => {
+    return getCountdownTime(timeoutTimestamp);
+  });
+
   const defaultIconSize = useDefaultIconSize();
   const iconSize32 = useResponsiveSize(32);
   const iconSize48 = useResponsiveSize(48);
@@ -72,6 +152,23 @@ const TTSPanel = ({
     setViewSettings(bookKey, viewSettings);
   };
 
+  const updateTimeout = (timeout: number) => {
+    const now = Date.now();
+    if (timeout > 0 && timeout < now) {
+      onSelectTimeout(0);
+      setTimeoutCountdown('');
+    } else if (timeout > 0) {
+      setTimeoutCountdown(getCountdownTime(timeout));
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      updateTimeout(timeoutTimestamp);
+    }, 1000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeoutTimestamp, timeoutCountdown]);
+
   useEffect(() => {
     const voiceId = onGetVoiceId();
     setSelectedVoice(voiceId);
@@ -87,6 +184,8 @@ const TTSPanel = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ttsLang]);
 
+  const timeoutOptions = getTTSTimeoutOptions(_);
+
   return (
     <div className='flex w-full flex-col items-center justify-center gap-2 rounded-2xl p-4'>
       <div className='flex w-full flex-col items-center gap-0.5'>
@@ -132,9 +231,40 @@ const TTSPanel = ({
         <button onClick={onForward} className='rounded-full p-1'>
           <MdFastForward size={iconSize32} />
         </button>
-        <button onClick={onStop} className='rounded-full p-1'>
-          <MdStop size={iconSize32} />
-        </button>
+        <div className='dropdown dropdown-top'>
+          <button className='flex flex-col items-center justify-center rounded-full p-1'>
+            <MdAlarm size={iconSize32} />
+            {timeoutCountdown && (
+              <span
+                className={clsx(
+                  'absolute bottom-0 left-1/2 w-12 translate-x-[-50%] translate-y-[80%] px-1',
+                  'bg-primary/80 text-base-100 rounded-full text-center text-xs',
+                )}
+              >
+                {timeoutCountdown}
+              </span>
+            )}
+          </button>
+          <ul
+            tabIndex={0}
+            className={clsx(
+              'dropdown-content bgcolor-base-200 no-triangle menu menu-vertical rounded-box absolute right-0 z-[1] shadow',
+              'mt-4 inline max-h-96 w-[250px] overflow-y-scroll',
+            )}
+          >
+            {timeoutOptions.map((option, index) => (
+              <li key={`${index}-${option.value}`} onClick={() => onSelectTimeout(option.value)}>
+                <div className='flex items-center px-2'>
+                  <span style={{ minWidth: `${defaultIconSize}px` }}>
+                    {timeoutOption === option.value && <MdCheck className='text-base-content' />}
+                  </span>
+                  <span className={clsx('text-base sm:text-sm')}>{option.label}</span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
         <div className='dropdown dropdown-top'>
           <button tabIndex={0} className='rounded-full p-1'>
             <RiVoiceAiFill size={iconSize32} />

apps/readest-app/src/app/reader/hooks/useIframeEvents.ts

@@ -43,7 +43,10 @@ export const useClickEvent = (
             if (!consumed) {
               const centerStartX = viewStartX + viewRect.width * 0.375;
               const centerEndX = viewStartX + viewRect.width * 0.625;
-              if (screenX >= centerStartX && screenX <= centerEndX) {
+              if (
+                viewSettings.disableClick! ||
+                (screenX >= centerStartX && screenX <= centerEndX)
+              ) {
                 // toggle visibility of the header bar and the footer bar
                 setHoveredBookKey(hoveredBookKey ? null : bookKey);
               } else {

apps/readest-app/src/libs/edgeTTS.ts

@@ -143,8 +143,7 @@ const hashPayload = (payload: EdgeTTSPayload): string => {
 
 export class EdgeSpeechTTS {
   static voices = genVoiceList(EDGE_TTS_VOICES);
-  private static audioCache = new LRUCache<string, AudioBuffer>(200);
-  private audioContext = new AudioContext();
+  private static audioCache = new LRUCache<string, ArrayBuffer>(200);
 
   constructor() {}
 
@@ -267,17 +266,16 @@ export class EdgeSpeechTTS {
     return this.#fetchEdgeSpeechWs(payload);
   }
 
-  async createAudio(payload: EdgeTTSPayload): Promise<AudioBuffer> {
+  async createAudio(payload: EdgeTTSPayload): Promise<Blob> {
     const cacheKey = hashPayload(payload);
     if (EdgeSpeechTTS.audioCache.has(cacheKey)) {
-      return EdgeSpeechTTS.audioCache.get(cacheKey)!;
+      return new Blob([EdgeSpeechTTS.audioCache.get(cacheKey)!], { type: 'audio/mpeg' });
     }
     try {
       const res = await this.create(payload);
       const arrayBuffer = await res.arrayBuffer();
-      const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer.slice(0));
-      EdgeSpeechTTS.audioCache.set(cacheKey, audioBuffer);
-      return audioBuffer;
+      EdgeSpeechTTS.audioCache.set(cacheKey, arrayBuffer);
+      return new Blob([arrayBuffer], { type: 'audio/mpeg' });
     } catch (error) {
       throw error;
     }

apps/readest-app/src/services/appService.ts

@@ -1,4 +1,4 @@
-import { AppPlatform, AppService, ToastType } from '@/types/system';
+import { AppPlatform, AppService } from '@/types/system';
 
 import { SystemSettings } from '@/types/settings';
 import { FileSystem, BaseDir } from '@/types/system';
@@ -62,13 +62,9 @@ export abstract class BaseAppService implements AppService {
   abstract getCoverImageUrl(book: Book): string;
   abstract getCoverImageBlobUrl(book: Book): Promise<string>;
   abstract getInitBooksDir(): Promise<string>;
+  abstract getCacheDir(): Promise<string>;
+  abstract selectDirectory(): Promise<string>;
   abstract selectFiles(name: string, extensions: string[]): Promise<string[]>;
-  abstract showMessage(
-    msg: string,
-    kind?: ToastType,
-    title?: string,
-    okLabel?: string,
-  ): Promise<void>;
 
   async loadSettings(): Promise<SystemSettings> {
     let settings: SystemSettings;
@@ -118,9 +114,12 @@ export abstract class BaseAppService implements AppService {
     }
 
     this.localBooksDir = settings.localBooksDir;
+    const cacheDir = await this.getCacheDir();
     this.fs.getPrefix = (baseDir: BaseDir) => {
       if (baseDir === 'Books') {
         return this.localBooksDir;
+      } else if (baseDir === 'Cache') {
+        return cacheDir;
       }
       return null;
     };

apps/readest-app/src/services/constants.ts

@@ -34,6 +34,7 @@ export const BOOK_UNGROUPED_ID = '';
 export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   keepLogin: false,
   autoUpload: true,
+  alwaysOnTop: false,
   autoCheckUpdates: true,
   screenWakeLock: true,
   autoImportBooksOnOpen: false,
@@ -65,6 +66,7 @@ export const DEFAULT_BOOK_FONT: BookFont = {
   sansSerifFont: 'Roboto',
   monospaceFont: 'Consolas',
   defaultFont: 'Serif',
+  defaultCJKFont: 'LXGW WenKai GB Screen',
   defaultFontSize: 16,
   minimumFontSize: 8,
   fontWeight: 400,
@@ -180,6 +182,7 @@ export const WINDOWS_FONTS = [
   'Leelawadee UI',
   'Lucida Console',
   'Lucida Sans Unicode',
+  'LXGW WenKai GB Screen',
   'Malgun Gothic',
   'Marlett',
   'Microsoft Himalaya',
@@ -274,6 +277,7 @@ export const MACOS_FONTS = [
   'Kozuka Mincho Pro',
   'Lucida Grande',
   'Luminari',
+  'LXGW WenKai GB Screen',
   'Marker Felt',
   'Menlo',
   'Microsoft Sans Serif',
@@ -330,6 +334,7 @@ export const LINUX_FONTS = [
   'Liberation Mono',
   'Liberation Sans',
   'Liberation Serif',
+  'LXGW WenKai GB Screen',
   'Noto Mono',
   'Noto Sans',
   'Noto Sans JP',
@@ -366,6 +371,7 @@ export const IOS_FONTS = [
   'Hiragino Mincho',
   'Hiragino Sans',
   'Kaiti',
+  'LXGW WenKai GB Screen',
   'Palatino',
   'PingFang SC',
   'PingFang TC',
@@ -388,6 +394,7 @@ export const ANDROID_FONTS = [
   'Georgia',
   'Heiti',
   'Kaiti',
+  'LXGW WenKai GB Screen',
   'Noto Sans',
   'Noto Sans CJK',
   'Noto Sans JP',
@@ -405,6 +412,47 @@ export const ANDROID_FONTS = [
   'XiHeiti',
 ];
 
+export const CJK_NAMES_PATTENS = /[\u3040-\u30FF\u4E00-\u9FFF\uAC00-\uD7AF]/;
+export const CJK_FONTS_PATTENS = new RegExp(
+  [
+    'CJK',
+    'TC$',
+    'SC$',
+    'HK',
+    'JP',
+    'TW',
+    'Sim',
+    'Kai',
+    'Hei',
+    'Yan',
+    'Min',
+    'Yuan',
+    'Song',
+    'Ming',
+    'FZ',
+    'FangZheng',
+    'WenQuanYi',
+    'PingFang',
+    'Hiragino',
+    'Meiryo',
+    'Source\\s?Han',
+    'Yu\\s?Gothic',
+    'Yu\\s?Mincho',
+    'Mincho',
+    'Gothic',
+    'Nanum',
+    'Malgun',
+    'Gulim',
+    'Dotum',
+    'Batang',
+    'Gungsuh',
+    'OPPO sans',
+    'MiSans',
+    'Fallback',
+  ].join('|'),
+  'i',
+);
+
 export const BOOK_IDS_SEPARATOR = '+';
 
 export const DOWNLOAD_READEST_URL = 'https://readest.com?utm_source=readest_web';

apps/readest-app/src/services/nativeAppService.ts

@@ -13,12 +13,12 @@ import {
   WriteFileOptions,
 } from '@tauri-apps/plugin-fs';
 import { convertFileSrc } from '@tauri-apps/api/core';
-import { open as openDialog, message } from '@tauri-apps/plugin-dialog';
-import { join, appDataDir } from '@tauri-apps/api/path';
+import { open as openDialog } from '@tauri-apps/plugin-dialog';
+import { join, appDataDir, appCacheDir } from '@tauri-apps/api/path';
 import { type as osType } from '@tauri-apps/plugin-os';
 
 import { Book } from '@/types/book';
-import { ToastType, FileSystem, BaseDir, AppPlatform } from '@/types/system';
+import { FileSystem, BaseDir, AppPlatform } from '@/types/system';
 import { isContentURI, isValidURL } from '@/utils/misc';
 import { getCoverFilename, getFilename } from '@/utils/book';
 import { copyURIToPath } from '@/utils/bridge';
@@ -80,7 +80,22 @@ export const nativeFileSystem: FileSystem = {
     if (isValidURL(path)) {
       return await new RemoteFile(path, name).open();
     } else if (isContentURI(path)) {
-      return await new NativeFile(fp, fname, base ? baseDir : null).open();
+      if (path.includes('com.android.externalstorage')) {
+        // If the URI is from shared internal storage (like /storage/emulated/0),
+        // we can access it directly using the path — no need to copy.
+        return await new NativeFile(fp, fname, base ? baseDir : null).open();
+      } else {
+        // Otherwise, for content:// URIs (e.g. from MediaStore, Drive, or third-party apps),
+        // we cannot access the file directly — so we copy it to a temporary cache location.
+        const prefix = this.getPrefix('Cache');
+        const dst = `${prefix}/${fname}`;
+        const res = await copyURIToPath({ uri: path, dst });
+        if (!res.success) {
+          console.error('Failed to open file:', res);
+          throw new Error('Failed to open file');
+        }
+        return await new NativeFile(dst, fname, base ? baseDir : null).open();
+      }
     } else {
       const prefix = this.getPrefix(base);
       if (prefix && OS_TYPE !== 'android') {
@@ -213,6 +228,18 @@ export class NativeAppService extends BaseAppService {
     return join(await appDataDir(), LOCAL_BOOKS_SUBDIR);
   }
 
+  async getCacheDir(): Promise<string> {
+    return await appCacheDir();
+  }
+
+  async selectDirectory(): Promise<string> {
+    const selected = await openDialog({
+      directory: true,
+      multiple: false,
+    });
+    return selected as string;
+  }
+
   async selectFiles(name: string, extensions: string[]): Promise<string[]> {
     const selected = await openDialog({
       multiple: true,
@@ -221,15 +248,6 @@ export class NativeAppService extends BaseAppService {
     return Array.isArray(selected) ? selected : selected ? [selected] : [];
   }
 
-  async showMessage(
-    msg: string,
-    kind: ToastType = 'info',
-    title?: string,
-    okLabel?: string,
-  ): Promise<void> {
-    await message(msg, { kind, title, okLabel });
-  }
-
   getCoverImageUrl = (book: Book): string => {
     return this.fs.getURL(`${this.localBooksDir}/${getCoverFilename(book)}`);
   };

apps/readest-app/src/services/tts/EdgeTTSClient.ts

@@ -13,31 +13,19 @@ export class EdgeTTSClient implements TTSClient {
   #voices: TTSVoice[] = [];
   #edgeTTS: EdgeSpeechTTS;
 
-  static #audioContext: AudioContext | null;
-  #sourceNode: AudioBufferSourceNode | null = null;
+  #audioElement: HTMLAudioElement | null = null;
   #isPlaying = false;
   #pausedAt = 0;
   #startedAt = 0;
-  #audioBuffer: AudioBuffer | null = null;
   available = true;
 
   constructor() {
     this.#edgeTTS = new EdgeSpeechTTS();
   }
 
-  async initializeAudioContext() {
-    if (!EdgeTTSClient.#audioContext) {
-      EdgeTTSClient.#audioContext = new AudioContext();
-    }
-    if (EdgeTTSClient.#audioContext.state === 'suspended') {
-      await EdgeTTSClient.#audioContext.resume();
-    }
-  }
-
   async init() {
     this.#voices = EdgeSpeechTTS.voices;
     try {
-      await this.initializeAudioContext();
       await this.#edgeTTS.create({
         lang: 'en',
         text: 'test',
@@ -115,15 +103,12 @@ export class EdgeTTSClient implements TTSClient {
         break;
       }
       try {
-        this.#audioBuffer = await this.#edgeTTS.createAudio(
-          this.getPayload(lang, mark.text, voiceId),
-        );
-        if (!EdgeTTSClient.#audioContext) {
-          EdgeTTSClient.#audioContext = new AudioContext();
-        }
-        this.#sourceNode = EdgeTTSClient.#audioContext.createBufferSource();
-        this.#sourceNode.buffer = this.#audioBuffer;
-        this.#sourceNode.connect(EdgeTTSClient.#audioContext.destination);
+        const blob = await this.#edgeTTS.createAudio(this.getPayload(lang, mark.text, voiceId));
+        const url = URL.createObjectURL(blob);
+        this.#audioElement = new Audio(url);
+        const audio = this.#audioElement;
+        audio.setAttribute('x-webkit-airplay', 'deny');
+        audio.preload = 'auto';
 
         yield {
           code: 'boundary',
@@ -132,36 +117,37 @@ export class EdgeTTSClient implements TTSClient {
         };
 
         const result = await new Promise<TTSMessageEvent>((resolve) => {
-          if (EdgeTTSClient.#audioContext === null || this.#sourceNode === null) {
-            throw new Error('Audio context or source node is null');
-          }
-          this.#sourceNode.onended = (event: Event) => {
-            // chunk finished speaking or aborted speaking
-            if (signal.aborted || event.type === 'stopped') {
-              resolve({
-                code: 'error',
-                message: 'Aborted',
-              });
-              return;
+          const cleanUp = () => {
+            audio.onended = null;
+            audio.onerror = null;
+            audio.pause();
+            audio.src = '';
+            URL.revokeObjectURL(url);
+          };
+          audio.onended = () => {
+            cleanUp();
+            if (signal.aborted) {
+              resolve({ code: 'error', message: 'Aborted' });
+            } else {
+              resolve({ code: 'end', message: `Chunk finished: ${mark.name}` });
             }
-            resolve({
-              code: 'end',
-              message: `Chunk finished: ${mark.name}`,
-            });
+          };
+          audio.onerror = (e) => {
+            cleanUp();
+            console.warn('Audio playback error:', e);
+            resolve({ code: 'error', message: 'Audio playback error' });
           };
           if (signal.aborted) {
-            resolve({
-              code: 'error',
-              message: 'Aborted',
-            });
+            cleanUp();
+            resolve({ code: 'error', message: 'Aborted' });
             return;
           }
-          if (EdgeTTSClient.#audioContext.state === 'suspended') {
-            EdgeTTSClient.#audioContext.resume();
-          }
-          this.#sourceNode.start(0);
           this.#isPlaying = true;
-          this.#startedAt = EdgeTTSClient.#audioContext.currentTime;
+          audio.play().catch((err) => {
+            cleanUp();
+            console.error('Failed to play audio:', err);
+            resolve({ code: 'error', message: 'Playback failed: ' + err.message });
+          });
         });
         yield result;
       } catch (error) {
@@ -186,17 +172,17 @@ export class EdgeTTSClient implements TTSClient {
   }
 
   async pause() {
-    if (!this.#isPlaying || !EdgeTTSClient.#audioContext) return;
-    this.#pausedAt = EdgeTTSClient.#audioContext.currentTime - this.#startedAt;
-    await EdgeTTSClient.#audioContext.suspend();
+    if (!this.#isPlaying || !this.#audioElement) return;
+    this.#pausedAt = this.#audioElement.currentTime - this.#startedAt;
+    await this.#audioElement.pause();
     this.#isPlaying = false;
   }
 
   async resume() {
-    if (this.#isPlaying || !EdgeTTSClient.#audioContext) return;
-    await EdgeTTSClient.#audioContext.resume();
+    if (this.#isPlaying || !this.#audioElement) return;
+    await this.#audioElement.play();
     this.#isPlaying = true;
-    this.#startedAt = EdgeTTSClient.#audioContext.currentTime - this.#pausedAt;
+    this.#startedAt = this.#audioElement.currentTime - this.#pausedAt;
   }
 
   async stop() {
@@ -207,21 +193,18 @@ export class EdgeTTSClient implements TTSClient {
     this.#isPlaying = false;
     this.#pausedAt = 0;
     this.#startedAt = 0;
-    if (this.#sourceNode) {
-      try {
-        this.#sourceNode.stop();
-        if (this.#sourceNode?.onended) {
-          this.#sourceNode.onended(new Event('stopped'));
-        }
-      } catch (err) {
-        if (!(err instanceof Error) || err.name !== 'InvalidStateError') {
-          console.log('Error stopping source node:', err);
-        }
+    if (this.#audioElement) {
+      this.#audioElement.pause();
+      this.#audioElement.currentTime = 0;
+      if (this.#audioElement?.onended) {
+        this.#audioElement.onended(new Event('stopped'));
       }
-      this.#sourceNode.disconnect();
-      this.#sourceNode = null;
+      if (this.#audioElement.src?.startsWith('blob:')) {
+        URL.revokeObjectURL(this.#audioElement.src);
+      }
+      this.#audioElement.src = '';
+      this.#audioElement = null;
     }
-    this.#audioBuffer = null;
   }
 
   async setRate(rate: number) {

apps/readest-app/src/services/webAppService.ts

@@ -1,5 +1,5 @@
 import { Book } from '@/types/book';
-import { ToastType, FileSystem, BaseDir, AppPlatform } from '@/types/system';
+import { FileSystem, BaseDir, AppPlatform } from '@/types/system';
 import { getCoverFilename } from '@/utils/book';
 import { getOSPlatform, isValidURL } from '@/utils/misc';
 import { RemoteFile } from '@/utils/file';
@@ -212,6 +212,10 @@ export class WebAppService extends BaseAppService {
     return LOCAL_BOOKS_SUBDIR;
   }
 
+  async getCacheDir(): Promise<string> {
+    return 'Cache';
+  }
+
   async selectDirectory(): Promise<string> {
     throw new Error('selectDirectory is not supported in browser');
   }
@@ -220,10 +224,6 @@ export class WebAppService extends BaseAppService {
     throw new Error('selectFiles is not supported in browser');
   }
 
-  async showMessage(msg: string, kind: ToastType = 'info'): Promise<void> {
-    alert(`${kind.toUpperCase()}: ${msg}`);
-  }
-
   getCoverImageUrl = (book: Book): string => {
     return this.fs.getURL(`${LOCAL_BOOKS_SUBDIR}/${getCoverFilename(book)}`);
   };

apps/readest-app/src/types/book.ts

@@ -105,6 +105,7 @@ export interface BookFont {
   sansSerifFont: string;
   monospaceFont: string;
   defaultFont: string;
+  defaultCJKFont: string;
   defaultFontSize: number;
   minimumFontSize: number;
   fontWeight: number;

apps/readest-app/src/types/settings.ts

@@ -22,6 +22,7 @@ export interface SystemSettings {
 
   keepLogin: boolean;
   autoUpload: boolean;
+  alwaysOnTop: boolean;
   autoCheckUpdates: boolean;
   screenWakeLock: boolean;
   autoImportBooksOnOpen: boolean;

apps/readest-app/src/types/system.ts

@@ -5,7 +5,6 @@ import { ProgressHandler } from '@/utils/transfer';
 
 export type AppPlatform = 'web' | 'tauri';
 export type BaseDir = 'Books' | 'Settings' | 'Data' | 'Log' | 'Cache' | 'None';
-export type ToastType = 'info' | 'warning' | 'error';
 
 export interface FileSystem {
   getURL(path: string): string;
@@ -39,9 +38,8 @@ export interface AppService {
   isAndroidApp: boolean;
   isIOSApp: boolean;
 
+  selectDirectory(): Promise<string>;
   selectFiles(name: string, extensions: string[]): Promise<string[]>;
-  showMessage(msg: string, kind?: ToastType, title?: string, okLabel?: string): Promise<void>;
-
   loadSettings(): Promise<SystemSettings>;
   saveSettings(settings: SystemSettings): Promise<void>;
   importBook(

apps/readest-app/src/utils/bridge.ts

@@ -10,6 +10,10 @@ export interface CopyURIResponse {
   error?: string;
 }
 
+export interface UseBackgroundAudioRequest {
+  enabled: boolean;
+}
+
 export async function copyURIToPath(request: CopyURIRequest): Promise<CopyURIResponse> {
   const result = await invoke<CopyURIResponse>('plugin:native-bridge|copy_uri_to_path', {
     payload: request,
@@ -17,3 +21,9 @@ export async function copyURIToPath(request: CopyURIRequest): Promise<CopyURIRes
 
   return result;
 }
+
+export async function invokeUseBackgroundAudio(request: UseBackgroundAudioRequest): Promise<void> {
+  await invoke('plugin:native-bridge|use_background_audio', {
+    payload: request,
+  });
+}

apps/readest-app/src/utils/misc.ts

@@ -32,7 +32,12 @@ export const makeSafeFilename = (filename: string, replacement = '_') => {
 
 export const getUserLang = () => navigator?.language.split('-')[0] || 'en';
 
-export const isCJKEnv = () => ['zh', 'ja', 'ko'].includes(getUserLang());
+export const isCJKEnv = () => {
+  const isCJKLocale = ['zh', 'ja', 'ko'].includes(getUserLang());
+  const uiLanguage = localStorage.getItem('i18nextLng') || '';
+  const isCJKUI = ['zh', 'ja', 'ko'].some((lang) => uiLanguage.startsWith(lang));
+  return isCJKLocale || isCJKUI;
+};
 
 export const getUserLocale = (lang: string): string | undefined => {
   const languages =

apps/readest-app/src/utils/style.ts

@@ -8,7 +8,6 @@ import { ViewSettings } from '@/types/book';
 import {
   themes,
   Palette,
-  ThemeMode,
   CustomTheme,
   generateLightPalette,
   generateDarkPalette,
@@ -22,6 +21,7 @@ const getFontStyles = (
   sansSerif: string,
   monospace: string,
   defaultFont: string,
+  defaultCJKFont: string,
   fontSize: number,
   minFontSize: number,
   fontWeight: number,
@@ -29,16 +29,22 @@ const getFontStyles = (
   themeCode: ThemeCode,
 ) => {
   const { primary } = themeCode;
-  const lastSerifFonts = ['Georgia', 'Times New Roman'];
+  const lastSerifFonts = ['LXGW WenKai GB Screen', 'Georgia', 'Times New Roman'];
   const serifFonts = [
     serif,
-    ...SERIF_FONTS.filter((font) => font !== serif && !lastSerifFonts.includes(font)),
+    ...SERIF_FONTS.filter(
+      (font) => font !== serif && font !== defaultCJKFont && !lastSerifFonts.includes(font),
+    ),
+    ...(defaultCJKFont !== serif && !lastSerifFonts.includes(defaultCJKFont)
+      ? [defaultCJKFont]
+      : []),
     ...lastSerifFonts.filter((font) => SERIF_FONTS.includes(font)),
     ...FALLBACK_FONTS,
   ];
   const sansSerifFonts = [
     sansSerif,
-    ...SANS_SERIF_FONTS.filter((font) => font !== sansSerif),
+    ...SANS_SERIF_FONTS.filter((font) => font !== sansSerif && font !== defaultCJKFont),
+    ...(defaultCJKFont !== sansSerif ? [defaultCJKFont] : []),
     ...FALLBACK_FONTS,
   ];
   const monospaceFonts = [monospace, ...MONOSPACE_FONTS.filter((font) => font !== monospace)];
@@ -312,7 +318,7 @@ export const getThemeCode = () => {
   let customThemes: CustomTheme[] = [];
   if (typeof window !== 'undefined') {
     themeColor = localStorage.getItem('themeColor') || 'default';
-    themeMode = localStorage.getItem('themeMode') as ThemeMode;
+    themeMode = localStorage.getItem('themeMode') || 'auto';
     customThemes = JSON.parse(localStorage.getItem('customThemes') || '[]');
     systemIsDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
   }
@@ -368,6 +374,7 @@ export const getStyles = (viewSettings: ViewSettings, themeCode?: ThemeCode) =>
     viewSettings.sansSerifFont!,
     viewSettings.monospaceFont!,
     viewSettings.defaultFont!,
+    viewSettings.defaultCJKFont!,
     viewSettings.defaultFontSize! * fontScale,
     viewSettings.minimumFontSize!,
     viewSettings.fontWeight!,

apps/readest-app/src/utils/window.ts

@@ -38,6 +38,16 @@ export const tauriHandleToggleFullScreen = async () => {
   await currentWindow.setFullscreen(newIsFullscreen);
 };
 
+export const tauriHandleSetAlwaysOnTop = async (isAlwaysOnTop: boolean) => {
+  const currentWindow = getCurrentWindow();
+  await currentWindow.setAlwaysOnTop(isAlwaysOnTop);
+};
+
+export const tauriGetAlwaysOnTop = async () => {
+  const currentWindow = getCurrentWindow();
+  return await currentWindow.isAlwaysOnTop();
+};
+
 export const tauriHandleOnWindowFocus = async (callback: () => void) => {
   const currentWindow = getCurrentWindow();
   return currentWindow.listen(TauriEvent.WINDOW_FOCUS, async () => {