feat: add resolution selection to settings

src/components/VideoPlayer.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react'
 import { PlayerProvider, usePlayerContext } from '../contexts/PlayerContext'
 import { VideoElement } from './VideoElement'
 import { ControlsLayer } from './ControlsLayer'
-import type { VideoPlayerProps, AudioTrack } from '../types'
+import type { VideoPlayerProps, AudioTrack, VideoQuality } from '../types'
 import { initializePolyfills } from '../utils/polyfills'
 import '../styles/variables.css'
 import './VideoPlayer.css'
@@ -18,6 +18,8 @@ const VideoPlayerContent: React.FC<
   VideoPlayerProps & {
     audioTracks: AudioTrack[]
     onAudioTracksLoadedInternal: (tracks: AudioTrack[]) => void
+    qualities: VideoQuality[]
+    onQualityLevelsLoadedInternal: (qualities: VideoQuality[]) => void
   }
 > = ({
   src,
@@ -42,6 +44,8 @@ const VideoPlayerContent: React.FC<
   onSeeked,
   audioTracks,
   onAudioTracksLoadedInternal,
+  qualities,
+  onQualityLevelsLoadedInternal,
 }) => {
   const { containerRef } = usePlayerContext()
 
@@ -64,6 +68,7 @@ const VideoPlayerContent: React.FC<
         onSeeking={onSeeking}
         onSeeked={onSeeked}
         onAudioTracksLoaded={onAudioTracksLoadedInternal}
+        onQualityLevelsLoaded={onQualityLevelsLoadedInternal}
       />
       {controls && (
         <ControlsLayer
@@ -71,6 +76,7 @@ const VideoPlayerContent: React.FC<
           pictureInPicture={pictureInPicture}
           subtitles={subtitles}
           audioTracks={audioTracks}
+          qualities={qualities}
         />
       )}
     </div>
@@ -101,6 +107,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   onSeeked,
 }) => {
   const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([])
+  const [qualities, setQualities] = useState<VideoQuality[]>([])
 
   // Apply theme CSS variables
   useEffect(() => {
@@ -117,6 +124,10 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     setAudioTracks(tracks)
   }, [])
 
+  const handleQualityLevelsLoaded = useCallback((levels: VideoQuality[]) => {
+    setQualities(levels)
+  }, [])
+
   return (
     <PlayerProvider initialMuted={muted}>
       <VideoPlayerContent
@@ -142,6 +153,8 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
         onSeeked={onSeeked}
         audioTracks={audioTracks}
         onAudioTracksLoadedInternal={handleAudioTracksLoaded}
+        qualities={qualities}
+        onQualityLevelsLoadedInternal={handleQualityLevelsLoaded}
       />
     </PlayerProvider>
   )