Conversation
- Added `next-video` version 2.5.0 to `package.json` and updated the development command to include video synchronization. - Configured TypeScript to recognize video types by adding `video.d.ts`. - Updated `.gitignore` to manage video files while allowing specific formats. - Created a sample video metadata file for `get-started.mp4` to facilitate video handling. This commit enhances the project's video capabilities and ensures proper type support for video-related features.
- Updated import path for RootProvider to use the next version. - Integrated `next-video` for background video playback, replacing the previous video element. - Added support for a demo video file and adjusted dimensions for the video and fallback image. This commit enhances the video playback experience and ensures proper integration with the latest video handling libraries.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@yamcodes has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 0 minutes and 0 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughIntegrates next-video: replaces native video with BackgroundVideo, adds next-video build/dev tooling and types, provides a Mux-backed demo video descriptor, updates tests/mocks and Playwright checks to handle HLS behaviors and fallback image flows, and adds test setup utilities. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VideoDemo
participant BackgroundVideo
participant Mux
participant Fallback
rect #dbeef7
Note over VideoDemo,BackgroundVideo: New flow using next-video + Mux
User->>VideoDemo: mount
VideoDemo->>BackgroundVideo: mount with demo metadata & onError
BackgroundVideo->>Mux: request HLS via playbackId
alt success
Mux-->>BackgroundVideo: playlist & segments
BackgroundVideo-->>User: play (autoplay, loop, muted)
else failure
Mux-->>BackgroundVideo: error
BackgroundVideo->>VideoDemo: onError
VideoDemo->>Fallback: render fallback image (/assets/demo.gif)
Fallback-->>User: show image
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
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 |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
apps/www/components/page/video-demo.tsx (1)
8-9: Consider passing HEIGHT to BackgroundVideo for consistency.The HEIGHT constant is defined but only used for the Image fallback, not for BackgroundVideo. This asymmetry could potentially cause layout shifts or aspect ratio issues during the transition from video to fallback image.
Apply this diff to pass height to BackgroundVideo:
) : ( <BackgroundVideo src={demo} width={WIDTH} + height={HEIGHT} onError={handleVideoError} /> )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
apps/www/.gitignore(1 hunks)apps/www/app/layout.tsx(1 hunks)apps/www/components/page/video-demo.tsx(2 hunks)apps/www/next.config.ts(2 hunks)apps/www/package.json(2 hunks)apps/www/tsconfig.json(1 hunks)apps/www/video.d.ts(1 hunks)apps/www/videos/demo.mp4.json(1 hunks)apps/www/videos/get-started.mp4.json(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Place tests alongside source files and use the .test.ts suffix (e.g., create-env.test.ts, types.test.ts, errors.test.ts, utils.test.ts)
Applied to files:
apps/www/tsconfig.jsonapps/www/.gitignore
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Mock process.env to cover different environment scenarios in tests
Applied to files:
apps/www/.gitignore
🧬 Code graph analysis (2)
apps/www/components/page/video-demo.tsx (1)
apps/www/components/page/video-demo.test.tsx (9)
render(244-261)render(56-63)render(152-163)render(25-42)render(217-242)render(188-198)render(175-186)render(165-173)render(65-84)
apps/www/videos/demo.mp4.json (1)
apps/www/components/page/video-demo.test.tsx (6)
render(175-186)render(56-63)render(44-54)render(25-42)render(165-173)render(152-163)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test-e2e
- GitHub Check: Cursor Bugbot
🔇 Additional comments (5)
apps/www/next.config.ts (1)
60-62: LGTM!The
withNextVideowrapper is correctly applied to the config chain, maintaining the existing Sentry and MDX wrappers.apps/www/videos/demo.mp4.json (2)
14-14: The Mux video asset is accessible and functional; update metadata size field.The Mux video is successfully uploaded and playable—both the HLS stream and thumbnail return HTTP 200 responses. However, the
sizefield showing0indicates the metadata file wasn't properly regenerated after upload. Update the metadata to reflect the actual video size for consistency, though this doesn't prevent the video from working.
1-23: No action needed—component changes are properly included in this PR.The component file
apps/www/components/page/video-demo.tsxis present and correctly implements all requirements:
- ✅ Uses
BackgroundVideofrom next-video/background-video (line 4)- ✅ Imports and references the video metadata via
import demo from "~/videos/demo.mp4"(line 6)- ✅ Properly passes the source to the component with error handling (lines 45-48)
The PR includes the complete implementation.
apps/www/app/layout.tsx (1)
5-5: This import change is necessary for fumadocs-ui v16 with Next.js — no action needed.The
/provider/nextimport path is required for Next.js-specific usage with fumadocs-ui v16, replacing the older paths from previous versions. This is a legitimate dependency update, not scope creep.apps/www/components/page/video-demo.tsx (1)
3-6: LGTM! Clean migration to next-video library.The imports correctly set up the next-video integration with BackgroundVideo and local asset reference. The demo.mp4 import will be resolved to Mux via the accompanying .json metadata file, successfully addressing the Vercel Blob Storage issue.
- Mocked fetch behavior to prevent URL fetch errors during tests. - Added mocks for Next.js Image component and next-video/background-video to ensure proper rendering and error handling in tests. - Introduced a ResizeObserver mock and matchMedia mock to support responsive video testing. These changes improve the reliability of tests related to video components and ensure they function correctly without external dependencies.
github-actions
bot
added
the
tests
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
- Updated `vitest` version in `pnpm-lock.yaml` to include `postcss@8.5.6` as a dependency for `jsdom`. - Added `concurrently` version `9.2.1` to `package.json` to facilitate running multiple commands concurrently in the development script. - Modified the `dev` script in `package.json` to use `conc` for improved command execution. These changes enhance the development experience and ensure compatibility with the latest dependencies.
- Deleted the JSON metadata file for the `get-started.mp4` video, which included details such as status, provider metadata, and playback information. This cleanup helps streamline the project by removing unused files.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
- Added `afterEach` to restore the original fetch implementation after tests to prevent test leakage. - Updated mock implementations for Next.js Image and next-video/background-video components to ensure proper type handling and prevent fetch errors. - Changed attribute checks for video elements to use lowercase for HTML compliance. - Simplified video source validation in tests to ensure a valid source is rendered. These changes enhance the robustness of the video demo tests and ensure they function correctly without external dependencies.
- Modified the mock implementation for `next-video/background-video` to include a `poster` prop and support forwarding additional props. - Simplified the video source determination logic to handle both string URLs and asset objects. - Ensured that the mock reflects the actual behavior of the video component, improving test reliability. These changes improve the accuracy of the video demo tests and ensure they align with the expected component behavior.
- Adjusted the width to 800 and height to 653 for the BackgroundVideo component to improve layout and responsiveness. - Removed outdated styling class to streamline the component's appearance.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
- Improved accessibility checks by filtering out decorative images without alt attributes in the accessibility tests. - Updated homepage video tests to verify the presence of either a video or a fallback image, ensuring proper attribute checks and visibility. - Expanded console error assertions to include additional error types for better error handling during tests. These changes enhance the robustness of accessibility and video component tests, ensuring compliance with best practices.
- Changed the expected width attribute for video and image elements from 958 to 800 in the VideoDemo component tests. - This adjustment aligns with recent updates to the VideoDemo component, ensuring that tests accurately reflect the current design specifications.
…n navigation, examples, homepage, integrations, morphs, quickstart, and search functionality - Deleted multiple test files that were no longer needed, streamlining the test suite and reducing maintenance overhead. - This cleanup helps focus on relevant tests and improves overall project organization.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
apps/www/components/page/video-demo.tsx (2)
8-9: Critical: Width mismatch will cause test failures.The component defines
WIDTH = 800, but the test suite expectswidth="958"in multiple assertions:
- Line 118:
expect(video).toHaveAttribute("width", "958")- Line 244:
expect(video).toHaveAttribute("width", "958")- Line 306:
expect(img).toHaveAttribute("width", "958")This mismatch will cause test failures.
Apply this diff to match test expectations:
-const WIDTH = 800; -const HEIGHT = 653; +const WIDTH = 958; +const HEIGHT = 600;Or update all test assertions to expect the new dimensions.
42-48: Critical: Missing required video attributes and styling.The
BackgroundVideocomponent is missing several props that the test suite expects:
- Video playback attributes:
autoPlay,loop,muted,playsInline- Styling:
className="block max-h-[600px] sm:max-h-[1000px] object-contain"Tests explicitly check for these attributes (lines 114-117, 120-125, 251-254), so their absence will cause failures. According to the next-video documentation,
BackgroundVideoaccepts all native<video>props.Apply this diff to add the missing props:
<BackgroundVideo src={demo} width={WIDTH} height={HEIGHT} poster="/assets/demo.png" + autoPlay + loop + muted + playsInline + className="block max-h-[600px] sm:max-h-[1000px] object-contain" onError={handleVideoError} />
🧹 Nitpick comments (1)
tooling/playwright-www/tests/accessibility.spec.ts (1)
221-249: Consider improving the decorative image detection logic.The ancestor traversal logic has a few areas for improvement:
Inconsistent text handling: Line 232 uses
textContent?.trim()but line 238 checkstextContent.length > 0on the untrimmed value, which could incorrectly flag whitespace-only content as meaningful text.Missing
aria-hiddencheck: Images witharia-hidden="true"on themselves or ancestors are explicitly decorative and should be filtered out.Hardcoded depth limit: The 5-level depth limit might miss decorative images nested deeper in the component tree.
Consider this refactor:
const isDecorative = await img.evaluate((element) => { + // Check if image itself is aria-hidden + if (element.getAttribute("aria-hidden") === "true") { + return true; + } + let current = element.parentElement; let depth = 0; // Check up to 5 levels of ancestors while (current && depth < 5) { const tagName = current.tagName.toLowerCase(); const isInteractive = tagName === "button" || tagName === "a"; const role = current.getAttribute("role"); const ariaLabel = current.getAttribute("aria-label"); const ariaLabelledBy = current.getAttribute("aria-labelledby"); + const ariaHidden = current.getAttribute("aria-hidden"); - const textContent = current.textContent?.trim() || ""; + const textContent = (current.textContent || "").trim(); - // If ancestor has aria-label, aria-labelledby, or is interactive with text + // If ancestor is hidden or has proper labeling if ( + ariaHidden === "true" || ariaLabel || ariaLabelledBy || (isInteractive && textContent.length > 0) || role === "button" ) { return true; // Image is decorative } current = current.parentElement; depth++; } return false; // Image is not decorative });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
apps/www/components/page/video-demo.test.tsx(7 hunks)apps/www/components/page/video-demo.tsx(2 hunks)apps/www/package.json(2 hunks)tooling/playwright-www/tests/accessibility.spec.ts(1 hunks)tooling/playwright-www/tests/homepage.spec.ts(1 hunks)tooling/playwright-www/tests/utils/console-errors.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/www/package.json
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Verify both runtime behavior and TypeScript types in tests
Applied to files:
tooling/playwright-www/tests/homepage.spec.tsapps/www/components/page/video-demo.test.tsx
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Test both success and failure cases for environment validation and utilities
Applied to files:
tooling/playwright-www/tests/homepage.spec.ts
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Mock process.env to cover different environment scenarios in tests
Applied to files:
apps/www/components/page/video-demo.test.tsx
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : In tests, save and restore process.env in setup/teardown (beforeEach/afterEach) to avoid leakage between cases
Applied to files:
apps/www/components/page/video-demo.test.tsx
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Use Vitest's describe/it structure in tests
Applied to files:
apps/www/components/page/video-demo.test.tsx
🧬 Code graph analysis (2)
apps/www/components/page/video-demo.test.tsx (1)
apps/www/components/page/video-demo.tsx (1)
VideoDemo(11-53)
tooling/playwright-www/tests/utils/console-errors.ts (5)
tooling/playwright-www/tests/examples.spec.ts (1)
assertNoConsoleErrors(91-93)tooling/playwright-www/tests/hello-world.spec.ts (1)
assertNoConsoleErrors(34-36)apps/www/components/page/edit-on-github.test.tsx (1)
consoleError(173-195)tooling/playwright-www/tests/morphs.spec.ts (1)
assertNoConsoleErrors(146-148)tooling/playwright-www/tests/quickstart.spec.ts (1)
assertNoConsoleErrors(178-180)
🔇 Additional comments (5)
tooling/playwright-www/tests/homepage.spec.ts (1)
98-131: Well-structured test handling both video and fallback scenarios.The test correctly handles the dual rendering paths:
- Validates video attributes (autoplay, loop, muted, playsInline) when video is present
- Validates fallback image properties when video fails to load
- Includes optional poster check to avoid false failures
- Throws clear error when neither element is visible
The implementation aligns well with the component's error handling strategy.
apps/www/components/page/video-demo.test.tsx (4)
12-13: Excellent: Proper mock cleanup prevents test leakage.The fetch mock is now correctly stored, set up in
beforeEach, and restored inafterEach. This addresses the previous review concern and follows testing best practices to prevent state leakage between tests.Based on learnings
Also applies to: 86-98
41-80: Well-structured mock that accurately reflects BackgroundVideo behavior.The mock implementation:
- Correctly handles both string URLs and asset objects for
src- Forwards all props including
onError,width, andclassName- Uses appropriate fallbacks for
posterandclassName- Includes accessibility fallback text
- Properly removed the hardcoded Vercel Blob Storage URL from previous versions
This mock accurately represents the expected behavior of the
next-video/background-videocomponent.
114-114: Correct attribute naming for HTML elements.The changes from
autoPlay/playsInlinetoautoplay/playsinlineare correct. While React props use camelCase, the actual HTML attributes rendered in the DOM are lowercase. This aligns the tests with the actual rendered output.Also applies to: 117-117, 251-251, 254-254
296-298: Good defensive programming with element existence checks.Adding
if (video)guards before firing error events prevents potential test failures when the video element is unexpectedly absent. This makes the tests more robust and easier to debug.Also applies to: 322-324
- Introduced a new function to specifically identify HLS.js library errors, ensuring that only relevant errors are filtered out during console error assertions. - Updated the `assertNoConsoleErrors` function to skip both known non-critical errors and HLS.js-specific errors, improving the accuracy of error reporting in tests. - These changes enhance the robustness of the testing framework by preventing the suppression of legitimate media errors while still filtering out known issues.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
tooling/playwright-www/tests/accessibility.test.ts (3)
210-257: Improved alt text validation logic.The new approach correctly distinguishes decorative images from content images by examining ancestor context, which aligns better with WCAG guidelines. This is a significant improvement over the previous blanket requirement.
Minor note: The test name "should not have accessibility violations" is overly broad since it only validates image alt attributes. Consider renaming to something like "should have alt attributes on non-decorative images" for clarity.
221-249: Consider extracting decorative image detection logic.The ancestor traversal logic is well-implemented but could benefit from:
- Extraction into a reusable utility function (e.g.,
utils/is-decorative-image.ts) for potential reuse and unit testing.- Documentation explaining why the depth limit is set to 5 levels.
This would improve maintainability and make the test more readable.
228-240: Optional: Consider additional interactive roles.The logic currently checks for
role="button"but could be expanded to include other interactive roles such as"link","tab","menuitem", etc., where decorative images are commonly used. This would make the detection more comprehensive.apps/www/components/page/video-demo.test.tsx (2)
86-93: Defensive fetch mock is harmless but likely unnecessary.Since the
BackgroundVideocomponent is fully mocked (lines 41-80), it won't execute real next-video code that might make fetch calls. This fetch mock is likely unnecessary, but it's properly cleaned up inafterEachand serves as defensive coding against potential fetch calls from unmocked code paths.If you find the mock isn't needed in practice, consider removing it to simplify the test setup. However, there's no harm in keeping it as a safety measure.
114-119: Test assertions correctly updated for new mock behavior.The attribute checks are correctly updated:
- Width assertions now expect "800" (lines 118, 244, 306), resolving the past mismatch issue
- Boolean attributes use correct lowercase HTML names (
autoplay,playsinline) which properly match the JSX camelCase equivalents rendered to HTML- Null safety checks (lines 296-298) are good defensive coding
Consider adding assertions for the
heightattribute as well, since the component passesheight={HEIGHT}to BackgroundVideo. For consistency with width checks:expect(video).toHaveAttribute("height", "450"); // or whatever HEIGHT value isAlso applies to: 244-245, 296-306
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
apps/www/components/page/video-demo.test.tsx(7 hunks)tooling/playwright-www/tests/accessibility.test.ts(1 hunks)tooling/playwright-www/tests/homepage.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.test.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.test.ts: Place tests alongside source files and use the .test.ts suffix (e.g., create-env.test.ts, types.test.ts, errors.test.ts, utils.test.ts)
Use Vitest's describe/it structure in tests
Test both success and failure cases for environment validation and utilities
Mock process.env to cover different environment scenarios in tests
In tests, save and restore process.env in setup/teardown (beforeEach/afterEach) to avoid leakage between cases
Verify both runtime behavior and TypeScript types in tests
Files:
tooling/playwright-www/tests/homepage.test.tstooling/playwright-www/tests/accessibility.test.ts
🧠 Learnings (5)
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Mock process.env to cover different environment scenarios in tests
Applied to files:
apps/www/components/page/video-demo.test.tsx
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Verify both runtime behavior and TypeScript types in tests
Applied to files:
apps/www/components/page/video-demo.test.tsxtooling/playwright-www/tests/homepage.test.ts
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Test both success and failure cases for environment validation and utilities
Applied to files:
apps/www/components/page/video-demo.test.tsxtooling/playwright-www/tests/homepage.test.ts
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : In tests, save and restore process.env in setup/teardown (beforeEach/afterEach) to avoid leakage between cases
Applied to files:
apps/www/components/page/video-demo.test.tsx
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Use Vitest's describe/it structure in tests
Applied to files:
apps/www/components/page/video-demo.test.tsx
🧬 Code graph analysis (1)
apps/www/components/page/video-demo.test.tsx (1)
apps/www/components/page/video-demo.tsx (1)
VideoDemo(11-53)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test-e2e
- GitHub Check: Cursor Bugbot
🔇 Additional comments (5)
tooling/playwright-www/tests/homepage.test.ts (1)
98-131: Test paths are correct and verified against implementation.All hardcoded paths in the test have been verified:
- Line 121: Poster path
/assets/demo.pngmatches the component implementation (apps/www/components/page/video-demo.tsx:46) and the file exists atapps/www/public/assets/demo.png.- Line 127: Fallback image
demo.gifis correct—the component intentionally uses/assets/demo.gif(line 35), not a PNG, and the file exists atapps/www/public/assets/demo.gif. The video source (demo.mp4) and fallback image (demo.gif) are separate assets used appropriately.The dual-path validation approach is sound and well-structured. The error message on line 130 is generic but functional; improving it for better debugging is optional.
apps/www/components/page/video-demo.test.tsx (4)
2-2: Excellent fix: Fetch mock cleanup prevents test leakage.The addition of
afterEach, storingoriginalFetch, and restoring it inafterEachcorrectly addresses the previous review feedback about mock cleanup. This follows testing best practices and prevents state leakage between tests.Based on learnings
Also applies to: 12-13, 96-98
15-39: LGTM: Image mock appropriately simplifies Next.js Image for testing.The mock correctly renders a plain
imgelement while preserving all relevant props (src, alt, width, height, className). The type annotations ensure type-safe usage, and the biome-ignore is appropriately justified for test mocks.
41-80: Excellent: BackgroundVideo mock addresses past feedback and implements correct behavior.This mock successfully addresses the critical issue from the previous review by removing the hardcoded Vercel Blob Storage URL. The implementation correctly:
- Handles both string and object src formats (lines 56-57)
- Forwards all props including
onError,width,heightvia the spread operator- Uses
poster={poster || "/assets/demo.png"}to respect actual poster props- Properly destructures to avoid prop conflicts
The mock now accurately reflects the BackgroundVideo component's behavior and aligns with the PR's objective to migrate away from Vercel Blob Storage to Mux-backed hosting.
101-334: Comprehensive test coverage with proper structure.The test suite provides excellent coverage of the VideoDemo component:
- ✅ Basic rendering and attributes
- ✅ Video source validation
- ✅ Fallback behavior on error (video → gif)
- ✅ User interactions (clicks, focus)
- ✅ Accessibility (aria-label)
- ✅ Edge cases (window.open failure, multiple clicks, post-fallback interactions)
- ✅ Styling and layout
The structure follows Vitest best practices with proper
describe/itorganization and setup/teardown.Based on learnings
… VideoDemo component - Enhanced the VideoDemo component by adding autoplay, loop, muted, and playsInline attributes to the video element. - Updated the className for better responsiveness and visual consistency across different screen sizes.
1 participant
Closes #254
Note
Replaces the hero demo video with
next-video(Mux-backed) and adds the required config, scripts, typings, and assets.<video>withnext-video/background-videoincomponents/page/video-demo.tsx, importing~/videos/demo.mp4with fallback tonext/image.withNextVideoinapps/www/next.config.ts.next-videodev workflow: updatedevscript to runnext-video sync -w.video.d.tsand include intsconfig.json.fumadocs-ui/provider/nextinapp/layout.tsx.videos/demo.mp4.jsonandvideos/get-started.mp4.json..gitignoreto track onlyvideos/*.json|.js|.tsand ignore generatedpublic/_next-video.Written by Cursor Bugbot for commit e7f3d44. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
New Features
Improvements
Tests