Dev

[VampireChicken12]

Summary by CodeRabbit

• New Features

  • Enhanced video player maximization with responsive header visibility controls and flexible sizing adjustments.

• Bug Fixes

  • Refined playlist management button behavior and watch-later button interactions for improved consistency.

• Localization

  • Updated Italian, Turkish, and Chinese translations across settings and user interface elements for complete regional support.

• Chores

  • Build configuration optimizations including bundling improvements and minor CSS formatting refinements.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The PR updates localization files for Italian, Turkish, and Chinese; refactors maximize player button feature with header state management and event listeners; modifies playlist and watch-later button initialization logic using DOM queries; introduces a new Vite worker bundling plugin; centralizes build plugin path constants; and enhances build optimization with minification and code-splitting strategies.

Changes

Cohort / File(s)	Summary
Localization Updates public/locales/it-IT.json, public/locales/tr-TR.json, public/locales/zh-CN.json	Translated UI strings from English to Italian, Turkish, and Chinese respectively for features like automaticallyShowMoreVideosOnEndScreen, hideMembersOnlyVideos, saveToWatchLaterButton, playlistManagementButtons, and automaticallyMaximizePlayer.
CSS Formatting & Styling public/contentStyle.css, src/features/featureMenu/index.css, src/features/hideArtificialIntelligenceSummary/index.css	Applied trailing newlines and end-of-file formatting cleanup.
Maximize Player Feature Enhancement src/features/maximizePlayerButton/index.css, src/features/maximizePlayerButton/utils.ts	Added responsive maximized state CSS with header positioning, sticky video container, and masthead visibility transitions. Introduced header state management (visibility toggling, hover timeout), computed CSS variables for heights, and global event listeners (resize, mousemove, yt-navigate-start).
Playlist & Watch-Later Buttons Refactoring src/features/playlistManagementButtons/index.ts, src/features/saveToWatchLaterButton/index.ts	Replaced initialization patterns with DOM-based readiness checks and moved variable retrieval into click handlers. Replaced helper function calls with direct DOM manipulation (padding/visibility adjustments). Added guards to prevent multiple MutationObserver instances.
Type System Extensions src/types/index.ts, src/global.d.ts	Added new YouTubeNavigateStart type with pageType and url fields; extended DocumentEventMap with yt-navigate-start CustomEvent mapping.
Build Plugin Path Centralization src/utils/plugins/build-content-script.ts, src/utils/plugins/copy-build.ts, src/utils/plugins/copy-public.ts, src/utils/plugins/make-manifest.ts, src/utils/plugins/make-release-zips.ts	Replaced local outDir and related directory constant computations with centralized imports from ./utils. Removed duplicate outputFolderName references.
New Worker Bundling Plugin src/utils/plugins/bundle-worker.ts	Introduced new Vite plugin that bundles workers with esbuild, emits as assets, and replaces module with Worker constructor returning bundled asset URL.
Build Plugin Utilities & Optimization src/utils/plugins/utils.ts, src/utils/plugins/replace-dev-mode-const.ts, src/i18n/constants.ts	Added fallback browser injection in utils; updated logging in replace-dev-mode-const; incremented locale percentages for it-IT and zh-CN to 100.
Build Configuration Enhancement vite.config.ts	Added bundleWorker plugin to pipeline; enabled esbuild minification with explicit optimizations (keepNames, minifyIdentifiers, minifySyntax, minifyWhitespace); enhanced Rollup output with manualChunks for vendor splitting; enabled detailed treeshaking options.

Sequence Diagram(s)

sequenceDiagram
    participant User as User (Mouse)
    participant Doc as Document
    participant Handler as Header Handlers
    participant CSS as CSS Variables
    participant UI as UI (Header/Video)

    User->>Handler: Move mouse on maximized player
    Handler->>Handler: Check mouse Y position
    alt Mouse near top (< header height)
        Handler->>CSS: Set --yte-header-visible
        CSS->>UI: Reveal masthead (transform: 0)
        Handler->>Doc: Set headerVisible = true
        Handler->>Handler: Reset hover timeout
    else Mouse away from top
        Handler->>Handler: Start timeout
        Note over Handler: Wait 3 seconds
        Handler->>CSS: Clear --yte-header-visible
        CSS->>UI: Hide masthead (transform: -100%)
        Handler->>Doc: Set headerVisible = false
    end

    User->>Handler: Navigate to different page
    Handler->>Handler: navigateStartHandler triggered
    Handler->>UI: Show header, reset state
    Handler->>Handler: Clear timeout

    User->>Handler: Resize window
    Handler->>CSS: Update --yte-video-height
    CSS->>UI: Adjust video container height

Loading

sequenceDiagram
    participant Build as Vite Build
    participant Plugin as bundle-worker Plugin
    participant esbuild as esbuild
    participant Vite as Vite Asset Emit
    participant Runtime as Runtime

    Build->>Plugin: Resolve config (removes vite:worker)
    Build->>Plugin: Transform module with ?worker suffix
    Plugin->>Plugin: Strip ?worker from module id
    Plugin->>esbuild: Bundle worker entry (minify: true)
    esbuild->>Plugin: Return bundled code
    Plugin->>Vite: Emit bundled code as asset
    Vite->>Plugin: Return asset URL
    Plugin->>Runtime: Replace module with Worker constructor
    Runtime->>Runtime: new Worker(assetURL) at runtime

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

