Add quality selection

Author: adimiz1

example/ActiveLayerLayoutDemo.tsx

@@ -190,6 +190,21 @@ export const ActiveLayerLayoutDemo: React.FC<ActiveLayerLayoutDemoProps> = ({ on
     }
   };
 
+  // Example 6: Quality Selection Demo
+  // For HLS videos, quality levels are automatically detected from the manifest
+  // No need to specify quality levels manually - they will be dynamically loaded
+  const qualitySelectionDemo = {
+    quality: {
+      enabled: true,
+      defaultQuality: 'auto',
+      button: {
+        position: ButtonPosition.SE,
+        color: '#9C27B0',
+        size: 28,
+      }
+    }
+  };
+
   const getVideoLayerProps = () => {
     switch (currentExample) {
       case 'horizontal':
@@ -208,6 +223,8 @@ export const ActiveLayerLayoutDemo: React.FC<ActiveLayerLayoutDemoProps> = ({ on
         return subtitlesButtonDemo;
       case 'playbackSpeed':
         return playbackSpeedDemo;
+      case 'quality':
+        return qualitySelectionDemo;
       default:
         return {};
     }
@@ -218,7 +235,8 @@ export const ActiveLayerLayoutDemo: React.FC<ActiveLayerLayoutDemoProps> = ({ on
     { id: 'vertical', title: 'Vertical Layout', description: 'Stacked button arrangements for enhanced accessibility' },
     { id: 'mixed', title: 'Hybrid Layouts', description: 'Strategic combination of horizontal and vertical groupings' },
     { id: 'subtitles', title: 'Subtitle Controls', description: 'Professional multi-language subtitle management' },
-    { id: 'playbackSpeed', title: 'Speed Controls', description: 'Granular playback speed adjustment for optimal viewing' }
+    { id: 'playbackSpeed', title: 'Speed Controls', description: 'Granular playback speed adjustment for optimal viewing' },
+    { id: 'quality', title: 'Quality Selection', description: 'Adaptive bitrate streaming with manual quality selection' }
   ];
 
   return (
@@ -288,7 +306,7 @@ export const ActiveLayerLayoutDemo: React.FC<ActiveLayerLayoutDemoProps> = ({ on
         <View style={styles.videoWrapper}>
           <CLDVideoLayer
             cldVideo={createMyVideoObject()}
-            videoUrl={currentExample === 'subtitles' ? 'https://res.cloudinary.com/demo/video/upload/sp_sd:subtitles_((code_en-US;file_outdoors.vtt);(code_es;file_outdoors-es.vtt))/sea_turtle.m3u8' : undefined}
+            videoUrl={(currentExample === 'subtitles' || currentExample === 'quality') ? 'https://res.cloudinary.com/demo/video/upload/sp_sd:subtitles_((code_en-US;file_outdoors.vtt);(code_es;file_outdoors-es.vtt))/sea_turtle.m3u8' : undefined}
             autoPlay={false}
             muted={true}
             showCenterPlayButton={true}
@@ -362,7 +380,6 @@ const styles = StyleSheet.create({
     borderRadius: 25,
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.2)',
-    backdropFilter: 'blur(10px)',
   },
   backButtonText: {
     color: '#ffffff',
@@ -458,7 +475,6 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.1)',
-    backdropFilter: 'blur(10px)',
   },
   featureTitle: {
     fontSize: 18,

src/widgets/video/layer/CLDVideoLayer.tsx

@@ -3,8 +3,8 @@ import { View, TouchableOpacity, Text, PanResponder, ActivityIndicator, Animated
 
 import { Ionicons } from '@expo/vector-icons';
 import AdvancedVideo from '../../../AdvancedVideo';
-import { CLDVideoLayerProps, ButtonPosition, ButtonLayoutDirection, SubtitleOption } from './types';
-import { formatTime, handleDefaultShare, isHLSVideo, parseHLSManifest, getVideoUrl } from './utils';
+import { CLDVideoLayerProps, ButtonPosition, ButtonLayoutDirection, SubtitleOption, QualityOption } from './types';
+import { formatTime, handleDefaultShare, isHLSVideo, parseHLSManifest, parseHLSQualityLevels, getVideoUrl } from './utils';
 import { SubtitleCue, fetchSubtitleFile, findActiveSubtitle } from './utils/subtitleUtils';
 import { styles, getResponsiveStyles } from './styles';
 import { TopControls, CenterControls, BottomControls, CustomButton, SubtitleDisplay } from './components';
@@ -27,6 +27,9 @@ interface CLDVideoLayerState {
   availableSubtitleTracks: SubtitleOption[];
   subtitleCues: SubtitleCue[];
   activeSubtitleText: string | null;
+  currentQuality: string;
+  isQualityMenuVisible: boolean;
+  availableQualityLevels: QualityOption[];
 }
 
 export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoLayerState> {
@@ -65,6 +68,9 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
       availableSubtitleTracks: [],
       subtitleCues: [],
       activeSubtitleText: null,
+      currentQuality: props.quality?.defaultQuality || 'auto',
+      isQualityMenuVisible: false,
+      availableQualityLevels: [],
     };
 
     this.panResponder = PanResponder.create({
@@ -149,9 +155,10 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
       this.startAutoHideTimer();
     }
 
-    // Parse HLS manifest for subtitle tracks if video is HLS
+    // Parse HLS manifest for subtitle tracks and quality levels if video is HLS
     setTimeout(() => {
       this.parseHLSSubtitlesIfNeeded();
+      this.parseHLSQualityLevelsIfNeeded();
     }, 100);
 
     // Try multiple approaches for orientation detection
@@ -168,9 +175,10 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
   }
 
   componentDidUpdate(prevProps: CLDVideoLayerProps) {
-    // Re-parse subtitles if video URL changed
+    // Re-parse subtitles and quality levels if video URL changed
     if (prevProps.videoUrl !== this.props.videoUrl) {
       this.parseHLSSubtitlesIfNeeded();
+      this.parseHLSQualityLevelsIfNeeded();
     }
   }
 
@@ -363,6 +371,50 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
     this.setState({ isSubtitlesMenuVisible: !this.state.isSubtitlesMenuVisible });
   };
 
+  handleQualityChange = async (qualityValue: string) => {
+    this.setState({ currentQuality: qualityValue });
+    
+    if (qualityValue === 'auto') {
+      // Reset to original URL for automatic quality selection
+      const originalUrl = getVideoUrl(this.props.videoUrl, this.props.cldVideo);
+      if (this.videoRef.current) {
+        try {
+          await this.videoRef.current.setStatusAsync({
+            uri: originalUrl,
+            shouldPlay: this.state.status?.shouldPlay || false,
+            positionMillis: this.state.status?.positionMillis || 0
+          });
+        } catch (error) {
+          console.warn('Failed to switch to auto quality:', error);
+        }
+      }
+      return;
+    }
+    
+    // Find the selected quality level
+    const selectedQuality = this.state.availableQualityLevels.find(
+      level => level.value === qualityValue
+    );
+    
+    if (selectedQuality?.url && this.videoRef.current) {
+      try {
+        await this.videoRef.current.setStatusAsync({
+          uri: selectedQuality.url,
+          shouldPlay: this.state.status?.shouldPlay || false,
+          positionMillis: this.state.status?.positionMillis || 0
+        });
+      } catch (error) {
+        console.warn('Failed to switch to quality level:', qualityValue, error);
+      }
+    } else {
+      console.warn('No URL found for quality level:', qualityValue);
+    }
+  };
+
+  handleToggleQualityMenu = () => {
+    this.setState({ isQualityMenuVisible: !this.state.isQualityMenuVisible });
+  };
+
   /**
    * Parse HLS manifest to get available subtitle tracks if video is HLS
    */
@@ -387,6 +439,30 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
     }
   };
 
+  /**
+   * Parse HLS manifest to get available quality levels if video is HLS
+   */
+  parseHLSQualityLevelsIfNeeded = async () => {
+    const videoUrl = getVideoUrl(this.props.videoUrl, this.props.cldVideo);
+    
+    if (isHLSVideo(videoUrl)) {
+      try {
+        const qualityLevels = await parseHLSQualityLevels(videoUrl);
+        
+        // Always include "Auto" option
+        const availableQualityLevels: QualityOption[] = [
+          { value: 'auto', label: 'Auto' },
+          ...qualityLevels
+        ];
+        
+        this.setState({ availableQualityLevels });
+      } catch (error) {
+        console.warn('Failed to parse HLS quality levels:', error);
+        this.setState({ availableQualityLevels: [{ value: 'auto', label: 'Auto' }] });
+      }
+    }
+  };
+
   /**
    * Update active subtitle text based on current video time
    */
@@ -470,10 +546,11 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
       fullScreen,
       playbackSpeed,
       subtitles,
+      quality,
       buttonGroups = [],
       titleLeftOffset
     } = this.props;
-    const { status, isLandscape, isFullScreen, availableSubtitleTracks } = this.state;
+    const { status, isLandscape, isFullScreen, availableSubtitleTracks, availableQualityLevels } = this.state;
     const progress = this.getProgress();
     const currentPosition = this.getCurrentPosition();
     const isVideoLoaded = status?.isLoaded === true;
@@ -489,6 +566,14 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
       defaultLanguage: subtitles?.defaultLanguage || 'off'
     } : subtitles;
 
+    // Create dynamic quality config based on HLS availability
+    const dynamicQuality = isHLSVideo(effectiveVideoUrl) && quality?.enabled ? {
+      ...quality,
+      enabled: true,
+      qualities: availableQualityLevels.length > 0 ? availableQualityLevels : [{ value: 'auto', label: 'Auto' }],
+      defaultQuality: quality?.defaultQuality || 'auto'
+    } : quality;
+
     // Get responsive styles based on current orientation
     const responsiveStyles = getResponsiveStyles(isLandscape);
 
@@ -579,6 +664,11 @@ export class CLDVideoLayer extends React.Component<CLDVideoLayerProps, CLDVideoL
               onSubtitleChange={this.handleSubtitleChange}
               isSubtitlesMenuVisible={this.state.isSubtitlesMenuVisible}
               onToggleSubtitlesMenu={this.handleToggleSubtitlesMenu}
+              quality={dynamicQuality}
+              currentQuality={this.state.currentQuality}
+              onQualityChange={this.handleQualityChange}
+              isQualityMenuVisible={this.state.isQualityMenuVisible}
+              onToggleQualityMenu={this.handleToggleQualityMenu}
               buttonGroups={buttonGroups}
             />
           </View>

src/widgets/video/layer/components/BottomControls.tsx

@@ -7,6 +7,7 @@ import { ICON_SIZES } from '../constants';
 import { Seekbar } from './Seekbar';
 import { PlaybackSpeedButton } from './PlaybackSpeedButton';
 import { SubtitlesButton } from './SubtitlesButton';
+import { QualityButton } from './QualityButton';
 
 export const BottomControls: React.FC<BottomControlsProps> = ({
   status,
@@ -31,6 +32,11 @@ export const BottomControls: React.FC<BottomControlsProps> = ({
   onSubtitleChange,
   isSubtitlesMenuVisible,
   onToggleSubtitlesMenu,
+  quality,
+  currentQuality,
+  onQualityChange,
+  isQualityMenuVisible,
+  onToggleQualityMenu,
 }) => {
   const responsiveStyles = getResponsiveStyles(isLandscape);
   const progress = getProgress();
@@ -70,6 +76,14 @@ export const BottomControls: React.FC<BottomControlsProps> = ({
       </View>
 
       <View style={responsiveStyles.bottomRightControls}>
+        <QualityButton
+          quality={quality}
+          currentQuality={currentQuality}
+          onQualityChange={onQualityChange}
+          isLandscape={isLandscape}
+          isMenuVisible={isQualityMenuVisible}
+          onToggleMenu={onToggleQualityMenu}
+        />
         <SubtitlesButton
           subtitles={subtitles}
           currentSubtitle={currentSubtitle}