Skip to content

feat: add mosaic blur and black shading option#431

Merged
siddharthvaddem merged 1 commit intosiddharthvaddem:mainfrom
LorenzoLancia:feat/blur-mosaic-and-black
Apr 16, 2026
Merged

feat: add mosaic blur and black shading option#431
siddharthvaddem merged 1 commit intosiddharthvaddem:mainfrom
LorenzoLancia:feat/blur-mosaic-and-black

Conversation

@LorenzoLancia
Copy link
Copy Markdown
Contributor

@LorenzoLancia LorenzoLancia commented Apr 12, 2026

Description

This PR enhances the blur annotation workflow by adding:

  • a new mosaic blur mode
  • support for black blur shading
  • preview and export updates so blur effects are rendered consistently
  • persistence and normalization for the new blur settings
  • tests for blur utilities and project persistence
  • new i18n labels for the added blur controls

Motivation

The current blur annotation flow only supports the standard blur effect with limited visual customization.

This change improves flexibility when hiding sensitive information by allowing users to:

  • choose between a classic blur and a mosaic-style blur
  • use either white or black shading depending on the underlying content
  • control mosaic block size for stronger or softer obfuscation

It also ensures these settings are preserved correctly in saved projects and rendered properly both in-editor and during export.

Type of Change

  • New Feature
  • Bug Fix
  • Refactor / Code Cleanup
  • Documentation Update
  • Other (please specify)

Related Issue

#303

Screenshots / Video

Mosaic.blur.mp4

Summary by CodeRabbit

Release Notes

  • New Features

    • Added mosaic blur effect as an alternative to standard blur with adjustable block sizing
    • Added blur color customization with white and black overlay options
    • Enhanced blur preview rendering with improved real-time visualization
  • Localization

    • Added translations for new blur configuration controls in English, Spanish, and French

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 12, 2026

📝 Walkthrough

Walkthrough

Added mosaic blur support with configurable blur types (blur/mosaic), colors (white/black), and mosaic block-size parameters. Canvas-based mosaic rendering replaces blur filters with pixelated overlay. Includes normalization utilities, preview canvas integration, and persistence handling.

Changes

Cohort / File(s) Summary
Type Definitions & Blur Utilities
src/components/video-editor/types.ts, src/lib/blurEffects.ts, src/lib/blurEffects.test.ts
Added BlurType, BlurColor types and block-size constants. Introduced blur normalization functions, overlay color generators, and applyMosaicToImageData for pixelation processing.
UI Components
src/components/video-editor/AnnotationOverlay.tsx, src/components/video-editor/BlurSettingsPanel.tsx, src/components/video-editor/VideoPlayback.tsx
AnnotationOverlay now renders mosaic via canvas instead of blur filters; added live rect state for drag/resize. BlurSettingsPanel added type/color selectors and type-dependent intensity/block-size controls. VideoPlayback extracts preview snapshot canvas and passes it to overlays.
Data Persistence & Normalization
src/components/video-editor/projectPersistence.ts, src/components/video-editor/projectPersistence.test.ts
Added blur data normalization during project load: validates/clamps type, color, and blockSize fields with test coverage for edge cases.
Export & Rendering
src/lib/exporter/annotationRenderer.ts
Updated blur rendering to apply mosaic processing via applyMosaicToImageData, derive behavior from blurData normalization, and overlay color fills instead of blur filters alone.
Internationalization
src/i18n/locales/en/settings.json, src/i18n/locales/es/settings.json, src/i18n/locales/fr/settings.json
Added i18n keys for blur type options, color controls, and mosaic block-size labels across EN, ES, and FR locales.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

this one's got some teeth—lots of heterogeneous changes across component logic, canvas rendering, and data normalization. the AnnotationOverlay canvas work and blurEffects module are logic-dense, and the integration points span multiple files. kinda cursed in the best way.

Possibly related PRs

Suggested reviewers

  • siddharthvaddem

Poem