• src/features/maximizePlayerButton/utils.ts: Dense logic changes with multiple new internal state handlers (header visibility, hover timeout, resize listener), CSS variable computation, and new event listener registration. Requires careful review of state lifecycle and cleanup paths.
• src/utils/plugins/bundle-worker.ts: New plugin with esbuild integration, asset emission, and Worker instantiation logic. Verify correctness of worker bundling flow and runtime compatibility.
• vite.config.ts: Significant build config restructuring with new plugin insertion, minification settings, manualChunks splitting strategy, and treeshaking options. Ensure ordering and interactions between plugins are correct.
• src/features/playlistManagementButtons/index.ts and src/features/saveToWatchLaterButton/index.ts: Initialization pattern changes and variable scoping shifts warrant verification that event handlers capture correct context.
• src/utils/plugins/*: Multiple files refactored to use centralized path constants; verify all path resolutions work correctly across different build contexts.

Possibly related PRs

• Dev #1033: Modifies maximizePlayerButton utils/CSS, playlistManagementButtons, saveToWatchLaterButton, and i18n entries—overlaps significantly with this PR's feature and localization changes.
• Fix ESLint issues #773: Updates localePercentages in src/i18n/constants.ts and modifies localization files (it-IT, zh-CN)—shares the same i18n and locale file changes.
• Add playlist management buttons #951: Adds and modifies the playlist management feature module with related CSS, settings, types, and enable/disable paths—directly related to playlistManagementButtons refactoring in this PR.

Poem

🐰 Headers dance with mouse and time,
Workers bundle, plugins align,
Locales bloom in three tongues true,
Build paths centralized, fresh and new—
A hoppy refactor, robust through and through! 🎬✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dev

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a42726 and 466ebd1.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (22)

• public/contentStyle.css (1 hunks)
• public/locales/it-IT.json (3 hunks)
• public/locales/tr-TR.json (2 hunks)
• public/locales/zh-CN.json (3 hunks)
• src/features/featureMenu/index.css (1 hunks)
• src/features/hideArtificialIntelligenceSummary/index.css (1 hunks)
• src/features/maximizePlayerButton/index.css (1 hunks)
• src/features/maximizePlayerButton/utils.ts (5 hunks)
• src/features/playlistManagementButtons/index.ts (7 hunks)
• src/features/saveToWatchLaterButton/index.ts (4 hunks)
• src/global.d.ts (2 hunks)
• src/i18n/constants.ts (2 hunks)
• src/types/index.ts (1 hunks)
• src/utils/plugins/build-content-script.ts (2 hunks)
• src/utils/plugins/bundle-worker.ts (1 hunks)
• src/utils/plugins/copy-build.ts (1 hunks)
• src/utils/plugins/copy-public.ts (1 hunks)
• src/utils/plugins/make-manifest.ts (1 hunks)
• src/utils/plugins/make-release-zips.ts (1 hunks)
• src/utils/plugins/replace-dev-mode-const.ts (1 hunks)
• src/utils/plugins/utils.ts (1 hunks)
• vite.config.ts (3 hunks)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🎉 This PR is included in version 1.30.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[FrodoHackins]

  * Enhanced video player maximization with responsive header visibility controls and flexible sizing adjustments.

Random question, but... 🧐 ...when the video player itself is maximized, as is my default preference, is there some way to make the masthead/header remain permanently visible without hovering my mouse cursor? Even if that means adding some Custom CSS, I am more than okay with that, thanks for listening!

[VampireChicken12]

  * Enhanced video player maximization with responsive header visibility controls and flexible sizing adjustments.

Random question, but... 🧐 ...when the video player itself is maximized, as is my default preference, is there some way to make the masthead/header remain permanently visible without hovering my mouse cursor? Even if that means adding some Custom CSS, I am more than okay with that, thanks for listening!

@FrodoHackins

Here is custom CSS that makes the maximize player feature function how you want it to work. You'll have to manually scroll past the header so the full video is within the browser height

body[yte-maximized] #masthead-container {
	transform: translateY(0%);
	position: fixed;
	z-index: 3000;
}

body[yte-maximized] .yte-maximized-video {
	transform: translateY(0px) !important;
}

body[yte-maximized] div.html5-video-container,
body[yte-maximized] .yte-maximized-video-container {
	height: var(--yte-video-height) !important;
}

body[yte-maximized] #columns {
	margin-top: 0 !important;
}


body[yte-maximized] #full-bleed-container {
	margin-top: 0 !important;
	height: var(--yte-video-height) !important;
	max-height: var(--yte-video-height) !important;
}

[FrodoHackins]

Here is custom CSS that makes the maximize player feature function how you want it to work. You'll have to manually scroll past the header so the full video is within the browser height

Thank you so much! 💯🙏