Skip to content

Refresh Watch footer layout#8528

Closed
lumberman wants to merge 43 commits intomainfrom
codex/vm-25-recreate-footer-in-apps/watch-z9c6uh
Closed

Refresh Watch footer layout#8528
lumberman wants to merge 43 commits intomainfrom
codex/vm-25-recreate-footer-in-apps/watch-z9c6uh

Conversation

@lumberman
Copy link
Copy Markdown
Contributor

Summary

  • rebuild the Watch footer with Tailwind styling to match the provided layout without social icons or the newsletter CTA
  • replace the MUI-based footer link with a semantic, focus-visible anchor that supports logo imagery
  • update footer specs and the Watch PRD log for the new layout

Testing

  • pnpm dlx nx test watch --testPathPattern=Footer (fails: jest cannot resolve core/libs/locales/en/apps-watch.json from test/i18n.ts)

Codex Task

lumberman and others added 30 commits September 18, 2025 22:20
- Copied /libs/shared/uimodern with all its content from feature/25-00-VM-studio-prototype
- Includes UI components, styles, and configuration files
- Ready for watch design updates
- Added `cmdk` version 1.1.1 and `autoprefixer` version 10.4.21 to package.json.
- Updated webpack configuration to handle SVG imports and added path alias for assets.
- Removed unused global CSS file and several asset files.
- Adjusted storybook imports to use `@storybook/react` instead of `@storybook/nextjs`.
- Updated type definitions for SVG files and modified various components to reflect new data structures.
…ollectionsPage components

- Removed `autoprefixer` from `package.json` and `pnpm-lock.yaml`.
- Updated import paths for `PageCollectionsContent` in multiple language-specific `CollectionsPage.tsx` files to ensure consistency.
- Introduced new components including `Accordion`, `ExtendedButton`, and `VideoControls` to enhance the UI.
- Removed several unused components and their associated files to streamline the codebase.
- Updated import paths for various components to ensure consistency and maintainability.
- Added new utility functions and updated the README for better documentation.
- Added the new `VideoBlock` component to replace `VideoContentHero` in various locations, enhancing modularity.
- Updated `AGENTS.md` to reflect the change from `VideoContentHero` to `VideoBlock`.
- Created tests for the `VideoBlock` component to ensure functionality.
- Refactored `LanguageSelector` and `SimpleSearchBar` components for improved styling and accessibility.
- Enhanced the `LocalAppBar` component with additional features and improved layout.
- Removed debug logging from the `useWatchHeroCarousel` component to streamline functionality.
- Updated `VideoBlock` to synchronize the collapsed state with the mute state and track unmute events.
- Enhanced `HeroVideo` and `VideoControls` components to handle the new `wasUnmuted` prop for better user experience.
- Adjusted rendering logic in `VideoControls` to conditionally display overlays based on mute state and unmute events.
… layout and functionality

- Set spaceBetween to 0 in VideoCarousel for a tighter layout.
- Adjusted max-width and margin for SwiperSlide elements in VideoCarousel for better responsiveness.
- Enhanced VideoTitle to use effectiveContainerSlug for URL generation based on preview state.
- Added z-index to animation classes in VideoTitle for improved layering.
- Introduced `@radix-ui/react-slider` and a custom `Slider` component for enhanced UI functionality.
- Updated `package.json` and `pnpm-lock.yaml` to include new dependencies for slider functionality.
- Adjusted Tailwind CSS configuration to reflect changes in library paths.
- Refactored `VideoControls` component to utilize the new slider for volume and seek controls, improving user experience.
…ng and functionality

- Changed the `transpilePackages` in `next.config.js` from `shared` to `shared-ui` for correct package handling.
- Enhanced `VideoCard` component to apply additional CSS classes for layout consistency.
- Updated `ContentHeader` to include a drop-shadow on the Globe icon for better visibility.
- Added new tests for `VideoCard` and `ContentHeader` to ensure proper rendering and styling.
- Introduced `ContainerWithMedia` component tests to validate rendering and child component behavior.
…tency

- Added empty lines at the end of several test files for `ContainerWithMedia`, `HeroVideo`, and `VideoControls` to maintain consistency in file formatting.
- Updated the export file for `VideoControls` to include an empty line for better readability.
…e related tests

- Replaced the HeroVideo component with VideoBlockPlayer in the VideoBlock component for improved modularity.
- Updated references in tests for PageSingleVideo and VideoContentHero to reflect the new VideoBlockPlayer component.
- Removed obsolete HeroVideo component and its associated tests to streamline the codebase.
- Added global styles for font variables in the WatchApp component to enhance typography consistency.
- Changed import statements in various components to use '@storybook/nextjs' instead of '@storybook/react' for better compatibility.
- Removed unnecessary empty lines and adjusted import orders in several files to enhance readability and maintain consistency.
- Updated the `VideoCarousel` and `VideoBlock` components to improve modularity and organization.
- Cleaned up test files by adding empty lines for consistency and removing obsolete code.
- Enhanced the `useCarouselVideos` hook to handle errors more gracefully and improve overall functionality.
…tency

- Added empty lines at the end of test files for `ContainerWithMedia` and `HeroVideo` to maintain formatting consistency.
- Included an empty line in the export file for `VideoControls` to enhance readability.
- Updated the `select.tsx` component to include an empty line for uniformity.
… NUA series

