akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

Various enhancements and fixes (#70)

Browse Source 
* Fix excerpts cannot be deleted in Chrome browsers

* Show book details in reader sidebar

* Set minimum search term length to 1 for CJK languages

* Use more system fonts as custom fonts, closes #31
This commit is contained in:
Huang Xin
2024-12-31 01:08:27 +01:00
committed by GitHub
parent 1be567ed4a
commit cd67f6ec3f
23 changed files with 298 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/public/locales/de/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Himmelblau",
"Solarized": "Solarisiert",
"Subjects:": "Themen:",
"System Fonts": "System-Schriftarten",
"Theme Color": "Themenfarbe",
"Theme Mode": "Themenmodus",
"Unknown": "Unbekannt",
apps/readest-app/public/locales/es/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Cielo",
"Solarized": "Solarizado",
"Subjects:": "Temas:",
"System Fonts": "Fuentes del sistema",
"Theme Color": "Color del tema",
"Theme Mode": "Modo del tema",
"Unknown": "Desconocido",
apps/readest-app/public/locales/fr/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Ciel",
"Solarized": "Solarisé",
"Subjects:": "Sujets :",
"System Fonts": "Polices système",
"Theme Color": "Couleur du thème",
"Theme Mode": "Mode du thème",
"Unknown": "Inconnu",
apps/readest-app/public/locales/id/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Langit",
"Solarized": "Solarized",
"Subjects:": "Subjek:",
"System Fonts": "Font Sistem",
"Theme Color": "Warna Tema",
"Theme Mode": "Mode Tema",
"Unknown": "Tidak Diketahui",
apps/readest-app/public/locales/it/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Cielo",
"Solarized": "Solarizzato",
"Subjects:": "Argomenti:",
"System Fonts": "Font di sistema",
"Theme Color": "Colore tema",
"Theme Mode": "Modalità tema",
"Unknown": "Sconosciuto",
apps/readest-app/public/locales/ja/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "スカイ",
"Solarized": "ソーラライズド",
"Subjects:": "主題：",
"System Fonts": "システムフォント",
"Theme Color": "テーマカラー",
"Theme Mode": "テーマモード",
"Unknown": "不明",
apps/readest-app/public/locales/ko/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "하늘색",
"Solarized": "솔라라이즈드",
"Subjects:": "주제:",
"System Fonts": "시스템 글꼴",
"Theme Color": "테마 색상",
"Theme Mode": "테마 모드",
"Unknown": "알 수 없음",
apps/readest-app/public/locales/pt/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Céu",
"Solarized": "Solarizado",
"Subjects:": "Assuntos:",
"System Fonts": "Fontes do Sistema",
"Theme Color": "Cor do Tema",
"Theme Mode": "Modo do Tema",
"Unknown": "Desconhecido",
apps/readest-app/public/locales/ru/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Небесный",
"Solarized": "Солнечный",
"Subjects:": "Темы:",
"System Fonts": "Системные шрифты",
"Theme Color": "Цвет темы",
"Theme Mode": "Режим темы",
"Unknown": "Неизвестно",
apps/readest-app/public/locales/tr/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Gökyüzü",
"Solarized": "Solarized",
"Subjects:": "Konular:",
"System Fonts": "Sistem Yazı Tipleri",
"Theme Color": "Tema Rengi",
"Theme Mode": "Tema Modu",
"Unknown": "Bilinmiyor",
apps/readest-app/public/locales/vi/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "Xanh trời",
"Solarized": "Solarized",
"Subjects:": "Chủ đề:",
"System Fonts": "Phông chữ hệ thống",
"Theme Color": "Màu chủ đề",
"Theme Mode": "Chế độ chủ đề",
"Unknown": "Không xác định",
apps/readest-app/public/locales/zh-CN/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "天青",
"Solarized": "日晖",
"Subjects:": "主题",
"System Fonts": "系统字体",
"Theme Color": "主题颜色",
"Theme Mode": "主题模式",
"Unknown": "未知",
apps/readest-app/public/locales/zh-TW/translation.json
+1
View File
@@ -98,6 +98,7 @@
"Sky": "天青",
"Solarized": "日暉",
"Subjects:": "主題",
"System Fonts": "系統字體",
"Theme Color": "主題顏色",
"Theme Mode": "主題模式",
"Unknown": "未知",
apps/readest-app/src/app/reader/components/ReaderContent.tsx
+18 -1
View File
@@ -9,21 +9,23 @@ import { useSettingsStore } from '@/store/settingsStore';
import { useBookDataStore } from '@/store/bookDataStore';
import { useReaderStore } from '@/store/readerStore';
import { useSidebarStore } from '@/store/sidebarStore';
import { Book } from '@/types/book';
import { SystemSettings } from '@/types/settings';
import { parseOpenWithFiles } from '@/helpers/cli';
import { tauriHandleClose, tauriHandleOnCloseWindow } from '@/utils/window';
import { isTauriAppPlatform } from '@/services/environment';
import { uniqueId } from '@/utils/misc';
import { eventDispatcher } from '@/utils/event';
import { navigateToLibrary } from '@/utils/nav';
import { BOOK_IDS_SEPARATOR } from '@/services/constants';
import useBooksManager from '../hooks/useBooksManager';
import useBookShortcuts from '../hooks/useBookShortcuts';
import BookDetailModal from '@/components/BookDetailModal';
import Spinner from '@/components/Spinner';
import SideBar from './sidebar/SideBar';
import Notebook from './notebook/Notebook';
import BooksGrid from './BooksGrid';
import { eventDispatcher } from '@/utils/event';
const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
const router = useRouter();
@@ -35,6 +37,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
const { getConfig, getBookData, saveConfig } = useBookDataStore();
const { getView, setBookKeys } = useReaderStore();
const { initViewState, getViewState, clearViewState } = useReaderStore();
const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
const isInitiating = useRef(false);
const [loading, setLoading] = useState(false);
@@ -59,6 +62,13 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
if (index === 0) setSideBarBookKey(key);
}
});
const handleShowBookDetails = (event: CustomEvent) => {
const book = event.detail as Book;
setShowDetailsBook(book);
return true;
};
eventDispatcher.onSync('show-book-details', handleShowBookDetails);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -139,6 +149,13 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
<SideBar onGoToLibrary={handleCloseBooksToLibrary} />
<BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
<Notebook />
{showDetailsBook && (
<BookDetailModal
isOpen={!!showDetailsBook}
book={showDetailsBook}
onClose={() => setShowDetailsBook(null)}
/>
)}
</div>
);
};
apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx
+2 -2
View File
@@ -57,7 +57,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
className={clsx(
'note-editor textarea textarea-ghost min-h-[1em] resize-none !outline-none',
'inset-0 w-full rounded-none border-0 bg-transparent p-0 leading-normal',
'text-base',
'text-sm',
)}
ref={editorRef}
value={note}
@@ -70,7 +70,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
<button
className={clsx(
'btn btn-ghost settings-content hover:bg-transparent',
'flex h-[1.5em] min-h-[1.5em] items-end p-0',
'flex h-[1.3em] min-h-[1.3em] items-end p-0',
editorRef.current && editorRef.current.value ? '' : 'btn-disabled !bg-opacity-0',
)}
onClick={handleSaveNote}
apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+5 -11
View File
@@ -160,21 +160,15 @@ const Notebook: React.FC = ({}) => {
>
<p className='line-clamp-1'>{item.text || `Excerpt ${index + 1}`}</p>
</div>
<div
className='collapse-content select-text px-3 pb-0 text-xs'
onClick={(e) => e.stopPropagation()}
>
<div className='collapse-content select-text px-3 pb-0 text-xs'>
<p className='hyphens-auto text-justify'>{item.text}</p>
<div className='flex justify-end'>
<button
className={clsx(
'btn btn-ghost settings-content hover:bg-transparent',
'flex h-[1em] min-h-[1em] items-end p-0',
)}
<div
className='cursor-pointer align-bottom text-xs text-red-400'
onClick={handleEditNote.bind(null, item, true)}
>
<div className='align-bottom text-xs text-red-400'>{_('Delete')}</div>
</button>
{_('Delete')}
</div>
</div>
</div>
</div>
apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx
+39 -4
View File
@@ -1,11 +1,14 @@
import clsx from 'clsx';
import React from 'react';
import { FiChevronDown } from 'react-icons/fi';
import { FiChevronUp, FiChevronLeft } from 'react-icons/fi';
import { MdCheck } from 'react-icons/md';
import { useTranslation } from '@/hooks/useTranslation';
interface DropdownProps {
family?: string;
selected: string;
options: string[];
moreOptions?: string[];
onSelect: (option: string) => void;
onGetFontFamily: (option: string, family: string) => string;
}
@@ -14,21 +17,23 @@ const FontDropdown: React.FC<DropdownProps> = ({
family,
selected,
options,
moreOptions,
onSelect,
onGetFontFamily,
}) => {
const _ = useTranslation();
return (
<div className='dropdown dropdown-end'>
<div className='dropdown dropdown-top'>
<button
tabIndex={0}
className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
>
<span style={{ fontFamily: onGetFontFamily(selected, family ?? '') }}>{selected}</span>
<FiChevronDown className='h-4 w-4' />
<FiChevronUp className='h-4 w-4' />
</button>
<ul
tabIndex={0}
className='dropdown-content dropdown-right menu bg-base-100 rounded-box z-[1] mt-4 w-44 shadow'
className='dropdown-content menu bg-base-100 rounded-box absolute right-0 z-[1] mt-4 w-44 shadow'
>
{options.map((option) => (
<li key={option} onClick={() => onSelect(option)}>
@@ -40,6 +45,36 @@ const FontDropdown: React.FC<DropdownProps> = ({
</div>
</li>
))}
{moreOptions && moreOptions.length > 0 && (
<li className='dropdown dropdown-left dropdown-top'>
<div className='flex items-center px-0'>
<span style={{ minWidth: '20px' }}>
<FiChevronLeft className='h-4 w-4' />
</span>
<span>{_('System Fonts')}</span>
</div>
<ul
tabIndex={0}
className={clsx(
'dropdown-content menu bg-base-100 rounded-box relative z-[1] overflow-y-scroll shadow',
'mb-[-40px] mr-4 max-h-80 w-80',
)}
>
{moreOptions.map((option) => (
<li key={option} onClick={() => onSelect(option)}>
<div className='flex items-center px-0'>
<span style={{ minWidth: '20px' }}>
{selected === option && <MdCheck size={20} className='text-base-content' />}
</span>
<span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
{option}
</span>
</div>
</li>
))}
</ul>
</li>
)}
</ul>
</div>
);
apps/readest-app/src/app/reader/components/settings/FontPanel.tsx
+38 -2
View File
@@ -3,18 +3,27 @@ import React, { useEffect, useState } from 'react';
import NumberInput from './NumberInput';
import FontDropdown from './FontDropDown';
import { MONOSPACE_FONTS, SANS_SERIF_FONTS, SERIF_FONTS } from '@/services/constants';
import {
LINUX_FONTS,
MACOS_FONTS,
MONOSPACE_FONTS,
SANS_SERIF_FONTS,
SERIF_FONTS,
WINDOWS_FONTS,
} from '@/services/constants';
import { useReaderStore } from '@/store/readerStore';
import { useSettingsStore } from '@/store/settingsStore';
import { useTranslation } from '@/hooks/useTranslation';
import { useTheme } from '@/hooks/useTheme';
import { getStyles } from '@/utils/style';
import { getOSPlatform } from '@/utils/misc';
interface FontFaceProps {
className?: string;
family: string;
label: string;
options: string[];
moreOptions?: string[];
selected: string;
onSelect: (option: string) => void;
}
@@ -25,12 +34,21 @@ const handleFontFaceFont = (option: string, family: string) => {
return `'${option}', ${family}`;
};
const FontFace = ({ className, family, label, options, selected, onSelect }: FontFaceProps) => (
const FontFace = ({
className,
family,
label,
options,
moreOptions,
selected,
onSelect,
}: FontFaceProps) => (
<div className={clsx('config-item', className)}>
<span className=''>{label}</span>
<FontDropdown
family={family}
options={options}
moreOptions={moreOptions}
selected={selected}
onSelect={onSelect}
onGetFontFamily={handleFontFaceFont}
@@ -46,6 +64,21 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
const viewSettings = getViewSettings(bookKey)!;
const { themeCode } = useTheme();
const osPlatform = getOSPlatform();
let moreFonts: string[] = [];
switch (osPlatform) {
case 'macos':
moreFonts = MACOS_FONTS;
break;
case 'windows':
moreFonts = WINDOWS_FONTS;
break;
case 'linux':
moreFonts = LINUX_FONTS;
break;
default:
break;
}
const [defaultFontSize, setDefaultFontSize] = useState(viewSettings.defaultFontSize!);
const [minFontSize, setMinFontSize] = useState(viewSettings.minimumFontSize!);
const [overrideFont, setOverrideFont] = useState(viewSettings.overrideFont!);
@@ -206,6 +239,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
family='serif'
label={_('Serif Font')}
options={SERIF_FONTS}
moreOptions={moreFonts}
selected={serifFont}
onSelect={setSerifFont}
/>
@@ -213,6 +247,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
family='sans-serif'
label={_('Sans-Serif Font')}
options={SANS_SERIF_FONTS}
moreOptions={moreFonts}
selected={sansSerifFont}
onSelect={setSansSerifFont}
/>
@@ -221,6 +256,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
family='monospace'
label={_('Monospace Font')}
options={MONOSPACE_FONTS}
moreOptions={moreFonts}
selected={monospaceFont}
onSelect={setMonospaceFont}
/>
apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
return (
<dialog className='modal modal-open min-w-90 w-full !bg-[rgba(0,0,0,0.2)]'>
<div className='modal-box settings-content flex h-[60%] w-1/2 min-w-[480px] max-w-full flex-col p-0'>
<div className='modal-box settings-content flex h-[65%] w-1/2 min-w-[540px] max-w-full flex-col p-0'>
<div className='dialog-header bg-base-100 sticky top-0 z-10 flex items-center justify-center px-4 pt-2'>
<div className='dialog-tabs flex h-10 max-w-[80%] flex-grow items-center justify-around'>
<button
apps/readest-app/src/app/reader/components/sidebar/BookCard.tsx
+11 -9
View File
@@ -1,20 +1,22 @@
import React from 'react';
import Image from 'next/image';
import { MdInfoOutline } from 'react-icons/md';
import { Book } from '@/types/book';
import { useTranslation } from '@/hooks/useTranslation';
import { eventDispatcher } from '@/utils/event';
interface BookCardProps {
cover: string;
title: string;
author: string;
}
const BookCard: React.FC<BookCardProps> = ({ cover, title, author }) => {
const BookCard = ({ book }: { book: Book }) => {
const { coverImageUrl, title, author } = book;
const _ = useTranslation();
const showBookDetails = () => {
eventDispatcher.dispatchSync('show-book-details', book);
};
return (
<div className='flex h-20 w-full items-center'>
<Image
src={cover}
src={coverImageUrl!}
alt={_('Book Cover')}
width={56}
height={80}
@@ -31,7 +33,7 @@ const BookCard: React.FC<BookCardProps> = ({ cover, title, author }) => {
className='btn btn-ghost hover:bg-base-300 h-6 min-h-6 w-6 rounded-full p-0 transition-colors'
aria-label={_('More Info')}
>
<MdInfoOutline size={18} className='fill-base-content' />
<MdInfoOutline size={18} className='fill-base-content' onClick={showBookDetails} />
</button>
</div>
);
apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
+14 -3
View File
@@ -10,7 +10,8 @@ import { BookSearchConfig, BookSearchResult } from '@/types/book';
import Dropdown from '@/components/Dropdown';
import SearchOptions from './SearchOptions';
const MINIMUM_SEARCH_TERM_LENGTH = 2;
const MINIMUM_SEARCH_TERM_LENGTH_DEFAULT = 2;
const MINIMUM_SEARCH_TERM_LENGTH_CJK = 1;
interface SearchBarProps {
isVisible: boolean;
@@ -97,8 +98,15 @@ const SearchBar: React.FC<SearchBarProps> = ({
handleSearchTermChange(searchTerm);
};
const exceedMinSearchTermLength = (searchTerm: string) => {
const isCJK = /[\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]/.test(searchTerm);
const minLength = isCJK ? MINIMUM_SEARCH_TERM_LENGTH_CJK : MINIMUM_SEARCH_TERM_LENGTH_DEFAULT;
return searchTerm.length >= minLength;
};
const handleSearchTermChange = (term: string) => {
if (term.length >= MINIMUM_SEARCH_TERM_LENGTH) {
if (exceedMinSearchTermLength(term)) {
handleSearch(term);
} else {
resetSearch();
@@ -118,7 +126,10 @@ const SearchBar: React.FC<SearchBarProps> = ({
onSearchResultChange([...results]);
isSearchPending.current = false;
console.log('search done');
if (queuedSearchTerm.current !== term && queuedSearchTerm.current.length > 2) {
if (
queuedSearchTerm.current !== term &&
exceedMinSearchTermLength(queuedSearchTerm.current)
) {
handleSearch(queuedSearchTerm.current);
}
}
apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+1 -1
View File
@@ -125,7 +125,7 @@ const SideBar: React.FC<{
/>
</div>
<div className='border-base-300/50 border-b px-3'>
<BookCard cover={book.coverImageUrl!} title={book.title} author={book.author} />
<BookCard book={book} />
</div>
</div>
{isSearchBarVisible && searchResults ? (
apps/readest-app/src/services/constants.ts
+156
View File
@@ -82,6 +82,162 @@ export const SANS_SERIF_FONTS = ['Roboto', 'Noto Sans', 'Open Sans', 'Helvetica'
export const MONOSPACE_FONTS = ['Fira Code', 'Lucida Console', 'Consolas', 'Courier New'];
export const WINDOWS_FONTS = [
'Arial',
'Arial Black',
'Bahnschrift',
'Calibri',
'Cambria',
'Cambria Math',
'Candara',
'Comic Sans MS',
'Consolas',
'Constantia',
'Corbel',
'Courier New',
'Ebrima',
'Franklin Gothic Medium',
'Gabriola',
'Gadugi',
'Georgia',
'HoloLens MDL2 Assets',
'Impact',
'Ink Free',
'Javanese Text',
'Leelawadee UI',
'Lucida Console',
'Lucida Sans Unicode',
'Malgun Gothic',
'Marlett',
'Microsoft Himalaya',
'Microsoft JhengHei',
'Microsoft New Tai Lue',
'Microsoft PhagsPa',
'Microsoft Sans Serif',
'Microsoft Tai Le',
'Microsoft YaHei',
'Microsoft Yi Baiti',
'MingLiU-ExtB',
'Mongolian Baiti',
'MS Gothic',
'MV Boli',
'Myanmar Text',
'Nirmala UI',
'Palatino Linotype',
'Segoe MDL2 Assets',
'Segoe Print',
'Segoe Script',
'Segoe UI',
'Segoe UI Historic',
'Segoe UI Emoji',
'Segoe UI Symbol',
'SimSun',
'Sitka',
'Sylfaen',
'Symbol',
'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana',
'Webdings',
'Wingdings',
'Yu Gothic',
];
export const MACOS_FONTS = [
'American Typewriter',
'Andale Mono',
'Arial',
'Arial Black',
'Arial Narrow',
'Arial Rounded MT Bold',
'Arial Unicode MS',
'Avenir',
'Avenir Next',
'Avenir Next Condensed',
'Baskerville',
'Big Caslon',
'Bodoni 72',
'Bodoni 72 Oldstyle',
'Bodoni 72 Smallcaps',
'Bradley Hand',
'Brush Script MT',
'Chalkboard',
'Chalkboard SE',
'Chalkduster',
'Charter',
'Cochin',
'Comic Sans MS',
'Copperplate',
'Courier',
'Courier New',
'Didot',
'DIN Alternate',
'DIN Condensed',
'Futura',
'Geneva',
'Georgia',
'Gill Sans',
'Helvetica',
'Helvetica Neue',
'Herculanum',
'Hoefler Text',
'Impact',
'Lucida Grande',
'Luminari',
'Marker Felt',
'Menlo',
'Microsoft Sans Serif',
'Monaco',
'Noteworthy',
'Optima',
'Palatino',
'Papyrus',
'Phosphate',
'Rockwell',
'Savoye LET',
'SignPainter',
'Skia',
'Snell Roundhand',
'Tahoma',
'Times',
'Times New Roman',
'Trattatello',
'Trebuchet MS',
'Verdana',
'Zapfino',
];
export const LINUX_FONTS = [
'Arial',
'Cantarell',
'Comic Sans MS',
'Courier New',
'DejaVu Sans',
'DejaVu Sans Mono',
'DejaVu Serif',
'Droid Sans',
'Droid Sans Mono',
'FreeMono',
'FreeSans',
'FreeSerif',
'Georgia',
'Impact',
'Liberation Mono',
'Liberation Sans',
'Liberation Serif',
'Noto Mono',
'Noto Sans',
'Noto Serif',
'Open Sans',
'Poppins',
'Symbola',
'Times New Roman',
'Ubuntu',
'Ubuntu Mono',
'Wingdings',
];
export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;
export const BOOK_IDS_SEPARATOR = '+';