fix(watch): bypass optimizer for local thumbnails#9242
Open
lumberman wants to merge 2 commits into
Open
Conversation
Contributor
WalkthroughVideoCard component now detects local thumbnail URLs and disables Next.js image optimization for them via the ChangesLocal Thumbnail Unoptimization
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit a4926b0
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit e9bc49e
☁️ Nx Cloud last updated this comment at |
Contributor
|
The latest updates on your projects.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/watch/setupTests.tsx (1)
13-19: ⚡ Quick winType the mocked
next/imageprops explicitly.Line 13 introduces untyped destructured props (
src,alt,unoptimized), which weakens test type-safety.Proposed fix
import '`@testing-library/jest-dom`' import 'isomorphic-fetch' import { configure } from '`@testing-library/react`' +import type { ImageProps } from 'next/image' import { server } from './test/mswServer' import './test/i18n' @@ jest.mock('next/image', () => ({ __esModule: true, // eslint-disable-next-line `@next/next/no-img-element` - default: ({ src, alt, unoptimized }) => ( + default: ({ src, alt, unoptimized }: ImageProps) => ( <img - src={src} + src={typeof src === 'string' ? src : src.src} alt={alt} data-unoptimized={unoptimized === true ? 'true' : undefined} /> ) }))As per coding guidelines, “All components and functions must be fully typed with TypeScript.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/watch/setupTests.tsx` around lines 13 - 19, The default mock for next/image currently uses untyped destructured props; add an explicit TypeScript type for the parameter of the default arrow function (e.g., replace "({ src, alt, unoptimized }) =>" with a typed signature like "(props: { src: string; alt?: string; unoptimized?: boolean }) =>" or declare an interface (e.g., ImageProps) and use it, then destructure props inside the function; this ensures the mocked component (the default arrow function) has fully typed props and preserves optionality for alt and unoptimized.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/watch/setupTests.tsx`:
- Around line 13-19: The default mock for next/image currently uses untyped
destructured props; add an explicit TypeScript type for the parameter of the
default arrow function (e.g., replace "({ src, alt, unoptimized }) =>" with a
typed signature like "(props: { src: string; alt?: string; unoptimized?: boolean
}) =>" or declare an interface (e.g., ImageProps) and use it, then destructure
props inside the function; this ensures the mocked component (the default arrow
function) has fully typed props and preserves optionality for alt and
unoptimized.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 8dfdbf09-d41f-45dd-92f3-aaafbd59b2ce
📒 Files selected for processing (3)
apps/watch/setupTests.tsxapps/watch/src/components/VideoCard/VideoCard.spec.tsxapps/watch/src/components/VideoCard/VideoCard.tsx
tataihono
approved these changes
May 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Experimental watch cards can now load local thumbnail override files directly instead of sending cache-busted
/watch/images/thumbnails/...URLs through Next image optimization. Remote thumbnail URLs still use the optimized image path.The change keeps the existing
/watch/api/thumbnailresponse shape intact, including the?v=cache buster, and scopes the optimizer bypass to local thumbnail override paths only.Testing
pnpm exec jest --config apps/watch/jest.config.ts apps/watch/src/components/VideoCard/VideoCard.spec.tsx --runInBand --coverage=falseNEXT_PUBLIC_ALGOLIA_APP_ID/ Algolia API key).Summary by CodeRabbit