EPG

​

EPG sample app

​

Update your package.json file

"dependencies": {
    // ...
    "@amazon-devices/kepler-ui-components": "^2.0.0",
}

​

EPG component usage and props

<EPG
    ref={epg}
    onScroll={({ row, timeMs }: EPGScrollEvent) => {
        // handler code here
    }}
    onTileFocus={({ payload, title }: EPGTileFocusEvent) => {
        // handler code here
    }}
    onTilePress={({ payload, title }: EPGTilePressEvent) => {
        // handler code here
    }}
    onMenu={({ payload, title }: EPGMenuEvent) => {
        // handler code here
    }}
    focusBorder={{
        enabled: true,
        color: '#E4E4E7',
    }}
    tileStyle={{
        backgroundColor: '#191E25',
        foregroundColor: '#E4E4E7',
        focusedForegroundColor: '#E4E4E7',
        elapsedBackgroundColor: '#3D3D3D',
        pendingBackgroundColor: '#191E25',
    }}
    logoStyle={{
        backgroundColor: '#FF0E25',
        width: 340,
    }}
/>

​

Customize the timeline using the timelineStyle prop

• Progress bar: The red highlighted part of the timeline that indicates how much time has progressed since the start time of the EPG.
• Playhead: The visual indicator that marks the current time. The image for playhead must be located in the assets/images folder.

TimelineStyle {
  progressBar?: {
    hidden?: boolean;
  };
  playhead?: {
    hidden?: boolean;
    source?: "string"
    height?: number;
    width?: number;
    verticalOffset?: number;
  };
}

​

Favorite channels functionality

​

Example: Favorite icon

epg.current?.updateFavorite(channelId, true);

​

Example: Add favorite icon image

<EPG ...
    favoriteStyle={{
        imageOn: 'small_heart.png',
    }}
...

​

Imperative methods

​

Example: Obtain a reference to call imperative methods

import { EPG, EPGActions } from '@amazon-devices/kepler-ui-components';

const epg = useRef<EPGActions>(null);
...
<EPG
  ref={epg}
  ...
 />
 ...
 epg.current?.updateGridStartTime(newGridStartTime);

​

resetData method

​

Parameters

• channelData: an array where each element is data for a different channel. Each object should have information on the identifiers of the channel (ID) and an array of program data. See the Data Model for more details on the structure of this data.
• page (optional): a boolean used to inform the EPG component about page-related information that is not directly part of the channel data. page contains two optional subobjects: startTimeMs and endTimeMs.
  • startTimeMs (optional): a number used to define the start time of a queried page. Use only with endTimeMs. When the start and end time are provided with the page info, any program information gaps show as Unavailable.
  • endTimeMs (optional): a number used to define the end time of a queried page. Use only with startTimeMs. When the start and end time are provided with the page info, any program information gaps show as Unavailable.

​

updateData method

​

Parameters

• channelData: an array where each element is data for a different channel. Each object should have information on the identifiers of the channel (id ) and an array of program data. See the Data Model for more details on the structure of this data.
• page (optional): a boolean used to inform the EPG about page-related information that is not directly part of the channel data. page contains two optional subobjects: startTimeMs and endTimeMs.
  • startTimeMs (optional): a number used to define the start time of a queried page. Use only with endTimeMs. When the start and end time are provided with the page info, any program information gaps show as Unavailable.
  • endTimeMs (optional): a number used to define the end time of a queried page. Use only with startTimeMs. When the start and end time are provided with the page info, any program information gaps show as Unavailable.

​

Description

1. Check to see if data for that channel already exists in the EPG data. Channels are uniquely identified by the id property. If there is a channel with the same id in the EPG data, then the channel that is being added already exists. a. If the channel exists: Access the data record of that channel b. If the channel doesn’t exist: Create a new record for that channel
2. Add the programs from input channel data to the EPG data. For each program, the EPG checks if data already exists for that program. Programs are identified by their channel and startTime. If there is a program with the same startTime as the target program, then the program that is being added already exists.
   • If program data already exists: The new program data overwrites the old.
   • If program data doesn’t exist: Check to see if the time span/duration of of the new program overlaps with any existing programs. a. If there is no overlap between the new program and existing programs for this channel, the new program is added to the EPG at the appropriate time. b. If startTime of the new program conflicts with an existing program’s endTime, the existing program is shortened so that the new program is added at the correct startTime . In other words if then existingProgram is updated so that existingProgram.endTime = newProgram.startTime. c. If endTime of the new program is greater than the startTime of the next chronological program, then this new program’s duration is shortened.

​

Example

1. App queries for timeline grid data in 2-dimensional blocks. In this example, a ‘page’ of data returned is 10 channels’ program data for 12 hours.
2. App queries for and receives the data for the first 10 channels, starting from 2:00pm. We’ll call this Page-0-0. This data is sent to channelData. Internally, new channels and programs are inserted into the data store.
3. Next, the app queries for the next 10 channels, also from 2:00pm, Page-1-0 and sends that to updateData, which internally inserts new channels and programs.
4. The user scrolls a bit to the right, the app receives an onScroll event and determines that it is necessary to query the next page to the right. Lets say this page is the first 10 channels, but it starts 12 hours after 2:00pm, at 2:00am. Page-0-1 is sent to updateData, and internally, the programs are appended to existing channels in the data store.

​

updateFavorite

​

updateGridStartTime(gridStartTimeMs: number)

​

Example

​

Data model

​

Example: Program

interface Program {
  programId: string;
  title: string;
  startTime: number;
  endTime: number;
  shortDescription?: string;
  extras?: any;
}

​

Example: Channel

interface Channel {
    id: string;
    displayName: string;
    groupId: string;
    groupName: string;
    logoUrl: string;
    programs: Program[];
    extras?: any;
}

​

Event callbacks

​

onScroll: (event: EPGScrollEvent) => void;

​

Example: Payload

{
   "timeMs":1724131800000,
   "row":1
}

​

onTileFocus: (event: EPGTileFocusEvent) => void;

​

Example: Payload

EPGFocusEventPayload {
     program: Program;
     channel: Channel;
     nextProgramTitle?: string;
}

​

onTilePress: (event: EPGTilePressEvent) => void;

​

Example: Payload

EPGPressEventPayload {
    program: Program;
    channel: Channel
}

​

onMenu: (event: EPGMenuEvent) => void;

​

Example: Payload

EPGMenuEventPayload {
    program: Program;
    channel: Channel
}

​

onMetricEmit: (event: EPGMetricsEmitEvent) => void;

​

Example: Payload

EPGMetricsEmitEventPayload {
  durationMs: number;
}

​

Custom font support

<EPG
    ...
    tileStyle={{
        fontFamilyPrimary: 'Merriweather-Light',
        fontFamilySecondary: 'Merriweather-Bold',
    }}
/>