Fix TypeScript ref typings and lint errors

src/components/ControlsLayer.tsx

@@ -32,8 +32,8 @@ export const ControlsLayer: React.FC<ControlsLayerProps> = ({
     usePlayerContext()
   const [isPointerOver, setIsPointerOver] = useState(false)
   const [lastInteraction, setLastInteraction] = useState<number>(0)
-  const hideTimeoutRef = useRef<number>()
+  const hideTimeoutRef = useRef<number | undefined>(undefined)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
   const lastClickTimeRef = useRef<number>(0)
   const isMenuOpen =
     uiState.settingsOpen ||

src/components/controls/VolumeControl.tsx

@@ -6,7 +6,7 @@ import './VolumeControl.css'
 export const VolumeControl: React.FC = () => {
   const { videoState, setVolume, toggleMute } = usePlayerContext()
   const [showSlider, setShowSlider] = useState(false)
-  const timeoutRef = useRef<number>()
+  const timeoutRef = useRef<number | undefined>(undefined)
 
   const handleMouseEnter = useCallback(() => {
     if (timeoutRef.current) {

src/contexts/PlayerContext.tsx

@@ -33,8 +33,8 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   initialMuted = false,
   initialPlaybackRate = 1,
 }) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
+  const videoRef = useRef<HTMLVideoElement | null>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement | null>(null)
 
   const [videoState, setVideoState] = useState<VideoState>({
     playing: false,

src/hooks/useTouchGestures.ts

@@ -1,4 +1,4 @@
-import { useEffect, RefObject } from 'react'
+import { useEffect, MutableRefObject } from 'react'
 import { usePlayerContext } from '../contexts/PlayerContext'
 
 interface TouchData {
@@ -9,7 +9,7 @@ interface TouchData {
   tapCount: number
 }
 
-export const useTouchGestures = (containerRef: RefObject<HTMLDivElement>) => {
+export const useTouchGestures = (containerRef: MutableRefObject<HTMLDivElement | null>) => {
   const { videoState, togglePlay, seek, setVolume } = usePlayerContext()
 
   useEffect(() => {

src/types/index.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, RefObject } from 'react'
+import type { CSSProperties, MutableRefObject } from 'react'
 
 export interface SubtitleTrack {
   src: string
@@ -87,8 +87,8 @@ export interface PlayerContextValue {
   videoState: VideoState
   uiState: UIState
   settings: PlayerSettings
-  videoRef: RefObject<HTMLVideoElement>
+  videoRef: MutableRefObject<HTMLVideoElement | null>
-  containerRef: RefObject<HTMLDivElement>
+  containerRef: MutableRefObject<HTMLDivElement | null>
 
   // Video controls
   play: () => void
@@ -109,7 +109,7 @@ export interface PlayerContextValue {
   toggleSettings: () => void
 
   // Settings
-  setQuality: (quality: VideoQuality) => void
+  setQuality: (quality: VideoQuality | null) => void
   setSubtitle: (subtitle: SubtitleTrack | null) => void
   setAudioTrack: (audioTrack: AudioTrack | null) => void
 }

src/utils/hlsLoader.ts

@@ -46,12 +46,12 @@ export const loadHls = async (): Promise<any> => {
     // Try loading from npm package first
     const hlsModule = await import('hls.js')
     return hlsModule.default
-  } catch (npmError) {
+  } catch {
     try {
       // Fallback to CDN
       const Hls = await loadHlsFromCDN()
       return Hls
-    } catch (cdnError) {
+    } catch {
       throw new Error('Unable to load HLS.js library. HLS streaming is not available.')
     }
   }
@@ -99,7 +99,7 @@ export const getHlsAudioTracks = (hls: any): AudioTrack[] => {
     })
 
     return audioTracks
-  } catch (error) {
+  } catch {
     return []
   }
 }