From 1d084dcf1b007f533b4b8aea101bb684e0c2c896 Mon Sep 17 00:00:00 2001
From: Marco Filho <markimkr@gmail.com>
Date: Sat, 12 Sep 2026 01:16:39 -0300
Subject: [PATCH 1/2] [194] Unblur videos on hover and centralize the wellness
 filter

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 client/src/models/safetySettings.test.ts      |  64 ++++++++++
 client/src/models/safetySettings.ts           |  49 ++++++++
 ...nualReviewJobContentBlurableImage.test.tsx |  83 +++++++++++++
 .../ManualReviewJobContentBlurableImage.tsx   |  25 +++-
 ...nualReviewJobContentBlurableVideo.test.tsx | 115 ++++++++++++++++++
 .../ManualReviewJobContentBlurableVideo.tsx   |  38 +++---
 .../v2/ManualReviewJobFieldsComponent.tsx     |   4 +
 .../v2/ncmec/NCMECMediaViewer.tsx             |  15 ++-
 .../v2/ncmec/NCMECReviewUser.tsx              |  30 ++---
 .../src/webpages/settings/AccountSettings.tsx |  14 ++-
 .../webpages/settings/tabs/WellnessTab.tsx    |  14 ++-
 docs/user/review-console.md                   |   2 +-
 12 files changed, 404 insertions(+), 49 deletions(-)
 create mode 100644 client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.test.tsx
 create mode 100644 client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.test.tsx

diff --git a/client/src/models/safetySettings.test.ts b/client/src/models/safetySettings.test.ts
index ff049303..5de0e53d 100644
--- a/client/src/models/safetySettings.test.ts
+++ b/client/src/models/safetySettings.test.ts
@@ -1,6 +1,7 @@
 import {
   colorSchemeClassName,
   colorSchemeFromPreferences,
+  moderatorSafetyFilterStyle,
   preferencesFromColorScheme,
 } from './safetySettings';
 
@@ -75,3 +76,66 @@ describe('safetySettings color scheme', () => {
     ).toBe('grayscale');
   });
 });
+
+describe('moderatorSafetyFilterStyle', () => {
+  it('keeps the pixel value each blur level rendered before', () => {
+    const pixelsByLevel = [0, 4, 8, 12, 16, 24, 40];
+    pixelsByLevel.forEach((pixels, level) => {
+      expect(
+        moderatorSafetyFilterStyle({ blurLevel: level, shouldBlur: true }),
+      ).toBe(level === 0 ? undefined : `blur(${pixels}px)`);
+    });
+  });
+
+  it('drops the blur when this media should not be blurred', () => {
+    expect(
+      moderatorSafetyFilterStyle({ blurLevel: 6, shouldBlur: false }),
+    ).toBeUndefined();
+  });
+
+  it('clamps levels outside the configurable range', () => {
+    expect(
+      moderatorSafetyFilterStyle({ blurLevel: 99, shouldBlur: true }),
+    ).toBe('blur(40px)');
+    expect(
+      moderatorSafetyFilterStyle({ blurLevel: -1, shouldBlur: true }),
+    ).toBeUndefined();
+  });
+
+  it('composes blur and color scheme', () => {
+    expect(
+      moderatorSafetyFilterStyle({
+        blurLevel: 3,
+        shouldBlur: true,
+        grayscale: true,
+      }),
+    ).toBe('blur(12px) grayscale(100%)');
+    expect(
+      moderatorSafetyFilterStyle({
+        blurLevel: 3,
+        shouldBlur: true,
+        sepia: true,
+      }),
+    ).toBe('blur(12px) sepia(100%)');
+  });
+
+  it('applies a color scheme on its own', () => {
+    expect(moderatorSafetyFilterStyle({ grayscale: true })).toBe(
+      'grayscale(100%)',
+    );
+    expect(moderatorSafetyFilterStyle({ sepia: true })).toBe('sepia(100%)');
+  });
+
+  it('never applies both color filters, like the settings screens', () => {
+    expect(moderatorSafetyFilterStyle({ grayscale: true, sepia: true })).toBe(
+      'grayscale(100%)',
+    );
+  });
+
+  it('returns undefined when there is nothing to apply', () => {
+    expect(moderatorSafetyFilterStyle({})).toBeUndefined();
+    expect(
+      moderatorSafetyFilterStyle({ blurLevel: 0, shouldBlur: true }),
+    ).toBeUndefined();
+  });
+});
diff --git a/client/src/models/safetySettings.ts b/client/src/models/safetySettings.ts
index 71d72669..0d7ac8bb 100644
--- a/client/src/models/safetySettings.ts
+++ b/client/src/models/safetySettings.ts
@@ -60,3 +60,52 @@ export function preferencesFromColorScheme(
     moderatorSafetySepia: colorScheme === 'SEPIA',
   };
 }
