mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2026-05-30 23:40:40 +02:00
[PR #4301] Issue: 4300 Sorting Square/Rectangle aspect ratios, sub-sorting by width #4212
Assignees
adam (Adam Melkus)
Clear assignees
adam (Adam Melkus)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: starred/audiobookshelf#4212
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
📋 Pull Request Information
Original PR: https://github.com/advplyr/audiobookshelf/pull/4301
Author: @tagmeh
Created: 5/17/2025
Status: 🔄 Open
Base:
master← Head:Issue-4300-book-cover-sorting📝 Commits (10+)
42eb4e3Feature mostly implemented, has UI/CSS bug, not super DRY, no tests.6edfcfbMerge branch 'master' of https://github.com/tagmeh/audiobookshelf3cdf16eMerge branch 'advplyr:master' into master093be36Merge branch 'advplyr:master' into master28d98b4Merge branch 'advplyr:master' into mastera2c7d64Working 1.0. Removed duplicate api calls per image. Attempted testing, removed, unable to figure out either testing option.fc655bcRemoved Cover.cy.js file. Wasn't able to figure out cypress testing.faa0a83Removed console logs.43ca263Fixed rectangle book cover sub-sorting and conditional divider display.34c4e7bAdded cy-ids to divs for testing purposes. Added a basic test for Cover.vue, and actual logic tests for SortedCovers.vue. All tests are passing.📊 Changes
5 files changed (+602 additions, -28 deletions)
View changed files
➕
client/components/covers/DisplayCover.vue(+113 -0)➕
client/components/covers/SortedCovers.vue(+102 -0)📝
client/components/modals/item/tabs/Cover.vue(+72 -28)➕
client/cypress/tests/components/covers/SortedCovers.cy.js(+184 -0)➕
client/cypress/tests/components/modals/item/tab/Cover.cy.js(+131 -0)📄 Description
Brief summary
Sorts book covers by square or rectangle aspect ratios, sub-sorting on width. Shows square covers first if the library-specific setting "Use Square Book Covers" is true, otherwise shows rectangle book covers first. Always shows both aspect ratios. Divider is not shown if there are only covers of one aspect ratio.
Looking for feedback and guidance. I'm not new to programming, but I don't know all of JS/Nuxt/Vue's magics.
Which issue is fixed?
Fixes #4300
In-depth Description
Describe your solution in more depth.
Upon book covers query, Cover.vue's submitSearchForm returns an array of book cover image urls.
Cover.vue runs resolveImages to pre-load the returned results (array of book cover images) in order to get their dimensions,. Once that's done, the array of Image objects is passed into covers/SortedCovers.vue for display. covers/SortedCovers.vue sorts the images into rectangle and square images, sub-sorting by x, then y values. Conditionally displaying one group or the other first based on the "Use square book covers" library setting. Also conditionally shows a divider if both rectangle and square images exist, keeping both image types separate. covers/SortedCovers.vue uses covers/DisplayCover.vue to display the pre-queried image object without reloading the image, which would have happened if we used covers/PreviewCovers.vue.
Cover.vue continues to use covers/PreviewCover.vue to display the current/main book cover image and any local images displayed in the tab.
How does it work? Why is this the best solution?
Relies on the Cover.vue to pre-query the images so we can sort before calling the loop to render the images. By adding new components, existing processes aren't affected by any changes. Due to a few factors: Cover.vue calling the backend in sequence for each remote api book cover provider, the response being an array of strings, and the images being loaded with height and width at the component level, all make sorting the images difficult without pre-querying the images at some point in the process, before they're displayed to the user.
There may be a more optimal approach. The image querying could be done in the covers/SortedCover.vue file or the SortedCover.vue and DisplayCover.vue could be merged together. JavaScript/Frontend coding isn't exactly my forte, I'm much more comfortable on the backend. However, this doesn't appear to slow anything down, greatly improves the book covers display, and doesn't appear to affect any of the existing systems. I wish I could have had some mocha or cypress tests to further verify/codify the changes, but I guess those frameworks are just a bit much for me.
Does it solve a problem that affects multiple users or is this an edge case for your setup?
Mostly a preference thing. More like an ease of use/polish-level enhancement. Not required, but a nice to have. Technically it affects any user who is looking to update/improve a book's cover and has to hunt for their preferred ratio/size/style. With this change, it should be easier to quickly identify if there are any, say, square images in the return, or if you'll have to settle for a rectangular image.
How have you tested this?
Most testing was done manually, side by side the current version of the app to verify nothing outside of the intended change, changed. Added some cypress tests to validate the square/rectangle sorting, sub-sorting (ascending), and tests to validate border (between image groupings/sections) behavior.
Screenshots
All images are shown, square images are sorted first, then rectangle images.
User prefers square images.
User prefers rectangle images.
Book only returns one of Rectangle or Square images (The divider is hidden).
Images are sub-sorted by size (x, then y) in ascending order (not a togglable option).
Rectangles only:
Squares only (Coerced into rectangles):
Short demo to show existing behavior is retained:
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.