Hover unblurs a blurred video the same way as an image

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ## Review Console
 
+- Fixed hovering a blurred video not lifting blur the way images already do; the player now unblurs on hover without requiring play (#524)
 - Fixed a "Job submission failed" error that prevented reviewers from clearing jobs whose item had an unparseable `Created At` value; the decision now records instead of failing (#913)
 - Fixed a "Something Went Wrong" page when opening a job or queue whose `Created At` value was unparseable; the affected date now shows `Unknown` instead of blanking the view (#916)
 - Fixed "Oldest Task Age" on the MRT queues dashboard showing the newest job's age instead of the oldest (#909)

client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom/extend-expect';
+
+import ManualReviewJobContentBlurableVideo from '@/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo';
+
+vi.mock('react-player', () => ({
+  default: function MockPlayer() {
+    return <div data-testid="player" />;
+  },
+}));
+
+describe('ManualReviewJobContentBlurableVideo hover unblur', () => {
+  it('keeps play-to-unblur and adds group-hover unblur on a blurred video', () => {
+    const { container } = render(
+      <ManualReviewJobContentBlurableVideo
+        url="https://example.test/sample.mp4"
+        options={{ shouldBlur: true }}
+      />,
+    );
+
+    const wrapper = container.firstElementChild;
+    expect(wrapper?.className).toMatch(/\bgroup\b/);
+
+    const blurred = wrapper?.querySelector('.blur-sm');
+    expect(blurred).toBeTruthy();
+    expect(blurred?.className).toMatch(/group-hover:blur-none/);
+    expect(blurred?.className).not.toMatch(/\bblur-0\b/);
+  });
+});

client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableVideo.tsx

@@ -65,7 +65,10 @@ export default function ManualReviewJobContentBlurableVideo(props: {
   });
 
   return (
-    <div className={`${className} relative rounded-lg shadow h-fit`} ref={ref}>
+    <div
+      className={`${className} relative rounded-lg shadow h-fit group`}
+      ref={ref}
+    >
       <div
         className={`shadow ${
           shouldBlur
@@ -75,7 +78,7 @@ export default function ManualReviewJobContentBlurableVideo(props: {
                 ? 'blur-sm'
                 : 'blur-0'
             : 'blur-0'
-        }`}
+        } group-hover:blur-none`}
       >
         <ReactPlayer
           style={{ display: 'flex', maxWidth, maxHeight }}