+
+// Each blur level keeps the pixel value its Tailwind `blur-*` class applied
+// before wellness filters became a single inline `filter`.
+const BLUR_PIXELS_BY_LEVEL = [0, 4, 8, 12, 16, 24, 40];
+
+export const MAX_BLUR_LEVEL = BLUR_PIXELS_BY_LEVEL.length - 1;
+
+// Single source for the `filter` applied to reviewed media, so every surface
+// blurs and tints alike. Returns undefined when nothing applies, which leaves
+// the style off the element entirely.
+export function moderatorSafetyFilterStyle(options: {
+  blurLevel?: number;
+  shouldBlur?: boolean;
+  grayscale?: boolean;
+  sepia?: boolean;
+}): string | undefined {
+  const {
+    blurLevel = 0,
+    shouldBlur = false,
+    grayscale = false,
+    sepia = false,
+  } = options;
+  const filters: string[] = [];
+
+  if (shouldBlur) {
+    const level = Math.min(Math.max(Math.trunc(blurLevel), 0), MAX_BLUR_LEVEL);
+    const pixels = BLUR_PIXELS_BY_LEVEL[level];
+    if (pixels > 0) {
+      filters.push(`blur(${pixels}px)`);
+    }
+  }
+
+  const colorScheme = colorSchemeFromPreferences({
+    moderatorSafetyGrayscale: grayscale,
+    moderatorSafetySepia: sepia,
+  });
+  switch (colorScheme) {
+    case 'GRAYSCALE':
+      filters.push('grayscale(100%)');
+      break;
+    case 'SEPIA':
+      filters.push('sepia(100%)');
+      break;
+    case 'NONE':
+      break;
+  }
+
+  return filters.length > 0 ? filters.join(' ') : undefined;
+}
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.test.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.test.tsx
new file mode 100644
index 00000000..6b120231
--- /dev/null
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.test.tsx
@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { type ComponentProps } from 'react';
+import { vi } from 'vitest';
+
+import ManualReviewJobContentBlurableImage from './ManualReviewJobContentBlurableImage';
+
+type ImageOptions = NonNullable<
+  ComponentProps<typeof ManualReviewJobContentBlurableImage>['options']
+>;
+
+function renderImage(options: ImageOptions) {
+  const { container } = render(
+    <ManualReviewJobContentBlurableImage
+      url="https://example.com/reported.jpg"
+      options={options}
+    />,
+  );
+  const image = container.querySelector('img');
+  if (image == null) {
+    throw new Error('expected the component to render an image');
+  }
+  return { wrapper: container.firstElementChild as HTMLElement, image };
+}
+
+describe('ManualReviewJobContentBlurableImage', () => {
+  it('blurs with the pixel value of the configured level', () => {
+    const { image } = renderImage({ shouldBlur: true, blurStrength: 3 });
+    expect(image.style.filter).toBe('blur(12px)');
+  });
+
+  it('applies the color scheme alongside the blur', () => {
+    const { image } = renderImage({
+      shouldBlur: true,
+      blurStrength: 3,
+      grayscale: true,
+    });
+    expect(image.style.filter).toBe('blur(12px) grayscale(100%)');
+  });
+
+  it('reveals the image while hovered and keeps the color scheme', () => {
+    const { wrapper, image } = renderImage({
+      shouldBlur: true,
+      blurStrength: 3,
+      grayscale: true,
+    });
+
+    userEvent.hover(wrapper);
+    expect(image.style.filter).toBe('grayscale(100%)');
+
+    userEvent.unhover(wrapper);
+    expect(image.style.filter).toBe('blur(12px) grayscale(100%)');
+  });
+
+  it('keeps the blur while hovered when revealing is turned off', () => {
+    const { wrapper, image } = renderImage({
+      shouldBlur: true,
+      blurStrength: 3,
+      revealOnHover: false,
+    });
+
+    userEvent.hover(wrapper);
+    expect(image.style.filter).toBe('blur(12px)');
+  });
+
+  it('leaves media unfiltered when it should not be blurred', () => {
+    const { image } = renderImage({ shouldBlur: false, blurStrength: 3 });
+    expect(image.style.filter).toBe('');
+  });
+
+  it('does not read or write browser storage', () => {
+    const getItem = vi.spyOn(Storage.prototype, 'getItem');
+    const setItem = vi.spyOn(Storage.prototype, 'setItem');
+
+    renderImage({ shouldBlur: true, blurStrength: 3 });
+
+    expect(getItem).not.toHaveBeenCalled();
+    expect(setItem).not.toHaveBeenCalled();
+
+    getItem.mockRestore();
+    setItem.mockRestore();
+  });
+});
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.tsx
index 32f58cfe..d7463e56 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.tsx
@@ -1,9 +1,10 @@
+import { moderatorSafetyFilterStyle } from '@/models/safetySettings';
 import { useEffect, useState } from 'react';
 
 import CopyTextComponent from '../../../../components/common/CopyTextComponent';
 import CoopModal from '../../components/CoopModal';
 
