THEOplayer / react-native-theoplayer-ui

A React Native UI for @theoplayer/react-native
https://www.theoplayer.com/docs/open-video-ui/react-native/
6 stars 1 forks source link

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

Open ChristiaanScheermeijer opened 1 year ago

ChristiaanScheermeijer commented 1 year ago

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 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 commented 2 months ago

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