Fix lint issues and improve type safety

src/contexts/PlayerContext.tsx

@@ -1,6 +1,9 @@
 import React, { createContext, useContext, useRef, useState, useCallback } from 'react'
 import type { PlayerContextValue, VideoState, UIState, PlayerSettings, AudioTrack } from '../types'
 
+type SelectedQuality = PlayerSettings['quality']
+type SelectedSubtitle = PlayerSettings['subtitle']
+
 interface PlayerContextType extends PlayerContextValue {
   setVideoState: React.Dispatch<React.SetStateAction<VideoState>>
   setUIState: React.Dispatch<React.SetStateAction<UIState>>
@@ -8,6 +11,7 @@ interface PlayerContextType extends PlayerContextValue {
 
 const PlayerContext = createContext<PlayerContextType | null>(null)
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const usePlayerContext = () => {
   const context = useContext(PlayerContext)
   if (!context) {
@@ -143,11 +147,11 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   }, [])
 
   // Settings
-  const setQuality = useCallback((quality: typeof settings.quality) => {
+  const setQuality = useCallback((quality: SelectedQuality) => {
     setSettings((prev) => ({ ...prev, quality }))
   }, [])
 
-  const setSubtitle = useCallback((subtitle: typeof settings.subtitle) => {
+  const setSubtitle = useCallback((subtitle: SelectedSubtitle) => {
     setSettings((prev) => ({ ...prev, subtitle }))
   }, [])
 

src/hooks/useKeyboardShortcuts.ts

@@ -92,11 +92,12 @@ export const useKeyboardShortcuts = (enabled: boolean = true) => {
         case '6':
         case '7':
         case '8':
-        case '9':
+        case '9': {
           e.preventDefault()
-          const percent = parseInt(e.key) / 10
+          const percent = parseInt(e.key, 10) / 10
           seek(videoState.duration * percent)
           break
+        }
 
         default:
           break

src/types/index.ts

@@ -1,3 +1,5 @@
+import type { CSSProperties, RefObject } from 'react'
+
 export interface SubtitleTrack {
   src: string
   lang: string
@@ -39,7 +41,7 @@ export interface VideoPlayerProps {
   keyboardShortcuts?: boolean
   pictureInPicture?: boolean
   className?: string
-  style?: React.CSSProperties
+  style?: CSSProperties
   onPlay?: () => void
   onPause?: () => void
   onEnded?: () => void
@@ -85,8 +87,8 @@ export interface PlayerContextValue {
   videoState: VideoState
   uiState: UIState
   settings: PlayerSettings
-  videoRef: React.RefObject<HTMLVideoElement>
-  containerRef: React.RefObject<HTMLDivElement>
+  videoRef: RefObject<HTMLVideoElement>
+  containerRef: RefObject<HTMLDivElement>
 
   // Video controls
   play: () => void

src/utils/hlsLoader.ts

@@ -57,7 +57,7 @@ export const loadHls = async (): Promise<any> => {
       const Hls = await loadHlsFromCDN()
       return Hls
     } catch (cdnError) {
-      console.error('❌ [HLS Loader] Failed to load hls.js from both npm and CDN')
+      console.error('❌ [HLS Loader] Failed to load hls.js from both npm and CDN', cdnError)
       throw new Error('Unable to load HLS.js library. HLS streaming is not available.')
     }
   }