Implement Video Player Hotkey Controls (#266)

* feat: implement comprehensive video player hotkeys

Add full keyboard shortcut support for react-player video component:

- Space/K: Play/Pause toggle
- M: Toggle mute
- F: Toggle fullscreen
- Arrow keys: Seek (left/right 5s) and volume (up/down 5%)
- J/L: Seek backward/forward 10 seconds (YouTube style)
- 0-9: Jump to video percentages (0=start, 5=50%, 9=90%)
- Home/End: Jump to beginning/end of video
- </> (Shift+comma/period): Adjust playback speed by 0.25x

Fixed commented-out arrow key seek functionality by using proper
ReactPlayer API methods (seekTo() instead of direct currentTime).

All hotkeys are disabled when typing in input fields to prevent
conflicts with text entry.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: prevent native controls from interfering with arrow key seeking

Use event capture phase and stopImmediatePropagation to intercept
keyboard events before they reach the native HTML5 video controls.
This fixes the issue where arrow keys would seek 30+ seconds instead
of the intended 5 seconds due to both handlers responding.

Changes:
- Add { capture: true } to addEventListener for capture phase handling
- Add stopImmediatePropagation() to all hotkey cases
- Add explanatory comment about capture phase usage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: intercept keyboard events on wrapper element to prevent native controls interference

Changed approach to fix arrow key double-seeking issue:
- Added wrapperRef to Box container element
- Made wrapper focusable with tabindex="0" and auto-focus on mount
- Attached keyboard event listeners to both wrapper (capture phase) and document
- This intercepts events before they reach the native video element

The wrapper-level capture ensures our custom hotkeys fully override
the native HTML5 video keyboard shortcuts, preventing the 30s jump
when only 5s was intended.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix

* f

* test: fix video player unit tests for new hotkey implementation

Updated ReactPlayer mock to include methods required by the new
keyboard shortcut implementation:

- Added mockGetCurrentTime(): Returns 10 seconds (mock current time)
- Added mockGetDuration(): Returns 100 seconds (mock duration)
- Added mockSeekTo(): Mock function for seeking operations
- Added wrapper element mock for fullscreen functionality

These methods are now called in the keyboard event handler to get
the current playback position before seeking, which was causing
tests to fail with "getCurrentTime is not a function" errors.

All 12 tests now pass successfully.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: prevent duplicate handlePlay/handlePause calls on keyboard toggle

Previously, pressing Space or K to toggle play/pause would call
handlePlay()/handlePause() twice:
1. Manual call in keyboard handler
2. Automatic call via ReactPlayer's onPlay/onPause events

This caused duplicate progress tracking updates and other side effects.

Changes:
- Removed manual handlePlay()/handlePause() calls from keyboard handler
- Now just toggles `playing` state and lets ReactPlayer's event
  handlers (onPlay/onPause) trigger the callbacks once
- Updated useEffect dependencies to remove unused handlePlay/handlePause
- Added explanatory comment about ReactPlayer handling side effects

All tests still pass (12/12).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: improve accessibility and scope keyboard event listeners

Accessibility improvements:
- Made wrapper focusable declaratively with tabIndex={0} in JSX
- Removed imperative auto-focus that steals focus from user on mount
- Restored visible focus indicator (2px primary color outline)
- Used :focus-visible to hide outline for mouse clicks

Event listener scoping improvements:
- Removed always-active document-level keyboard listener
- Scoped keyboard shortcuts to wrapper element (requires focus)
- Added fullscreenchange handler to dynamically add/remove document
  listener when entering/exiting fullscreen
- Replaced stopImmediatePropagation() with stopPropagation()

Benefits:
- Better accessibility for screen readers and keyboard users
- More predictable behavior (shortcuts require focus outside fullscreen)
- No conflicts with other page elements
- Cleaner architecture (declarative vs imperative)
- Global shortcuts only in fullscreen when it makes UX sense

Test updates:
- Updated all keyboard tests to fire events on wrapper instead of document
- Added data-testid="video-player-wrapper" for testing
- All 12 tests passing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: shinaBR2

apps/watch/src/routeTree.gen.ts

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 // @ts-nocheck
 
 // noinspection JSUnusedGlobalSymbols
@@ -27,19 +29,19 @@ const HistoryLazyRoute = HistoryLazyImport.update({
   id: '/history',
   path: '/history',
   getParentRoute: () => rootRoute,
-} as const).lazy(() => import('./routes/history.lazy').then((d) => d.Route));
+} as any).lazy(() => import('./routes/history.lazy').then((d) => d.Route));
 
 const IndexLazyRoute = IndexLazyImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
-} as const).lazy(() => import('./routes/index.lazy').then((d) => d.Route));
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route));
 
 const VideoSlugIdLazyRoute = VideoSlugIdLazyImport.update({
   id: '/video/$slug/$id',
   path: '/video/$slug/$id',
   getParentRoute: () => rootRoute,
-} as const).lazy(() =>
+} as any).lazy(() =>
   import('./routes/video.$slug.$id.lazy').then((d) => d.Route),
 );
 
@@ -48,7 +50,7 @@ const PlaylistSlugPlaylistIdVideoIdLazyRoute =
     id: '/playlist/$slug/$playlistId/$videoId',
     path: '/playlist/$slug/$playlistId/$videoId',
     getParentRoute: () => rootRoute,
