v0.5.4 - Double Page Layout, Estimated Reading Time, a new PDF Reader and Infinite Scroll?!
Published on June 30, 2022 by Joseph Milazzo
This is a hell of an update, so big I could barely figure out what features to put in the header. There were so many great additions that were not planned for this release, like the new PDF reader. Welcome to v0.5.4, this release is the part 2 of the UX and Reader refresh. This is another massive release, even I'm shocked when I was creating the release notes. This releases adds some big hitters and some requests from the community. Let's get started.
Coming up first is a niche feature for myself, but a few of our users will definitely like this, WebP storage support for bookmarks. If you use the bookmarking feature, your bookmark collection can get pretty big pretty fast. This new feature allows Kavita to covert images to WebP and save 40% space in the process. This is some foundational work as I want to expand this for all covers as well (WebP is missing Safari support).
Estimated Reading Time
This is a really cool feature as it helps you find what to read next based on how much time it might take to read it. Want something quick to read, your dashboard now shows series that it takes under 10 hours to read. If the series is image based, we use some estimates taken from our discord community to estimate a range of how long it takes to read. If it's a book, same deal, but we use word count rather than pages. Of course, estimated read time is now available for sorting as well. See some examples below:
List View
This is another one that is pretty cool and what looks like a simple feature, is in fact a lot of work under the hood. This new layout mode for the site really shines for book readers. Not only can you see the titles (if they are set), but also summary and other information, making it really easy to pick up a book to read. Plus, combined (in this screenshot) is the new Blur Unread summaries setting, which will blur summaries if you haven't read them, so you wont be spoiled when glancing over books in a series (like I was, creating this feature).
PDF Reader
I've always been annoyed with the PDF reader Kavita came with out of the box, but I personally don't have many PDF files, so it's not a big deal for me. I've been monitoring and searching for libraries that would provide a better experience and low and behold, I found one. It's not perfect, but it was easy to integrate and gives a much more natural experience when reading PDFs. I would love to hear feedback on this new reader from you, so drop by the discord or open a feature request with some ideas for it. This is our v1 implementation so some more reading focused features are not present. Feed me ideas so we can build out a more ideal solution.
Infinite Scrolling
This is a big one. There is no more pages in the app (except a few places that haven't been attended to), everything is infinite scrolling with a jump bar to quickly jump around and virtualized DOM to keep it light on the browser. Due to the infinite scroll, the scroll bars are in different places than you might be used to. It might be jarring at first, but you'll quickly get used to it and love the speed at which the screen renders.
Double Page Layout
This is another big one. I had implemented most of it in Part 1, but had to pull from the release as it had some edge cases. magujun took it upon themselves to drive it home and it's simply sweet. If you're a big comic fan or even want to read emulating a comic, this is the feature for you (on appropriately sized devices). We offer 2 new double page layout methods: Double and Double (manga). Double will render out the pages as Page 1 Page 2 | Page 3 Page 4. Double (manga) renders out the pages as Page 2 Page 1 | Page 4 Page 3 to help mimic the reading order of manga.
Detail Drawers
This is the last big feature to talk about and that is moving to drawers rather than modals for some screens. This new UX pattern is me playing with the idea and testing it out. So far, it seems to be much nicer experience on mobile.
With those big features out of the way, there are still plenty of great enhancements in here, like the ability to mark chapters as specials via ComicInfo.xml, parser support for Chinese, Korean, and Japanese characters, a redesigned cover upload, ability to enable swagger on your server (for those who develop scripts against our API), and even a redesigned Admin panel, to drive some future updates.
Next release will be another slow release, especially since I'm doing some deep refactors of the main scan loop. Next release is focused solely on performance and scan loop enhancements and will take quite some time. Thank you as always for being patient and supporting me in this project. Especially to those that provide support in discord and our donators.
The full release can be found here.
Coming up first is a niche feature for myself, but a few of our users will definitely like this, WebP storage support for bookmarks. If you use the bookmarking feature, your bookmark collection can get pretty big pretty fast. This new feature allows Kavita to covert images to WebP and save 40% space in the process. This is some foundational work as I want to expand this for all covers as well (WebP is missing Safari support).
Estimated Reading Time
This is a really cool feature as it helps you find what to read next based on how much time it might take to read it. Want something quick to read, your dashboard now shows series that it takes under 10 hours to read. If the series is image based, we use some estimates taken from our discord community to estimate a range of how long it takes to read. If it's a book, same deal, but we use word count rather than pages. Of course, estimated read time is now available for sorting as well. See some examples below:
List View
This is another one that is pretty cool and what looks like a simple feature, is in fact a lot of work under the hood. This new layout mode for the site really shines for book readers. Not only can you see the titles (if they are set), but also summary and other information, making it really easy to pick up a book to read. Plus, combined (in this screenshot) is the new Blur Unread summaries setting, which will blur summaries if you haven't read them, so you wont be spoiled when glancing over books in a series (like I was, creating this feature).
PDF Reader
I've always been annoyed with the PDF reader Kavita came with out of the box, but I personally don't have many PDF files, so it's not a big deal for me. I've been monitoring and searching for libraries that would provide a better experience and low and behold, I found one. It's not perfect, but it was easy to integrate and gives a much more natural experience when reading PDFs. I would love to hear feedback on this new reader from you, so drop by the discord or open a feature request with some ideas for it. This is our v1 implementation so some more reading focused features are not present. Feed me ideas so we can build out a more ideal solution.
Infinite Scrolling
This is a big one. There is no more pages in the app (except a few places that haven't been attended to), everything is infinite scrolling with a jump bar to quickly jump around and virtualized DOM to keep it light on the browser. Due to the infinite scroll, the scroll bars are in different places than you might be used to. It might be jarring at first, but you'll quickly get used to it and love the speed at which the screen renders.
Double Page Layout
This is another big one. I had implemented most of it in Part 1, but had to pull from the release as it had some edge cases. magujun took it upon themselves to drive it home and it's simply sweet. If you're a big comic fan or even want to read emulating a comic, this is the feature for you (on appropriately sized devices). We offer 2 new double page layout methods: Double and Double (manga). Double will render out the pages as Page 1 Page 2 | Page 3 Page 4. Double (manga) renders out the pages as Page 2 Page 1 | Page 4 Page 3 to help mimic the reading order of manga.
Detail Drawers
This is the last big feature to talk about and that is moving to drawers rather than modals for some screens. This new UX pattern is me playing with the idea and testing it out. So far, it seems to be much nicer experience on mobile.
With those big features out of the way, there are still plenty of great enhancements in here, like the ability to mark chapters as specials via ComicInfo.xml, parser support for Chinese, Korean, and Japanese characters, a redesigned cover upload, ability to enable swagger on your server (for those who develop scripts against our API), and even a redesigned Admin panel, to drive some future updates.
Next release will be another slow release, especially since I'm doing some deep refactors of the main scan loop. Next release is focused solely on performance and scan loop enhancements and will take quite some time. Thank you as always for being patient and supporting me in this project. Especially to those that provide support in discord and our donators.
The full release can be found here.
Added
- New Server setting to use WebP for bookmarks rather than the raw image. WebP provides a 40% saving to space. This setting will take effect but not convert existing bookmarks (use task for that)
- New Adhoc Task to convert existing bookmarks to WebP. The setting to use WebP does not have to be enabled. This can be a long running task, esp on ARM, so be aware of that.
- When user account updates occur, like changing permissions or library updates, events will be sent to that user if they are logged in/active on the site and patch their new state in. This ensures they don't need to log out and log in to have the new state
- Exposed internal reoccurring tasks to the UI under Tasks tab. This is preliminary work for a later update.
- Kavita can now read the Format tag from ComicInfo and use that to force special status. The following tags will force special: Special, Reference, Director's Cut, Box Set, Box-Set, Annual, Anthology, Epilogue, One Shot, One-Shot, Prologue, TPB, Trade Paper Back, Omnibus, Compendium, Absolute, Graphic Novel, GN, FCBD
- Implemented the ability to parse some volume and chapter keywords for Chinese
- Added a word count analysis to count number of words in your epub files.
- Added an time estimate to read a series based on average reading time for comics/manga and text. Time to read is powered by pages for comics/manga and words for epub
- Implemented file parsing support for Korean
- Series detail page will now show an estimated time left, if you have reading progress, based on an average speed between our fast and slow readers.
- Library Recommendation page now has a new feed, Quick Catchups. Series that take less than 10 hours and are ongoing.
- On Volume details, added a distinct Read button, rather than having hidden knowledge of clicking the poster for the chapter would let the user read it.
- Series Detail has a new button in the top right which lets you use a new layout mode for laying out cards (without having to change user preferences).
- List view layout. This new layout uses a list style to render out non-series on series detail page. There is more information on these cards by default and can show the title of the chapter/issue/book.
- Swapped out the pagination for infinite scroll and jump bar to quickly jump around library
- Added Download action to series detail page
- Implemented the ability to use double page layout in the manga reader. This new rendering mode allows for both Comic (Page 0 Page 1 | Page 2 Page 3) book reader and Manga (Page 1 Page 0 | Page 3 Page 2) reading and is optimized for larger screens. Shoutout to @magujun for finishing off the implementation and getting it into this release.
- Brand new PDF reader that is more like the native reader in browsers. PDF files will be streamed to the UI (this means way faster load times) and have ability to search text within, select text, zoom, change reading layout, etc. Progress reporting is hooked in. Light/Dark mode is supported but experimental in underlying library, use at your own risk.
- When a series is removed form a library, library detail will now reload.
- Filename parser now supports Japanese kanji for volume and chapter parsing
- Admins can now enable swagger (exposed via swagger/) on their instances via a new server setting.
- New server setting to configure how many days of backups are retained. Still defaults to 30 days.
- Added the ability to sort by time to read from metadata filter
- When there are errors extracting archives, throw a custom error message to the UI informing of the potential issues
- Admins can now change a library type after creation. There is a warning explaining that it's very likely series will be re-created and hence reading progress or bookmarks could be deleted. Proceed with caution.
- Users can now enable a setting to blur summaries (mainly for list view) of volumes/chapters/books they haven't read yet.
- Added new stats to help see how features are being used and gather some performance testing numbers from v0.5.3 and to prepare for upcoming performance release (v0.5.5). In addition, some of the new functionality (virtual scrolling) have new stats to ensure we are seeing how it performs on the user base rather than just the beta testers. New fields: Total Genres, Total People, If storing bookmarks as WebP, Users on Cards layout, Users on List Layout, Max number of Series in a Library, Max Volumes in a Series, Max Chapters in a Series, and if any series relationships are present.
Changed
- A major rework to the events widget to provide detailed information about what is occurring during library/series scans and cover refreshes.
- Admin dashboard has received a major overhaul to the tabs. Tabs have been split into General, Users, Libraries, Media, Email, Tasks, and System.
- Removed Actions dropdown and functionalities from System tab and moved them to Tasks tab.
- Tweaked the messaging around Stat collection to reflect what we collect (aka we don't collect browser information)
- On Series detail, some of the tag badges have been replaced with a new design.
- (Performance) Large performance gains on Scan Series by checking for highest level based on known series folders before falling back to library folders for a scan.
- Series detail Language will now show the full name (ie en -> English)
- The details modal for chapters and volumes is now a bottom drawer. This new design is to help make the experience more natural on mobile and give us more horizontal space to work with.
- Library Recommendation page now uses the time calculations to select quick reads rather than just pages. Instead of < 2000 pages, we now pick series that are not ongoing and can be completed in less than 10 hours.
- You can now view an individual issue/book's summary in the new detail drawer, along with maturity rating, word count, pages.
- Series detail drawer will now select the book's internal title rather than generic volume 1 when it's set.
- (Performance) Reduced an array allocation that occurs thousands of times a scan.
- Series detail uses the builtin cover image refreshing mechanism rather than some old, initial implementation, resulting in a much more reliable refresh mechanism.
- Side nav filter (when there are more than 10 libraries) now uses a clear button within the input field.
- Tweaked the book reader to try to reduce overlapping on bottom action bar.
- Redesigned the cover image chooser to be less intensive for volume/chapter image uploads.
- When in image chooser, don't allow the first image, which represents what was the active cover, respond to cover image updates
- Cleaned up the selection code on mobile to be less prone to accidental selections
- Many areas around the app, like library detail and series detail, will now recycle DOM to lessen impact of rendering many items.
- Changed the router to help with this infinite loading on Firefox issue
- Adjusted gutters on admin dashboard to match other screens
- The directory picker now allows you to paste in a directory path to select it and features a new design that should be easier to use.
- Default pagination is all items on API level
- Changed some APIs for Tachiyomi to help with progress syncing edge cases
- When errors occur during scans, show the event widget icon in read
Fixed
- Fixed a layout issue for screens with cards that had no data, the message would be fixed into a card space.
- See more is now at the bottom of the section, instead of in the middle of the people area.
- Fixed some alignment issues for page subtitles where the header had actionables
- Fixed a bug in the user-preferences within the BookReader accordion panel where missing brackets for the id prevented the accordion from functioning correctly.
- Fixed an off by 1 pixel bug on the search overlay
- Fixed an issue where images in the book reader were not respecting height limiting styles, causing the image to spill across multiple virtual pages in column layout
- Fixed a bug when fit to height and there is overflow on horizontal, the pagination area is stuck to the original width and after scrolling right, the pagination area doesn't move on manga reader.
- E-ink readers would show an outline on the pagination area on book reader when using white mode
- Fixed a bug when switching from column layout to default, the progress would get reset and current line wouldn't be scrolled to
- Side nav filter (when there are more than 10 libraries) now hides when the side nav is collapsed.
- Fixed a bug where the progress bar wouldn't render on a card item while a download was progressing
- Fixed language not being sent to the backend when editing in series detail modal
- Fixed a bug where in some rare cases, the scroll would not be reset when using the reader
- Fixed a bug where sometimes changing the layout wouldn't re-render the page.
- Numerous spelling corrections throughout the app
- Fixed a bug where table of contents would no longer generate on some Epub 3's due to a change in the underlying epub reader we use
- Fixed a bug in the epub parsing where even if you had a series index and series group, but didn't have the series in the title, Kavita wouldn't group them properly.
- Fixed a bug where refresh tokens were supposed to be granted, but weren't and hence a re-authentication was required.
Theme
- Added --card-list-item-bg-color for the card list item
Known Issues
- Reading List page's drag and drop is broken when there is scroll on the page. You can use the Order Numbers option which will enable input boxes to re-order.
- Apple M1 chips are not supported for generating PDF covers (if you host your server on a mac). With the new reader, you can now at least read them. The team is investigating a solution.