From 797f7908a582211c3006852c2b4aca2b52054a4b Mon Sep 17 00:00:00 2001 From: chrox Date: Sun, 27 Oct 2024 20:18:29 +0100 Subject: [PATCH] Add keyboard shortcuts for page turning and book selection && header chapter info --- apps/readest-app/src-tauri/tauri.conf.json | 2 +- apps/readest-app/src/app/globals.css | 15 ++++++++-- .../src/app/library/components/Header.tsx | 29 ++++++++++++++++--- apps/readest-app/src/app/library/page.tsx | 1 + .../app/reader/components/FoliateViewer.tsx | 2 +- .../src/app/reader/components/FooterBar.tsx | 21 +++++++++++++- .../app/reader/components/ReaderContent.tsx | 5 +++- .../src/app/reader/components/SectionInfo.tsx | 20 +++++++++++++ .../src/app/reader/components/TOCView.tsx | 2 ++ .../src/app/reader/hooks/useFoliateEvents.ts | 3 +- apps/readest-app/src/store/readerStore.ts | 3 ++ apps/readest-app/src/types/book.ts | 1 + 12 files changed, 93 insertions(+), 11 deletions(-) create mode 100644 apps/readest-app/src/app/reader/components/SectionInfo.tsx diff --git a/apps/readest-app/src-tauri/tauri.conf.json b/apps/readest-app/src-tauri/tauri.conf.json index d4aeb0d6..f2a8b74d 100644 --- a/apps/readest-app/src-tauri/tauri.conf.json +++ b/apps/readest-app/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "../node_modules/@tauri-apps/cli/config.schema.json", "productName": "Readest", - "version": "0.2.0", + "version": "0.3.0", "identifier": "com.bilingify.digest", "build": { "frontendDist": "../out", diff --git a/apps/readest-app/src/app/globals.css b/apps/readest-app/src/app/globals.css index e21948fd..4e7093bd 100644 --- a/apps/readest-app/src/app/globals.css +++ b/apps/readest-app/src/app/globals.css @@ -37,9 +37,20 @@ foliate-view { border: none; } +@keyframes scaleUpAndDown { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } +} + .hover-bar-anim:hover ~ .foliate-viewer { - transform: scale(1.02); - transition: transform 0.3s ease; + animation: scaleUpAndDown 0.3s ease forwards; } .window-button { diff --git a/apps/readest-app/src/app/library/components/Header.tsx b/apps/readest-app/src/app/library/components/Header.tsx index 4647a49f..3a7ef4c3 100644 --- a/apps/readest-app/src/app/library/components/Header.tsx +++ b/apps/readest-app/src/app/library/components/Header.tsx @@ -1,15 +1,33 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { FaSearch } from 'react-icons/fa'; import { PiPlus } from 'react-icons/pi'; -import { MdSelectAll } from 'react-icons/md'; +import { PiSelectionAllDuotone } from 'react-icons/pi'; + import WindowButtons from '@/components/WindowButtons'; interface LibraryHeaderProps { + isSelectMode: boolean; onImportBooks: () => void; onToggleSelectMode: () => void; } -const LibraryHeader: React.FC = ({ onImportBooks, onToggleSelectMode }) => { +const LibraryHeader: React.FC = ({ + isSelectMode, + onImportBooks, + onToggleSelectMode, +}) => { + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.ctrlKey || e.shiftKey) { + onToggleSelectMode(); + } + }; + window.addEventListener('keydown', handleKeyDown); + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [onToggleSelectMode]); + return (
= ({ onImportBooks, onToggleSe
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx index 8094d18d..488e3f85 100644 --- a/apps/readest-app/src/app/library/page.tsx +++ b/apps/readest-app/src/app/library/page.tsx @@ -75,6 +75,7 @@ const LibraryPage = () => { return (
diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index a469dd9a..3e937880 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -85,7 +85,7 @@ const FoliateViewer: React.FC<{ if ('setStyles' in view.renderer) { view.renderer.setStyles(getCSS(2.4, true, true)); } - view.renderer.setAttribute('margin', '35px'); + view.renderer.setAttribute('margin', '44px'); view.renderer.setAttribute('gap', '4%'); const lastLocation = bookConfig.location; if (lastLocation) { diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx index f9f3b43e..1dedeb99 100644 --- a/apps/readest-app/src/app/reader/components/FooterBar.tsx +++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import clsx from 'clsx'; import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri'; @@ -9,6 +9,7 @@ interface FooterBarProps { progress: number | undefined; isHoveredAnim: boolean; hoveredBookKey: string; + sideBarBookKey: string; setHoveredBookKey: (key: string) => void; } @@ -17,6 +18,7 @@ const FooterBar: React.FC = ({ progress, isHoveredAnim, hoveredBookKey, + sideBarBookKey, setHoveredBookKey, }) => { const { getFoliateView } = useReaderStore(); @@ -37,6 +39,23 @@ const FooterBar: React.FC = ({ foliateView?.goRight(); }; + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (sideBarBookKey === bookKey) { + if (e.key === 'ArrowLeft') { + handleGoPrev(); + } else if (e.key === 'ArrowRight') { + handleGoNext(); + } + } + }; + + window.addEventListener('keydown', handleKeyDown); + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; + }, [sideBarBookKey, bookKey]); + return (
{ const router = useRouter(); @@ -137,7 +138,7 @@ const ReaderContent = () => { const key = getKey(ids[index]!, index); const { book, config, bookDoc } = bookState; if (!book || !config || !bookDoc) return null; - const { section, pageinfo, progress } = config; + const { section, pageinfo, progress, chapter } = config; return (
{ setHoveredBookKey={setHoveredBookKey} /> +
diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx new file mode 100644 index 00000000..b313a0f5 --- /dev/null +++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +interface SectionInfoProps { + chapter?: string; +} + +const SectionInfo: React.FC = ({ chapter }) => { + return ( +
+

+ {chapter || ''} +

+
+ ); +}; + +export default SectionInfo; diff --git a/apps/readest-app/src/app/reader/components/TOCView.tsx b/apps/readest-app/src/app/reader/components/TOCView.tsx index eb1bdfa3..9d8ffa67 100644 --- a/apps/readest-app/src/app/reader/components/TOCView.tsx +++ b/apps/readest-app/src/app/reader/components/TOCView.tsx @@ -61,6 +61,8 @@ const TOCItemView: React.FC<{ } }; + useEffect(() => {}, [currentHref]); + const isActive = currentHref === item.href; useEffect(() => { diff --git a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts index d43b3d20..54d2770b 100644 --- a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts +++ b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts @@ -21,12 +21,13 @@ export const useFoliateEvents = ( const defaultRelocateHandler = (event: Event) => { const detail = (event as CustomEvent).detail; - console.log('relocate:', detail); + // console.log('relocate:', detail); setProgress( bookKey, detail.fraction, detail.cfi, detail.tocItem?.href, + detail.tocItem?.label, detail.section, detail.location, ); diff --git a/apps/readest-app/src/store/readerStore.ts b/apps/readest-app/src/store/readerStore.ts index 5e9979b5..a3b16c52 100644 --- a/apps/readest-app/src/store/readerStore.ts +++ b/apps/readest-app/src/store/readerStore.ts @@ -30,6 +30,7 @@ interface ReaderStore { progress: number, location: string, href: string, + chapter: string, section: PageInfo, pageinfo: PageInfo, ) => void; @@ -149,6 +150,7 @@ export const useReaderStore = create((set, get) => ({ progress: number, location: string, href: string, + chapter: string, section: PageInfo, pageinfo: PageInfo, ) => @@ -164,6 +166,7 @@ export const useReaderStore = create((set, get) => ({ ...book.config, lastUpdated: Date.now(), href, + chapter, progress, location, section, diff --git a/apps/readest-app/src/types/book.ts b/apps/readest-app/src/types/book.ts index e83e027a..cca305c1 100644 --- a/apps/readest-app/src/types/book.ts +++ b/apps/readest-app/src/types/book.ts @@ -34,6 +34,7 @@ export interface BookConfig { progress?: number; location?: string; href?: string; + chapter?: string; section?: PageInfo; pageinfo?: PageInfo; bookmarks?: BookNote[];