🎨 Mosaic dreams on canvas drawn,
Blur and pixelate all night long,
Block by block, a fuzzy art,
Normalization from the start,
Preview snapshots light the way,
Annotations blur and sway! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the two main feature additions: mosaic blur mode and black shading support, which are the primary changes in this changeset.
Description check ✅ Passed The PR description covers all key template sections: purpose (blur enhancements), motivation (flexibility for sensitivity obfuscation), type of change (new feature), related issue (#303), and includes a video demonstration. All required elements are present and substantive.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8bcce473d5

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/video-editor/VideoPlayback.tsx
Comment thread src/components/video-editor/VideoPlayback.tsx
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/video-editor/AnnotationOverlay.tsx`:
- Around line 85-90: Replace the ad-hoc blur computations with the shared blur
normalizers: where blurType, blurIntensity and blockSize are computed from
annotation.blurData (the current local blurType, blurOverlayColor,
mosaicGridOverlayColor logic), call the shared normalizer helpers (the same one
used at getNormalizedMosaicBlockSize(...) on the mosaic path) to derive a
normalized blur type, intensity and block size from annotation.blurData; update
the places noted (the initial blurType/blurOverlayColor/mosaicGridOverlayColor,
the code around lines where getNormalizedMosaicBlockSize is used, and the
357-364 preview/exporter code) to use these normalized values instead of raw
fields so malformed/legacy blurData cannot produce inconsistent previews or
exports.
- Around line 19-24: The PreviewCanvasSource type is too loose (accepts any
{width,height}) but is passed to drawImage via
previewSnapshotCanvas/previewSourceCanvas; change the type alias
PreviewCanvasSource to a real canvas type (e.g., HTMLCanvasElement |
OffscreenCanvas | null or CanvasImageSource | null) and update any related
variable declarations (previewSnapshotCanvas, previewSourceCanvas) and usages so
the compiler knows drawImage receives a proper CanvasImageSource; ensure
nullability is handled before calling drawImage (guard or conditional) to avoid
runtime errors.

In `@src/lib/blurEffects.test.ts`:
- Around line 69-78: The test expectation for getBlurOverlayColor is out of sync
with the implementation: update the expected value in the "returns a dark
overlay when black blur color is selected" test to match the function's actual
output (getBlurOverlayColor(..., color: "black", ...)) which currently returns
"rgba(0, 0, 0, 0.56)"; locate the test referencing getBlurOverlayColor and
change the toBe assertion to expect "rgba(0, 0, 0, 0.56)".
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f9022223-acac-4920-968e-61b00f0d068c

📥 Commits

Reviewing files that changed from the base of the PR and between a6ae0e6 and 8bcce47.

📒 Files selected for processing (12)
  • src/components/video-editor/AnnotationOverlay.tsx
  • src/components/video-editor/BlurSettingsPanel.tsx
  • src/components/video-editor/VideoPlayback.tsx
  • src/components/video-editor/projectPersistence.test.ts
  • src/components/video-editor/projectPersistence.ts
  • src/components/video-editor/types.ts
  • src/i18n/locales/en/settings.json
  • src/i18n/locales/es/settings.json
  • src/i18n/locales/fr/settings.json
  • src/lib/blurEffects.test.ts
  • src/lib/blurEffects.ts
  • src/lib/exporter/annotationRenderer.ts
👮 Files not reviewed due to content moderation or server errors (8)
  • src/i18n/locales/fr/settings.json
  • src/components/video-editor/types.ts
  • src/i18n/locales/en/settings.json
  • src/i18n/locales/es/settings.json
  • src/components/video-editor/projectPersistence.ts
  • src/components/video-editor/projectPersistence.test.ts
  • src/components/video-editor/BlurSettingsPanel.tsx
  • src/components/video-editor/VideoPlayback.tsx

Comment thread src/components/video-editor/AnnotationOverlay.tsx
Comment thread src/components/video-editor/AnnotationOverlay.tsx
Comment thread src/lib/blurEffects.test.ts
@siddharthvaddem siddharthvaddem merged commit 20aecc1 into siddharthvaddem:main Apr 16, 2026
6 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants