Add docs for using this package on Android TV and Fire TV

[ChristiaanScheermeijer]

We're trying to use the RN Theoplayer UI package for an Android TV app, but I'm missing documentation on how this package can be used for TV devices.

After a quick test, I ran into the following problems:

• The react-native-google-cast library is also required for Google TV / Android TV
• The UI doesn't show/hide as expected when using the remote
• The slider (SeekBar) is not working correctly with the remote
• The button focus state is not clear

The readme states that this package supports Android TV / Fire TV, but I think this is invalid (or I'm doing something wrong).

This is the code I'm using:

import React, { useState } from 'react';
import { View } from 'react-native';
import { PlayerConfiguration, SourceDescription, PlayerEventType, THEOplayer, THEOplayerView } from 'react-native-theoplayer';
import {
  CenteredControlBar,
  CenteredDelayedActivityIndicator,
  ControlBar,
  DEFAULT_THEOPLAYER_THEME,
  FullscreenButton,
  MuteButton,
  PlayButton,
  SeekBar,
  SkipButton,
  Spacer,
  TimeLabel,
  UiContainer,
} from '@theoplayer/react-native-ui';

type Props = {
  uri: string;
}

const VideoPlayer: React.FC<Props> = ({ uri
 }) => {
  const [player, setPlayer] = useState<THEOplayer | undefined>(undefined);

  const source: SourceDescription = {
    sources: [
      {
        src: uri,
        type: 'application/x-mpegurl',
      },
    ],
  };

  const onReady = (player: THEOplayer) => {
    setPlayer(player);

    player.autoplay = true;
    player.source = source;
    player.addEventListener(PlayerEventType.ERROR, console.log);
  };

  return (
    <View style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}>
      <THEOplayerView config={playerConfig} onPlayerReady={onReady}>
        {player !== undefined && (
          <UiContainer
            theme={DEFAULT_THEOPLAYER_THEME}
            player={player}
            behind={<CenteredDelayedActivityIndicator size={50} />}
            center={<CenteredControlBar left={<SkipButton skip={-10} />} middle={<PlayButton />} right={<SkipButton skip={30} />} />}
            bottom={
              <>
                <ControlBar>
                  <SeekBar />
                </ControlBar>
                <ControlBar>
                  <MuteButton />
                  <TimeLabel showDuration={true} />
                  <Spacer />
                  <FullscreenButton />
                </ControlBar>
              </>
            }
          />
        )}
      </THEOplayerView>
    </View>
  );
};

[tvanlaerhoven]

@ChristiaanScheermeijer you are right, CTV platforms are still under development; the docs have been updated. Thank you!