-import { BLUR_LEVELS, BlurStrength } from './v2/ncmec/NCMECMediaViewer';
+import type { BlurStrength } from './v2/ncmec/NCMECMediaViewer';
 
 export default function ManualReviewJobContentBlurableImage(props: {
   url: string;
@@ -15,6 +16,7 @@ export default function ManualReviewJobContentBlurableImage(props: {
     grayscale?: boolean;
     disableZoom?: boolean;
     sepia?: boolean;
+    revealOnHover?: boolean;
   };
   onError?: () => void;
 }) {
@@ -27,10 +29,12 @@ export default function ManualReviewJobContentBlurableImage(props: {
     grayscale = false,
     disableZoom = false,
     sepia = false,
+    revealOnHover = true,
   } = options ?? {};
 
   const [clicked, setClicked] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
 
   // Reset error when the url changes
   useEffect(() => setError(false), [url]);
@@ -46,16 +50,25 @@ export default function ManualReviewJobContentBlurableImage(props: {
     );
   }
 
+  const filter = moderatorSafetyFilterStyle({
+    blurLevel: blurStrength,
+    shouldBlur: shouldBlur && !(revealOnHover && isHovered),
+    grayscale,
+    sepia,
+  });
+
   return (
-    <div className="my-2 rounded-lg">
+    <div
+      className="my-2 rounded-lg"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <img
-        className={`w-full rounded-lg hover:blur-none ${
-          shouldBlur ? BLUR_LEVELS[blurStrength] : 'blur-0'
-        } ${grayscale ? 'grayscale' : ''} ${sepia ? 'sepia' : ''}`}
+        className="w-full rounded-lg"
         alt=""
         src={url}
         onClick={() => setClicked(true)}
-        style={{ maxWidth, maxHeight }}
+        style={{ maxWidth, maxHeight, filter }}
         onError={() => {
           setError(true);
           onError?.();
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.test.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.test.tsx
new file mode 100644
index 00000000..442d6e1f
--- /dev/null
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.test.tsx
@@ -0,0 +1,115 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { type ComponentProps } from 'react';
+import { vi } from 'vitest';
+
+import ManualReviewJobContentBlurableVideo from './ManualReviewJobContentBlurableVideo';
+
+const { playerProps } = vi.hoisted(() => ({
+  playerProps: [] as Record<string, unknown>[],
+}));
+
+function ReactPlayerMock(props: Record<string, unknown>) {
+  playerProps.push(props);
+  return <video data-testid="react-player" />;
+}
+
+vi.mock('react-player', () => ({ default: ReactPlayerMock }));
+
+type VideoOptions = NonNullable<
+  ComponentProps<typeof ManualReviewJobContentBlurableVideo>['options']
+>;
+
+function renderVideo(options: VideoOptions) {
+  const { container } = render(
+    <ManualReviewJobContentBlurableVideo
+      url="https://example.com/reported.mp4"
+      options={options}
+    />,
+  );
+  const player = screen.getByTestId('react-player');
+  const filtered = player.parentElement;
+  if (filtered == null) {
+    throw new Error('expected the player to be wrapped');
+  }
+  return {
+    wrapper: container.firstElementChild as HTMLElement,
+    filtered,
+    playButton: container.querySelector('.cursor-pointer') as HTMLElement,
+  };
+}
+
+beforeEach(() => {
+  playerProps.length = 0;
+});
+
+describe('ManualReviewJobContentBlurableVideo', () => {
+  it('blurs with the pixel value of the configured level', () => {
+    const { filtered } = renderVideo({ shouldBlur: true, blurStrength: 3 });
+    expect(filtered.style.filter).toBe('blur(12px)');
+  });
+
+  it('applies the color scheme alongside the blur', () => {
+    const { filtered } = renderVideo({
+      shouldBlur: true,
+      blurStrength: 3,
+      grayscale: true,
+    });
+    expect(filtered.style.filter).toBe('blur(12px) grayscale(100%)');
+  });
+
+  // Regression test for roostorg/coop#524: hovering a blurred video did nothing.
+  it('reveals the video while hovered and restores the blur after', () => {
+    const { wrapper, filtered } = renderVideo({
+      shouldBlur: true,
+      blurStrength: 3,
+      grayscale: true,
+    });
+
+    userEvent.hover(wrapper);
+    expect(filtered.style.filter).toBe('grayscale(100%)');
+
+    userEvent.unhover(wrapper);
+    expect(filtered.style.filter).toBe('blur(12px) grayscale(100%)');
+  });
+
+  it('keeps the blur while the video plays', () => {
+    const { wrapper, filtered, playButton } = renderVideo({
+      shouldBlur: true,
+      blurStrength: 3,
+    });
+
+    // Clicking moves the pointer onto the video, so leave it again: the
+    // scenario is a playing video the moderator is not hovering.
+    userEvent.click(playButton);
+    userEvent.unhover(wrapper);
+
+    expect(filtered.style.filter).toBe('blur(12px)');
+  });
+
+  it('keeps the blur while hovered when revealing is turned off', () => {
+    const { wrapper, filtered } = renderVideo({
+      shouldBlur: true,
+      blurStrength: 3,
+      revealOnHover: false,
+    });
+
+    userEvent.hover(wrapper);
+    expect(filtered.style.filter).toBe('blur(12px)');
+  });
+
+  it('leaves media unfiltered when it should not be blurred', () => {
+    const { filtered } = renderVideo({ shouldBlur: false, blurStrength: 3 });
+    expect(filtered.style.filter).toBe('');
+  });
+
+  it('silences the player when the mute preference is on', () => {
+    renderVideo({ shouldBlur: true, blurStrength: 3, muted: true });
+    expect(playerProps.at(-1)?.volume).toBe(0);
+  });
+
+  it('leaves the volume alone when the mute preference is off', () => {
+    renderVideo({ shouldBlur: true, blurStrength: 3, muted: false });
+    expect(playerProps.at(-1)?.volume).toBeUndefined();
+  });
+});
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.tsx
index 4c754e13..8179c3ec 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.tsx
@@ -1,10 +1,11 @@
+import { moderatorSafetyFilterStyle } from '@/models/safetySettings';
 import { CirclePlay } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 
 import CoopModal from '../../components/CoopModal';
 
-import { BLUR_LEVELS, BlurStrength } from './v2/ncmec/NCMECMediaViewer';
+import type { BlurStrength } from './v2/ncmec/NCMECMediaViewer';
 
 export default function ManualReviewJobContentBlurableVideo(props: {
   url: string;
@@ -13,6 +14,9 @@ export default function ManualReviewJobContentBlurableVideo(props: {
     shouldBlur?: boolean;
     muted?: boolean;
     blurStrength?: BlurStrength;
+    grayscale?: boolean;
+    sepia?: boolean;
+    revealOnHover?: boolean;
     controlsDisabled?: boolean;
     maxWidth?: number | string;
     maxHeight?: number | string;
@@ -26,7 +30,10 @@ export default function ManualReviewJobContentBlurableVideo(props: {
   const {
     shouldBlur = false,
     muted = false,
-    blurStrength,
+    blurStrength = 1,
+    grayscale = false,
+    sepia = false,
+    revealOnHover = true,
     controlsDisabled,
     lightMode = false,
     maxWidth = Infinity,
@@ -34,6 +41,7 @@ export default function ManualReviewJobContentBlurableVideo(props: {
   } = options ?? {};
   const [videoError, setVideoError] = useState<boolean>(false);
   const [playing, setPlaying] = useState<boolean>(false);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
   const ref = useRef<HTMLDivElement>(null);
   const playerRef = useRef<ReactPlayer>(null);
 
@@ -64,19 +72,21 @@ export default function ManualReviewJobContentBlurableVideo(props: {
     );
   });
 
+  const filter = moderatorSafetyFilterStyle({
+    blurLevel: blurStrength,
+    shouldBlur: shouldBlur && !(revealOnHover && isHovered),
+    grayscale,
+    sepia,
+  });
+
   return (
-    <div className={`${className} relative rounded-lg shadow h-fit`} ref={ref}>
-      <div
-        className={`shadow ${
-          shouldBlur
-            ? blurStrength
-              ? BLUR_LEVELS[blurStrength]
-              : !playing
-                ? 'blur-sm'
-                : 'blur-0'
-            : 'blur-0'
-        }`}
-      >
+    <div
+      className={`${className} relative rounded-lg shadow h-fit`}
+      ref={ref}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="shadow" style={{ filter }}>
         <ReactPlayer
           style={{ display: 'flex', maxWidth, maxHeight }}
           playing={playing}
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
index 3dec3689..e41e7ff7 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
@@ -407,6 +407,8 @@ function TableRowComponent(props: {
                 : safetySettings?.moderatorSafetyBlurLevel
                   ? (safetySettings.moderatorSafetyBlurLevel as BlurStrength)
                   : (2 as const),
+              grayscale: safetySettings?.moderatorSafetyGrayscale ?? false,
+              sepia: safetySettings?.moderatorSafetySepia ?? false,
               maxWidth: maxWidthVideo,
               maxHeight: maxHeightVideo,
               muted: safetySettings?.moderatorSafetyMuteVideo ?? true,
@@ -466,6 +468,8 @@ function TableRowComponent(props: {
                   : safetySettings?.moderatorSafetyBlurLevel
                     ? (safetySettings.moderatorSafetyBlurLevel as BlurStrength)
                     : (2 as const),
+                grayscale: safetySettings?.moderatorSafetyGrayscale ?? false,
+                sepia: safetySettings?.moderatorSafetySepia ?? false,
                 maxWidth: maxWidthVideo,
                 maxHeight: maxHeightVideo,
                 muted: safetySettings?.moderatorSafetyMuteVideo ?? true,
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECMediaViewer.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECMediaViewer.tsx
index 2bc08b83..c16f7d3f 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECMediaViewer.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECMediaViewer.tsx
@@ -11,6 +11,7 @@ import {
   colorSchemeFromPreferences,
   MODERATOR_SAFETY_COLOR_SCHEME_LABELS,
   MODERATOR_SAFETY_COLOR_SCHEMES,
+  moderatorSafetyFilterStyle,
   preferencesFromColorScheme,
   type ModeratorSafetyColorScheme,
 } from '@/models/safetySettings';
@@ -181,11 +182,15 @@ export default function NCMECMediaViewer(props: {
                 isInInspectedView
                   ? 'w-full max-h-[600px]'
                   : 'object-scale-down w-64 h-48'
-              } ${
-                shouldBlur
-                  ? BLUR_LEVELS[safetySettings.moderatorSafetyBlurLevel]
-                  : 0
-              } ${safetySettings.moderatorSafetyGrayscale ? 'grayscale' : ''} ${safetySettings.moderatorSafetySepia ? 'sepia' : ''}`}
+              }`}
+              style={{
+                filter: moderatorSafetyFilterStyle({
+                  blurLevel: safetySettings.moderatorSafetyBlurLevel,
+                  shouldBlur,
+                  grayscale: safetySettings.moderatorSafetyGrayscale,
+                  sepia: safetySettings.moderatorSafetySepia,
+                }),
+              }}
               alt=""
               src={mediaId.urlInfo.url}
               onError={(img) => {
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECReviewUser.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECReviewUser.tsx
index 726396ae..4fa0ddf7 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECReviewUser.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECReviewUser.tsx
@@ -1,8 +1,8 @@
+import { moderatorSafetyFilterStyle } from '@/models/safetySettings';
 import { isTypingInEditableElement } from '@/utils/misc';
 import { gql } from '@apollo/client';
 import { ItemIdentifier, MediaKind, TaggedScalar } from '@roostorg/coop-types';
 import { Button } from 'antd';
-import clsx from 'clsx';
 import pick from 'lodash/pick';
 import uniqBy from 'lodash/uniqBy';
 import uniqWith from 'lodash/uniqWith';
@@ -40,7 +40,7 @@ import ManualReviewJobContentBlurableVideo from '../../ManualReviewJobContentBlu
 import NCMECActions from './NCMECActions';
 import NCMECInspectedMedia from './NCMECInspectedMedia';
 import NCMECMediaGallery from './NCMECMediaGallery';
-import { BLUR_LEVELS, BlurStrength } from './NCMECMediaViewer';
+import { BlurStrength } from './NCMECMediaViewer';
 import NCMECPreviousMessages from './NCMECPreviousMessages';
 
 export type NCMECUrlInfo = {
@@ -600,30 +600,30 @@ export default function NCMECReviewUser(
               moderatorSafetySepia != null ? (
                 media.urlInfo.mediaType === 'IMAGE' ? (
                   <img
-                    className={clsx(
-                      'object-scale-down w-64 h-48 rounded-2xl',
-                      unblurAllMediaInConfirmation
-                        ? 'blur-0'
-                        : BLUR_LEVELS[moderatorSafetyBlurLevel as BlurStrength],
-                      moderatorSafetyGrayscale && 'grayscale',
-                      moderatorSafetySepia && 'sepia',
-                    )}
+                    className="object-scale-down w-64 h-48 rounded-2xl"
+                    style={{
+                      filter: moderatorSafetyFilterStyle({
+                        blurLevel: moderatorSafetyBlurLevel,
+                        shouldBlur: !unblurAllMediaInConfirmation,
+                        grayscale: moderatorSafetyGrayscale,
+                        sepia: moderatorSafetySepia,
+                      }),
+                    }}
                     alt=""
                     src={media.urlInfo.url}
                   />
                 ) : (
                   <ManualReviewJobContentBlurableVideo
                     url={media.urlInfo.url}
-                    className={clsx(
-                      'object-scale-down w-64 h-48 rounded-2xl',
-                      moderatorSafetyGrayscale && 'grayscale',
-                      moderatorSafetySepia && 'sepia',
-                    )}
+                    className="object-scale-down w-64 h-48 rounded-2xl"
                     options={{
                       shouldBlur:
                         !unblurAllMediaInConfirmation &&
                         moderatorSafetyBlurLevel > 0,
                       blurStrength: moderatorSafetyBlurLevel as BlurStrength,
+                      grayscale: moderatorSafetyGrayscale,
+                      sepia: moderatorSafetySepia,
+                      revealOnHover: false,
                       muted: moderatorSafetyMuteVideo,
                     }}
                   />
diff --git a/client/src/webpages/settings/AccountSettings.tsx b/client/src/webpages/settings/AccountSettings.tsx
index f2e9c270..d8fab57a 100644
--- a/client/src/webpages/settings/AccountSettings.tsx
+++ b/client/src/webpages/settings/AccountSettings.tsx
@@ -40,10 +40,10 @@ import {
 } from '../../graphql/generated';
 import GoldenRetrieverPuppies from '../../images/GoldenRetrieverPuppies.png';
 import {
-  colorSchemeClassName,
   colorSchemeFromPreferences,
   MODERATOR_SAFETY_COLOR_SCHEME_LABELS,
   MODERATOR_SAFETY_COLOR_SCHEMES,
+  moderatorSafetyFilterStyle,
   preferencesFromColorScheme,
   type ModeratorSafetyColorScheme,
 } from '../../models/safetySettings';
@@ -688,9 +688,15 @@ export default function AccountSettings() {
           </div>
 
           <img
-            className={`rounded object-scale-down w-72 h-44 ${
-              BLUR_LEVELS[safetySettings.moderatorSafetyBlurLevel] ?? 'blur-sm'
-            } ${colorSchemeClassName(colorSchemeFromPreferences(safetySettings))}`}
+            className="rounded object-scale-down w-72 h-44"
+            style={{
+              filter: moderatorSafetyFilterStyle({
+                blurLevel: safetySettings.moderatorSafetyBlurLevel,
+                shouldBlur: true,
+                grayscale: safetySettings.moderatorSafetyGrayscale,
+                sepia: safetySettings.moderatorSafetySepia,
+              }),
+            }}
             alt="puppies"
             src={GoldenRetrieverPuppies}
           />
diff --git a/client/src/webpages/settings/tabs/WellnessTab.tsx b/client/src/webpages/settings/tabs/WellnessTab.tsx
index dc738f5f..2d4be6d4 100644
--- a/client/src/webpages/settings/tabs/WellnessTab.tsx
+++ b/client/src/webpages/settings/tabs/WellnessTab.tsx
@@ -17,10 +17,10 @@ import {
 } from '@/graphql/generated';
 import GoldenRetrieverPuppies from '@/images/GoldenRetrieverPuppies.png';
 import {
-  colorSchemeClassName,
   colorSchemeFromPreferences,
   MODERATOR_SAFETY_COLOR_SCHEME_LABELS,
   MODERATOR_SAFETY_COLOR_SCHEMES,
+  moderatorSafetyFilterStyle,
   preferencesFromColorScheme,
   type ModeratorSafetyColorScheme,
 } from '@/models/safetySettings';
@@ -205,9 +205,15 @@ export default function WellnessTab() {
             </div>
           </div>
           <img
-            className={`rounded object-scale-down w-72 h-44 ${
-              BLUR_LEVELS[safetySettings.moderatorSafetyBlurLevel] ?? 'blur-sm'
-            } ${colorSchemeClassName(colorSchemeFromPreferences(safetySettings))}`}
+            className="rounded object-scale-down w-72 h-44"
+            style={{
+              filter: moderatorSafetyFilterStyle({
+                blurLevel: safetySettings.moderatorSafetyBlurLevel,
+                shouldBlur: true,
+                grayscale: safetySettings.moderatorSafetyGrayscale,
+                sepia: safetySettings.moderatorSafetySepia,
+              }),
+            }}
             alt="puppies"
             src={GoldenRetrieverPuppies}
           />
diff --git a/docs/user/review-console.md b/docs/user/review-console.md
index ed0ab865..38ac480e 100644
--- a/docs/user/review-console.md
+++ b/docs/user/review-console.md
@@ -54,7 +54,7 @@ Moderators can add internal comments to any job to communicate with teammates—
 
 Reviewer wellness and safety is a core concern in trust & safety work. Coop includes configurable settings to reduce the impact of reviewing harmful content. Coop supports:
 
-- **Blur**: Images and videos are blurred by default. Hover over an image to temporarily unblur it; move the cursor away to blur it again. Playing a video unblurs it. You can set the blur strength or disable blurring entirely.
+- **Blur**: Images and videos are blurred by default. Hover over an image or a video to temporarily unblur it; move the cursor away to blur it again. Playing a video does not unblur it, and media in NCMEC review stays blurred on hover. You can set the blur strength or disable blurring entirely.
 
 - **Grayscale**: Display media in grayscale instead of full color. Can reduce the emotional impact of graphic content.
 

From c9c3bdb2cacf99fb1d69e69e1dedded2dbc57942 Mon Sep 17 00:00:00 2001
From: Marco Filho <markimkr@gmail.com>
Date: Sat, 12 Sep 2026 01:20:25 -0300
Subject: [PATCH 2/2] [194] Add CHANGELOG entry

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b315c3b..9fcbdd0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ For more information about each release including git tags and artifacts, see [R
 
 ### Changed
 
+- Wellness color scheme now applies to videos in the review console, not only images ([#1186](https://github.com/roostorg/coop/pull/1186) by [@maarkN](https://github.com/maarkN))
 - Scylla is now optional via `ITEM_INVESTIGATION_AND_STRIKES_ENABLED` ([#918](https://github.com/roostorg/coop/pull/918) by [@sunilatlas](https://github.com/sunilatlas))
 - Settings "Other" tab renamed to "Partial Items" and its settings relocated ([#965](https://github.com/roostorg/coop/pull/965) by [@golden-fox07](https://github.com/golden-fox07))
 - Queue deletion is refused while routing rules still reference the queue ([#808](https://github.com/roostorg/coop/pull/808) by [@reitblatt](https://github.com/reitblatt))
@@ -30,6 +31,7 @@ For more information about each release including git tags and artifacts, see [R
 
 ### Fixed
 
+- Hovering a blurred video not unblurring it, unlike images ([#1186](https://github.com/roostorg/coop/pull/1186) by [@maarkN](https://github.com/maarkN), closes [#524](https://github.com/roostorg/coop/issues/524))
 - Rule history dropping other rules' versions when filtered by start date ([#1056](https://github.com/roostorg/coop/pull/1056) by [@juanmrad](https://github.com/juanmrad))
 - `RetryFailedNcmecDecisionsJob` ignoring `NCMEC_ENV` and retrying test decisions ([#928](https://github.com/roostorg/coop/pull/928) by [@taobojlen](https://github.com/taobojlen))
 - Queue creation failing with "name already exists" on the default reviewer selection ([#1069](https://github.com/roostorg/coop/pull/1069) by [@jess-upscrolled](https://github.com/jess-upscrolled), closes [#1074](https://github.com/roostorg/coop/issues/1074))