@@ -354,7 +531,7 @@ onUnmounted(() => stopLibraryUploadListener())
section-id="smartScopes"
tour-id="sidebar-smartScopes"
:label="t('components.sidebar.smartScopes')"
- :items="smartScopes"
+ :items="bookScopes"
route-name="smartScope"
index-route-name="smart-scopes"
:active-id="activeSmartScopeId"
@@ -362,7 +539,7 @@ onUnmounted(() => stopLibraryUploadListener())
:empty-text="t('components.sidebar.noSmartScopes')"
:filter-label="t('components.sidebar.filterSmartScopes')"
:filter-placeholder="t('components.sidebar.filterSmartScopesPlaceholder')"
- :see-all-label="t('components.sidebar.seeAllSmartScopes', { count: formatNumber(smartScopes.length) })"
+ :see-all-label="t('components.sidebar.seeAllSmartScopes', { count: formatNumber(bookScopes.length) })"
can-add
:add-label="t('components.sidebar.newSmartScope')"
can-reorder
@@ -375,7 +552,7 @@ onUnmounted(() => stopLibraryUploadListener())
section-id="collections"
tour-id="sidebar-collections"
:label="t('components.sidebar.collections')"
- :items="collections"
+ :items="bookCollections"
route-name="collection"
index-route-name="collections"
:active-id="activeCollectionId"
@@ -383,7 +560,7 @@ onUnmounted(() => stopLibraryUploadListener())
:empty-text="t('components.sidebar.noCollections')"
:filter-label="t('components.sidebar.filterCollections')"
:filter-placeholder="t('components.sidebar.filterCollectionsPlaceholder')"
- :see-all-label="t('components.sidebar.seeAllCollections', { count: formatNumber(collections.length) })"
+ :see-all-label="t('components.sidebar.seeAllCollections', { count: formatNumber(bookCollections.length) })"
can-add
:add-label="t('components.sidebar.newCollection')"
can-reorder
@@ -392,6 +569,79 @@ onUnmounted(() => stopLibraryUploadListener())
@navigate="handleNavigate"
/>
+
+
+
+
+ {{ podcastImportPct(item.id) }}%
+ {{ formatCompactNumber(entityCount(item) ?? 0) }}
+
+
+
+
+
{{ podcastImportLabel(item.id) }}
+
diff --git a/client/src/components/ChipGroup.vue b/client/src/components/ChipGroup.vue
new file mode 100644
index 000000000..266c1b22c
--- /dev/null
+++ b/client/src/components/ChipGroup.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
diff --git a/client/src/components/EmptyState.vue b/client/src/components/EmptyState.vue
new file mode 100644
index 000000000..47f977ade
--- /dev/null
+++ b/client/src/components/EmptyState.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
{{ title }}
+
{{ hint }}
+
+
+
+
diff --git a/client/src/components/FilterChip.vue b/client/src/components/FilterChip.vue
new file mode 100644
index 000000000..252672477
--- /dev/null
+++ b/client/src/components/FilterChip.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
diff --git a/client/src/components/FormSheet.vue b/client/src/components/FormSheet.vue
new file mode 100644
index 000000000..ca612ae18
--- /dev/null
+++ b/client/src/components/FormSheet.vue
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+ {{ title }}
+ {{ description }}
+
+
+
+
+
+
+ {{ error }}
+
+
+
+
+
+
+
+
+
diff --git a/client/src/components/ListEndFooter.vue b/client/src/components/ListEndFooter.vue
new file mode 100644
index 000000000..745d8e7b2
--- /dev/null
+++ b/client/src/components/ListEndFooter.vue
@@ -0,0 +1,22 @@
+
+
+
+
+ {{ t('common.loading') }}
+
+ {{ t('podcast.library.allLoaded', { total: formatNumber(total) }) }}
+
+
+
diff --git a/client/src/components/ListSkeleton.vue b/client/src/components/ListSkeleton.vue
new file mode 100644
index 000000000..f244ecd9f
--- /dev/null
+++ b/client/src/components/ListSkeleton.vue
@@ -0,0 +1,16 @@
+
+
+
+
+ {{ label ?? t('common.loading') }}
+
+
+
diff --git a/client/src/components/LoadErrorPanel.vue b/client/src/components/LoadErrorPanel.vue
new file mode 100644
index 000000000..948fa18a4
--- /dev/null
+++ b/client/src/components/LoadErrorPanel.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
{{ message }}
+
+
diff --git a/client/src/components/SelectionActionBar.vue b/client/src/components/SelectionActionBar.vue
index 4fa6a68f3..3b6eda104 100644
--- a/client/src/components/SelectionActionBar.vue
+++ b/client/src/components/SelectionActionBar.vue
@@ -242,7 +242,7 @@ watch(
>
@@ -484,7 +484,11 @@ watch(
-
diff --git a/client/src/components/ViewHeader.vue b/client/src/components/ViewHeader.vue
index ba28ccaa4..1de217ac4 100644
--- a/client/src/components/ViewHeader.vue
+++ b/client/src/components/ViewHeader.vue
@@ -304,7 +304,7 @@ function handleMobileSearchOpenUpdate(value: boolean) {
-
+
{{ t('components.viewHeader.display') }}
diff --git a/client/src/components/__tests__/EmptyState.spec.ts b/client/src/components/__tests__/EmptyState.spec.ts
new file mode 100644
index 000000000..3c6bf8aa0
--- /dev/null
+++ b/client/src/components/__tests__/EmptyState.spec.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EmptyState from '../EmptyState.vue'
+
+describe('EmptyState', () => {
+ it('renders the icon, title, hint, and actions', () => {
+ const wrapper = mount(EmptyState, {
+ props: { icon: 'ListMusic', title: 'No episodes yet', hint: 'Follow a show to see its episodes here.' },
+ slots: { actions: '' },
+ })
+
+ expect(wrapper.find('.lucide-list-music').exists()).toBe(true)
+ expect(wrapper.get('h2').text()).toBe('No episodes yet')
+ expect(wrapper.get('p').text()).toBe('Follow a show to see its episodes here.')
+ expect(wrapper.get('button').text()).toBe('Browse shows')
+ })
+
+ it('collapses to the title alone when nothing else is supplied', () => {
+ const wrapper = mount(EmptyState, { props: { title: 'Nothing here' } })
+
+ expect(wrapper.get('h2').text()).toBe('Nothing here')
+ expect(wrapper.get('h2').classes()).not.toContain('mt-4')
+ expect(wrapper.find('p').exists()).toBe(false)
+ expect(wrapper.find('button').exists()).toBe(false)
+ expect(wrapper.find('svg').exists()).toBe(false)
+ })
+})
diff --git a/client/src/components/__tests__/FormSheet.spec.ts b/client/src/components/__tests__/FormSheet.spec.ts
new file mode 100644
index 000000000..5253af006
--- /dev/null
+++ b/client/src/components/__tests__/FormSheet.spec.ts
@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import ConfirmDialog from '@/components/ui/ConfirmDialog.vue'
+import FormSheet from '../FormSheet.vue'
+
+const stubs = {
+ Sheet: { name: 'Sheet', props: ['open'], emits: ['update:open'], template: '
' },
+ SheetContent: { name: 'SheetContent', template: '
' },
+ SheetHeader: { name: 'SheetHeader', template: '
' },
+ SheetTitle: { name: 'SheetTitle', template: '
' },
+ SheetDescription: { name: 'SheetDescription', template: '
' },
+ SheetFooter: { name: 'SheetFooter', template: '
' },
+}
+
+function mountSheet(props: Record = {}) {
+ return mount(FormSheet, {
+ props: { open: true, title: 'Edit details', ...props },
+ global: { stubs },
+ })
+}
+
+function footerButton(wrapper: ReturnType, label: string) {
+ return wrapper.findAll('button').find((button) => button.text() === label)!
+}
+
+describe('FormSheet', () => {
+ it('announces the open so a host can seed the form, and re-announces when the record changes', async () => {
+ // The watcher is immediate, so a sheet mounted closed reports one `closed` before anything else.
+ const wrapper = mountSheet({ open: false, resetKey: 1 })
+ expect(wrapper.emitted('opened')).toBeUndefined()
+ expect(wrapper.emitted('closed')).toHaveLength(1)
+
+ await wrapper.setProps({ open: true })
+ expect(wrapper.emitted('opened')).toHaveLength(1)
+
+ await wrapper.setProps({ resetKey: 2 })
+ expect(wrapper.emitted('opened')).toHaveLength(2)
+
+ await wrapper.setProps({ open: false })
+ expect(wrapper.emitted('closed')).toHaveLength(2)
+ })
+
+ it('closes straight away when nothing is unsaved', async () => {
+ const wrapper = mountSheet()
+
+ await footerButton(wrapper, 'Cancel').trigger('click')
+
+ expect(wrapper.emitted('update:open')).toEqual([[false]])
+ expect(wrapper.findComponent(ConfirmDialog).exists()).toBe(false)
+ })
+
+ it('asks before discarding unsaved edits, and stays open if the answer is no', async () => {
+ const wrapper = mountSheet({ dirty: true })
+
+ await footerButton(wrapper, 'Cancel').trigger('click')
+
+ expect(wrapper.emitted('update:open')).toBeUndefined()
+ const dialog = wrapper.findComponent(ConfirmDialog)
+ expect(dialog.props('title')).toBe('Discard changes?')
+
+ dialog.vm.$emit('cancel')
+ await wrapper.vm.$nextTick()
+ expect(wrapper.findComponent(ConfirmDialog).exists()).toBe(false)
+ expect(wrapper.emitted('update:open')).toBeUndefined()
+
+ await footerButton(wrapper, 'Cancel').trigger('click')
+ wrapper.findComponent(ConfirmDialog).vm.$emit('confirm')
+ await wrapper.vm.$nextTick()
+
+ expect(wrapper.emitted('update:open')).toEqual([[false]])
+ })
+
+ it('guards a backdrop or escape close the same way as the cancel button', async () => {
+ const wrapper = mountSheet({ dirty: true })
+
+ wrapper.findComponent({ name: 'Sheet' }).vm.$emit('update:open', false)
+ await wrapper.vm.$nextTick()
+
+ expect(wrapper.emitted('update:open')).toBeUndefined()
+ expect(wrapper.findComponent(ConfirmDialog).exists()).toBe(true)
+ })
+
+ it('disables both footer buttons while a write is in flight and neither closes the sheet', async () => {
+ const wrapper = mountSheet({ busy: true })
+
+ expect(footerButton(wrapper, 'Cancel').attributes('disabled')).toBeDefined()
+ expect(footerButton(wrapper, 'Save').attributes('disabled')).toBeDefined()
+
+ wrapper.findComponent({ name: 'Sheet' }).vm.$emit('update:open', false)
+ await wrapper.vm.$nextTick()
+ expect(wrapper.emitted('update:open')).toBeUndefined()
+ })
+
+ it('keeps cancel usable when only the submit is blocked', () => {
+ const wrapper = mountSheet({ submitDisabled: true })
+
+ expect(footerButton(wrapper, 'Cancel').attributes('disabled')).toBeUndefined()
+ expect(footerButton(wrapper, 'Save').attributes('disabled')).toBeDefined()
+ })
+
+ it('renders one error surface beside the footer actions', () => {
+ const wrapper = mountSheet({ error: 'Name is required' })
+
+ expect(wrapper.get('[role="alert"]').text()).toBe('Name is required')
+ })
+})
diff --git a/client/src/components/entity-index/EntityIndexView.vue b/client/src/components/entity-index/EntityIndexView.vue
index ac366a61c..fc766e1a1 100644
--- a/client/src/components/entity-index/EntityIndexView.vue
+++ b/client/src/components/entity-index/EntityIndexView.vue
@@ -5,6 +5,7 @@ import { ArrowUpDown, Plus, Search, X } from '@lucide/vue'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import AppIcon from '@/components/AppIcon.vue'
import { formatNumber } from '@/i18n/formatters'
+import { entityCount } from '@/lib/entity-count'
export interface EntityIndexItem {
id: number
@@ -12,6 +13,8 @@ export interface EntityIndexItem {
name: string
icon?: string | null
bookCount?: number | null
+ podcastCount?: number | null
+ type?: string
}
type SortField = 'custom' | 'name' | 'bookCount'
@@ -30,8 +33,10 @@ const props = withDefaults(
loading?: boolean
canAdd?: boolean
addLabel?: string
+ /** Indexes of non-book entities relabel the count sort to match what they actually count. */
+ countSortLabel?: string
}>(),
- { loading: false, canAdd: false, addLabel: undefined },
+ { loading: false, canAdd: false, addLabel: undefined, countSortLabel: undefined },
)
const emit = defineEmits<{ add: [] }>()
@@ -48,7 +53,7 @@ const order = ref('asc')
const sortLabels = computed>(() => ({
custom: t('components.entityIndex.sort.custom'),
name: t('components.entityIndex.sort.name'),
- bookCount: t('components.entityIndex.sort.bookCount'),
+ bookCount: props.countSortLabel ?? t('components.entityIndex.sort.bookCount'),
}))
const isDefaultSort = computed(() => sort.value === 'custom' && order.value === 'asc')
@@ -65,7 +70,7 @@ const sortedItems = computed(() => {
const field = sort.value
return [...matchedItems.value].sort((a, b) => {
if (field === 'name') return a.name.localeCompare(b.name) * direction
- if (field === 'bookCount') return ((a.bookCount ?? 0) - (b.bookCount ?? 0)) * direction
+ if (field === 'bookCount') return ((entityCount(a) ?? 0) - (entityCount(b) ?? 0)) * direction
return (a.displayOrder - b.displayOrder) * direction
})
})
@@ -101,6 +106,11 @@ function handleAdd() {
function itemRoute(id: number) {
return { name: props.routeName, params: { id } }
}
+
+function itemCountText(item: EntityIndexItem): string {
+ const count = entityCount(item) ?? 0
+ return item.type === 'podcasts' ? t('components.entityIndex.showCount', { count }) : t('components.entityIndex.bookCount', { count })
+}
@@ -212,8 +222,8 @@ function itemRoute(id: number) {
{{ item.name }}
-
- {{ t('components.entityIndex.bookCount', { count: item.bookCount }) }}
+
+ {{ itemCountText(item) }}
diff --git a/client/src/components/entity-index/__tests__/EntityIndexView.spec.ts b/client/src/components/entity-index/__tests__/EntityIndexView.spec.ts
new file mode 100644
index 000000000..e8a8180ba
--- /dev/null
+++ b/client/src/components/entity-index/__tests__/EntityIndexView.spec.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EntityIndexView from '../EntityIndexView.vue'
+import type { EntityIndexItem } from '../EntityIndexView.vue'
+
+function mountView(items: EntityIndexItem[]) {
+ return mount(EntityIndexView, {
+ props: {
+ title: 'Libraries',
+ titleIcon: 'BookCopy',
+ items,
+ routeName: 'library',
+ fallbackIcon: 'BookCopy',
+ searchPlaceholder: 'Filter libraries...',
+ emptyTitle: 'No libraries yet',
+ emptyHint: 'Create a library to start adding books.',
+ },
+ global: {
+ stubs: {
+ RouterLink: { name: 'RouterLink', props: ['to'], template: '' },
+ Popover: { name: 'Popover', template: '
' },
+ PopoverTrigger: { name: 'PopoverTrigger', template: '' },
+ PopoverContent: { name: 'PopoverContent', template: '
' },
+ },
+ },
+ })
+}
+
+function makeItem(overrides: Partial): EntityIndexItem {
+ return { id: 1, displayOrder: 0, name: 'Library', icon: null, ...overrides }
+}
+
+describe('EntityIndexView', () => {
+ describe('counts', () => {
+ it('describes a book library by its book count', () => {
+ const wrapper = mountView([makeItem({ type: 'books', bookCount: 7 })])
+
+ expect(wrapper.text()).toContain('Books: 7')
+ })
+
+ it('describes a podcast library by its show count, which is not a book count', () => {
+ const wrapper = mountView([makeItem({ type: 'podcasts', bookCount: 0, podcastCount: 2 })])
+
+ expect(wrapper.text()).toContain('Shows: 2')
+ expect(wrapper.text()).not.toContain('Books: 0')
+ })
+
+ it('omits the count line for an entity that carries no count', () => {
+ const wrapper = mountView([makeItem({ name: 'Scope' })])
+
+ expect(wrapper.text()).not.toContain('Books:')
+ expect(wrapper.text()).not.toContain('Shows:')
+ })
+
+ it('sorts podcast libraries against book libraries by their own counts', async () => {
+ const wrapper = mountView([
+ makeItem({ id: 1, displayOrder: 0, name: 'Novels', type: 'books', bookCount: 1 }),
+ makeItem({ id: 2, displayOrder: 1, name: 'Podcasts', type: 'podcasts', bookCount: 0, podcastCount: 5 }),
+ ])
+
+ const sortByCount = wrapper.findAll('button').find((button) => button.text() === 'Book count')
+ if (!sortByCount) throw new Error('Expected a book count sort option')
+ await sortByCount.trigger('click')
+
+ expect(wrapper.findAll('a').map((link) => link.text())).toEqual(['NovelsBooks: 1', 'PodcastsShows: 5'])
+ })
+ })
+})
diff --git a/client/src/components/media/MediaScrubber.vue b/client/src/components/media/MediaScrubber.vue
new file mode 100644
index 000000000..23f7249a8
--- /dev/null
+++ b/client/src/components/media/MediaScrubber.vue
@@ -0,0 +1,237 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ tooltipContent.primary }}
+
+ {{ tooltipContent.secondary }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ percentLabel }}
+
+
+
+
+
+
+
+
+
+
+ {{ percentLabel }}
+
+
+
+
diff --git a/client/src/components/media/__tests__/MediaScrubber.spec.ts b/client/src/components/media/__tests__/MediaScrubber.spec.ts
new file mode 100644
index 000000000..e0197d284
--- /dev/null
+++ b/client/src/components/media/__tests__/MediaScrubber.spec.ts
@@ -0,0 +1,201 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import MediaScrubber from '../MediaScrubber.vue'
+import type { MediaScrubberMarker } from '../types'
+
+const RAIL_WIDTH = 200
+
+/** Test Utils builds pointer events as MouseEvent, whose clientX is read-only, so the event is constructed directly. */
+async function firePointer(rail: { element: Element }, type: string, clientX = 0) {
+ rail.element.dispatchEvent(new PointerEvent(type, { clientX, pointerId: 1, bubbles: true, cancelable: true }))
+ await nextTick()
+}
+
+function mountScrubber(props: Partial['$props']> = {}) {
+ const wrapper = mount(MediaScrubber, {
+ props: { current: 0, duration: 200, ariaLabel: 'Episode position', ...props },
+ })
+ const rail = wrapper.get('[role="slider"]')
+ // jsdom lays nothing out, so the rail geometry the pointer maths reads has to be stood up.
+ vi.spyOn(rail.element, 'getBoundingClientRect').mockReturnValue({
+ left: 0,
+ top: 0,
+ right: RAIL_WIDTH,
+ bottom: 44,
+ width: RAIL_WIDTH,
+ height: 44,
+ x: 0,
+ y: 0,
+ toJSON: () => ({}),
+ } as DOMRect)
+ return { wrapper, rail }
+}
+
+describe('MediaScrubber pointer scrubbing', () => {
+ it('emits exactly one seek for a completed drag', async () => {
+ const { wrapper, rail } = mountScrubber()
+
+ await firePointer(rail, 'pointerdown', 20)
+ await firePointer(rail, 'pointermove', 60)
+ await firePointer(rail, 'pointermove', 150)
+ await firePointer(rail, 'pointerup', 150)
+
+ expect(wrapper.emitted('seek')).toEqual([[150]])
+ expect(wrapper.emitted('scrubStart')).toHaveLength(1)
+ expect(wrapper.emitted('scrubEnd')).toHaveLength(1)
+ })
+
+ it('previews the drag position without waiting for the parent to move', async () => {
+ const { wrapper, rail } = mountScrubber({ current: 0 })
+
+ await firePointer(rail, 'pointerdown', 100)
+
+ expect(wrapper.get('[data-testid="media-scrubber-thumb"]').attributes('style')).toContain('left: 50%')
+ expect(wrapper.get('[data-testid="media-scrubber-thumb"]').classes()).toContain('size-5')
+ })
+
+ it('abandons the drag without seeking when the pointer is cancelled', async () => {
+ const { wrapper, rail } = mountScrubber()
+
+ await firePointer(rail, 'pointerdown', 100)
+ await firePointer(rail, 'pointercancel')
+
+ expect(wrapper.emitted('seek')).toBeUndefined()
+ expect(wrapper.emitted('scrubEnd')).toHaveLength(1)
+ })
+
+ it('emits continuously while dragging when the caller needs live feedback', async () => {
+ const { wrapper, rail } = mountScrubber({ continuous: true, duration: 1, step: 0.05 })
+
+ await firePointer(rail, 'pointerdown', 0)
+ await firePointer(rail, 'pointermove', 100)
+ await firePointer(rail, 'pointerup', 100)
+
+ expect(wrapper.emitted('seek')).toEqual([[0], [0.5], [0.5]])
+ })
+})
+
+describe('MediaScrubber keyboard operation', () => {
+ it('steps by the arrow, page, and jump keys', async () => {
+ const { wrapper, rail } = mountScrubber({ current: 100 })
+
+ for (const key of ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End']) {
+ await rail.trigger('keydown', { key })
+ }
+
+ expect(wrapper.emitted('seek')).toEqual([[105], [95], [105], [95], [130], [70], [0], [200]])
+ })
+
+ it('clamps steps to the rail bounds', async () => {
+ const nearEnd = mountScrubber({ current: 198 })
+ const nearStart = mountScrubber({ current: 10 })
+
+ await nearEnd.rail.trigger('keydown', { key: 'ArrowRight' })
+ await nearStart.rail.trigger('keydown', { key: 'PageDown' })
+
+ expect(nearEnd.wrapper.emitted('seek')).toEqual([[200]])
+ expect(nearStart.wrapper.emitted('seek')).toEqual([[0]])
+ })
+
+ it('ignores keys it does not own', async () => {
+ const { wrapper, rail } = mountScrubber({ current: 100 })
+
+ await rail.trigger('keydown', { key: 'Tab' })
+
+ expect(wrapper.emitted('seek')).toBeUndefined()
+ })
+})
+
+describe('MediaScrubber rendering', () => {
+ it('renders chapter and bookmark markers, skipping the rail ends', () => {
+ const markers: MediaScrubberMarker[] = [
+ { position: 0, kind: 'chapter' },
+ { position: 50, kind: 'chapter' },
+ { position: 100, kind: 'chapter', active: true },
+ { position: 150, kind: 'bookmark' },
+ { position: 200, kind: 'chapter' },
+ ]
+ const { wrapper } = mountScrubber({ markers })
+
+ const rendered = wrapper.findAll('[data-testid="media-scrubber-marker"]')
+ expect(rendered).toHaveLength(3)
+ expect(rendered[0]!.classes()).toContain('bg-foreground/35')
+ expect(rendered[0]!.attributes('style')).toContain('left: 25%')
+ expect(rendered[1]!.classes()).toContain('bg-primary')
+ expect(rendered[2]!.classes()).toContain('bg-warning')
+ expect(rendered[2]!.attributes('data-kind')).toBe('bookmark')
+ })
+
+ it('shades buffered ranges and drops empty ones', () => {
+ const { wrapper } = mountScrubber({
+ buffered: [
+ { start: 0, end: 50 },
+ { start: 120, end: 120 },
+ { start: 150, end: 400 },
+ ],
+ })
+
+ const segments = wrapper.findAll('[data-testid="media-scrubber-buffered"]')
+ expect(segments).toHaveLength(2)
+ expect(segments[0]!.attributes('style')).toContain('width: 25%')
+ expect(segments[1]!.attributes('style')).toContain('left: 75%')
+ expect(segments[1]!.attributes('style')).toContain('width: 25%')
+ })
+
+ it('exposes slider semantics with the caller-composed value text', () => {
+ const { rail } = mountScrubber({ current: 90, ariaValueText: '1:30 elapsed of 3:20' })
+
+ expect(rail.attributes('aria-valuemin')).toBe('0')
+ expect(rail.attributes('aria-valuemax')).toBe('200')
+ expect(rail.attributes('aria-valuenow')).toBe('90')
+ expect(rail.attributes('aria-valuetext')).toBe('1:30 elapsed of 3:20')
+ expect(rail.attributes('aria-label')).toBe('Episode position')
+ expect(rail.attributes('tabindex')).toBe('0')
+ expect(rail.attributes('aria-disabled')).toBeUndefined()
+ })
+
+ it('shows the caller tooltip for the hovered position', async () => {
+ const tooltip = vi.fn<(seconds: number) => { primary: string; secondary: string }>((seconds) => ({
+ primary: `${seconds}s`,
+ secondary: 'Chapter two',
+ }))
+ const { wrapper, rail } = mountScrubber({ tooltip })
+
+ await firePointer(rail, 'pointermove', 50)
+
+ expect(tooltip).toHaveBeenCalledWith(50)
+ const bubble = wrapper.get('[data-testid="media-scrubber-tooltip"]')
+ expect(bubble.text()).toContain('50s')
+ expect(bubble.text()).toContain('Chapter two')
+
+ await firePointer(rail, 'pointerleave')
+ expect(wrapper.find('[data-testid="media-scrubber-tooltip"]').exists()).toBe(false)
+ })
+})
+
+describe('MediaScrubber inert states', () => {
+ it('renders an indeterminate rail when the duration is unknown', async () => {
+ const { wrapper, rail } = mountScrubber({ duration: 0 })
+
+ expect(rail.attributes('aria-disabled')).toBe('true')
+ expect(rail.attributes('tabindex')).toBe('-1')
+ expect(wrapper.find('[data-testid="media-scrubber-thumb"]').exists()).toBe(false)
+
+ await firePointer(rail, 'pointerdown', 100)
+ await rail.trigger('keydown', { key: 'ArrowRight' })
+
+ expect(wrapper.emitted('seek')).toBeUndefined()
+ expect(wrapper.emitted('scrubStart')).toBeUndefined()
+ })
+
+ it('ignores interaction while disabled', async () => {
+ const { wrapper, rail } = mountScrubber({ disabled: true })
+
+ await firePointer(rail, 'pointerdown', 100)
+ await rail.trigger('keydown', { key: 'End' })
+
+ expect(rail.attributes('aria-disabled')).toBe('true')
+ expect(wrapper.emitted('seek')).toBeUndefined()
+ })
+})
diff --git a/client/src/components/media/__tests__/MediaTransport.spec.ts b/client/src/components/media/__tests__/MediaTransport.spec.ts
new file mode 100644
index 000000000..d9bea8baf
--- /dev/null
+++ b/client/src/components/media/__tests__/MediaTransport.spec.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MediaTransport from '../MediaTransport.vue'
+
+const labels = {
+ play: 'Play',
+ pause: 'Pause',
+ previous: 'Previous episode',
+ next: 'Next episode',
+ back: 'Back 15 seconds',
+ forward: 'Forward 30 seconds',
+}
+
+function mountTransport(props: Partial['$props']> = {}) {
+ return mount(MediaTransport, {
+ props: {
+ playing: false,
+ hasPrevious: true,
+ hasNext: true,
+ skipBackSeconds: 15,
+ skipForwardSeconds: 30,
+ labels,
+ ...props,
+ },
+ })
+}
+
+describe('MediaTransport', () => {
+ it('shows play, pause, and pending states on the main button', () => {
+ const idle = mountTransport()
+ expect(idle.find('.lucide-play').exists()).toBe(true)
+ expect(idle.find('[aria-label="Play"]').exists()).toBe(true)
+
+ const playing = mountTransport({ playing: true })
+ expect(playing.find('.lucide-pause').exists()).toBe(true)
+ expect(playing.find('[aria-label="Pause"]').exists()).toBe(true)
+
+ const pending = mountTransport({ playing: true, pending: true })
+ expect(pending.find('.lucide-loader-circle').exists()).toBe(true)
+ expect(pending.find('.lucide-pause').exists()).toBe(false)
+ expect(pending.find('.lucide-play').exists()).toBe(false)
+ })
+
+ it('keeps the main button operable while pending so a stalled stream can still be paused', async () => {
+ const wrapper = mountTransport({ playing: true, pending: true })
+
+ await wrapper.get('[aria-label="Pause"]').trigger('click')
+
+ expect(wrapper.emitted('toggle')).toHaveLength(1)
+ })
+
+ it('disables queue navigation with nothing to navigate to', () => {
+ const wrapper = mountTransport({ hasPrevious: false, hasNext: false })
+
+ expect(wrapper.get('[aria-label="Previous episode"]').attributes('disabled')).toBeDefined()
+ expect(wrapper.get('[aria-label="Next episode"]').attributes('disabled')).toBeDefined()
+ })
+
+ it('emits one event per control', async () => {
+ const wrapper = mountTransport()
+
+ await wrapper.get('[aria-label="Previous episode"]').trigger('click')
+ await wrapper.get('[aria-label="Back 15 seconds"]').trigger('click')
+ await wrapper.get('[aria-label="Play"]').trigger('click')
+ await wrapper.get('[aria-label="Forward 30 seconds"]').trigger('click')
+ await wrapper.get('[aria-label="Next episode"]').trigger('click')
+
+ expect(wrapper.emitted('previous')).toHaveLength(1)
+ expect(wrapper.emitted('skipBack')).toHaveLength(1)
+ expect(wrapper.emitted('toggle')).toHaveLength(1)
+ expect(wrapper.emitted('skipForward')).toHaveLength(1)
+ expect(wrapper.emitted('next')).toHaveLength(1)
+ })
+
+ it('badges the skip buttons with their own interval', () => {
+ const wrapper = mountTransport({ skipBackSeconds: 10, skipForwardSeconds: 45 })
+
+ expect(wrapper.get('[aria-label="Back 15 seconds"]').text()).toBe('10')
+ expect(wrapper.get('[aria-label="Forward 30 seconds"]').text()).toBe('45')
+ })
+
+ it('grows the main button for the full-player size', () => {
+ expect(mountTransport({ size: 'md' }).get('[aria-label="Play"]').classes()).toContain('size-10')
+ expect(mountTransport({ size: 'lg' }).get('[aria-label="Play"]').classes()).toContain('size-16')
+ })
+
+ it('rings the main button only when the caller opts in and playback is running', () => {
+ expect(mountTransport({ playing: true }).find('[data-testid="media-transport-pulse"]').exists()).toBe(false)
+ expect(mountTransport({ playing: false, pulse: true }).find('[data-testid="media-transport-pulse"]').exists()).toBe(false)
+ expect(mountTransport({ playing: true, pulse: true }).find('[data-testid="media-transport-pulse"]').exists()).toBe(true)
+ })
+})
diff --git a/client/src/components/media/__tests__/MediaVolumeControl.spec.ts b/client/src/components/media/__tests__/MediaVolumeControl.spec.ts
new file mode 100644
index 000000000..2ac4ac0b4
--- /dev/null
+++ b/client/src/components/media/__tests__/MediaVolumeControl.spec.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MediaScrubber from '../MediaScrubber.vue'
+import MediaVolumeControl from '../MediaVolumeControl.vue'
+
+const popoverStubs = {
+ Popover: { template: '
' },
+ PopoverTrigger: { template: '
' },
+ PopoverContent: { template: '
' },
+}
+
+function mountControl(props: { volume: number; variant?: 'inline' | 'popover' }) {
+ return mount(MediaVolumeControl, { props, global: { stubs: popoverStubs } })
+}
+
+describe('MediaVolumeControl', () => {
+ it('cycles the speaker icon through silent, low, and high volume', () => {
+ expect(mountControl({ volume: 0 }).find('.lucide-volume-x').exists()).toBe(true)
+ expect(mountControl({ volume: 0.3 }).find('.lucide-volume-1').exists()).toBe(true)
+ expect(mountControl({ volume: 0.5 }).find('.lucide-volume-2').exists()).toBe(true)
+ })
+
+ it('labels the toggle by what the next click does', () => {
+ expect(mountControl({ volume: 0.8 }).get('button').attributes('aria-label')).toBe('Mute')
+
+ const muted = mountControl({ volume: 0 })
+ expect(muted.get('button').attributes('aria-label')).toBe('Unmute')
+ expect(muted.get('button').attributes('aria-pressed')).toBe('true')
+ })
+
+ it('leaves the mute decision to the caller', async () => {
+ const wrapper = mountControl({ volume: 0.8 })
+
+ await wrapper.get('button').trigger('click')
+
+ expect(wrapper.emitted('toggleMute')).toHaveLength(1)
+ expect(wrapper.emitted('update:volume')).toBeUndefined()
+ })
+
+ it('reports slider movement as a volume update', async () => {
+ const wrapper = mountControl({ volume: 0.8 })
+
+ wrapper.getComponent(MediaScrubber).vm.$emit('seek', 0.25)
+
+ expect(wrapper.emitted('update:volume')).toEqual([[0.25]])
+ })
+
+ it('drives the slider live so the level follows the drag', () => {
+ const scrubber = mountControl({ volume: 0.42 }).getComponent(MediaScrubber)
+
+ expect(scrubber.props('continuous')).toBe(true)
+ expect(scrubber.props('duration')).toBe(1)
+ expect(scrubber.props('current')).toBe(0.42)
+ expect(scrubber.props('ariaValueText')).toBe('42%')
+ })
+
+ it('renders the inline variant as one row with a percent readout', () => {
+ const wrapper = mountControl({ volume: 0.42, variant: 'inline' })
+
+ expect(wrapper.findAll('button')).toHaveLength(1)
+ expect(wrapper.text()).toContain('42%')
+ })
+
+ it('renders the popover variant behind an icon-only trigger', () => {
+ const wrapper = mountControl({ volume: 0.42, variant: 'popover' })
+
+ const buttons = wrapper.findAll('button')
+ expect(buttons).toHaveLength(2)
+ expect(buttons[0]!.attributes('aria-label')).toBe('Volume')
+ expect(buttons[0]!.text()).toBe('')
+ expect(buttons[1]!.attributes('aria-label')).toBe('Mute')
+ expect(wrapper.findComponent(MediaScrubber).exists()).toBe(true)
+ })
+})
diff --git a/client/src/components/media/types.ts b/client/src/components/media/types.ts
new file mode 100644
index 000000000..d0254d4ab
--- /dev/null
+++ b/client/src/components/media/types.ts
@@ -0,0 +1,25 @@
+export interface MediaBufferedRange {
+ start: number
+ end: number
+}
+
+export interface MediaScrubberMarker {
+ position: number
+ kind: 'chapter' | 'bookmark'
+ label?: string
+ active?: boolean
+}
+
+export interface MediaScrubberTooltip {
+ primary: string
+ secondary?: string
+}
+
+export interface MediaTransportLabels {
+ play: string
+ pause: string
+ previous: string
+ next: string
+ back: string
+ forward: string
+}
diff --git a/client/src/components/sidebar/SidebarEntitySection.vue b/client/src/components/sidebar/SidebarEntitySection.vue
index cd2d7e357..1764f7e61 100644
--- a/client/src/components/sidebar/SidebarEntitySection.vue
+++ b/client/src/components/sidebar/SidebarEntitySection.vue
@@ -10,6 +10,7 @@ import SidebarSectionHeader from '@/components/sidebar/SidebarSectionHeader.vue'
import SidebarSectionBody from '@/components/sidebar/SidebarSectionBody.vue'
import SidebarBadge from '@/components/sidebar/SidebarBadge.vue'
import { formatCompactNumber, formatNumber } from '@/i18n/formatters'
+import { entityCount } from '@/lib/entity-count'
import { useDraggableOrder } from '@/composables/useDraggableOrder'
import { useSidebarPrefs } from '@/composables/useSidebarPrefs'
@@ -19,6 +20,11 @@ export interface SidebarEntity {
name: string
icon?: string | null
bookCount?: number | null
+ podcastCount?: number | null
+ episodeCount?: number | null
+ /** Libraries discriminate on `type`; scopes and collections on `mediaType`. */
+ type?: string
+ mediaType?: 'books' | 'podcasts'
}
const props = withDefaults(
@@ -27,7 +33,8 @@ const props = withDefaults(
label: string
items: SidebarEntity[]
routeName: string
- indexRouteName: string
+ /** Omit when the section has no index page; the see-all link is then suppressed. */
+ indexRouteName?: string
activeId: number | null
fallbackIcon: string
emptyText: string
@@ -42,7 +49,15 @@ const props = withDefaults(
/** Rail popovers render the body regardless of the stored open state. */
alwaysOpen?: boolean
}>(),
- { canAdd: false, canReorder: false, addLabel: undefined, persistOrder: undefined, tourId: undefined, alwaysOpen: false },
+ {
+ indexRouteName: undefined,
+ canAdd: false,
+ canReorder: false,
+ addLabel: undefined,
+ persistOrder: undefined,
+ tourId: undefined,
+ alwaysOpen: false,
+ },
)
const emit = defineEmits<{ add: []; navigate: [] }>()
@@ -88,7 +103,7 @@ const matchedItems = computed(() => {
const visibleItems = computed(() => (Number.isFinite(capValue.value) ? matchedItems.value.slice(0, capValue.value) : matchedItems.value))
-const showSeeAll = computed(() => total.value > capValue.value)
+const showSeeAll = computed(() => Boolean(props.indexRouteName) && total.value > capValue.value)
/** Reordering is an explicit mode entered from the section menu. Grips are a rare action,
* so they stay out of the way until the user asks for them. */
@@ -145,12 +160,8 @@ function handleFilterKeydown(event: KeyboardEvent) {
}
}
-function itemRoute(id: number) {
- return { name: props.routeName, params: { id } }
-}
-
-function itemCount(item: SidebarEntity): number | null {
- return typeof item.bookCount === 'number' ? item.bookCount : null
+function itemRoute(item: SidebarEntity) {
+ return { name: props.routeName, params: { id: item.id } }
}
function gripLabel(item: SidebarEntity): string {
@@ -228,7 +239,7 @@ function onGripBlur(id: number) {
:key="item.id"
:is-active="activeId === item.id"
:tooltip="item.name"
- :to="itemRoute(item.id)"
+ :to="itemRoute(item)"
:icon="item.icon || fallbackIcon"
:fallback-icon="fallbackIcon"
:label="item.name"
@@ -236,7 +247,7 @@ function onGripBlur(id: number) {
>
- {{ formatCompactNumber(itemCount(item) ?? 0) }}
+ {{ formatCompactNumber(entityCount(item) ?? 0) }}
@@ -265,7 +276,7 @@ function onGripBlur(id: number) {