tvapps-epg-androidtv

    1.0.16 • Public • Published

    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

    • [x] 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:
        • [x] Support React Native
        • [x] Supports and directional controls for TVs
        • [x] Automatic directional controls handling with react-native-tvos
        • [x] Automatically scroll when using directional controls
        • [x] Support using a custom colour scheme
        • [x] Support callback function to get program focused
        • [x] Support slient load more programs by date
        • [x] Hooks for loading additional data when scrolling to the end of the loaded data
        • [x] 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:

    • [x] tvGuideWidth: Width of TV guide component, default Device Width screen size;// important!
    • [x] tvGuideHeight: Height of TV guide component, default = (3/4) * Device height screen size;// important!
    • [x] channeList: list channels width array data example data type Channel above ;// important!
    • [x] programList: list programs width array data example data type Program above;// important!
    • [x] currentDate: The date current display data TV Guide component;// important! support for load multiple days
    • [x] onDateChange: Functions call back when current date display changed : return Date // important!
    • [x] onProgramChange: Functions call back when current program focused changed : return Program // important!
    • [x] 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:

    • [x] timeLineHeaderHeight: Height time line header default = 50;
    • [x] numberOfChannelsDisplayed: Number channels display in TV Guide component, default = 4
    • [x] numberOfTimelineCellDisplayed: Number Time cell in time line header default 4;// equal 2 hours: 30 minutes per cell
    • [x] channelListWidth: Width list channels left of TV Guide component default = 200;
    • [x] numberOfFutureDays: Number Dates Can show in the future, default = 3;
    • [x] 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

    Install

    npm i tvapps-epg-androidtv

    DownloadsWeekly Downloads

    3

    Version

    1.0.16

    License

    ISC

    Unpacked Size

    1.08 MB

    Total Files

    44

    Last publish

    Collaborators

    • nexlesoft