groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-03-03 22:49:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement server-side cover dimension detection and update badge thresholds

Browse source
This commit is contained in:
Tiberiu Ichim 2026-02-17 19:30:48 +02:00
parent 5bf60d5ae3
commit d0c09d04f1
16 changed files with 353 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
artifacts/2026-02-15/badge.md Normal file
View file

@ -0,0 +1,20 @@
# Cover Size Badge Specification
## Overview
A new badge is displayed on book covers to indicate the resolution of the cover image. This helps users identifying high-quality covers (e.g., Audible's 2400x2400 format).
## Logic
The badge is determined client-side once the image has loaded, using the `naturalWidth` and `naturalHeight` properties of the `HTMLImageElement`.
### Size Tiers
| Tier | Criteria | Label | Color |
| :--- | :--- | :--- | :--- |
| **Big** | Width or Height >= 2400px | BIG | Success (Green) |
| **Medium** | Width or Height >= 1200px | MED | Info (Blue) |
| **Small** | Width or Height < 1200px | SML | Warning (Yellow) |
## Implementation Details
- **Component**: `BookCover.vue` (and other cover components as needed).
- **Detection**: `imageLoaded` event captures dimensions.
- **UI**: Absolute positioned badge in the bottom-right corner.
- **Responsiveness**: Font size and padding scale with the `sizeMultiplier` of the cover component.

37
artifacts/2026-02-17/badge.md Normal file
View file

@ -0,0 +1,37 @@
# Cover Size Badge Specification
## Overview
Indicates the size tier of a book cover image directly on the cover in various views. This helps users quickly identify high-quality (Audible-grade) covers vs. lower resolution ones.
## Size Tiers
The badge uses the following logic based on the image's natural dimensions (Width or Height):
| Tier | Condition | Text | Color |
| :--- | :--- | :--- | :--- |
| **BIG** | Width or Height >= 1200px | BIG | Green (`bg-success`) |
| **MED** | Width or Height >= 450px | MED | Blue (`bg-info`) |
| **SML** | Width or Height < 450px | SML | Yellow (`bg-warning`) |
## Implementation Details
The detection is performed server-side and stored in the database to ensure accuracy regardless of thumbnail sizes.
### Dimension Detection
- `coverWidth` and `coverHeight` columns added to `books` and `podcasts` tables.
- A `beforeSave` hook on `Book` and `Podcast` models detects dimensions using `ffprobe` when `coverPath` changes.
- A database migration (`v2.32.7-add-cover-dimensions.js`) populates existing items.
### Components Impacted
1. **`BookCover.vue`**: Used in detail views and some table rows (e.g., Collections).
2. **`LazyBookCard.vue`**: Used in main library bookshelf views, home page shelves, and search results.
### Logic
- USE `media.coverWidth` and `media.coverHeight` (from the server) as the primary source.
- FALLBACK to `naturalWidth` and `naturalHeight` from the image's `@load` event if server data is unavailable.
- COMPUTE the badge tier based on the rules above.
- RENDER a small, absolute-positioned badge in the bottom-right corner of the cover.
### UI Styling
- **Position**: Bottom-right of the cover image.
- **Font Size**: Scales with the `sizeMultiplier` (default `0.6rem`).
- **Pointer Events**: `none` (to avoid interfering with clicks).
- **Z-Index**: `20` (to stay above the cover and some overlays).