tvapps-epg-androidtv

TV guide library for Android TV

Usage no npm install needed!

<script type="module">
  import tvappsEpgAndroidtv from 'https://cdn.skypack.dev/tvapps-epg-androidtv';
</script>

README

EPG Component for React Native applications.

React Native Android TV Guide

An Android TV Guide programs React Native applications.

Required system: react-native: "npm:react-native-tvos"

Default UI screenshoot

  • EPG component
    • Material design similar to Android TV's Live Channels app
    • Supports extended data fields (channel logos, programme series/episode information, programme images, etc)
    • Supports custom actions for programmes (e.g. Open in BBC iPlayer)
    • Renderer support:
      • Support React Native
      • Supports and directional controls for TVs
      • Automatic directional controls handling with react-native-tvos
      • Automatically scroll when using directional controls
      • Support using a custom colour scheme
      • Support callback function to get program focused
      • Support slient load more programs by date
      • Hooks for loading additional data when scrolling to the end of the loaded data
      • Shows the current and next programme and it's start time

Install:

Note: You must be  import two libraries use the  react-native-fast-image and react-native-uuid.

yarn add tvapps-epg-androidtv
yarn add react-native-uuid
yarn add react-native-fast-image

Data

Data is provided in formats defined.

    channel = {
        imageSrc: string,
        id: number,
        externalChannelId: string,
        name: string,
        url: string,
        description: string,
        category: string,
        extrafields: array,
        number: number,
        npvrEnabled: bool,
        isNpvrActivated: bool,
        isCatchupActivated: bool,
        catchupEnabled: bool,
        favouriteEnabled: bool,
        isFavouriteActivated: bool,
        purchaseEnabled: bool,
        isPurchaseActivated: bool,
    };
//default value
    channel =  {
        imageSrc: null,
        id: -1,
        externalChannelId: '',
        name: '',
        url: '',
        description: '',
        category: '',
        extrafields: [],
        number: -1,
        npvrEnabled: false,
        isNpvrActivated: false,
        isCatchupActivated: false,
        catchupEnabled: false,
        favouriteEnabled: false,
        isFavouriteActivated: false,
        purchaseEnabled: false,
        isPurchaseActivated: false,
    }
};
//example value
    channel =  {
        imageSrc: 'https://votvapps-ng-test.tvaas.com/RTEFacade/images/attachments/TV2.png',
        id: 1895201,
        externalChannelId: 'LuxeTV',
        name: 'Luxe TV',
        url: '',
        description: '',
        category: '',
        extrafields: [
            {
                responseElementType: "Extrafield",
                name: "static-playback",
                value: "false"
            }
        ],
        number: 12,
        npvrEnabled: false,
        isNpvrActivated: false,
        isCatchupActivated: false,
        catchupEnabled: false,
        favouriteEnabled: false,
        isFavouriteActivated: false,
        purchaseEnabled: false,
        isPurchaseActivated: false,
    }
};
const channeList =  [
    {
        ...channel
    },
    {
        ...channel   
    },
    ...
];


//PROGRAM DATA FORMART
    program = {
        id:  number,
        name:  string,
        shortName:  string,
        serisName:  string,
        description:  string,
        prName:  string,
        startDate:  number,//(timestamp)
        endDate:  number,//(timestamp)
        startDateAdjusted:  number,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  number,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referanceProgramId:  string,
        flags:  number,
        seriesSeasion:  string,
        responseElementType:  string,
        price:  number,
        imageSrc: string,
        genres:  array,
        prLevel:  number,
    } 
// default value 
    program = {
        id:  -1,
        name:  '',
        shortName:  '',
        serisName:  '',
        description:  '',
        prName:  '',
        startDate:  0,//(timestamp)
        endDate:  0,//(timestamp)
        startDateAdjusted:  0,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  0,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referanceProgramId:  '',
        flags:  0,
        seriesSeasion:  '',
        responseElementType:  '',
        price:  0,
        imageSrc: '',
        genres:  [],
        prLevel:  0,
    }  
