nexle-tvguide-lib/README.md

TV guide library for Android TV

React Native Android TVGuide
===

An Android TV Guide programs React Native applications.

![Default UI screen](assets/screenshots/tvguide_demo_custom.png)

![Custom styles screen](assets/screenshots/tvguidedemo_default.png)

- [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] React Native
        - Supports and directional controls for TVs
    - TODO:
        - [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 tim

Data
---

Data is provided in formats defined.

```ts
export interface Channel {
  id: number;
  externalChannelId: string;
  description?: string;
  number: number;
  name: string;
  assest: string;
  url?: string;
  category?:string
}

const channeList: Channel[] = [
    // ...
];

export interface Program {
  id: number;
  name: string;
  shortName: string;
  serisName?: string;
  description?: string;
  prName: string;
  startDate: Date;//timestamp
  endDate: Date;//timestamp
  referanceProgramId: string;
  flags: number;
  seriesSeasion?: string;
  responseElementType: string;
  price: number
}
const programList: Program[] = [
    // ...
];
```
### Import to your app:
---

Import TVGuide 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 TVGuide component;// important! support for load multiple days
 - [x] onDateChanged: Functions call back when current date display changed : return Date // important!
 - [x] onProgramFocusChange: Functions call back when current program focused changed : return Program // important!
 - [x] onSilentLoadMorePrograms: Functions call back when focus to index programs need to load next day progrograms or previos day 

```tsx
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "nexle-tvguide-lib";

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}
                onDateChanged={onDateChanged}
                onProgramFocusChange={onProgramFocusChange}
                onSilentLoadMorePrograms={onSilentLoadMorePrograms}
            />
        </View>
    )
}
```

### Custom Configs layout TVGuide component:
---

You can change layout:

 - [x] timeLineHeaderHeight: Height time line header default = 50;
 - [x] numberShowChannel: Number channels display in TVGuide component, default = 4
 - [x] numberShowTimeLine: Number Time cell in time line header default 4;// equal 2 hours: 30 minutes per cell
 - [x] widthChannelList: Width list channels left of TV Guide component default = 200;
 - [x] numberDatesFuture: Number Dates Can show in the future, default = 3;
 - [x] numberDatesPast: Number Dates Can show in the past, default = 3;

```tsx
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "nexle-tvguide-lib";

export default function doc() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 7 / 10}
                timeLineHeaderHeight={50}
                numberShowChannel={4}
                numberShowTimeLine={6}
                widthChannelList={150}
                channeList={listChannels}
                programList={programsCurrentDisplay}
                numberDatesFuture={3}
                numberDatesPast={2}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                onDateChanged={onDateChanged}
                onProgramFocusChange={onProgramFocusChange}
                onSilentLoadMorePrograms={onSilentLoadMorePrograms}
            />
        </View>
    )
}
```

### Custom Styles background color, text color...
---

You can custom UI TV Guide components with styles:

```tsx
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "nexle-tvguide-lib";

export default function doc() {
    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: '#fcfcfc',
                    nowTodayProgramBackgroundColor: '#289959',
                    pastProgramBackgroundColor: '#c4c1b5',
                    futureProgramBackgroundColor: '#993328',
                    activeProgramTextColor: '#0ac92a',
                    nowTodayProgramTextColor: '#0a3dc9',
                    pastProgramTextColor: 'grey',
                    futureProgramTextColor: 'white',

                }}
                programContainerStyles={{ borderRadius: 3 }}
                timeIndicatorStyles={{ backgroundColor: '#a6c90a', width: 5, borderRadius: 10 }}
                onDateChanged={onDateChanged}
                onProgramFocusChange={onProgramFocusChange}
                onSilentLoadMorePrograms={onSilentLoadMorePrograms}
            />
        </View>
    )
}
```