forked from akai/readest
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Huang Xin
|
b91d7b7a61 | ||
|
Huang Xin
|
7c0d9bf375 | ||
|
Huang Xin
|
ea8ab91ed3 | ||
|
Huang Xin
|
efd415ece2 | ||
|
Huang Xin
|
ec86d68b80 | ||
|
Huang Xin
|
172ab382bc | ||
|
Huang Xin
|
ad551a04a1 | ||
|
Huang Xin
|
4dc943d23e | ||
|
Huang Xin
|
ee93885c04 | ||
|
Huang Xin
|
14c032aaff | ||
|
Huang Xin
|
2f619ca745 | ||
|
Huang Xin
|
8979827cf5 | ||
|
Huang Xin
|
ae16eeffa7 | ||
|
Huang Xin
|
8e96ef3e5d | ||
|
Huang Xin
|
38e24da968 |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@readest/readest-app",
|
||||
"version": "0.9.36",
|
||||
"version": "0.9.37",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "dotenv -e .env.tauri -- next dev",
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "ترتيب حسب...",
|
||||
"Added:": "تاريخ الإضافة:",
|
||||
"Format:": "التنسيق:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "الوصف:",
|
||||
"No description available": "لا يوجد وصف متاح",
|
||||
"List": "قائمة",
|
||||
"Grid": "شبكة"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Sortieren nach...",
|
||||
"Added:": "Hinzugefügt:",
|
||||
"Format:": "Format:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Beschreibung:",
|
||||
"No description available": "Keine Beschreibung verfügbar",
|
||||
"List": "Liste",
|
||||
"Grid": "Raster"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Ταξινόμηση κατά...",
|
||||
"Added:": "Προστέθηκε:",
|
||||
"Format:": "Μορφή:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Περιγραφή:",
|
||||
"No description available": "Δεν είναι διαθέσιμη καμία περιγραφή",
|
||||
"List": "Λίστα",
|
||||
"Grid": "Πλέγμα"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Ordenar por...",
|
||||
"Added:": "Agregado:",
|
||||
"Format:": "Formato:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Descripción:",
|
||||
"No description available": "No hay descripción disponible",
|
||||
"List": "Lista",
|
||||
"Grid": "Cuadrícula"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Trier par...",
|
||||
"Added:": "Ajouté :",
|
||||
"Format:": "Format :",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Description :",
|
||||
"No description available": "Aucune description disponible",
|
||||
"List": "Liste",
|
||||
"Grid": "Grille"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "द्वारा क्रमबद्ध करें...",
|
||||
"Added:": "जोड़ा गया:",
|
||||
"Format:": "फॉर्मेट:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "विवरण:",
|
||||
"No description available": "कोई विवरण उपलब्ध नहीं है",
|
||||
"List": "सूची",
|
||||
"Grid": "ग्रिड"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Urutkan berdasarkan...",
|
||||
"Added:": "Ditambahkan:",
|
||||
"Format:": "Format:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Deskripsi:",
|
||||
"No description available": "Tidak ada deskripsi yang tersedia",
|
||||
"List": "Daftar",
|
||||
"Grid": "Jala"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Ordina per...",
|
||||
"Added:": "Aggiunto:",
|
||||
"Format:": "Formato:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Descrizione:",
|
||||
"No description available": "Nessuna descrizione disponibile",
|
||||
"List": "Elenco",
|
||||
"Grid": "Griglia"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "並べ替え...",
|
||||
"Added:": "追加日：",
|
||||
"Format:": "形式：",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "説明：",
|
||||
"No description available": "説明はありません",
|
||||
"List": "リスト",
|
||||
"Grid": "グリッド"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "정렬 기준...",
|
||||
"Added:": "추가됨:",
|
||||
"Format:": "형식:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "설명:",
|
||||
"No description available": "설명 없음",
|
||||
"List": "목록",
|
||||
"Grid": "격자"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Sortuj według...",
|
||||
"Added:": "Data dodania:",
|
||||
"Format:": "Format:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Opis:",
|
||||
"No description available": "Brak opisu",
|
||||
"List": "Lista",
|
||||
"Grid": "Siatka"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Ordenar por...",
|
||||
"Added:": "Adicionado:",
|
||||
"Format:": "Formato:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Descrição:",
|
||||
"No description available": "Nenhuma descrição disponível",
|
||||
"List": "Lista",
|
||||
"Grid": "Grade"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Сортировать по...",
|
||||
"Added:": "Добавлено:",
|
||||
"Format:": "Формат:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Описание:",
|
||||
"No description available": "Нет доступного описания",
|
||||
"List": "Список",
|
||||
"Grid": "Сетка"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Şuna göre sırala...",
|
||||
"Added:": "Eklenme:",
|
||||
"Format:": "Biçim:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Tanım:",
|
||||
"No description available": "Tanım mevcut değil",
|
||||
"List": "Liste",
|
||||
"Grid": "Izgara"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Сортувати за...",
|
||||
"Added:": "Додано:",
|
||||
"Format:": "Формат:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Опис:",
|
||||
"No description available": "Опис недоступний",
|
||||
"List": "Список",
|
||||
"Grid": "Сітка"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "Sắp xếp theo...",
|
||||
"Added:": "Đã thêm:",
|
||||
"Format:": "Định dạng:",
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T"
|
||||
"GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
|
||||
"Description:": "Miêu tả:",
|
||||
"No description available": "Không có mô tả nào",
|
||||
"List": "Danh sách",
|
||||
"Grid": "Lưới"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "排序方式...",
|
||||
"Added:": "添加日期",
|
||||
"Format:": "格式",
|
||||
"GuanKiapTsingKhai-T": "原俠正楷-T"
|
||||
"GuanKiapTsingKhai-T": "原俠正楷-T",
|
||||
"Description:": "简介",
|
||||
"No description available": "暂无简介",
|
||||
"List": "列表",
|
||||
"Grid": "网格"
|
||||
}
|
||||
|
||||
@@ -292,5 +292,9 @@
|
||||
"Sort by...": "排序方式...",
|
||||
"Added:": "添加日期",
|
||||
"Format:": "格式",
|
||||
"GuanKiapTsingKhai-T": "原俠正楷-T"
|
||||
"GuanKiapTsingKhai-T": "原俠正楷-T",
|
||||
"Description:": "簡介",
|
||||
"No description available": "暫無簡介",
|
||||
"List": "列表",
|
||||
"Grid": "網格"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
{
|
||||
"releases": {
|
||||
"0.9.37": {
|
||||
"date": "2025-04-25",
|
||||
"notes": [
|
||||
"Full-Screen Toggle: You can now press F11 to quickly toggle full-screen mode",
|
||||
"List View: A new list layout is available for your bookshelf",
|
||||
"Book Details: Book descriptions from metadata are now shown in the details view",
|
||||
"Enhanced Android behavior: better navigation bar handling and status bar dismissal when resuming",
|
||||
"TTS now defaults to the book’s metadata language when needed",
|
||||
"Synced custom themes reliably across sessions"
|
||||
]
|
||||
},
|
||||
"0.9.36": {
|
||||
"date": "2025-04-20",
|
||||
"notes": [
|
||||
|
||||
+23
-2
@@ -177,8 +177,11 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
|
||||
window.setDecorFitsSystemWindows(false)
|
||||
val controller = window.insetsController
|
||||
if (controller != null) {
|
||||
controller.systemBarsBehavior =
|
||||
WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
||||
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
|
||||
controller.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
||||
} else {
|
||||
controller.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_BARS_BY_SWIPE
|
||||
}
|
||||
|
||||
if (isDarkMode) {
|
||||
controller.setSystemBarsAppearance(
|
||||
@@ -224,4 +227,22 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
|
||||
}
|
||||
invoke.resolve(ret)
|
||||
}
|
||||
|
||||
@Command
|
||||
fun get_status_bar_height(invoke: Invoke) {
|
||||
val ret = JSObject()
|
||||
try {
|
||||
val resourceId = activity.resources.getIdentifier("status_bar_height", "dimen", "android")
|
||||
val height = if (resourceId > 0) {
|
||||
activity.resources.getDimensionPixelSize(resourceId)
|
||||
} else {
|
||||
0
|
||||
}
|
||||
ret.put("height", height)
|
||||
} catch (e: Exception) {
|
||||
ret.put("height", -1)
|
||||
ret.put("error", e.message)
|
||||
}
|
||||
invoke.resolve(ret)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ const COMMANDS: &[&str] = &[
|
||||
"use_background_audio",
|
||||
"install_package",
|
||||
"set_system_ui_visibility",
|
||||
"get_status_bar_height",
|
||||
];
|
||||
|
||||
fn main() {
|
||||
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
# Automatically generated - DO NOT EDIT!
|
||||
|
||||
"$schema" = "../../schemas/schema.json"
|
||||
|
||||
[[permission]]
|
||||
identifier = "allow-get-status-bar-height"
|
||||
description = "Enables the get_status_bar_height command without any pre-configured scope."
|
||||
commands.allow = ["get_status_bar_height"]
|
||||
|
||||
[[permission]]
|
||||
identifier = "deny-get-status-bar-height"
|
||||
description = "Denies the get_status_bar_height command without any pre-configured scope."
|
||||
commands.deny = ["get_status_bar_height"]
|
||||
+27
@@ -10,6 +10,7 @@ Default permissions for the plugin
|
||||
- `allow-use-background-audio`
|
||||
- `allow-install-package`
|
||||
- `allow-set-system-ui-visibility`
|
||||
- `allow-get-status-bar-height`
|
||||
|
||||
## Permission Table
|
||||
|
||||
@@ -101,6 +102,32 @@ Denies the copy_uri_to_path command without any pre-configured scope.
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`native-bridge:allow-get-status-bar-height`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Enables the get_status_bar_height command without any pre-configured scope.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`native-bridge:deny-get-status-bar-height`
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Denies the get_status_bar_height command without any pre-configured scope.
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
`native-bridge:allow-install-package`
|
||||
|
||||
</td>
|
||||
|
||||
@@ -7,4 +7,5 @@ permissions = [
|
||||
"allow-use-background-audio",
|
||||
"allow-install-package",
|
||||
"allow-set-system-ui-visibility",
|
||||
"allow-get-status-bar-height",
|
||||
]
|
||||
|
||||
+14
-2
@@ -330,6 +330,18 @@
|
||||
"const": "deny-copy-uri-to-path",
|
||||
"markdownDescription": "Denies the copy_uri_to_path command without any pre-configured scope."
|
||||
},
|
||||
{
|
||||
"description": "Enables the get_status_bar_height command without any pre-configured scope.",
|
||||
"type": "string",
|
||||
"const": "allow-get-status-bar-height",
|
||||
"markdownDescription": "Enables the get_status_bar_height command without any pre-configured scope."
|
||||
},
|
||||
{
|
||||
"description": "Denies the get_status_bar_height command without any pre-configured scope.",
|
||||
"type": "string",
|
||||
"const": "deny-get-status-bar-height",
|
||||
"markdownDescription": "Denies the get_status_bar_height command without any pre-configured scope."
|
||||
},
|
||||
{
|
||||
"description": "Enables the install_package command without any pre-configured scope.",
|
||||
"type": "string",
|
||||
@@ -367,10 +379,10 @@
|
||||
"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`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`",
|
||||
"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`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`\n- `allow-get-status-bar-height`",
|
||||
"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`\n- `allow-use-background-audio`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`"
|
||||
"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`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`\n- `allow-get-status-bar-height`"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -51,3 +51,10 @@ pub(crate) async fn set_system_ui_visibility<R: Runtime>(
|
||||
) -> Result<SetSystemUIVisibilityResponse> {
|
||||
app.native_bridge().set_system_ui_visibility(payload)
|
||||
}
|
||||
|
||||
#[command]
|
||||
pub(crate) async fn get_status_bar_height<R: Runtime>(
|
||||
app: AppHandle<R>,
|
||||
) -> Result<GetStatusBarHeightResponse> {
|
||||
app.native_bridge().get_status_bar_height()
|
||||
}
|
||||
|
||||
@@ -43,4 +43,8 @@ impl<R: Runtime> NativeBridge<R> {
|
||||
) -> crate::Result<SetSystemUIVisibilityResponse> {
|
||||
Err(crate::Error::UnsupportedPlatformError)
|
||||
}
|
||||
|
||||
pub fn get_status_bar_height(&self) -> crate::Result<GetStatusBarHeightResponse> {
|
||||
Err(crate::Error::UnsupportedPlatformError)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,6 +43,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
|
||||
commands::use_background_audio,
|
||||
commands::install_package,
|
||||
commands::set_system_ui_visibility,
|
||||
commands::get_status_bar_height,
|
||||
])
|
||||
.setup(|app, api| {
|
||||
#[cfg(mobile)]
|
||||
|
||||
@@ -77,3 +77,11 @@ impl<R: Runtime> NativeBridge<R> {
|
||||
.map_err(Into::into)
|
||||
}
|
||||
}
|
||||
|
||||
impl<R: Runtime> NativeBridge<R> {
|
||||
pub fn get_status_bar_height(&self) -> crate::Result<GetStatusBarHeightResponse> {
|
||||
self.0
|
||||
.run_mobile_plugin("get_status_bar_height", ())
|
||||
.map_err(Into::into)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,3 +58,10 @@ pub struct SetSystemUIVisibilityResponse {
|
||||
pub success: bool,
|
||||
pub error: Option<String>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Deserialize, Serialize)]
|
||||
#[serde(rename_all = "camelCase")]
|
||||
pub struct GetStatusBarHeightResponse {
|
||||
pub height: u32,
|
||||
pub error: Option<String>,
|
||||
}
|
||||
|
||||
@@ -220,12 +220,30 @@ pub fn run() {
|
||||
});
|
||||
}
|
||||
|
||||
#[cfg(any(windows, target_os = "linux"))]
|
||||
#[cfg(target_os = "windows")]
|
||||
{
|
||||
use tauri_plugin_deep_link::DeepLinkExt;
|
||||
app.deep_link().register_all()?;
|
||||
}
|
||||
|
||||
#[cfg(target_os = "linux")]
|
||||
{
|
||||
fn has_xdg_mime() -> bool {
|
||||
std::process::Command::new("which")
|
||||
.arg("xdg-mime")
|
||||
.output()
|
||||
.map(|output| output.status.success())
|
||||
.unwrap_or(false)
|
||||
}
|
||||
|
||||
if has_xdg_mime() {
|
||||
use tauri_plugin_deep_link::DeepLinkExt;
|
||||
app.deep_link().register_all()?;
|
||||
} else {
|
||||
println!("xdg-mime not found; skipping deep link setup on Linux.");
|
||||
}
|
||||
}
|
||||
|
||||
app.handle().plugin(
|
||||
tauri_plugin_log::Builder::default()
|
||||
.level(log::LevelFilter::Info)
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
import { Book } from '@/types/book';
|
||||
import { LibraryViewModeType } from '@/types/settings';
|
||||
import { formatAuthors, formatTitle } from '@/utils/book';
|
||||
|
||||
interface BookCoverProps {
|
||||
book: Book;
|
||||
isPreview?: boolean;
|
||||
mode?: LibraryViewModeType;
|
||||
}
|
||||
|
||||
const BookCover: React.FC<BookCoverProps> = ({ book, isPreview }) => {
|
||||
const BookCover: React.FC<BookCoverProps> = ({ mode = 'grid', book, isPreview }) => {
|
||||
return (
|
||||
<div className='relative flex h-full w-full'>
|
||||
<Image
|
||||
@@ -31,8 +33,8 @@ const BookCover: React.FC<BookCoverProps> = ({ book, isPreview }) => {
|
||||
<div className='flex h-1/2 items-center justify-center'>
|
||||
<span
|
||||
className={clsx(
|
||||
isPreview ? 'line-clamp-2' : 'line-clamp-3',
|
||||
isPreview ? 'text-[0.5em]' : 'text-lg',
|
||||
isPreview ? 'line-clamp-2' : mode === 'grid' ? 'line-clamp-3' : 'line-clamp-2',
|
||||
isPreview ? 'text-[0.5em]' : mode === 'grid' ? 'text-lg' : 'text-sm',
|
||||
)}
|
||||
>
|
||||
{formatTitle(book.title)}
|
||||
@@ -43,7 +45,7 @@ const BookCover: React.FC<BookCoverProps> = ({ book, isPreview }) => {
|
||||
<span
|
||||
className={clsx(
|
||||
'text-neutral-content/50 line-clamp-1',
|
||||
isPreview ? 'text-[0.4em]' : 'text-base',
|
||||
isPreview ? 'text-[0.4em]' : mode === 'grid' ? 'text-base' : 'text-xs',
|
||||
)}
|
||||
>
|
||||
{formatAuthors(book.author)}
|
||||
|
||||
@@ -6,10 +6,13 @@ import { LiaCloudUploadAltSolid, LiaCloudDownloadAltSolid } from 'react-icons/li
|
||||
import { Book } from '@/types/book';
|
||||
import { useEnv } from '@/context/EnvContext';
|
||||
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
|
||||
import { LibraryViewModeType } from '@/types/settings';
|
||||
import { formatAuthors } from '@/utils/book';
|
||||
import ReadingProgress from './ReadingProgress';
|
||||
import BookCover from './BookCover';
|
||||
|
||||
interface BookItemProps {
|
||||
mode: LibraryViewModeType;
|
||||
book: Book;
|
||||
isSelectMode: boolean;
|
||||
selectedBooks: string[];
|
||||
@@ -20,6 +23,7 @@ interface BookItemProps {
|
||||
}
|
||||
|
||||
const BookItem: React.FC<BookItemProps> = ({
|
||||
mode,
|
||||
book,
|
||||
isSelectMode,
|
||||
selectedBooks,
|
||||
@@ -39,12 +43,19 @@ const BookItem: React.FC<BookItemProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'book-item flex h-full flex-col',
|
||||
'book-item flex',
|
||||
mode === 'grid' && 'h-full flex-col',
|
||||
mode === 'list' && 'h-28 flex-row gap-4 overflow-hidden',
|
||||
appService?.hasContextMenu ? 'cursor-pointer' : '',
|
||||
)}
|
||||
>
|
||||
<div className='bg-base-100 relative flex aspect-[28/41] items-center justify-center overflow-hidden shadow-md'>
|
||||
<BookCover book={book} />
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-base-100 relative flex aspect-[28/41] items-center justify-center overflow-hidden shadow-md',
|
||||
mode === 'list' && 'min-w-20',
|
||||
)}
|
||||
>
|
||||
<BookCover mode={mode} book={book} />
|
||||
{selectedBooks.includes(book.hash) && (
|
||||
<div className='absolute inset-0 bg-black opacity-30 transition-opacity duration-300'></div>
|
||||
)}
|
||||
@@ -58,11 +69,28 @@ const BookItem: React.FC<BookItemProps> = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={clsx('flex w-full flex-col p-0 pt-2')}>
|
||||
<div className='min-w-0 flex-1'>
|
||||
<h4 className='block overflow-hidden text-ellipsis whitespace-nowrap text-[0.6em] text-xs font-semibold'>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex w-full flex-col p-0',
|
||||
mode === 'grid' && 'pt-2',
|
||||
mode === 'list' && 'py-2',
|
||||
)}
|
||||
>
|
||||
<div className={clsx('min-w-0 flex-1', mode === 'list' && 'flex flex-col gap-2')}>
|
||||
<h4
|
||||
className={clsx(
|
||||
'overflow-hidden text-ellipsis font-semibold',
|
||||
mode === 'grid' && 'block whitespace-nowrap text-[0.6em] text-xs',
|
||||
mode === 'list' && 'line-clamp-2 text-base',
|
||||
)}
|
||||
>
|
||||
{book.title}
|
||||
</h4>
|
||||
{mode === 'list' && (
|
||||
<p className='text-neutral-content line-clamp-1 text-sm'>
|
||||
{formatAuthors(book.author, book.primaryLanguage) || ''}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={clsx('flex items-center', book.progress ? 'justify-between' : 'justify-end')}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { MdDelete, MdOpenInNew, MdOutlineCancel } from 'react-icons/md';
|
||||
import { LuFolderPlus } from 'react-icons/lu';
|
||||
import { PiPlus } from 'react-icons/pi';
|
||||
import { Book, BooksGroup } from '@/types/book';
|
||||
import { LibraryViewModeType } from '@/types/settings';
|
||||
import { useEnv } from '@/context/EnvContext';
|
||||
import { useSettingsStore } from '@/store/settingsStore';
|
||||
import { useLibraryStore } from '@/store/libraryStore';
|
||||
@@ -16,7 +17,7 @@ import { isMd5 } from '@/utils/md5';
|
||||
|
||||
import Alert from '@/components/Alert';
|
||||
import Spinner from '@/components/Spinner';
|
||||
import BookshelfItem, { generateBookshelfItems } from './BookshelfItem';
|
||||
import BookshelfItem, { generateGridItems, generateListItems } from './BookshelfItem';
|
||||
import GroupingModal from './GroupingModal';
|
||||
|
||||
interface BookshelfProps {
|
||||
@@ -55,12 +56,16 @@ const Bookshelf: React.FC<BookshelfProps> = ({
|
||||
const [queryTerm, setQueryTerm] = useState<string | null>(null);
|
||||
const [navBooksGroup, setNavBooksGroup] = useState<BooksGroup | null>(null);
|
||||
const [importBookUrl] = useState(searchParams?.get('url') || '');
|
||||
const [sortBy, setSortBy] = useState(searchParams?.get('sort') || 'updated');
|
||||
const [sortOrder, setSortOrder] = useState(searchParams?.get('order') || 'desc');
|
||||
const [viewMode, setViewMode] = useState(searchParams?.get('view') || settings.libraryViewMode);
|
||||
const [sortBy, setSortBy] = useState(searchParams?.get('sort') || settings.librarySortBy);
|
||||
const [sortOrder, setSortOrder] = useState(
|
||||
searchParams?.get('order') || (settings.librarySortAscending ? 'asc' : 'desc'),
|
||||
);
|
||||
const isImportingBook = useRef(false);
|
||||
|
||||
const { setLibrary } = useLibraryStore();
|
||||
const allBookshelfItems = generateBookshelfItems(libraryBooks);
|
||||
const allBookshelfItems =
|
||||
viewMode === 'grid' ? generateGridItems(libraryBooks) : generateListItems(libraryBooks);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelectMode) {
|
||||
@@ -93,6 +98,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
|
||||
useEffect(() => {
|
||||
const group = searchParams?.get('group') || '';
|
||||
const query = searchParams?.get('q') || '';
|
||||
const view = searchParams?.get('view') || settings.libraryViewMode;
|
||||
const sort = searchParams?.get('sort') || settings.librarySortBy;
|
||||
const order = searchParams?.get('order') || (settings.librarySortAscending ? 'asc' : 'desc');
|
||||
const params = new URLSearchParams(searchParams?.toString());
|
||||
@@ -115,9 +121,16 @@ const Bookshelf: React.FC<BookshelfProps> = ({
|
||||
} else {
|
||||
params.delete('order');
|
||||
}
|
||||
if (sort === 'updated' && order === 'desc') {
|
||||
if (view) {
|
||||
params.set('view', view);
|
||||
setViewMode(view);
|
||||
} else {
|
||||
params.delete('view');
|
||||
}
|
||||
if (sort === 'updated' && order === 'desc' && view === 'grid') {
|
||||
params.delete('sort');
|
||||
params.delete('order');
|
||||
params.delete('view');
|
||||
}
|
||||
if (group) {
|
||||
const booksGroup = allBookshelfItems.find(
|
||||
@@ -229,13 +242,16 @@ const Bookshelf: React.FC<BookshelfProps> = ({
|
||||
<div className='bookshelf'>
|
||||
<div
|
||||
className={clsx(
|
||||
'transform-wrapper grid flex-1 gap-x-4 sm:gap-x-0',
|
||||
'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12',
|
||||
'transform-wrapper',
|
||||
viewMode === 'grid' && 'grid flex-1 grid-cols-3 gap-x-4 px-4 sm:gap-x-0 sm:px-2',
|
||||
viewMode === 'grid' && 'sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12',
|
||||
viewMode === 'list' && 'flex flex-col',
|
||||
)}
|
||||
>
|
||||
{filteredBookshelfItems.map((item, index) => (
|
||||
<BookshelfItem
|
||||
key={`library-item-${index}`}
|
||||
mode={viewMode as LibraryViewModeType}
|
||||
item={item}
|
||||
isSelectMode={isSelectMode}
|
||||
selectedBooks={selectedBooks}
|
||||
@@ -251,7 +267,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
|
||||
}
|
||||
/>
|
||||
))}
|
||||
{!navBooksGroup && allBookshelfItems.length > 0 && (
|
||||
{viewMode === 'grid' && !navBooksGroup && allBookshelfItems.length > 0 && (
|
||||
<div
|
||||
className={clsx(
|
||||
'border-1 bg-base-100 hover:bg-base-300/50 flex items-center justify-center',
|
||||
|
||||
@@ -10,6 +10,7 @@ import { Menu, MenuItem } from '@tauri-apps/api/menu';
|
||||
import { revealItemInDir } from '@tauri-apps/plugin-opener';
|
||||
import { getOSPlatform } from '@/utils/misc';
|
||||
import { getLocalBookFilename } from '@/utils/book';
|
||||
import { LibraryViewModeType } from '@/types/settings';
|
||||
import { BOOK_UNGROUPED_ID, BOOK_UNGROUPED_NAME } from '@/services/constants';
|
||||
import { FILE_REVEAL_LABELS, FILE_REVEAL_PLATFORMS } from '@/utils/os';
|
||||
import { Book, BookGroupType, BooksGroup } from '@/types/book';
|
||||
@@ -18,7 +19,7 @@ import GroupItem from './GroupItem';
|
||||
|
||||
export type BookshelfItem = Book | BooksGroup;
|
||||
|
||||
export const generateBookshelfItems = (books: Book[]): (Book | BooksGroup)[] => {
|
||||
export const generateGridItems = (books: Book[]): (Book | BooksGroup)[] => {
|
||||
const groups: BooksGroup[] = books.reduce((acc: BooksGroup[], book: Book) => {
|
||||
if (book.deletedAt) return acc;
|
||||
book.groupId = book.groupId || BOOK_UNGROUPED_ID;
|
||||
@@ -47,6 +48,10 @@ export const generateBookshelfItems = (books: Book[]): (Book | BooksGroup)[] =>
|
||||
return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.updatedAt - a.updatedAt);
|
||||
};
|
||||
|
||||
export const generateListItems = (books: Book[]): (Book | BooksGroup)[] => {
|
||||
return books.filter((book) => !book.deletedAt).sort((a, b) => b.updatedAt - a.updatedAt);
|
||||
};
|
||||
|
||||
export const generateGroupsList = (items: Book[]): BookGroupType[] => {
|
||||
return items
|
||||
.sort((a, b) => b.updatedAt - a.updatedAt)
|
||||
@@ -66,6 +71,7 @@ export const generateGroupsList = (items: Book[]): BookGroupType[] => {
|
||||
};
|
||||
|
||||
interface BookshelfItemProps {
|
||||
mode: LibraryViewModeType;
|
||||
item: BookshelfItem;
|
||||
isSelectMode: boolean;
|
||||
selectedBooks: string[];
|
||||
@@ -80,6 +86,7 @@ interface BookshelfItemProps {
|
||||
}
|
||||
|
||||
const BookshelfItem: React.FC<BookshelfItemProps> = ({
|
||||
mode,
|
||||
item,
|
||||
isSelectMode,
|
||||
selectedBooks,
|
||||
@@ -248,30 +255,35 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'sm:hover:bg-base-300/50 group flex h-full flex-col px-0 py-4 sm:px-4',
|
||||
pressing ? 'scale-95' : 'scale-100',
|
||||
)}
|
||||
style={{
|
||||
transition: 'transform 0.2s',
|
||||
}}
|
||||
{...handlers}
|
||||
>
|
||||
<div className='flex-grow'>
|
||||
{'format' in item ? (
|
||||
<BookItem
|
||||
book={item}
|
||||
isSelectMode={isSelectMode}
|
||||
selectedBooks={selectedBooks}
|
||||
transferProgress={transferProgress}
|
||||
handleBookUpload={handleBookUpload}
|
||||
handleBookDownload={handleBookDownload}
|
||||
showBookDetailsModal={showBookDetailsModal}
|
||||
/>
|
||||
) : (
|
||||
<GroupItem group={item} isSelectMode={isSelectMode} selectedBooks={selectedBooks} />
|
||||
<div className={clsx(mode === 'list' && 'sm:hover:bg-base-300/50 px-4 sm:px-6')}>
|
||||
<div
|
||||
className={clsx(
|
||||
'group',
|
||||
mode === 'grid' && 'sm:hover:bg-base-300/50 flex h-full flex-col px-0 py-4 sm:px-4',
|
||||
mode === 'list' && 'border-base-300 flex flex-col border-b py-2',
|
||||
pressing ? (mode === 'grid' ? 'scale-95' : 'scale-98') : 'scale-100',
|
||||
)}
|
||||
style={{
|
||||
transition: 'transform 0.2s',
|
||||
}}
|
||||
{...handlers}
|
||||
>
|
||||
<div className='flex-grow'>
|
||||
{'format' in item ? (
|
||||
<BookItem
|
||||
mode={mode}
|
||||
book={item}
|
||||
isSelectMode={isSelectMode}
|
||||
selectedBooks={selectedBooks}
|
||||
transferProgress={transferProgress}
|
||||
handleBookUpload={handleBookUpload}
|
||||
handleBookDownload={handleBookDownload}
|
||||
showBookDetailsModal={showBookDetailsModal}
|
||||
/>
|
||||
) : (
|
||||
<GroupItem group={item} isSelectMode={isSelectMode} selectedBooks={selectedBooks} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,6 +9,7 @@ import { MdOutlineMenu, MdArrowBackIosNew } from 'react-icons/md';
|
||||
import { IoMdCloseCircle } from 'react-icons/io';
|
||||
|
||||
import { useEnv } from '@/context/EnvContext';
|
||||
import { useThemeStore } from '@/store/themeStore';
|
||||
import { useTranslation } from '@/hooks/useTranslation';
|
||||
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
|
||||
import { useTrafficLightStore } from '@/store/trafficLightStore';
|
||||
@@ -36,6 +37,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { appService } = useEnv();
|
||||
const { statusBarHeight } = useThemeStore();
|
||||
const {
|
||||
isTrafficLightVisible,
|
||||
initializeTrafficLightStore,
|
||||
@@ -96,7 +98,9 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
|
||||
isTrafficLightVisible ? 'pl-16' : 'pl-0 sm:pl-2',
|
||||
)}
|
||||
style={{
|
||||
marginTop: appService?.hasSafeAreaInset ? 'max(env(safe-area-inset-top), 24px)' : '',
|
||||
marginTop: appService?.hasSafeAreaInset
|
||||
? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
|
||||
: '',
|
||||
}}
|
||||
>
|
||||
<div className='flex w-full items-center justify-between space-x-6 sm:space-x-12'>
|
||||
|
||||
@@ -132,7 +132,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
return (
|
||||
<div
|
||||
tabIndex={0}
|
||||
className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-2 w-72 shadow-2xl'
|
||||
className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-2 shadow-2xl'
|
||||
>
|
||||
{user ? (
|
||||
<MenuItem
|
||||
@@ -142,7 +142,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
: _('Logged in')
|
||||
}
|
||||
labelClass='!max-w-40'
|
||||
icon={
|
||||
Icon={
|
||||
avatarUrl ? (
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
@@ -153,34 +153,34 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
height={20}
|
||||
/>
|
||||
) : (
|
||||
<PiUserCircleCheck />
|
||||
PiUserCircleCheck
|
||||
)
|
||||
}
|
||||
>
|
||||
<ul>
|
||||
<Quota quotas={quotas} className='h-10 pl-4 pr-2' />
|
||||
<Quota quotas={quotas} className='h-10 pl-3 pr-2' />
|
||||
<MenuItem label={_('Account')} noIcon onClick={handleUserProfile} />
|
||||
</ul>
|
||||
</MenuItem>
|
||||
) : (
|
||||
<MenuItem label={_('Sign In')} icon={<PiUserCircle />} onClick={handleUserLogin}></MenuItem>
|
||||
<MenuItem label={_('Sign In')} Icon={PiUserCircle} onClick={handleUserLogin}></MenuItem>
|
||||
)}
|
||||
<MenuItem
|
||||
label={_('Auto Upload Books to Cloud')}
|
||||
icon={isAutoUpload ? <MdCheck className='text-base-content' /> : undefined}
|
||||
Icon={isAutoUpload ? MdCheck : undefined}
|
||||
onClick={toggleAutoUploadBooks}
|
||||
/>
|
||||
{isTauriAppPlatform() && !appService?.isMobile && (
|
||||
<MenuItem
|
||||
label={_('Auto Import on File Open')}
|
||||
icon={isAutoImportBooksOnOpen ? <MdCheck className='text-base-content' /> : undefined}
|
||||
Icon={isAutoImportBooksOnOpen ? MdCheck : undefined}
|
||||
onClick={toggleAutoImportBooksOnOpen}
|
||||
/>
|
||||
)}
|
||||
{appService?.hasUpdater && (
|
||||
<MenuItem
|
||||
label={_('Check Updates on Start')}
|
||||
icon={isAutoCheckUpdates ? <MdCheck className='text-base-content' /> : undefined}
|
||||
Icon={isAutoCheckUpdates ? MdCheck : undefined}
|
||||
onClick={toggleAutoCheckUpdates}
|
||||
/>
|
||||
)}
|
||||
@@ -189,13 +189,13 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
{appService?.hasWindow && (
|
||||
<MenuItem
|
||||
label={_('Always on Top')}
|
||||
icon={isAlwaysOnTop ? <MdCheck className='text-base-content' /> : undefined}
|
||||
Icon={isAlwaysOnTop ? MdCheck : undefined}
|
||||
onClick={toggleAlwaysOnTop}
|
||||
/>
|
||||
)}
|
||||
<MenuItem
|
||||
label={_('Keep Screen Awake')}
|
||||
icon={isScreenWakeLock ? <MdCheck className='text-base-content' /> : undefined}
|
||||
Icon={isScreenWakeLock ? MdCheck : undefined}
|
||||
onClick={toggleScreenWakeLock}
|
||||
/>
|
||||
<MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
|
||||
|
||||
@@ -4,7 +4,7 @@ import { MdCheck } from 'react-icons/md';
|
||||
import { useEnv } from '@/context/EnvContext';
|
||||
import { useSettingsStore } from '@/store/settingsStore';
|
||||
import { useTranslation } from '@/hooks/useTranslation';
|
||||
import { LibrarySortByType } from '@/types/settings';
|
||||
import { LibrarySortByType, LibraryViewModeType } from '@/types/settings';
|
||||
import { navigateToLibrary } from '@/utils/nav';
|
||||
import MenuItem from '@/components/MenuItem';
|
||||
|
||||
@@ -19,9 +19,15 @@ const SortMenu: React.FC<SortMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
const { envConfig } = useEnv();
|
||||
const { settings, setSettings, saveSettings } = useSettingsStore();
|
||||
|
||||
const viewMode = settings.libraryViewMode;
|
||||
const sortBy = settings.librarySortBy;
|
||||
const isAscending = settings.librarySortAscending;
|
||||
|
||||
const viewOptions = [
|
||||
{ label: _('List'), value: 'list' },
|
||||
{ label: _('Grid'), value: 'grid' },
|
||||
];
|
||||
|
||||
const sortByOptions = [
|
||||
{ label: _('Title'), value: 'title' },
|
||||
{ label: _('Author'), value: 'author' },
|
||||
@@ -35,6 +41,17 @@ const SortMenu: React.FC<SortMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
{ label: _('Descending'), value: false },
|
||||
];
|
||||
|
||||
const handleSetViewMode = (value: LibraryViewModeType) => {
|
||||
settings.libraryViewMode = value;
|
||||
setSettings(settings);
|
||||
saveSettings(envConfig, settings);
|
||||
setIsDropdownOpen?.(false);
|
||||
|
||||
const params = new URLSearchParams(searchParams?.toString());
|
||||
params.set('view', value);
|
||||
navigateToLibrary(router, `${params.toString()}`);
|
||||
};
|
||||
|
||||
const handleSetSortBy = (value: LibrarySortByType) => {
|
||||
settings.librarySortBy = value;
|
||||
setSettings(settings);
|
||||
@@ -62,6 +79,16 @@ const SortMenu: React.FC<SortMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
tabIndex={0}
|
||||
className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-2 shadow-2xl'
|
||||
>
|
||||
{viewOptions.map((option) => (
|
||||
<MenuItem
|
||||
key={option.value}
|
||||
label={option.label}
|
||||
buttonClass='h-8'
|
||||
Icon={viewMode === option.value ? MdCheck : undefined}
|
||||
onClick={() => handleSetViewMode(option.value as LibraryViewModeType)}
|
||||
/>
|
||||
))}
|
||||
<hr className='border-base-200 my-1' />
|
||||
<MenuItem
|
||||
label={_('Sort by...')}
|
||||
buttonClass='h-8'
|
||||
@@ -73,7 +100,7 @@ const SortMenu: React.FC<SortMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
key={option.value}
|
||||
label={option.label}
|
||||
buttonClass='h-8'
|
||||
icon={sortBy === option.value ? <MdCheck className='text-base-content' /> : undefined}
|
||||
Icon={sortBy === option.value ? MdCheck : undefined}
|
||||
onClick={() => handleSetSortBy(option.value as LibrarySortByType)}
|
||||
/>
|
||||
))}
|
||||
@@ -83,9 +110,7 @@ const SortMenu: React.FC<SortMenuProps> = ({ setIsDropdownOpen }) => {
|
||||
key={option.value.toString()}
|
||||
label={option.label}
|
||||
buttonClass='h-8'
|
||||
icon={
|
||||
isAscending === option.value ? <MdCheck className='text-base-content' /> : undefined
|
||||
}
|
||||
Icon={isAscending === option.value ? MdCheck : undefined}
|
||||
onClick={() => handleSetSortAscending(option.value)}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -28,9 +28,14 @@ import { usePullToRefresh } from '@/hooks/usePullToRefresh';
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
import { useDemoBooks } from './hooks/useDemoBooks';
|
||||
import { useBooksSync } from './hooks/useBooksSync';
|
||||
import { useThemeStore } from '@/store/themeStore';
|
||||
import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
|
||||
import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
|
||||
import { tauriHandleSetAlwaysOnTop, tauriQuitApp } from '@/utils/window';
|
||||
import {
|
||||
tauriHandleSetAlwaysOnTop,
|
||||
tauriHandleToggleFullScreen,
|
||||
tauriQuitApp,
|
||||
} from '@/utils/window';
|
||||
|
||||
import { AboutWindow } from '@/components/AboutWindow';
|
||||
import { UpdaterWindow } from '@/components/UpdaterWindow';
|
||||
@@ -61,6 +66,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
|
||||
const _ = useTranslation();
|
||||
useTheme({ systemUIVisible: true, appThemeColor: 'base-200' });
|
||||
const { settings, setSettings, saveSettings } = useSettingsStore();
|
||||
const { statusBarHeight } = useThemeStore();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const isInitiating = useRef(false);
|
||||
const [libraryLoaded, setLibraryLoaded] = useState(false);
|
||||
@@ -85,6 +91,11 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
|
||||
useScreenWakeLock(settings.screenWakeLock);
|
||||
|
||||
useShortcuts({
|
||||
onToggleFullscreen: async () => {
|
||||
if (isTauriAppPlatform()) {
|
||||
await tauriHandleToggleFullScreen();
|
||||
}
|
||||
},
|
||||
onQuitApp: async () => {
|
||||
if (isTauriAppPlatform()) {
|
||||
await tauriQuitApp();
|
||||
@@ -526,14 +537,14 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={clsx(
|
||||
'scroll-container drop-zone flex-grow overflow-y-auto px-4 sm:px-2',
|
||||
'scroll-container drop-zone flex-grow overflow-y-auto',
|
||||
appService?.hasSafeAreaInset && 'pt-[52px]',
|
||||
appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom))]',
|
||||
isDragging && 'drag-over',
|
||||
)}
|
||||
style={{
|
||||
marginTop: appService?.hasSafeAreaInset
|
||||
? 'max(env(safe-area-inset-top), 24px)'
|
||||
? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
|
||||
: '48px',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
|
||||
import { PiDotsThreeVerticalBold } from 'react-icons/pi';
|
||||
|
||||
import { useEnv } from '@/context/EnvContext';
|
||||
import { useThemeStore } from '@/store/themeStore';
|
||||
import { useReaderStore } from '@/store/readerStore';
|
||||
import { useSidebarStore } from '@/store/sidebarStore';
|
||||
import { useTrafficLightStore } from '@/store/trafficLightStore';
|
||||
@@ -42,7 +43,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
|
||||
cleanupTrafficLightListeners,
|
||||
} = useTrafficLightStore();
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const { bookKeys, hoveredBookKey, systemUIVisible, setHoveredBookKey } = useReaderStore();
|
||||
const { bookKeys, hoveredBookKey, setHoveredBookKey } = useReaderStore();
|
||||
const { systemUIVisible, statusBarHeight } = useThemeStore();
|
||||
const { isSideBarVisible } = useSidebarStore();
|
||||
const iconSize16 = useResponsiveSize(16);
|
||||
|
||||
@@ -90,7 +92,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
|
||||
isVisible ? 'visible' : 'hidden',
|
||||
)}
|
||||
style={{
|
||||
height: systemUIVisible ? 'max(env(safe-area-inset-top), 24px)' : '',
|
||||
height: systemUIVisible ? `max(env(safe-area-inset-top), ${statusBarHeight}px)` : '',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
@@ -107,7 +109,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
|
||||
)}
|
||||
style={{
|
||||
marginTop: systemUIVisible
|
||||
? 'max(env(safe-area-inset-top), 24px)'
|
||||
? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
|
||||
: 'env(safe-area-inset-top)',
|
||||
}}
|
||||
onMouseLeave={() => !appService?.isMobile && setHoveredBookKey('')}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import clsx from 'clsx';
|
||||
import * as React from 'react';
|
||||
import { useEffect, Suspense, useRef } from 'react';
|
||||
import { useEffect, Suspense, useRef, useState } from 'react';
|
||||
|
||||
import { useEnv } from '@/context/EnvContext';
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
@@ -21,15 +21,30 @@ import ReaderContent from './ReaderContent';
|
||||
const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
|
||||
const { envConfig, appService } = useEnv();
|
||||
const { settings, setSettings } = useSettingsStore();
|
||||
const { isDarkMode } = useThemeStore();
|
||||
const { hoveredBookKey, showSystemUI, dismissSystemUI } = useReaderStore();
|
||||
const { isDarkMode, showSystemUI, dismissSystemUI } = useThemeStore();
|
||||
const { hoveredBookKey } = useReaderStore();
|
||||
const { isSideBarVisible } = useSidebarStore();
|
||||
const { getVisibleLibrary, setLibrary } = useLibraryStore();
|
||||
const { setLibrary } = useLibraryStore();
|
||||
const [libraryLoaded, setLibraryLoaded] = useState(false);
|
||||
const isInitiating = useRef(false);
|
||||
|
||||
useTheme({ systemUIVisible: false, appThemeColor: 'base-100' });
|
||||
useScreenWakeLock(settings.screenWakeLock);
|
||||
|
||||
useEffect(() => {
|
||||
const handleVisibilityChange = () => {
|
||||
if (appService?.isMobile && !document.hidden) {
|
||||
dismissSystemUI();
|
||||
setSystemUIVisibility({ visible: false, darkMode: isDarkMode });
|
||||
}
|
||||
};
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [appService, isDarkMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isInitiating.current) return;
|
||||
isInitiating.current = true;
|
||||
@@ -38,6 +53,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
|
||||
const settings = await appService.loadSettings();
|
||||
setSettings(settings);
|
||||
setLibrary(await appService.loadLibraryBooks());
|
||||
setLibraryLoaded(true);
|
||||
};
|
||||
|
||||
initLibrary();
|
||||
@@ -57,7 +73,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
|
||||
}, [hoveredBookKey]);
|
||||
|
||||
return (
|
||||
getVisibleLibrary().length > 0 &&
|
||||
libraryLoaded &&
|
||||
settings.globalReadSettings && (
|
||||
<div
|
||||
className={clsx(
|
||||
|
||||
@@ -117,7 +117,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
|
||||
<MenuItem
|
||||
label={_('Scrolled Mode')}
|
||||
shortcut='Shift+J'
|
||||
icon={isScrolledMode ? <MdCheck /> : undefined}
|
||||
Icon={isScrolledMode ? MdCheck : undefined}
|
||||
onClick={toggleScrolledMode}
|
||||
/>
|
||||
|
||||
@@ -132,7 +132,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
|
||||
? _('Light Mode')
|
||||
: _('Auto Mode')
|
||||
}
|
||||
icon={themeMode === 'dark' ? <BiMoon /> : themeMode === 'light' ? <BiSun /> : <TbSunMoon />}
|
||||
Icon={themeMode === 'dark' ? BiMoon : themeMode === 'light' ? BiSun : TbSunMoon}
|
||||
onClick={cycleThemeMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -62,13 +62,13 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
|
||||
.map((book) => (
|
||||
<MenuItem
|
||||
key={book.hash}
|
||||
icon={
|
||||
Icon={
|
||||
<Image
|
||||
src={book.coverImageUrl!}
|
||||
alt={book.title}
|
||||
width={56}
|
||||
height={80}
|
||||
className='aspect-auto max-h-8 max-w-6 rounded-sm shadow-md'
|
||||
className='aspect-auto max-h-8 max-w-4 rounded-sm shadow-md'
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
|
||||
@@ -99,7 +99,7 @@ const TTSControl = () => {
|
||||
const view = getView(bookKey);
|
||||
const viewSettings = getViewSettings(bookKey);
|
||||
const bookData = getBookData(bookKey);
|
||||
if (!view || !viewSettings || !bookData) return;
|
||||
if (!view || !viewSettings || !bookData || !bookData.book) return;
|
||||
if (bookData.book?.format === 'PDF') {
|
||||
eventDispatcher.dispatch('toast', {
|
||||
message: _('TTS not supported for PDF'),
|
||||
@@ -108,6 +108,7 @@ const TTSControl = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const primaryLang = bookData.book.primaryLanguage;
|
||||
setBookKey(bookKey);
|
||||
|
||||
if (ttsControllerRef.current) {
|
||||
@@ -128,9 +129,13 @@ const TTSControl = () => {
|
||||
await ttsController.initViewTTS();
|
||||
const ssml = view.tts?.from(range);
|
||||
if (ssml) {
|
||||
const lang = parseSSMLLang(ssml) || 'en';
|
||||
setTtsLang(lang);
|
||||
let lang = parseSSMLLang(ssml) || 'en';
|
||||
// We will not trust 'en' language from ssml, as it may be a fallback or hardcoded value
|
||||
if (lang === 'en' && primaryLang && primaryLang !== 'en') {
|
||||
lang = primaryLang.split('-')[0]!;
|
||||
}
|
||||
setIsPlaying(true);
|
||||
setTtsLang(lang);
|
||||
|
||||
ttsController.setLang(lang);
|
||||
ttsController.setRate(viewSettings.ttsRate);
|
||||
|
||||
@@ -6,7 +6,7 @@ import useBooksManager from './useBooksManager';
|
||||
import { useSidebarStore } from '@/store/sidebarStore';
|
||||
import { useSettingsStore } from '@/store/settingsStore';
|
||||
import { getStyles } from '@/utils/style';
|
||||
import { tauriQuitApp } from '@/utils/window';
|
||||
import { tauriHandleToggleFullScreen, tauriQuitApp } from '@/utils/window';
|
||||
import { eventDispatcher } from '@/utils/event';
|
||||
import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_STEP } from '@/services/constants';
|
||||
|
||||
@@ -84,6 +84,12 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const toggleFullscreen = async () => {
|
||||
if (isTauriAppPlatform()) {
|
||||
await tauriHandleToggleFullScreen();
|
||||
}
|
||||
};
|
||||
|
||||
const quitApp = async () => {
|
||||
// on web platform use browser's default shortcut to close the tab
|
||||
if (isTauriAppPlatform()) {
|
||||
@@ -136,6 +142,7 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
|
||||
onOpenFontLayoutSettings: () => setFontLayoutSettingsDialogOpen(true),
|
||||
onToggleSearchBar: showSearchBar,
|
||||
onReloadPage: reloadPage,
|
||||
onToggleFullscreen: toggleFullscreen,
|
||||
onQuitApp: quitApp,
|
||||
onGoLeft: goLeft,
|
||||
onGoRight: goRight,
|
||||
|
||||
@@ -52,7 +52,7 @@ export const AboutWindow = () => {
|
||||
</div>
|
||||
<div className='flex select-text flex-col items-center'>
|
||||
<h2 className='text-2xl font-bold'>Readest</h2>
|
||||
<p className='text-neutral-content text-sm'>
|
||||
<p className='text-neutral-content text-center text-sm'>
|
||||
{_('Version {{version}}', { version: packageJson.version })} {`(${browserInfo})`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -17,9 +17,10 @@ const Alert: React.FC<{
|
||||
'alert flex items-center justify-between',
|
||||
'bg-base-300 rounded-lg border-none p-4 shadow-2xl',
|
||||
'w-full max-w-[90vw] sm:max-w-[70vw] md:max-w-[50vw] lg:max-w-[40vw] xl:max-w-[40vw]',
|
||||
'min-w-[70vw] flex-col sm:min-w-[40vw] sm:flex-row',
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<div className='flex items-center space-x-2 self-start'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
@@ -34,12 +35,12 @@ const Alert: React.FC<{
|
||||
></path>
|
||||
</svg>
|
||||
<div className=''>
|
||||
<h3 className='font-sm text-base'>{title}</h3>
|
||||
<h3 className='font-sm text-start text-base sm:text-center'>{title}</h3>
|
||||
<div className='text-xs'>{message}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex max-w-[20vw] flex-wrap items-center justify-center gap-2'>
|
||||
<button className='btn btn-sm' onClick={onCancel}>
|
||||
<div className='flex flex-wrap items-center gap-2 self-end sm:max-w-[20vw]'>
|
||||
<button className='btn btn-sm btn-neutral' onClick={onCancel}>
|
||||
{_('Cancel')}
|
||||
</button>
|
||||
<button className='btn btn-sm btn-warning' onClick={onConfirm}>
|
||||
|
||||
@@ -107,12 +107,12 @@ const BookDetailModal = ({
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
bgClassName='sm:bg-black/50'
|
||||
boxClassName='sm:min-w-[480px] sm:max-w-[480px] sm:h-auto'
|
||||
boxClassName='sm:min-w-[480px] sm:max-w-[480px] sm:h-auto sm:max-h-[90%]'
|
||||
contentClassName='!px-6 !py-2'
|
||||
>
|
||||
<div className='flex w-full select-text items-center justify-center'>
|
||||
<div className='relative w-full rounded-lg'>
|
||||
<div className='mb-10 me-4 flex h-32 items-start'>
|
||||
<div className='mb-6 me-4 flex h-32 items-start'>
|
||||
<div className='book-cover relative mr-10 aspect-[28/41] h-32 items-end shadow-lg'>
|
||||
<Image
|
||||
src={book.coverImageUrl!}
|
||||
@@ -142,7 +142,7 @@ const BookDetailModal = ({
|
||||
{formatTitle(book.title) || _('Untitled')}
|
||||
</p>
|
||||
<p className='text-neutral-content line-clamp-1'>
|
||||
{formatAuthors(book.author, bookMeta.language) || _('Unknown')}
|
||||
{formatAuthors(book.author, book.primaryLanguage) || _('Unknown')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex flex-wrap items-center gap-x-4'>
|
||||
@@ -212,6 +212,12 @@ const BookDetailModal = ({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className='font-bold'>{_('Description:')}</span>
|
||||
<p className='text-neutral-content text-sm'>
|
||||
{bookMeta.description || _('No description available')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import { useDefaultIconSize } from '@/hooks/useResponsiveSize';
|
||||
import { IconType } from 'react-icons';
|
||||
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
|
||||
|
||||
interface MenuItemProps {
|
||||
label: string;
|
||||
@@ -9,7 +10,7 @@ interface MenuItemProps {
|
||||
shortcut?: string;
|
||||
disabled?: boolean;
|
||||
noIcon?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
Icon?: React.ReactNode | IconType;
|
||||
children?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
@@ -21,15 +22,15 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
shortcut,
|
||||
disabled,
|
||||
noIcon = false,
|
||||
icon,
|
||||
Icon,
|
||||
children,
|
||||
onClick,
|
||||
}) => {
|
||||
const iconSize = useDefaultIconSize();
|
||||
const iconSize = useResponsiveSize(16);
|
||||
const menuButton = (
|
||||
<button
|
||||
className={clsx(
|
||||
'hover:bg-base-300 text-base-content flex h-10 w-full items-center justify-between rounded-md p-2',
|
||||
'hover:bg-base-300 text-base-content flex h-10 w-full items-center justify-between rounded-md p-1',
|
||||
disabled && 'btn-disabled text-gray-400',
|
||||
buttonClass,
|
||||
)}
|
||||
@@ -37,7 +38,15 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
disabled={disabled}
|
||||
>
|
||||
<div className='flex min-w-0 items-center'>
|
||||
{!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
|
||||
{!noIcon && (
|
||||
<span style={{ minWidth: `${iconSize}px` }}>
|
||||
{typeof Icon === 'function' ? (
|
||||
<Icon className='text-base-content' size={iconSize} />
|
||||
) : (
|
||||
Icon
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={clsx('mx-2 flex-1 truncate text-base sm:text-sm', labelClass)}
|
||||
style={{ minWidth: 0 }}
|
||||
|
||||
@@ -40,7 +40,9 @@ const Quota: React.FC<QuotaProps> = ({ quotas, showProgress, className }) => {
|
||||
></div>
|
||||
)}
|
||||
|
||||
<div className={clsx('relative flex items-center justify-between p-2', className)}>
|
||||
<div
|
||||
className={clsx('relative flex items-center justify-between gap-4 p-2', className)}
|
||||
>
|
||||
<div className='lg:tooltip lg:tooltip-bottom' data-tip={quota.tooltip}>
|
||||
<span className='truncate'>{quota.name}</span>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface ShortcutConfig {
|
||||
onToggleSelectMode: string[];
|
||||
onOpenFontLayoutSettings: string[];
|
||||
onReloadPage: string[];
|
||||
onToggleFullscreen: string[];
|
||||
onQuitApp: string[];
|
||||
onGoLeft: string[];
|
||||
onGoRight: string[];
|
||||
@@ -32,6 +33,7 @@ const DEFAULT_SHORTCUTS: ShortcutConfig = {
|
||||
onToggleSelectMode: ['shift+s'],
|
||||
onOpenFontLayoutSettings: ['shift+f'],
|
||||
onReloadPage: ['shift+r'],
|
||||
onToggleFullscreen: ['F11'],
|
||||
onQuitApp: ['ctrl+q', 'cmd+q'],
|
||||
onGoLeft: ['ArrowLeft', 'PageUp', 'h'],
|
||||
onGoRight: ['ArrowRight', 'PageDown', 'l', ' '],
|
||||
|
||||
@@ -63,8 +63,8 @@ const useShortcuts = (actions: KeyActionHandlers, dependencies: React.Dependency
|
||||
handler &&
|
||||
shortcutList?.some((shortcut) =>
|
||||
isShortcutMatch(shortcut, key, ctrlKey, altKey, metaKey, shiftKey),
|
||||
)
|
||||
) {
|
||||
)
|
||||
) {
|
||||
handler();
|
||||
return true;
|
||||
}
|
||||
@@ -76,11 +76,12 @@ const useShortcuts = (actions: KeyActionHandlers, dependencies: React.Dependency
|
||||
// Check if the focus is on an input, textarea, or contenteditable element
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
const isInteractiveElement =
|
||||
(activeElement.tagName === 'INPUT' ||
|
||||
activeElement.tagName === 'INPUT' ||
|
||||
activeElement.tagName === 'TEXTAREA' ||
|
||||
activeElement.isContentEditable);
|
||||
activeElement.isContentEditable;
|
||||
|
||||
const isNoteEditor = (activeElement.tagName === 'TEXTAREA' && activeElement.classList.contains('note-editor'))
|
||||
const isNoteEditor =
|
||||
activeElement.tagName === 'TEXTAREA' && activeElement.classList.contains('note-editor');
|
||||
|
||||
if (isInteractiveElement && !isNoteEditor) {
|
||||
return; // Skip handling if the user is typing in an input, textarea, or contenteditable
|
||||
@@ -89,7 +90,7 @@ const useShortcuts = (actions: KeyActionHandlers, dependencies: React.Dependency
|
||||
if (event instanceof KeyboardEvent) {
|
||||
const { key, ctrlKey, altKey, metaKey, shiftKey } = event;
|
||||
|
||||
if (isNoteEditor && !((key === "Enter" && ctrlKey) || (key == "Escape"))) {
|
||||
if (isNoteEditor && !((key === 'Enter' && ctrlKey) || key == 'Escape')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useEnv } from '@/context/EnvContext';
|
||||
import { useThemeStore } from '@/store/themeStore';
|
||||
import { useSettingsStore } from '@/store/settingsStore';
|
||||
import { applyCustomTheme, Palette } from '@/styles/themes';
|
||||
import { setSystemUIVisibility } from '@/utils/bridge';
|
||||
import { getStatusBarHeight, setSystemUIVisibility } from '@/utils/bridge';
|
||||
|
||||
type UseThemeProps = {
|
||||
systemUIVisible?: boolean;
|
||||
@@ -16,21 +16,29 @@ export const useTheme = ({
|
||||
}: UseThemeProps = {}) => {
|
||||
const { appService } = useEnv();
|
||||
const { settings } = useSettingsStore();
|
||||
const { themeColor, isDarkMode, updateAppTheme } = useThemeStore();
|
||||
const { themeColor, isDarkMode, updateAppTheme, setStatusBarHeight } = useThemeStore();
|
||||
|
||||
useEffect(() => {
|
||||
updateAppTheme(appThemeColor);
|
||||
if (appService?.isMobile) {
|
||||
setSystemUIVisibility({ visible: systemUIVisible, darkMode: isDarkMode });
|
||||
}
|
||||
if (appService?.isAndroidApp) {
|
||||
getStatusBarHeight().then((res) => {
|
||||
if (res.height && res.height > 0) {
|
||||
setStatusBarHeight(res.height / window.devicePixelRatio);
|
||||
}
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isDarkMode]);
|
||||
}, [appService, isDarkMode]);
|
||||
|
||||
useEffect(() => {
|
||||
const customThemes = settings.globalReadSettings?.customThemes ?? [];
|
||||
customThemes.forEach((customTheme) => {
|
||||
applyCustomTheme(customTheme);
|
||||
});
|
||||
localStorage.setItem('customThemes', JSON.stringify(customThemes));
|
||||
}, [settings]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -20,6 +20,11 @@ const getUserAndToken = async (authHeader: string | undefined) => {
|
||||
return { user, token };
|
||||
};
|
||||
|
||||
const LANG_V2_V1_MAP: Record<string, string> = {
|
||||
'ZH-HANS': 'ZH',
|
||||
'ZH-HANT': 'ZH-TW',
|
||||
};
|
||||
|
||||
const getDeepLAPIKey = (keys: string | undefined) => {
|
||||
const keyArray = keys?.split(',') ?? [];
|
||||
return keyArray.length ? keyArray[Math.floor(Math.random() * keyArray.length)] : '';
|
||||
@@ -52,12 +57,17 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
|
||||
const {
|
||||
text,
|
||||
source_lang: sourceLang = 'auto',
|
||||
target_lang: targetLang = 'en',
|
||||
source_lang: sourceLang = 'AUTO',
|
||||
target_lang: targetLang = 'EN',
|
||||
}: { text: string[]; source_lang: string; target_lang: string } = req.body;
|
||||
try {
|
||||
if (user && token) {
|
||||
console.log('deeplApiUrl', deeplApiUrl);
|
||||
const isV2Api = deeplApiUrl.endsWith('/v2/translate');
|
||||
const requestBody = {
|
||||
text: isV2Api ? text : (text[0] ?? ''),
|
||||
source_lang: isV2Api ? sourceLang : (LANG_V2_V1_MAP[sourceLang] ?? sourceLang),
|
||||
target_lang: isV2Api ? targetLang : (LANG_V2_V1_MAP[targetLang] ?? targetLang),
|
||||
};
|
||||
const response = await fetch(deeplApiUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -65,10 +75,18 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
'x-fingerprint': process.env['DEEPL_X_FINGERPRINT'] || '',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(req.body),
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
res.status(response.status);
|
||||
res.json(await response.json());
|
||||
const data = await response.json();
|
||||
const result = {
|
||||
...data,
|
||||
translations: data.translations || [
|
||||
{
|
||||
text: data.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
res.status(response.status).json(result);
|
||||
} else {
|
||||
const result = await deeplQuery({
|
||||
text: text[0] ?? '',
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
formatTitle,
|
||||
formatAuthors,
|
||||
getFilename,
|
||||
getPrimaryLanguage,
|
||||
} from '@/utils/book';
|
||||
import { partialMD5 } from '@/utils/md5';
|
||||
import { BookDoc, DocumentLoader } from '@/libs/document';
|
||||
@@ -31,6 +32,7 @@ import {
|
||||
DEFAULT_MOBILE_VIEW_SETTINGS,
|
||||
DEFAULT_SYSTEM_SETTINGS,
|
||||
DEFAULT_CJK_VIEW_SETTINGS,
|
||||
DEFAULT_MOBILE_READSETTINGS,
|
||||
} from './constants';
|
||||
import { getOSPlatform, isCJKEnv, isContentURI, isValidURL } from '@/utils/misc';
|
||||
import { deserializeConfig, serializeConfig } from '@/utils/serializer';
|
||||
@@ -99,7 +101,10 @@ export abstract class BaseAppService implements AppService {
|
||||
...DEFAULT_SYSTEM_SETTINGS,
|
||||
version: SYSTEM_SETTINGS_VERSION,
|
||||
localBooksDir: await this.getInitBooksDir(),
|
||||
globalReadSettings: DEFAULT_READSETTINGS,
|
||||
globalReadSettings: {
|
||||
...DEFAULT_READSETTINGS,
|
||||
...(this.isMobile ? DEFAULT_MOBILE_READSETTINGS : {}),
|
||||
},
|
||||
globalViewSettings: {
|
||||
...DEFAULT_BOOK_LAYOUT,
|
||||
...DEFAULT_BOOK_STYLE,
|
||||
@@ -194,6 +199,7 @@ export abstract class BaseAppService implements AppService {
|
||||
format,
|
||||
title: formatTitle(loadedBook.metadata.title),
|
||||
author: formatAuthors(loadedBook.metadata.author, loadedBook.metadata.language),
|
||||
primaryLanguage: getPrimaryLanguage(loadedBook.metadata.language),
|
||||
createdAt: existingBook ? existingBook.createdAt : Date.now(),
|
||||
uploadedAt: existingBook ? existingBook.uploadedAt : null,
|
||||
deletedAt: transient ? Date.now() : null,
|
||||
@@ -204,6 +210,7 @@ export abstract class BaseAppService implements AppService {
|
||||
if (existingBook) {
|
||||
existingBook.title = book.title;
|
||||
existingBook.author = book.author;
|
||||
existingBook.primaryLanguage = existingBook.primaryLanguage ?? book.primaryLanguage;
|
||||
}
|
||||
|
||||
if (!(await this.fs.exists(getDir(book), 'Books'))) {
|
||||
|
||||
@@ -38,6 +38,7 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
|
||||
autoCheckUpdates: true,
|
||||
screenWakeLock: true,
|
||||
autoImportBooksOnOpen: false,
|
||||
libraryViewMode: 'grid',
|
||||
librarySortBy: 'updated',
|
||||
librarySortAscending: false,
|
||||
|
||||
@@ -63,6 +64,11 @@ export const DEFAULT_READSETTINGS: ReadSettings = {
|
||||
},
|
||||
};
|
||||
|
||||
export const DEFAULT_MOBILE_READSETTINGS: Partial<ReadSettings> = {
|
||||
sideBarWidth: '25%',
|
||||
isSideBarPinned: false,
|
||||
};
|
||||
|
||||
export const DEFAULT_BOOK_FONT: BookFont = {
|
||||
serifFont: 'Bitter',
|
||||
sansSerifFont: 'Roboto',
|
||||
@@ -583,3 +589,5 @@ export const TRANSLATED_LANGS = {
|
||||
'zh-CN': '简体中文',
|
||||
'zh-TW': '正體中文',
|
||||
};
|
||||
|
||||
export const SUPPORTED_LANGS: Record<string, string> = { ...TRANSLATED_LANGS, zh: '中文' };
|
||||
|
||||
@@ -6,6 +6,7 @@ import { TTSGranularity } from '@/types/view';
|
||||
import { TTSUtils } from './TTSUtils';
|
||||
|
||||
export class EdgeTTSClient implements TTSClient {
|
||||
#primaryLang = 'en';
|
||||
#rate = 1.0;
|
||||
#pitch = 1.0;
|
||||
#voice: TTSVoice | null = null;
|
||||
@@ -50,7 +51,10 @@ export class EdgeTTSClient implements TTSClient {
|
||||
preload = false,
|
||||
): AsyncGenerator<TTSMessageEvent> {
|
||||
const { marks } = parseSSMLMarks(ssml);
|
||||
const lang = parseSSMLLang(ssml) || 'en';
|
||||
let lang = parseSSMLLang(ssml) || 'en';
|
||||
if (lang === 'en' && this.#primaryLang && this.#primaryLang !== 'en') {
|
||||
lang = this.#primaryLang;
|
||||
}
|
||||
let voiceId = 'en-US-AriaNeural';
|
||||
if (!this.#voice || this.#currentVoiceLang !== lang) {
|
||||
const preferredVoiceId = TTSUtils.getPreferredVoice('edge-tts', lang);
|
||||
@@ -207,6 +211,10 @@ export class EdgeTTSClient implements TTSClient {
|
||||
}
|
||||
}
|
||||
|
||||
setPrimaryLang(lang: string) {
|
||||
this.#primaryLang = lang;
|
||||
}
|
||||
|
||||
async setRate(rate: number) {
|
||||
// The Edge TTS API uses rate in [0.5 .. 2.0].
|
||||
this.#rate = rate;
|
||||
|
||||
@@ -21,6 +21,7 @@ export interface TTSClient {
|
||||
pause(): Promise<void>;
|
||||
resume(): Promise<void>;
|
||||
stop(): Promise<void>;
|
||||
setPrimaryLang(lang: string): void;
|
||||
setRate(rate: number): Promise<void>;
|
||||
setPitch(pitch: number): Promise<void>;
|
||||
setVoice(voice: string): Promise<void>;
|
||||
|
||||
@@ -219,6 +219,12 @@ export class TTSController extends EventTarget {
|
||||
|
||||
async setLang(lang: string) {
|
||||
this.ttsLang = lang;
|
||||
this.setPrimaryLang(lang);
|
||||
}
|
||||
|
||||
async setPrimaryLang(lang: string) {
|
||||
this.ttsEdgeClient.setPrimaryLang(lang);
|
||||
this.ttsWebClient.setPrimaryLang(lang);
|
||||
}
|
||||
|
||||
async setRate(rate: number) {
|
||||
|
||||
@@ -173,6 +173,7 @@ async function* speakWithMarks(
|
||||
}
|
||||
|
||||
export class WebSpeechClient implements TTSClient {
|
||||
#primaryLang = 'en';
|
||||
#rate = 1.0;
|
||||
#pitch = 1.0;
|
||||
#voice: SpeechSynthesisVoice | null = null;
|
||||
@@ -215,7 +216,10 @@ export class WebSpeechClient implements TTSClient {
|
||||
// no need to preload for web speech
|
||||
if (preload) return;
|
||||
|
||||
const lang = parseSSMLLang(ssml) || 'en';
|
||||
let lang = parseSSMLLang(ssml) || 'en';
|
||||
if (lang === 'en' && this.#primaryLang && this.#primaryLang !== 'en') {
|
||||
lang = this.#primaryLang;
|
||||
}
|
||||
if (!this.#voice || this.#currentVoiceLang !== lang) {
|
||||
const preferredVoiceId = TTSUtils.getPreferredVoice('web-speech', lang);
|
||||
const preferredVoice = this.#voices.find((v) => v.voiceURI === preferredVoiceId);
|
||||
@@ -262,6 +266,10 @@ export class WebSpeechClient implements TTSClient {
|
||||
this.#synth.cancel();
|
||||
}
|
||||
|
||||
setPrimaryLang(lang: string) {
|
||||
this.#primaryLang = lang;
|
||||
}
|
||||
|
||||
async setRate(rate: number) {
|
||||
// The Web Speech API uses utterance.rate in [0.1 .. 10],
|
||||
this.#rate = rate;
|
||||
|
||||
@@ -8,6 +8,7 @@ import { updateTocCFI, updateTocID } from '@/utils/toc';
|
||||
import { useSettingsStore } from './settingsStore';
|
||||
import { useBookDataStore } from './bookDataStore';
|
||||
import { useLibraryStore } from './libraryStore';
|
||||
import { getPrimaryLanguage } from '@/utils/book';
|
||||
|
||||
interface ViewState {
|
||||
/* Unique key for each book view */
|
||||
@@ -29,13 +30,9 @@ interface ReaderStore {
|
||||
viewStates: { [key: string]: ViewState };
|
||||
bookKeys: string[];
|
||||
hoveredBookKey: string | null;
|
||||
systemUIVisible: boolean;
|
||||
setBookKeys: (keys: string[]) => void;
|
||||
setHoveredBookKey: (key: string | null) => void;
|
||||
setBookmarkRibbonVisibility: (key: string, visible: boolean) => void;
|
||||
showSystemUI: () => void;
|
||||
dismissSystemUI: () => void;
|
||||
|
||||
setProgress: (
|
||||
key: string,
|
||||
location: string,
|
||||
@@ -66,12 +63,8 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
|
||||
viewStates: {},
|
||||
bookKeys: [],
|
||||
hoveredBookKey: null,
|
||||
systemUIVisible: false,
|
||||
setBookKeys: (keys: string[]) => set({ bookKeys: keys }),
|
||||
setHoveredBookKey: (key: string | null) => set({ hoveredBookKey: key }),
|
||||
showSystemUI: () => set({ systemUIVisible: true }),
|
||||
dismissSystemUI: () => set({ systemUIVisible: false }),
|
||||
|
||||
getView: (key: string | null) => (key && get().viewStates[key]?.view) || null,
|
||||
setView: (key: string, view) =>
|
||||
set((state) => ({
|
||||
@@ -136,6 +129,9 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
|
||||
}, {});
|
||||
updateTocCFI(bookDoc, bookDoc.toc, sections);
|
||||
}
|
||||
// Set the book's language for formerly imported books, newly imported books have this field set
|
||||
book.primaryLanguage =
|
||||
book.primaryLanguage ?? getPrimaryLanguage(bookDoc.metadata.language);
|
||||
useBookDataStore.setState((state) => ({
|
||||
booksData: {
|
||||
...state.booksData,
|
||||
|
||||
@@ -10,6 +10,11 @@ interface ThemeState {
|
||||
systemIsDarkMode: boolean;
|
||||
themeCode: ThemeCode;
|
||||
isDarkMode: boolean;
|
||||
systemUIVisible: boolean;
|
||||
statusBarHeight: number;
|
||||
setStatusBarHeight: (height: number) => void;
|
||||
showSystemUI: () => void;
|
||||
dismissSystemUI: () => void;
|
||||
getIsDarkMode: () => boolean;
|
||||
setThemeMode: (mode: ThemeMode) => void;
|
||||
setThemeColor: (color: string) => void;
|
||||
@@ -62,6 +67,11 @@ export const useThemeStore = create<ThemeState>((set, get) => {
|
||||
systemIsDarkMode,
|
||||
isDarkMode,
|
||||
themeCode,
|
||||
systemUIVisible: false,
|
||||
statusBarHeight: 24,
|
||||
showSystemUI: () => set({ systemUIVisible: true }),
|
||||
dismissSystemUI: () => set({ systemUIVisible: false }),
|
||||
setStatusBarHeight: (height: number) => set({ statusBarHeight: height }),
|
||||
getIsDarkMode: () => get().isDarkMode,
|
||||
setThemeMode: (mode) => {
|
||||
if (typeof window !== 'undefined' && localStorage) {
|
||||
|
||||
@@ -27,6 +27,7 @@ export interface Book {
|
||||
|
||||
lastUpdated?: number; // deprecated in favor of updatedAt
|
||||
progress?: [number, number]; // Add progress field: [current, total], 1-based page number
|
||||
primaryLanguage?: string;
|
||||
}
|
||||
|
||||
export interface BookGroupType {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { CustomTheme } from '@/styles/themes';
|
||||
import { HighlightColor, HighlightStyle, ViewSettings } from './book';
|
||||
|
||||
export type ThemeType = 'light' | 'dark' | 'auto';
|
||||
export type LibraryViewModeType = 'grid' | 'list';
|
||||
export type LibrarySortByType = 'title' | 'author' | 'updated' | 'created' | 'size' | 'format';
|
||||
|
||||
export interface ReadSettings {
|
||||
@@ -27,6 +28,7 @@ export interface SystemSettings {
|
||||
autoCheckUpdates: boolean;
|
||||
screenWakeLock: boolean;
|
||||
autoImportBooksOnOpen: boolean;
|
||||
libraryViewMode: LibraryViewModeType;
|
||||
librarySortBy: LibrarySortByType;
|
||||
librarySortAscending: boolean;
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Book, BookConfig, BookProgress, WritingMode } from '@/types/book';
|
||||
import { getUserLang, isContentURI, isValidURL, makeSafeFilename } from './misc';
|
||||
import { getStorageType } from './object';
|
||||
import { getDirFromLanguage } from './rtl';
|
||||
import { SUPPORTED_LANGS } from '@/services/constants';
|
||||
|
||||
export const getDir = (book: Book) => {
|
||||
return `${book.hash}`;
|
||||
@@ -107,11 +108,17 @@ export const formatPublisher = (publisher: string | LanguageMap) => {
|
||||
return typeof publisher === 'string' ? publisher : formatLanguageMap(publisher);
|
||||
};
|
||||
|
||||
export const formatLanguage = (lang: string | string[] | undefined) => {
|
||||
return Array.isArray(lang) ? lang.join(', ') : lang;
|
||||
const langCodeToLangName = (langCode: string) => {
|
||||
return SUPPORTED_LANGS[langCode] || langCode.toUpperCase();
|
||||
};
|
||||
|
||||
export const primaryLanguage = (lang: string | string[] | undefined) => {
|
||||
export const formatLanguage = (lang: string | string[] | undefined): string => {
|
||||
return Array.isArray(lang)
|
||||
? lang.map(langCodeToLangName).join(', ')
|
||||
: langCodeToLangName(lang || '');
|
||||
};
|
||||
|
||||
export const getPrimaryLanguage = (lang: string | string[] | undefined) => {
|
||||
return Array.isArray(lang) ? lang[0] : lang;
|
||||
};
|
||||
|
||||
@@ -159,6 +166,6 @@ export const getBookDirFromWritingMode = (writingMode: WritingMode) => {
|
||||
};
|
||||
|
||||
export const getBookDirFromLanguage = (language: string | string[] | undefined) => {
|
||||
const lang = primaryLanguage(language) || '';
|
||||
const lang = getPrimaryLanguage(language) || '';
|
||||
return getDirFromLanguage(lang);
|
||||
};
|
||||
|
||||
@@ -33,6 +33,11 @@ export interface SetSystemUIVisibilityResponse {
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface GetStatusBarHeightResponse {
|
||||
height: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export async function copyURIToPath(request: CopyURIRequest): Promise<CopyURIResponse> {
|
||||
const result = await invoke<CopyURIResponse>('plugin:native-bridge|copy_uri_to_path', {
|
||||
payload: request,
|
||||
@@ -67,3 +72,10 @@ export async function setSystemUIVisibility(
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
export async function getStatusBarHeight(): Promise<GetStatusBarHeightResponse> {
|
||||
const result = await invoke<GetStatusBarHeightResponse>(
|
||||
'plugin:native-bridge|get_status_bar_height',
|
||||
);
|
||||
return result;
|
||||
}
|
||||
|
||||
+1
-1
Submodule packages/foliate-js updated: 4b6dd40977...1f545c5ef5
Reference in New Issue
Block a user