useVideoRenditions()

useVideoRenditions(): VideoRendition[]

Returns the list of available video renditions (quality levels) for the currently active video track.

This hook provides a reactive way to observe updates to the player’s video track model and its available renditions. A rendition represents a specific combination of resolution, bitrate, and codec for a given track.

⚠️ Must be used within a PlayerProvider or AVPlayerViewControllerProvider component.

Returns

VideoRendition[]

{VideoRendition[]} An array of available VideoRendition for the active video track.

Behavior

• Updates automatically when the active video track changes (via the TrackModelChanged event).
• Initial value reflects the renditions of the current active video track.

Example

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import {
  usePlayer,
  useVideoRenditions,
  useAdaptiveVideoEnabled,
} from '@castlabs/react-native-prestoplay';

const AUTO_ID = 'auto';

export default function PlaybackQualitySelector() {
  const player = usePlayer();
  const renditions = useVideoRenditions();
  const adaptive = useAdaptiveVideoEnabled();
  const [selected, setSelected] = useState(AUTO_ID);

  useEffect(() => {
    if (adaptive) return setSelected(AUTO_ID);
    const active = renditions.find(r => r.active);
    if (active) setSelected(active.id);
  }, [adaptive, renditions]);

  const select = (id: string) => {
    setSelected(id);
    const manager = player.getTrackManager();
    if (id === AUTO_ID) manager.enableAdaptiveVideo();
    else {
      const rendition = renditions.find(r => r.id === id);
      if (rendition) manager.setVideoRendition(rendition);
    }
  };

  return (
    <View>
      <Text>Playback Quality</Text>
      <Button
        title={`Auto (Adaptive)${selected === AUTO_ID ? ' ✓' : ''}`}
        onPress={() => select(AUTO_ID)}
      />
      {renditions.map(r => (
        <Button
          key={r.id}
          title={`${r.width}x${r.height} (${Math.round(r.bitrate / 1000)} kbps)${
            selected === r.id ? ' ✓' : ''
          }`}
          onPress={() => select(r.id)}
        />
      ))}
    </View>
  );
}