EPG

​

EPG示例应用

​

更新package.json文件

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

​

EPG组件用法和属性

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

​

使用timelineStyle属性自定义时间线

• 进度条：以红色突出显示的时间线部分，表示自EPG开始以来已经过去的时长。
• 播放头：标记当前时间的视觉指示器。播放头的图像必须位于assets/images文件夹中。

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

​

收藏频道功能

​

示例：收藏图标

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

​

示例：添加收藏图标图像

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

​

命令式方法

​

示例：获取调用命令式方法的引用

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

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

​

resetData方法

​

参数

• channelData：一个数组，其中每个元素都是不同频道的数据。每个对象都应包含频道标识符（即ID）相关信息和一个节目数据数组。有关此数据的结构的更多详细信息，请参阅数据模型。
• page（可选）：一个布尔值，用于通知EPG组件与页面相关的信息，但这些信息不是频道数据的直接组成部分。page包含两个可选的子对象：startTimeMs和endTimeMs。
  • startTimeMs（可选）：用于定义查询页面开始时间的数字。仅与endTimeMs一起使用。当开始和结束时间与页面信息一起提供时，任何节目信息差都会显示为Unavailable（不可用）。
  • endTimeMs（可选）：用于定义查询页面结束时间的数字。仅与startTimeMs一起使用。当开始和结束时间与页面信息一起提供时，任何节目信息差都会显示为Unavailable（不可用）。

​

updateData方法

​

参数

• channelData：一个数组，其中每个元素都是不同频道的数据。每个对象都应包含频道标识符（即id）相关信息和一个节目数据数组。有关此数据的结构的更多详细信息，请参阅数据模型。
• page（可选）：一个布尔值，用于通知EPG与页面相关的信息，但这些信息不是频道数据的直接组成部分。page包含两个可选的子对象：startTimeMs和endTimeMs。
  • startTimeMs（可选）：用于定义查询页面开始时间的数字。仅与endTimeMs一起使用。当开始和结束时间与页面信息一起提供时，任何节目信息差都会显示为Unavailable（不可用）。
  • endTimeMs（可选）：用于定义查询页面结束时间的数字。仅与startTimeMs一起使用。当开始和结束时间与页面信息一起提供时，任何节目信息差都会显示为Unavailable（不可用）。

​

描述

1. 检查频道的数据是否已存在于EPG数据中。频道由id属性进行唯一标识。如果EPG数据中存在相同id的频道，则表示正在添加的频道已存在。 a. 如果频道存在：访问该频道的数据记录 b. 如果该频道不存在：为该频道创建新记录
2. 将输入频道数据中的节目添加到EPG数据。 对于每个节目，EPG都会检查该节目的数据是否已经存在。系统通过所属频道和startTime对节目进行标识。如果某个节目的startTime和目标节目相同，则说明待添加的节目已经存在。
   • 如果节目数据已经存在：新节目数据会覆盖旧节目数据。
   • 如果节目数据不存在：检查新节目的时间跨度/时间长度是否与任何现有节目重叠。 a. 如果该频道的新节目与现有节目之间没有重叠，则会将新节目添加到EPG中的相应时间。 b. 如果新节目的startTime与现有节目的endTime冲突，则会缩短现有节目，以便将新节目添加到恰当的startTime。换句话说，如果newProgram.startTime < existingProgram.endTime，则更新existingProgram，以便让existingProgram.endTime = newProgram.startTime。 c. 如果新节目的endTime大于按时间顺序排列的下一个节目的startTime，则该新节目的时间长度会缩短。

​

示例

1. 应用查询二维数据块中的时间线网格数据。在此示例中，返回的一“页”数据包含了10个频道12小时的节目数据。
2. 应用进行查询并收到从下午2:00开始前10个频道的数据。我们称之为Page-0-0。这些数据被发送到channelData。在内部，新频道和新节目被插入到数据存储中。
3. 接下来，应用查询也是从下午2:00开始的接下来10个频道，收到Page-1-0，然后将其发送到updateData，后者在内部插入新频道和新节目。
4. 用户向右滚动一点，应用收到一个onScroll事件，并确定有必要向右查询下一页。假设这一页包含了前10个频道，但开始时间是下午2点过后12小时，即凌晨2点。Page-0-1被发送到updateData，然后在内部，这些节目被附加到数据存储中的现有频道。

​

updateFavorite

​

updateGridStartTime(gridStartTimeMs: number)

​

示例

​

数据模型

​

示例：节目

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

​

示例：频道

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

​

事件回调

​

onScroll: (event: EPGScrollEvent) => void;

​

示例：有效负载

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

​

onTileFocus: (event: EPGTileFocusEvent) => void;

​

示例：有效负载

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

​

onTilePress: (event: EPGTilePressEvent) => void;

​

示例：有效负载

EPGPressEventPayload {
    program: Program;
    channel: Channel
}

​

onMenu: (event: EPGMenuEvent) => void;

​

示例：有效负载

EPGMenuEventPayload {
    program: Program;
    channel: Channel
}

​

onMetricEmit: (event: EPGMetricsEmitEvent) => void;

​

示例：有效负载

EPGMetricsEmitEventPayload {
  durationMs: number;
}

​

自定义字体支持

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