[194] Unblur videos on hover and centralize the wellness filter

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))

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();
+  });
+});

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;
+}

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();
+  });
+});

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?.();