Skip to main content

AVPlayerViewController for iOS/tvOS

The AVPlayerViewController plugin provides components to use the iOS/tvOS AVPlayerViewController.

Setup​

First, install the @castlabs/react-native-prestoplay-ios-avplayerviewcontroller package:

npm install @castlabs/react-native-prestoplay-ios-avplayerviewcontroller

Once the plugin is installed, enable it when initializing the SDK, by passing the AVPlayerViewControllerPlugin class. For example:

import {Sdk} from '@castlabs/react-native-prestoplay';
import {AVPlayerViewControllerPlugin} from '@castlabs/react-native-prestoplay-ios-avplayerviewcontroller';

Sdk.initialize({
  licenseKey: { /* Valid license here */},
  plugins: [AVPlayerViewControllerPlugin],
});

AVPlayerViewControllerProvider​

The AVPlayerViewControllerProvider is an alternative to PlayerProvider which wraps an iOS/tvOS AVPlayerViewController.

Unlike PlayerProvider, AVPlayerViewControllerProvider is coupled to a player view that is presented in fullscreen, and supports only a single instance at a time.

Child elements of AVPlayerViewControllerProvider are not visibly rendered (to the exception of AppleTvPlayerControls on tvOS)

Usage​

<AVPlayerViewControllerProvider
  playerConfig={playerConfiguration}
  onClose={()=>{showAnotherComponent()}}>
</AVPlayerViewControllerProvider>

tvOS​

When used on tvOS AVPlayerViewControllerProvider provides more functionality (unlike on iOS):

  • Metadata
  • Custom controls

Metadata​

The following properties of Metadata defined in PlayerConfiguration are rendered:

Reference: Apple Documentation.

Customize controls​

Using AppleTvPlayerControls custom controls can be added.

Usage example​

Create MyAppleTvControls component​

import {
  usePlayer,
  usePlayerState,
  PlayerState,
} from '@castlabs/react-native-prestoplay';
import {
  AppleTvPlayerControls,
  AppleTvTransportBarAction,
  AppleTvTransportBarPopupMenu,
  AppleTvTransportBarSubMenu,
  AppleTvTransportBarSubMenuItem,
  AppleTvInfoBarAction,
  AppleTvContextualAction,
} from '@castlabs/react-native-prestoplay-ios-avplayerviewcontroller';

export default function MyAppleTvControls() {
  const player = usePlayer();
  const playerState = usePlayerState();

  const [showAdvancedControls, setShowAdvancedControls] = useState(false);
  const [loop, setLoop] = useState(false);

  useEffect(() => {
    if (loop && playerState === PlayerState.Ended) {
      player?.replay();
    }
  }, [player, playerState, loop]);

  return (
    <AppleTvPlayerControls>
      <AppleTvTransportBarAction
        title="Rewind 10s"
        icon="rewind"
        state={false}
        onPress={() => {
          player.setPosition(Math.max(player.getPosition() - 10000, 0));
        }}
      />

      {showAdvancedControls && (
        <AppleTvTransportBarAction
          title="Forward 10s"
          icon="fast-forward"
          state={false}
          onPress={_value => {
            player.setPosition(player.getPosition() + 10000);
          }}
        />
      )}

      <AppleTvTransportBarPopupMenu title="Preferences" icon="settings">

        <AppleTvTransportBarAction
          title={showAdvancedControls ? 'Test Controls ON' : 'Test Controls OFF'}
          icon=""
          state={showAdvancedControls}
          onPress={() => {
            setShowAdvancedControls(prevValue => !prevValue);
          }}
        />

        <AppleTvTransportBarAction
          title={loop ? 'Loop ON' : 'Loop OFF'}
          icon={loop ? 'repeat' : 'arrow_right_to_line'}
          state={loop}
          onPress={() => {
            setLoop(prevLoop => !prevLoop);
          }}
        />

        <AppleTvTransportBarSubMenu
          title="Speed"
          icon="speed"
          defaultValue="1.0"
          onPress={(value: string) => {
            player.setPlaybackRate(toNumber(value));
          }}>
          <AppleTvTransportBarSubMenuItem title="Half" value="0.5" />
          <AppleTvTransportBarSubMenuItem title="Default" value="1.0" />
          <AppleTvTransportBarSubMenuItem title="Double" value="2.0" />
        </AppleTvTransportBarSubMenu>
      </AppleTvTransportBarPopupMenu>

      <AppleTvContextualAction
        title="Buy Product"
        icon="dollar"
        startAt={3}
        endAt={60}
        onPress={() => gotoBuyComponent()}
      />
    </AppleTvPlayerControls>
  );
}

Use MyAppleTvControls component defined above within AVPlayerViewControllerProvider​

function CustomizedApplePlayer({playerConfiguration}) {
  
  const {navigation} = useServices();
  const onBack = useCallback(() => {
    navigation.pop();
  }, [navigation]);

  return (
    <AVPlayerViewControllerProvider
      playerConfig={playerConfiguration}
      onClose={onBack}>
      <MyAppleTvControls />
    </AVPlayerViewControllerProvider>
  );

}