//example data
 program = {
        id:  12966715,
        name:  'Los milagros de la rosa',
        shortName:  '',
        serisName:  '',
        description:  '',
        imageSrc: 'https://votvapps-ng-test.tvaas.com/RTEFacade/images/12055411.jpg',
        prName:  'APT',
        startDate:  1641769200000,//(timestamp)
        endDate:  1641776400000,//(timestamp)
        startDateAdjusted:  1641769200000,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  1641776400000,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referanceProgramId:  '2466657917202201091800120',
        flags:  0,
        seriesSeasion:  '',
        responseElementType:  'Program',
        price:  0.0,
        genres:  [],
        prLevel:  0,
    }



const programList  = [ 
    {
        channelExternalId:'France24Fr2',
        programs: [program,...]
    },
    {
        channelExternalId:'ArteLoop',
        programs: [program,...]
    },
    {
        channelExternalId:'Arte',
        programs: [program,...]
    },
    ....
];

Data example

Data example

Import to your TVapp:

Import TV Guide component with default properties below:

  • tvGuideWidth: Width of TV guide component, default Device Width screen size;// important!
  • tvGuideHeight: Height of TV guide component, default = (3/4) * Device height screen size;// important!
  • channeList: list channels width array data example data type Channel above ;// important!
  • programList: list programs width array data example data type Program above;// important!
  • currentDate: The date current display data TV Guide component;// important! support for load multiple days
  • onDateChange: Functions call back when current date display changed : return Date // important!
  • onProgramChange: Functions call back when current program focused changed : return Program // important!
  • onLoadingMoreProgramsByTime: Functions call back when focus to index programs need to load next day progrograms or previos day
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "tvapps-epg-androidtv";

export default function doc() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 3 / 4}
                channeList={listChannels}
                programList={programsCurrentDisplay}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                onDateChange={onDateChange}
                onProgramChange={onProgramChange}
                onLoadingMoreProgramsByTime={onLoadingMoreProgramsByTime}
            />
        </View>
    )
}

Custom UI screenshoot

Custom Configs layout TV Guide component:

You can change layout:

  • timeLineHeaderHeight: Height time line header default = 50;
  • numberOfChannelsDisplayed: Number channels display in TV Guide component, default = 4
  • numberOfTimelineCellDisplayed: Number Time cell in time line header default 4;// equal 2 hours: 30 minutes per cell
  • channelListWidth: Width list channels left of TV Guide component default = 200;
  • numberOfFutureDays: Number Dates Can show in the future, default = 3;
  • numberOfPastDays: Number Dates Can show in the past, default = 3;
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "tvapps-epg-androidtv";

export default function ReactTVEPGScreen() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 7 / 10}
                timeLineHeaderHeight={50}
                numberOfChannelsDisplayed={4}
                numberOfTimelineCellDisplayed={6}
                channelListWidth={150}
                channeList={listChannels}
                programList={programsCurrentDisplay}
                numberOfFutureDays={3}
                numberOfPastDays={2}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                onDateChange={onDateChange}
                onProgramChange={onProgramChange}
                onLoadingMoreProgramsByTime={onLoadingMoreProgramsByTime}
            />
        </View>
    )
}

Custom Styles background color, text color...

You can custom UI TV Guide components with styles:

import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "tvapps-epg-androidtv";

export default function Homescreen() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 7 / 10}
                programList={programsCurrentDisplay}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                programStylesColors={{
                    activeProgramBackgroundColor: '#463cb4',
                    currentProgramBacgroundColor: '#FFFFFF',
                    pastProgramBackgroundColor: '#6f42c1',
                    futureProgramBackgroundColor: '#463cb4',
                    activeProgramTextColor: '#FFFFFF',
                    currrentProgramTextColor: '#000000',
                    pastProgramTextColor: '#ffffff',
                    futureProgramTextColor: '#FFFFFF',
                }}
                programContainerStyles={{ borderRadius: 3 }}
                timeIndicatorStyles={{ backgroundColor: '#c34164', width: 5, borderRadius: 10 }}
                onDateChange={onDateChange}
                onProgramChange={onProgramChange}
                onLoadingMoreProgramsByTime={onLoadingMoreProgramsByTime}
            />
        </View>
    )
}

Project Demo import component here:

React native tvapps-epg-androidTV demo