-
+
{
})
})
+describe('BookCoverCard — cover aspect override', () => {
+ it('uses explicit coverAspectRatio prop over injected ratio', () => {
+ const wrapper = mountCard(presentBookWithCover, '2/3', '1/1')
+ const coverDiv = wrapper.find('[style*="aspect-ratio"]')
+ const style = coverDiv.attributes('style') ?? ''
+ expect(style.includes('aspect-ratio: 1 / 1') || style.includes('aspect-ratio: 1/1')).toBe(true)
+ })
+})
+
describe('BookCoverCard — present state', () => {
it('does not apply grayscale to the cover container', () => {
const wrapper = mountCard(presentBook)
diff --git a/client/src/features/series/components/SeriesCard.spec.ts b/client/src/features/series/components/SeriesCard.spec.ts
new file mode 100644
index 000000000..d3d8c061f
--- /dev/null
+++ b/client/src/features/series/components/SeriesCard.spec.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import type { SeriesSummary } from '@bookorbit/types'
+import SeriesCard from './SeriesCard.vue'
+
+vi.mock('@/features/book/composables/useCoverVersions', () => ({
+ useCoverVersions: () => ({
+ coverUrl: (bookId: number) => `/covers/${bookId}`,
+ }),
+}))
+
+const BookCoverArtworkStub = defineComponent({
+ name: 'BookCoverArtwork',
+ emits: ['load', 'error'],
+ template: '',
+})
+
+function makeSeries(overrides: Partial = {}): SeriesSummary {
+ return {
+ name: 'Harry Potter Audio',
+ bookCount: 7,
+ readCount: 2,
+ authors: ['J.K. Rowling'],
+ coverBookIds: [101],
+ lastAddedAt: null,
+ ...overrides,
+ }
+}
+
+function mountCard(series: SeriesSummary): VueWrapper {
+ return mount(SeriesCard, {
+ props: { series },
+ global: {
+ stubs: {
+ BookCoverArtwork: BookCoverArtworkStub,
+ SeriesCompletionBar: true,
+ },
+ },
+ })
+}
+
+function getCoverStyle(wrapper: VueWrapper): string {
+ const artwork = wrapper.get('[data-testid="series-cover-artwork"]')
+ return artwork.element.parentElement?.getAttribute('style') ?? ''
+}
+
+function getCoverStyleAt(wrapper: VueWrapper, index: number): string {
+ const artworks = wrapper.findAll('[data-testid="series-cover-artwork"]')
+ return artworks[index]!.element.parentElement?.getAttribute('style') ?? ''
+}
+
+describe('SeriesCard', () => {
+ it('emits open on card click and renders compact author text', async () => {
+ const wrapper = mountCard(makeSeries({ authors: ['A1', 'A2', 'A3'] }))
+
+ await wrapper.get('.group.flex.h-full.cursor-pointer.flex-col').trigger('click')
+
+ expect(wrapper.emitted('open')).toEqual([['Harry Potter Audio']])
+ expect(wrapper.text()).toContain('A1, A2 +1')
+ })
+
+ it('keeps non-square covers at base scale', async () => {
+ const wrapper = mountCard(makeSeries())
+ const artwork = wrapper.getComponent(BookCoverArtworkStub)
+
+ artwork.vm.$emit('load', 0.66)
+ await nextTick()
+
+ const style = getCoverStyle(wrapper)
+ expect(style).toContain('scale(1)')
+ expect(style).toContain('transform-origin: center')
+ })
+
+ it('enlarges square covers and anchors them to the bottom', async () => {
+ const wrapper = mountCard(makeSeries())
+ const artwork = wrapper.getComponent(BookCoverArtworkStub)
+
+ artwork.vm.$emit('load', 1)
+ await nextTick()
+
+ const style = getCoverStyle(wrapper)
+ expect(style).toContain('scale(1.25)')
+ expect(style).toContain('transform-origin: center bottom')
+ })
+
+ it('applies and clears hover transforms across the stack', async () => {
+ const wrapper = mountCard(makeSeries({ coverBookIds: [101, 102] }))
+ const wrappers = wrapper.findAll('.absolute.overflow-hidden.rounded-lg')
+
+ await wrappers[0]!.trigger('mouseenter')
+ await nextTick()
+
+ expect(getCoverStyleAt(wrapper, 0)).toContain('translateY(-8px) scale(1.05)')
+ expect(getCoverStyleAt(wrapper, 1)).toContain('opacity: 0.58')
+
+ await wrapper.get('.relative.isolate.overflow-hidden.border-b.border-border\\/60').trigger('mouseleave')
+ await nextTick()
+
+ expect(getCoverStyleAt(wrapper, 0)).toContain('translateY(0) scale(1)')
+ })
+
+ it('falls back to initial when the visible cover fails', async () => {
+ const wrapper = mountCard(makeSeries({ name: 'Resident Evil', coverBookIds: [101] }))
+ const artwork = wrapper.getComponent(BookCoverArtworkStub)
+
+ artwork.vm.$emit('error')
+ await nextTick()
+
+ expect(wrapper.find('[data-testid="series-cover-artwork"]').exists()).toBe(false)
+ expect(wrapper.text()).toContain('R')
+ })
+})
diff --git a/client/src/features/series/components/SeriesCard.vue b/client/src/features/series/components/SeriesCard.vue
index fa497b06d..683402879 100644
--- a/client/src/features/series/components/SeriesCard.vue
+++ b/client/src/features/series/components/SeriesCard.vue
@@ -4,10 +4,13 @@ import type { SeriesSummary } from '@bookorbit/types'
import { BookCopy } from 'lucide-vue-next'
import { bookCoverStyle } from '@/features/book/lib/book-cover'
import { useCoverVersions } from '@/features/book/composables/useCoverVersions'
+import BookCoverArtwork from '@/features/book/components/BookCoverArtwork.vue'
+import { resolveSquareCoverScale, shouldPersistCoverRatio } from '../lib/cover-scale'
import { useCoverStack } from '../composables/useCoverStack'
import SeriesCompletionBar from './SeriesCompletionBar.vue'
const HOVERED_COVER_Z_INDEX = 120
+const SQUARE_COVER_SCALE = 1.25
const props = defineProps<{
series: SeriesSummary
@@ -22,6 +25,7 @@ const fallbackStyle = computed(() => bookCoverStyle(props.series.name))
const initial = computed(() => props.series.name.trim().charAt(0).toUpperCase() || '?')
const failedCovers = ref(new Set())
+const coverRatios = ref(new Map())
const hoveredCoverId = ref(null)
const activeCoverIds = computed(() => props.series.coverBookIds.filter((id) => !failedCovers.value.has(id)))
const { visibleCovers, baseStyles } = useCoverStack(activeCoverIds)
@@ -35,6 +39,17 @@ const authorsLine = computed(() => {
function handleCoverError(bookId: number) {
failedCovers.value = new Set([...failedCovers.value, bookId])
+ if (coverRatios.value.has(bookId)) {
+ const nextRatios = new Map(coverRatios.value)
+ nextRatios.delete(bookId)
+ coverRatios.value = nextRatios
+ }
+}
+
+function handleCoverLoad(bookId: number, ratio: number | null) {
+ const prev = coverRatios.value.get(bookId)
+ if (!shouldPersistCoverRatio(prev, ratio)) return
+ coverRatios.value = new Map(coverRatios.value).set(bookId, ratio)
}
function handleClick() {
@@ -58,6 +73,9 @@ const coverStyles = computed(() => {
const hasActiveHover = hoveredIndex >= 0
return baseStyles.value.map((base, index) => {
+ const bookId = visibleCovers.value[index]
+ const ratio = bookId == null ? null : (coverRatios.value.get(bookId) ?? null)
+ const squareScale = resolveSquareCoverScale(ratio, SQUARE_COVER_SCALE)
const isHovered = hasActiveHover && hoveredId === visibleCovers.value[index]
const distanceFromHovered = hasActiveHover ? Math.abs(index - hoveredIndex) : 0
const loweredScale = Math.max(0.95, 1 - distanceFromHovered * 0.03)
@@ -66,11 +84,12 @@ const coverStyles = computed(() => {
return {
...base,
zIndex: hasActiveHover ? (isHovered ? HOVERED_COVER_Z_INDEX : base.zIndex) : base.zIndex,
+ transformOrigin: squareScale > 1 ? 'center bottom' : 'center',
transform: hasActiveHover
? isHovered
- ? 'translateY(-8px) scale(1.05)'
- : `translateY(${loweredOffset}px) scale(${loweredScale})`
- : 'translateY(0) scale(1)',
+ ? `translateY(-8px) scale(${1.05 * squareScale})`
+ : `translateY(${loweredOffset}px) scale(${loweredScale * squareScale})`
+ : `translateY(0) scale(${squareScale})`,
opacity: hasActiveHover ? (isHovered ? 1 : 0.58) : 1,
filter: hasActiveHover ? (isHovered ? 'brightness(1.08) saturate(1.14)' : 'brightness(0.78) saturate(0.74)') : 'none',
boxShadow: hasActiveHover
@@ -113,7 +132,19 @@ const coverStyles = computed(() => {
:style="coverStyles[i] ?? {}"
@mouseenter="handleCoverHover(bookId)"
>
- ![]()
+
+
+
+
+
+ {
+ it('persists a ratio only when it is valid and meaningfully changed', () => {
+ expect(shouldPersistCoverRatio(undefined, null)).toBe(false)
+ expect(shouldPersistCoverRatio(undefined, 0)).toBe(false)
+ expect(shouldPersistCoverRatio(undefined, 1)).toBe(true)
+ expect(shouldPersistCoverRatio(1, 1.00001)).toBe(false)
+ expect(shouldPersistCoverRatio(1, 1.01)).toBe(true)
+ })
+
+ it('detects square covers using tolerance and returns the enlarged scale', () => {
+ expect(resolveSquareCoverScale(null, 1.25)).toBe(1)
+ expect(resolveSquareCoverScale(0.66, 1.25)).toBe(1)
+ expect(resolveSquareCoverScale(0.93, 1.25)).toBe(1.25)
+ expect(resolveSquareCoverScale(1.07, 1.25)).toBe(1.25)
+ })
+
+ it('returns centered bottom transform only when scale exceeds 1', () => {
+ expect(centeredBottomScaleTransform(1)).toBeNull()
+ expect(centeredBottomScaleTransform(Number.NaN)).toBeNull()
+ expect(centeredBottomScaleTransform(1.25)).toEqual({
+ transformOrigin: 'center bottom',
+ transform: 'translateY(-12.5%) scale(1.25)',
+ })
+ })
+})
diff --git a/client/src/features/series/lib/cover-scale.ts b/client/src/features/series/lib/cover-scale.ts
new file mode 100644
index 000000000..ebfe4644d
--- /dev/null
+++ b/client/src/features/series/lib/cover-scale.ts
@@ -0,0 +1,27 @@
+export const SQUARE_RATIO_TARGET = 1
+export const SQUARE_RATIO_TOLERANCE = 0.08
+const COVER_RATIO_EPSILON = 0.0001
+
+function isFinitePositive(value: number | null | undefined): value is number {
+ return typeof value === 'number' && Number.isFinite(value) && value > 0
+}
+
+export function shouldPersistCoverRatio(previous: number | undefined, next: number | null): next is number {
+ if (!isFinitePositive(next)) return false
+ if (previous == null) return true
+ return Math.abs(previous - next) >= COVER_RATIO_EPSILON
+}
+
+export function resolveSquareCoverScale(ratio: number | null | undefined, enlargedScale: number): number {
+ if (!isFinitePositive(ratio)) return 1
+ return Math.abs(ratio - SQUARE_RATIO_TARGET) <= SQUARE_RATIO_TOLERANCE ? enlargedScale : 1
+}
+
+export function centeredBottomScaleTransform(scale: number): { transformOrigin: string; transform: string } | null {
+ if (!Number.isFinite(scale) || scale <= 1) return null
+ const centerShiftPercent = (scale - 1) * 50
+ return {
+ transformOrigin: 'center bottom',
+ transform: `translateY(-${centerShiftPercent}%) scale(${scale})`,
+ }
+}
diff --git a/client/src/features/series/views/SeriesDetailView.spec.ts b/client/src/features/series/views/SeriesDetailView.spec.ts
index 8f8d83b7f..e921f39ef 100644
--- a/client/src/features/series/views/SeriesDetailView.spec.ts
+++ b/client/src/features/series/views/SeriesDetailView.spec.ts
@@ -1,6 +1,6 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { defineComponent, nextTick, reactive, ref, type PropType } from 'vue'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
import type { BookCard, SeriesDetail } from '@bookorbit/types'
import SeriesDetailView from './SeriesDetailView.vue'
@@ -59,6 +59,7 @@ vi.mock('@/composables/useDisplaySettings', () => ({
useDisplaySettings: () => ({
portraitCoverSize: ref(160),
gridGap: ref(16),
+ bookCoverDisplayMode: ref('blurred-fit'),
gridCardPrimaryLabel: ref('hidden'),
gridCardSecondaryLabel: ref('hidden'),
}),
@@ -179,6 +180,12 @@ const VirtualBookTableStub = defineComponent({
template: ``,
})
+const BookCoverArtworkStub = defineComponent({
+ name: 'BookCoverArtwork',
+ emits: ['load', 'error'],
+ template: '',
+})
+
const AddToCollectionSheetStub = defineComponent({
name: 'AddToCollectionSheet',
props: {
@@ -209,6 +216,7 @@ function mountView(mode: ViewMode) {
BookListRow: BookListRowStub,
VirtualBookTable: VirtualBookTableStub,
AddToCollectionSheet: AddToCollectionSheetStub,
+ BookCoverArtwork: BookCoverArtworkStub,
EntityNotFound: true,
SeriesCompletionBar: true,
SeriesGapBanner: true,
@@ -307,4 +315,33 @@ describe('SeriesDetailView', () => {
expect(sheet.attributes('data-open')).toBe('false')
expect(sheet.attributes('data-book-ids')).toBe('')
})
+
+ it('scales and centers square lead covers in the series header stack', async () => {
+ const lead = makeBook({ id: 7, seriesIndex: 1, hasCover: true })
+ mocks.fetchSeriesBooks.mockResolvedValueOnce({
+ items: [lead],
+ total: 1,
+ page: 0,
+ size: 8,
+ seriesInfo: makeSeriesInfo(),
+ })
+
+ const wrapper = mountView('grid')
+ await flushPromises()
+ await nextTick()
+
+ const artwork = wrapper.getComponent(BookCoverArtworkStub)
+ artwork.vm.$emit('load', 1)
+ await nextTick()
+
+ const style = wrapper.get('[data-testid="lead-cover-artwork"]').element.parentElement?.getAttribute('style') ?? ''
+ expect(style).toContain('scale(1.25)')
+ expect(style).toContain('transform-origin: center bottom')
+ expect(style).toContain('translateY(-12.5%)')
+
+ artwork.vm.$emit('load', 1)
+ await nextTick()
+ const secondStyle = wrapper.get('[data-testid="lead-cover-artwork"]').element.parentElement?.getAttribute('style') ?? ''
+ expect(secondStyle).toBe(style)
+ })
})
diff --git a/client/src/features/series/views/SeriesDetailView.vue b/client/src/features/series/views/SeriesDetailView.vue
index 0202b4689..a1bffc13e 100644
--- a/client/src/features/series/views/SeriesDetailView.vue
+++ b/client/src/features/series/views/SeriesDetailView.vue
@@ -8,6 +8,7 @@ import type { BookCard, BookDetail, SortSpec } from '@bookorbit/types'
import VirtualBookGrid from '@/features/book/components/VirtualBookGrid.vue'
import BookListRow from '@/features/book/components/BookListRow.vue'
import VirtualBookTable from '@/features/book/components/VirtualBookTable.vue'
+import BookCoverArtwork from '@/features/book/components/BookCoverArtwork.vue'
import { bookCoverStyle } from '@/features/book/lib/book-cover'
import { useCoverVersions } from '@/features/book/composables/useCoverVersions'
import { useDisplaySettings } from '@/composables/useDisplaySettings'
@@ -25,6 +26,7 @@ import SeriesGapBanner from '../components/SeriesGapBanner.vue'
import { fetchSeriesBooks } from '../api/series'
import { useSeriesDetail } from '../composables/useSeriesDetail'
import { useCoverStack, MAX_VISIBLE as MAX_STACK_VISIBLE } from '../composables/useCoverStack'
+import { centeredBottomScaleTransform, resolveSquareCoverScale, shouldPersistCoverRatio } from '../lib/cover-scale'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import type { ColumnId } from '@/features/book/composables/useTableColumns'
@@ -71,6 +73,7 @@ const leadDescriptionExpanded = ref(false)
const leadGenresExpanded = ref(false)
const leadCoverBookIds = ref([])
const failedLeadCovers = ref(new Set())
+const leadCoverRatios = ref(new Map())
const leadBook = ref<{
id: number
title: string | null
@@ -106,7 +109,8 @@ const hiddenLeadGenres = computed(() => {
const totalGenres = leadBook.value?.genres.length ?? 0
return Math.max(0, totalGenres - displayedLeadGenres.value.length)
})
-const seriesBooksCoverSize = computed(() => Math.max(100, portraitCoverSize.value - 20))
+const SERIES_AUDIOBOOK_COVER_SCALE = 1.25
+const seriesBooksCoverSize = computed(() => Math.max(125, portraitCoverSize.value - 20))
const leadMetaItems = computed(() => {
if (!leadBook.value) return []
const items: string[] = []
@@ -169,13 +173,39 @@ function onLibraryFilterChange(event: Event) {
function handleLeadCoverError(bookId: number) {
failedLeadCovers.value = new Set([...failedLeadCovers.value, bookId])
+ if (leadCoverRatios.value.has(bookId)) {
+ const nextRatios = new Map(leadCoverRatios.value)
+ nextRatios.delete(bookId)
+ leadCoverRatios.value = nextRatios
+ }
}
+function handleLeadCoverLoad(bookId: number, ratio: number | null) {
+ const prev = leadCoverRatios.value.get(bookId)
+ if (!shouldPersistCoverRatio(prev, ratio)) return
+ leadCoverRatios.value = new Map(leadCoverRatios.value).set(bookId, ratio)
+}
+
+const scaledLeadCoverStyles = computed(() =>
+ leadCoverStyles.value.map((base, index) => {
+ const bookId = visibleLeadCoverBookIds.value[index]
+ const ratio = bookId == null ? null : (leadCoverRatios.value.get(bookId) ?? null)
+ const squareScale = resolveSquareCoverScale(ratio, SERIES_AUDIOBOOK_COVER_SCALE)
+ const squareTransform = centeredBottomScaleTransform(squareScale)
+ if (!squareTransform) return base
+ return {
+ ...base,
+ ...squareTransform,
+ }
+ }),
+)
+
async function loadLeadBookPreview(preserveCurrent = false) {
if (!seriesName.value) {
leadBook.value = null
leadBookError.value = null
leadCoverBookIds.value = []
+ leadCoverRatios.value = new Map()
return
}
@@ -186,6 +216,7 @@ async function loadLeadBookPreview(preserveCurrent = false) {
leadBook.value = null
leadCoverBookIds.value = []
failedLeadCovers.value = new Set()
+ leadCoverRatios.value = new Map()
}
leadDescriptionExpanded.value = false
leadGenresExpanded.value = false
@@ -384,14 +415,19 @@ watch(
v-for="(bookId, i) in visibleLeadCoverBookIds"
:key="bookId"
class="absolute overflow-hidden rounded-lg"
- :style="leadCoverStyles[i] ?? {}"
+ :style="scaledLeadCoverStyles[i] ?? {}"
>
- ![]()
@@ -577,6 +613,7 @@ watch(
:books="books"
:cover-size="seriesBooksCoverSize"
:grid-gap="gridGap"
+ :audio-cover-scale="SERIES_AUDIOBOOK_COVER_SCALE"
:virtualized="false"
@action="handleBookAction"
@update:book="handleTableBookUpdate"