feat: add resolution selection to settings

src/components/ControlsLayer.tsx

@@ -12,7 +12,7 @@ import { CenterPlayButton } from './controls/CenterPlayButton'
 import { SettingsMenu } from './menus/SettingsMenu'
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts'
 import { useTouchGestures } from '../hooks/useTouchGestures'
-import type { SubtitleTrack, AudioTrack } from '../types'
+import type { SubtitleTrack, AudioTrack, VideoQuality } from '../types'
 import './ControlsLayer.css'
 
 interface ControlsLayerProps {
@@ -20,6 +20,7 @@ interface ControlsLayerProps {
   pictureInPicture?: boolean
   subtitles?: SubtitleTrack[]
   audioTracks?: AudioTrack[]
+  qualities?: VideoQuality[]
 }
 
 export const ControlsLayer: React.FC<ControlsLayerProps> = ({
@@ -27,6 +28,7 @@ export const ControlsLayer: React.FC<ControlsLayerProps> = ({
   pictureInPicture = true,
   subtitles = [],
   audioTracks = [],
+  qualities = [],
 }) => {
   const { videoState, uiState, togglePlay, toggleFullscreen, showControls, hideControls } =
     usePlayerContext()
@@ -223,7 +225,7 @@ export const ControlsLayer: React.FC<ControlsLayerProps> = ({
           <div className="controls-right">
             <div style={{ position: 'relative' }}>
               <SettingsButton />
-              <SettingsMenu subtitles={subtitles} audioTracks={audioTracks} />
+              <SettingsMenu subtitles={subtitles} audioTracks={audioTracks} qualities={qualities} />
             </div>
             {pictureInPicture && <PIPButton />}
             <FullscreenButton />