+
),
diff --git a/inertia/components/library/media-image.test.tsx b/inertia/components/library/media-image.test.tsx
index 3fd88cb..29077fe 100644
--- a/inertia/components/library/media-image.test.tsx
+++ b/inertia/components/library/media-image.test.tsx
@@ -49,9 +49,7 @@ describe('MediaImage', () => {
})
it('applies custom iconClassName to fallback', () => {
- render(
-
- )
+ render(
)
const icon = screen.getByTestId('fallback-icon')
expect(icon).toHaveClass('h-24', 'w-24')
})
diff --git a/inertia/components/library/media-status-badge.test.tsx b/inertia/components/library/media-status-badge.test.tsx
index 9a97f97..6f5c139 100644
--- a/inertia/components/library/media-status-badge.test.tsx
+++ b/inertia/components/library/media-status-badge.test.tsx
@@ -13,20 +13,14 @@ describe('getMediaItemStatus', () => {
})
it('returns downloaded even with active download', () => {
- const result = getMediaItemStatus(
- { hasFile: true },
- { progress: 50, status: 'downloading' }
- )
+ const result = getMediaItemStatus({ hasFile: true }, { progress: 50, status: 'downloading' })
expect(result).toEqual({ status: 'downloaded', progress: 100 })
})
})
describe('downloading status', () => {
it('returns downloading with progress when active download exists', () => {
- const result = getMediaItemStatus(
- { hasFile: false },
- { progress: 45, status: 'downloading' }
- )
+ const result = getMediaItemStatus({ hasFile: false }, { progress: 45, status: 'downloading' })
expect(result).toEqual({ status: 'downloading', progress: 45 })
})
@@ -43,10 +37,7 @@ describe('getMediaItemStatus', () => {
describe('importing status', () => {
it('returns importing when active download has importing status', () => {
- const result = getMediaItemStatus(
- { hasFile: false },
- { progress: 100, status: 'importing' }
- )
+ const result = getMediaItemStatus({ hasFile: false }, { progress: 100, status: 'importing' })
expect(result).toEqual({ status: 'importing', progress: 100 })
})
@@ -113,10 +104,7 @@ describe('getMediaItemStatus', () => {
})
it('importing download takes priority over requested', () => {
- const result = getMediaItemStatus(
- { requested: true },
- { progress: 100, status: 'importing' }
- )
+ const result = getMediaItemStatus({ requested: true }, { progress: 100, status: 'importing' })
expect(result.status).toBe('importing')
})
})
diff --git a/inertia/components/library/media-teaser.stories.tsx b/inertia/components/library/media-teaser.stories.tsx
index 141ab52..303fb1a 100644
--- a/inertia/components/library/media-teaser.stories.tsx
+++ b/inertia/components/library/media-teaser.stories.tsx
@@ -232,8 +232,16 @@ export const WithStreamingProviders: Story = {
mediaType: 'movie',
status: 'downloaded',
streamingProviders: [
- { id: 8, name: 'Netflix', logoUrl: 'https://image.tmdb.org/t/p/original/pbpMk2JmcoNnQwx5JGpXngfoWtp.jpg' },
- { id: 337, name: 'Disney+', logoUrl: 'https://image.tmdb.org/t/p/original/7rwgEs15tFwyR9NPQ5vpzxTj19Q.jpg' },
+ {
+ id: 8,
+ name: 'Netflix',
+ logoUrl: 'https://image.tmdb.org/t/p/original/pbpMk2JmcoNnQwx5JGpXngfoWtp.jpg',
+ },
+ {
+ id: 337,
+ name: 'Disney+',
+ logoUrl: 'https://image.tmdb.org/t/p/original/7rwgEs15tFwyR9NPQ5vpzxTj19Q.jpg',
+ },
],
},
}
@@ -249,11 +257,31 @@ export const ManyStreamingProviders: Story = {
mediaType: 'movie',
status: 'none',
streamingProviders: [
- { id: 8, name: 'Netflix', logoUrl: 'https://image.tmdb.org/t/p/original/pbpMk2JmcoNnQwx5JGpXngfoWtp.jpg' },
- { id: 337, name: 'Disney+', logoUrl: 'https://image.tmdb.org/t/p/original/7rwgEs15tFwyR9NPQ5vpzxTj19Q.jpg' },
- { id: 9, name: 'Prime Video', logoUrl: 'https://image.tmdb.org/t/p/original/emthp39XA2YScoYL1p0sdbAH2WA.jpg' },
- { id: 350, name: 'Apple TV+', logoUrl: 'https://image.tmdb.org/t/p/original/6uhKBfmtzFqOcLousHwZuzcrScK.jpg' },
- { id: 531, name: 'Paramount+', logoUrl: 'https://image.tmdb.org/t/p/original/xbhHHa1YgtpwhC8lb1NQ3ACVcLd.jpg' },
+ {
+ id: 8,
+ name: 'Netflix',
+ logoUrl: 'https://image.tmdb.org/t/p/original/pbpMk2JmcoNnQwx5JGpXngfoWtp.jpg',
+ },
+ {
+ id: 337,
+ name: 'Disney+',
+ logoUrl: 'https://image.tmdb.org/t/p/original/7rwgEs15tFwyR9NPQ5vpzxTj19Q.jpg',
+ },
+ {
+ id: 9,
+ name: 'Prime Video',
+ logoUrl: 'https://image.tmdb.org/t/p/original/emthp39XA2YScoYL1p0sdbAH2WA.jpg',
+ },
+ {
+ id: 350,
+ name: 'Apple TV+',
+ logoUrl: 'https://image.tmdb.org/t/p/original/6uhKBfmtzFqOcLousHwZuzcrScK.jpg',
+ },
+ {
+ id: 531,
+ name: 'Paramount+',
+ logoUrl: 'https://image.tmdb.org/t/p/original/xbhHHa1YgtpwhC8lb1NQ3ACVcLd.jpg',
+ },
],
},
}
@@ -397,7 +425,9 @@ export const StreamingLoaderBadge: StoryObj = {
render: () => (
<>
-
← Matrix loading badge at actual size (20×20)
+
+ ← Matrix loading badge at actual size (20×20)
+
),
}
diff --git a/inertia/components/library/media-teaser.tsx b/inertia/components/library/media-teaser.tsx
index 2f0efe9..1266fa9 100644
--- a/inertia/components/library/media-teaser.tsx
+++ b/inertia/components/library/media-teaser.tsx
@@ -102,7 +102,9 @@ export function MediaTeaser({
const wasVisibleRef = useRef(false)
const loadingRef = useRef(false)
const debounceRef = useRef
| null>(null)
- const [transition, setTransition] = useState<'pending' | 'loading' | 'fading-out' | 'fading-in' | 'idle'>('idle')
+ const [transition, setTransition] = useState<
+ 'pending' | 'loading' | 'fading-out' | 'fading-in' | 'idle'
+ >('idle')
useEffect(() => {
if (isLoadingProviders) {
@@ -114,7 +116,9 @@ export function MediaTeaser({
wasVisibleRef.current = true
setTransition('loading')
}, 400)
- return () => { if (debounceRef.current) clearTimeout(debounceRef.current) }
+ return () => {
+ if (debounceRef.current) clearTimeout(debounceRef.current)
+ }
}
if (!loadingRef.current) return
@@ -138,7 +142,10 @@ export function MediaTeaser({
const t2 = setTimeout(() => {
setTransition('idle')
}, 500)
- return () => { clearTimeout(t1); clearTimeout(t2) }
+ return () => {
+ clearTimeout(t1)
+ clearTimeout(t2)
+ }
}
// Loader was never shown (fast fetch) — go straight to fade-in or idle
@@ -153,14 +160,10 @@ export function MediaTeaser({
const IconComponent = mediaType === 'movie' ? Film01Icon : Tv01Icon
- const widthClass =
- size === 'lane' ? 'w-[150px]' : size === 'small' ? 'w-32' : ''
- const iconSize =
- size === 'small' ? 'h-8 w-8' : 'h-12 w-12'
- const titleSize =
- size === 'small' ? 'text-xs' : 'text-sm'
- const yearSize =
- size === 'small' ? 'text-[10px]' : 'text-xs'
+ const widthClass = size === 'lane' ? 'w-[150px]' : size === 'small' ? 'w-32' : ''
+ const iconSize = size === 'small' ? 'h-8 w-8' : 'h-12 w-12'
+ const titleSize = size === 'small' ? 'text-xs' : 'text-sm'
+ const yearSize = size === 'small' ? 'text-[10px]' : 'text-xs'
const maxProviders = 3
const visibleProviders = streamingProviders?.slice(0, maxProviders) ?? []
@@ -200,10 +203,7 @@ export function MediaTeaser({
{/* Hover gradient */}
{/* Status badge */}
- e.stopPropagation()}
- >
+
e.stopPropagation()}>
({
}))
vi.mock('@/hooks/use_visible_watch_providers', () => ({
- useVisibleWatchProviders: () => ({ providers: {}, loadingIds: new Set(), observerRef: () => () => {} }),
+ useVisibleWatchProviders: () => ({
+ providers: {},
+ loadingIds: new Set(),
+ observerRef: () => () => {},
+ }),
}))
vi.mock('@/components/ui/skeleton', () => ({
@@ -103,9 +107,7 @@ describe('SimilarLane', () => {
})
it('renders nothing when tmdbId is null', () => {
- const { container } = render(
-
- )
+ const { container } = render()
expect(container.innerHTML).toBe('')
})
@@ -121,9 +123,7 @@ describe('SimilarLane', () => {
it('renders nothing when fetch returns empty results', async () => {
mockFetchSuccess({ results: [] })
- const { container } = render(
-
- )
+ const { container } = render()
await waitFor(() => {
expect(container.querySelector('[data-testid="skeleton"]')).not.toBeInTheDocument()
@@ -134,9 +134,7 @@ describe('SimilarLane', () => {
it('renders nothing when fetch fails', async () => {
mockFetchFailure()
- const { container } = render(
-
- )
+ const { container } = render()
await waitFor(() => {
expect(container.querySelector('[data-testid="skeleton"]')).not.toBeInTheDocument()
diff --git a/inertia/components/library/similar-lane.tsx b/inertia/components/library/similar-lane.tsx
index 8aee26c..1fa613a 100644
--- a/inertia/components/library/similar-lane.tsx
+++ b/inertia/components/library/similar-lane.tsx
@@ -29,7 +29,11 @@ export function SimilarLane({ mediaType, mediaId, tmdbId }: SimilarLaneProps) {
const [loading, setLoading] = useState(true)
const { openMoviePreview, openTvShowPreview } = useMediaPreview()
- const { providers: watchProviders, loadingIds: watchProviderLoading, observerRef: watchProviderRef } = useVisibleWatchProviders(mediaType === 'movies' ? 'movie' : 'tv')
+ const {
+ providers: watchProviders,
+ loadingIds: watchProviderLoading,
+ observerRef: watchProviderRef,
+ } = useVisibleWatchProviders(mediaType === 'movies' ? 'movie' : 'tv')
useEffect(() => {
if (!tmdbId) {
diff --git a/inertia/components/media-gallery.tsx b/inertia/components/media-gallery.tsx
index 2cbf39f..8c6f5ae 100644
--- a/inertia/components/media-gallery.tsx
+++ b/inertia/components/media-gallery.tsx
@@ -15,7 +15,13 @@ function extractYouTubeKey(embedUrl: string): string | null {
return match ? match[1] : null
}
-export function MediaGallery({ trailerUrl, images, title, className, children }: MediaGalleryProps) {
+export function MediaGallery({
+ trailerUrl,
+ images,
+ title,
+ className,
+ children,
+}: MediaGalleryProps) {
const [playingTrailer, setPlayingTrailer] = useState(false)
const [activeIndex, setActiveIndex] = useState(0)
const scrollRef = useRef(null)
@@ -68,9 +74,10 @@ export function MediaGallery({ trailerUrl, images, title, className, children }:
}
const goToSlide = (direction: 'prev' | 'next') => {
- const next = direction === 'next'
- ? (activeIndex + 1) % totalSlides
- : (activeIndex - 1 + totalSlides) % totalSlides
+ const next =
+ direction === 'next'
+ ? (activeIndex + 1) % totalSlides
+ : (activeIndex - 1 + totalSlides) % totalSlides
scrollToSlide(next)
}
@@ -78,7 +85,12 @@ export function MediaGallery({ trailerUrl, images, title, className, children }:
const onMouseDown = (e: MouseEvent) => {
const el = scrollRef.current
if (!el) return
- dragState.current = { isDown: true, startX: e.pageX - el.offsetLeft, scrollLeft: el.scrollLeft, dragged: false }
+ dragState.current = {
+ isDown: true,
+ startX: e.pageX - el.offsetLeft,
+ scrollLeft: el.scrollLeft,
+ dragged: false,
+ }
el.style.cursor = 'grabbing'
el.style.scrollSnapType = 'none'
}
diff --git a/inertia/components/media-hero.tsx b/inertia/components/media-hero.tsx
index 5fdb13c..654020e 100644
--- a/inertia/components/media-hero.tsx
+++ b/inertia/components/media-hero.tsx
@@ -38,20 +38,14 @@ export function MediaHero({
{children}
{overview}
- )}
+ {overview && {overview}
}