Fix fullscreen controls and refresh lint setup

src/components/VideoPlayer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react'
-import { PlayerProvider } from '../contexts/PlayerContext'
+import { PlayerProvider, usePlayerContext } from '../contexts/PlayerContext'
 import { VideoElement } from './VideoElement'
 import { ControlsLayer } from './ControlsLayer'
 import type { VideoPlayerProps, AudioTrack } from '../types'
@@ -14,6 +14,69 @@ if (!polyfillsInitialized) {
   polyfillsInitialized = true
 }
 
+const VideoPlayerContent: React.FC<
+  VideoPlayerProps & {
+    audioTracks: AudioTrack[]
+    onAudioTracksLoadedInternal: (tracks: AudioTrack[]) => void
+  }
+> = ({
+  src,
+  poster,
+  autoplay = false,
+  loop = false,
+  muted = false,
+  controls = true,
+  subtitles = [],
+  keyboardShortcuts = true,
+  pictureInPicture = true,
+  className = '',
+  style,
+  onPlay,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  onVolumeChange,
+  onError,
+  onLoadedMetadata,
+  onSeeking,
+  onSeeked,
+  audioTracks,
+  onAudioTracksLoadedInternal,
+}) => {
+  const { containerRef } = usePlayerContext()
+
+  return (
+    <div ref={containerRef} className={`video-player ${className}`} style={style}>
+      <VideoElement
+        src={src}
+        poster={poster}
+        autoplay={autoplay}
+        loop={loop}
+        muted={muted}
+        subtitles={subtitles}
+        onPlay={onPlay}
+        onPause={onPause}
+        onEnded={onEnded}
+        onTimeUpdate={onTimeUpdate}
+        onVolumeChange={onVolumeChange}
+        onError={onError}
+        onLoadedMetadata={onLoadedMetadata}
+        onSeeking={onSeeking}
+        onSeeked={onSeeked}
+        onAudioTracksLoaded={onAudioTracksLoadedInternal}
+      />
+      {controls && (
+        <ControlsLayer
+          keyboardShortcuts={keyboardShortcuts}
+          pictureInPicture={pictureInPicture}
+          subtitles={subtitles}
+          audioTracks={audioTracks}
+        />
+      )}
+    </div>
+  )
+}
+
 export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   src,
   poster,
@@ -56,34 +119,30 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
 
   return (
     <PlayerProvider initialMuted={muted}>
-      <div className={`video-player ${className}`} style={style}>
-        <VideoElement
-          src={src}
-          poster={poster}
-          autoplay={autoplay}
-          loop={loop}
-          muted={muted}
-          subtitles={subtitles}
-          onPlay={onPlay}
-          onPause={onPause}
-          onEnded={onEnded}
-          onTimeUpdate={onTimeUpdate}
-          onVolumeChange={onVolumeChange}
-          onError={onError}
-          onLoadedMetadata={onLoadedMetadata}
-          onSeeking={onSeeking}
-          onSeeked={onSeeked}
-          onAudioTracksLoaded={handleAudioTracksLoaded}
-        />
-        {controls && (
-          <ControlsLayer
-            keyboardShortcuts={keyboardShortcuts}
-            pictureInPicture={pictureInPicture}
-            subtitles={subtitles}
-            audioTracks={audioTracks}
-          />
-        )}
-      </div>
+      <VideoPlayerContent
+        src={src}
+        poster={poster}
+        autoplay={autoplay}
+        loop={loop}
+        muted={muted}
+        controls={controls}
+        subtitles={subtitles}
+        keyboardShortcuts={keyboardShortcuts}
+        pictureInPicture={pictureInPicture}
+        className={className}
+        style={style}
+        onPlay={onPlay}
+        onPause={onPause}
+        onEnded={onEnded}
+        onTimeUpdate={onTimeUpdate}
+        onVolumeChange={onVolumeChange}
+        onError={onError}
+        onLoadedMetadata={onLoadedMetadata}
+        onSeeking={onSeeking}
+        onSeeked={onSeeked}
+        audioTracks={audioTracks}
+        onAudioTracksLoadedInternal={handleAudioTracksLoaded}
+      />
     </PlayerProvider>
   )
 }