-  } as const).lazy(() =>
+  } as any).lazy(() =>
     import('./routes/playlist.$slug.$playlistId.$videoId.lazy').then(
       (d) => d.Route,
     ),

packages/ui/src/watch/videos/video-player/index.test.tsx

@@ -6,6 +6,10 @@ import { VideoPlayer } from './index';
 
 // Mock ReactPlayer
 const mockReactPlayerRef = vi.fn();
+const mockGetCurrentTime = vi.fn(() => 10); // Mock current time at 10 seconds
+const mockGetDuration = vi.fn(() => 100); // Mock duration at 100 seconds
+const mockSeekTo = vi.fn();
+
 vi.mock('react-player', () => ({
   __esModule: true,
   default: React.forwardRef(({ url, onReady, ...props }, ref) => {
@@ -16,6 +20,10 @@ vi.mock('react-player', () => ({
       ref({
         paused: false,
         requestFullscreen: vi.fn(),
+        getCurrentTime: mockGetCurrentTime,
+        getDuration: mockGetDuration,
+        seekTo: mockSeekTo,
+        wrapper: document.createElement('div'), // Mock wrapper element for fullscreen
       });
     }
     return React.createElement(
@@ -191,69 +199,78 @@ describe('VideoPlayer', () => {
 describe('VideoPlayer keyboard hotkeys', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    // Reset mock implementations for each test
+    mockGetCurrentTime.mockReturnValue(10);
+    mockGetDuration.mockReturnValue(100);
   });
 
   it('should handle keyboard events for play/pause (k key)', async () => {
     render(<VideoPlayer video={mockVideo} />);
-    await screen.findByTestId('mock-react-player');
+    const wrapper = await screen.findByTestId('video-player-wrapper');
 
-    // Simulate 'k' key press
-    const kEvent = new KeyboardEvent('keydown', { key: 'k' });
+    // Simulate 'k' key press on wrapper (scoped listener)
+    const kEvent = new KeyboardEvent('keydown', { key: 'k', bubbles: true });
     Object.defineProperty(kEvent, 'preventDefault', { value: vi.fn() });
 
-    fireEvent(document, kEvent);
+    fireEvent(wrapper, kEvent);
 
     expect(kEvent.preventDefault).toHaveBeenCalled();
   });
 
   it('should handle keyboard events for mute (m key)', async () => {
     render(<VideoPlayer video={mockVideo} />);
-    await screen.findByTestId('mock-react-player');
+    const wrapper = await screen.findByTestId('video-player-wrapper');
 
-    // Simulate 'm' key press
-    const mEvent = new KeyboardEvent('keydown', { key: 'm' });
+    // Simulate 'm' key press on wrapper (scoped listener)
+    const mEvent = new KeyboardEvent('keydown', { key: 'm', bubbles: true });
     Object.defineProperty(mEvent, 'preventDefault', { value: vi.fn() });
 
-    fireEvent(document, mEvent);
+    fireEvent(wrapper, mEvent);
 
     expect(mEvent.preventDefault).toHaveBeenCalled();
   });
 
   it('should handle keyboard events for volume up (ArrowUp key)', async () => {
     render(<VideoPlayer video={mockVideo} />);
-    await screen.findByTestId('mock-react-player');
+    const wrapper = await screen.findByTestId('video-player-wrapper');
 
-    // Simulate 'ArrowUp' key press
-    const upEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+    // Simulate 'ArrowUp' key press on wrapper (scoped listener)
+    const upEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowUp',
+      bubbles: true,
+    });
     Object.defineProperty(upEvent, 'preventDefault', { value: vi.fn() });
 
-    fireEvent(document, upEvent);
+    fireEvent(wrapper, upEvent);
 
     expect(upEvent.preventDefault).toHaveBeenCalled();
   });
 
   it('should handle keyboard events for volume down (ArrowDown key)', async () => {
     render(<VideoPlayer video={mockVideo} />);
-    await screen.findByTestId('mock-react-player');
+    const wrapper = await screen.findByTestId('video-player-wrapper');
 
-    // Simulate 'ArrowDown' key press
-    const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+    // Simulate 'ArrowDown' key press on wrapper (scoped listener)
+    const downEvent = new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+      bubbles: true,
+    });
     Object.defineProperty(downEvent, 'preventDefault', { value: vi.fn() });
 
-    fireEvent(document, downEvent);
+    fireEvent(wrapper, downEvent);
 
     expect(downEvent.preventDefault).toHaveBeenCalled();
   });
 
   it('should handle keyboard events for fullscreen (f key)', async () => {
     render(<VideoPlayer video={mockVideo} />);
-    await screen.findByTestId('mock-react-player');
+    const wrapper = await screen.findByTestId('video-player-wrapper');
 
-    // Simulate 'f' key press
-    const fEvent = new KeyboardEvent('keydown', { key: 'f' });
+    // Simulate 'f' key press on wrapper (scoped listener)
+    const fEvent = new KeyboardEvent('keydown', { key: 'f', bubbles: true });
     Object.defineProperty(fEvent, 'preventDefault', { value: vi.fn() });
 
-    fireEvent(document, fEvent);
+    fireEvent(wrapper, fEvent);
 
     expect(fEvent.preventDefault).toHaveBeenCalled();
   });