- Added multiple video sources to the Christmas Advent showcase for a richer viewing experience.
- Introduced new NUA series collection to the CollectionsRail component.
- Updated SectionVideoGrid to handle optional sources and primaryCollectionId for improved flexibility.
- Enhanced tests for SectionVideoGrid to ensure proper source resolution when no sources are provided.
- Refactor language selection components to use shared dropdown
- Update multiple components across watch app
- Add new shared UI components (alert, switch, tooltip)
…e/25-00-VM-watch-desing-update (prioritizing incoming branch changes)
- Added LanguageCommandSelect component for improved language selection functionality.
- Integrated LanguageFilterDropdown into CollectionMetadata for better language management.
- Updated CollectionHero to include a share button for enhanced user interaction.
- Refactored PageCollection to utilize new language selection logic and improve overall structure.
- Enhanced tests for new components and updated existing tests for consistency and coverage.
…plate' into feature/25-00-VM-watch-desing-update
…to feature/25-00-VM-watch-desing-update

- Added PageCollection components and related functionality
- Fixed TypeScript moduleResolution for @storybook/react compatibility
- Added missing @storybook/react dependency
- Refactored various components for better readability and maintainability, including LanguageCommandSelect, LanguageFilterDropdown, and VideoControls.
- Enhanced styling consistency across components, particularly in the CollectionHero and SectionVideoGrid.
- Updated test cases for improved coverage and clarity.
- Added new animations for background effects in globals.css.
…tion

- Added API route for generating blurhash and dominant color from image URLs using Sharp.
- Integrated blurhash functionality into various components (VideoCard, LazyImage, CollectionHero, etc.) for improved loading UX.
- Implemented caching strategies with Next.js unstable_cache and SWR for efficient data fetching and revalidation.
- Enhanced error handling for image fetching and processing, including validation for allowed domains and content types.
- Created utility functions and hooks for blurhash generation and image processing, ensuring type safety with TypeScript.
- Comprehensive tests added for API route and component integration to ensure reliability and performance.
- Added "module": "esnext" to tsconfig.json for better module resolution.
- Refactored blurhash.spec.ts and blurhash.ts for improved readability, including consistent formatting and clearer error handling.
- Enhanced LazyImage, VideoCard, and other components to utilize blurhash data more effectively, ensuring better loading UX.
- Updated test cases to reflect changes in hover functionality and data structure for image handling.
- Improved overall code consistency and maintainability across various components.
- Improved local thumbnail support in blurhash generation by allowing relative paths.
- Updated image fetching logic to handle local thumbnails directly from disk.
- Enhanced blurhash generation process to ensure accurate dimensions and color extraction.
- Refactored VideoCard and CarouselVideoCard components to utilize thumbnail URLs for better loading performance.
- Adjusted collection showcase configurations to limit child collections and improve display.
- Updated CollectionsRail component titles and subtitles for better clarity and engagement.
- Streamlined useSectionVideoCollectionCarouselContent for improved source handling and memoization.
- Introduced a new collection, GOJohnCollection, to the collection showcase configuration.
- Updated CollectionsRail component to utilize the new collection and adjusted titles for clarity.
- Enhanced SectionVideoCarousel to handle cases with no results, providing user feedback.
- Improved caching strategy in Apollo Client for better data fetching and performance.
- Added debug logging for better tracking of collection and video data during rendering.
…Context

- Updated VideoCard to always call useThrottledPlayerProgress for consistent hook order, while conditionally using progress for active cards.
- Refactored useThrottledPlayerProgress to manage throttled progress and last update time in a single state object, improving clarity and performance.
…e caching

- Updated Redis client logic to reset availability flag after successful connection attempts.
- Refactored API routes to ensure Redis availability is checked before caching responses.
- Improved error handling for Redis operations to prevent application crashes during connection failures.
- Added new tests for Redis connection behavior to ensure reliability and performance.
- Cleaned up code structure in languages and blurhash API routes for better readability.
- Improved image fetching logic to strip query parameters for local thumbnail paths.
- Added a new function to extract the dominant color from processed image buffers, enhancing color accuracy in blurhash generation.
- Refactored blurhash generation to utilize the new dominant color extraction method for better performance.
- Updated API routes to streamline blurhash generation and caching strategies.
- Introduced new thumbnail assets to support enhanced visual content in the application.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Dec 16, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch codex/vm-25-recreate-footer-in-apps/watch-z9c6uh

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

Fails
🚫 Please ensure your PR title matches commitlint convention.
🚫 Please assign someone to merge this PR.
🚫 Please request a reviewer for this PR.

(pr title - Refresh Watch footer layout):

subject may not be empty

type may not be empty

Generated by 🚫 dangerJS against 5af20ba

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Dec 16, 2025

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.


View your CI Pipeline Execution ↗ for commit 5af20ba

Command Status Duration Result
nx run-many --target=deploy --projects=watch ❌ Failed 2m 2s View ↗

☁️ Nx Cloud last updated this comment at 2025-12-16 02:30:31 UTC

Base automatically changed from feature/25-00-VM-watch-desing-update to main December 19, 2025 04:57
An error occurred while trying to automatically change base from feature/25-00-VM-watch-desing-update to main December 19, 2025 04:57
@github-actions
Copy link
Copy Markdown
Contributor

This pull request has been marked stale due to 28 days without activity. It will be closed in 14 days unless updated.

@github-actions github-actions Bot added the stale label Jan 17, 2026
@github-actions
Copy link
Copy Markdown
Contributor

This pull request was automatically closed after remaining stale for 14 days.

@github-actions github-actions Bot closed this Jan 31, 2026
@github-actions github-actions Bot deleted the codex/vm-25-recreate-footer-in-apps/watch-z9c6uh branch March 24, 2026 02:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant