ReactJS EPG ( Electronic Programme Guide ) Component

It makes use of standard HTML elements ( divs ) to render data

Background

Live Streaming web portals, STB and browsers on mobile devices requires some form of EPG ( Electronic Programme Guide) to render channels and schedules. This is optimized based on recommendations to force web browsers to promote this component to take adavantage of GPU for performance.

Components are rendered based on ems for responsiveness. It's easy to customize for mobile devices by applying media-queries to containers in which the EPG is rendered and set different font-sizes based on the breakpoints or form factors.

For issues/bugs, meanwhile I open source this library, please report any bugs to [email protected]

Future Release

• Support for paginated scrolling to include multiple days of EPG
• Render in chunks for better UX by reducing time to first meaningful paint / first contentful paint

Sample

import EPG from "reactjs-epg";

const getStartTime = (programme) => {
  const start = programme.startTime;
  const end = programme.endTime;
  return `${new Date(start).getHours()}:${new Date(start).getMinutes()}-${new Date(end).getHours()}:${new Date(end).getMinutes()}`;
};

const epgData = (chs) => {
  return chs.filter((ch) => {
    return schedules.some((schedule) => schedule.channelId === ch.channelID);
  });
};

export default function App() {
  const channels = epgData(channels.channels);
  const settings = {
    EPGClass: "epg",
    ChannelListClass: "channel-list",
    ChannelIconClass: "channel",
    ProgammeClass: "programme",
    TimeScaleClass: "time-scale",
    TimeScaleStampClass: "current-time",
    TimeScaleSeparatorClass: "separator",
    CurrentProgrammeClass: "current-program",
  };
  return (
    <div className="App">
      <div className="container">
        <EPG
          schedules={schedules}
          channels={channels}
          onSelected={(e, item) => console.log(e, item)}
          settings={settings}
          renderItem={(data) => {
            return (
              <>
                <div>{data.title}</div>
                <div>{getStartTime(data)}</div>
              </>
            );
          }}
        />
      </div>
    </div>
  );
}

Props

| Attributes | Type | Default | Description | | :------------------ | :--------: | :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------- | | schedules | array | null | Program Schedules to be rendered | | channels | array | null | Channels to be rendered | | onSelected | function | null | Callback when the user selects a program from the rendered list | | renderItem | function | null | Callback function to return JSX to be rendered for each programme | | settings | object | null | Settings to customize the EPG look and feel |

Note: Keep the channels and schedules of same length

API

settings

Current version supports providing customizable class names to modify the look and feel based on your requirement

  const settings = {
    EPGClass: "epg",
    ChannelListClass: "channel-list",
    ChannelIconClass: "channel",
    ProgammeClass: "programme",
    TimeScaleClass: "time-scale",
    TimeScaleStampClass: "current-time",
    TimeScaleSeparatorClass: "separator",
    CurrentProgrammeClass: "current-program",
  };

schedules

Schedule are programmes that is mapped against each channel rendered in a grid format

[
  {
      "channelId": "some id",
      "listings": [
       {
            "description": "description of programme 1",
            "endTime": 1600297200000,
            "startTime": 1600293600000,
            "title": "Titanic"
       },
       {
            "description":"description of programme 2",
            "endTime": 1600297200000,
            "startTime": 1600293600000,
            "title": "Jaws 2"
       },
      ]
  },
  {
      "channelId": "some id-2",
      "listings": [
       {
            "description": "description of programme 1",
            "endTime": 1600297200000,
            "startTime": 1600293600000,
            "title": "Hitman 2"
       },
       {
            "description": "description of programme 2",
        	"endTime": 1600297200000,
        	"startTime": 1600293600000,
            "title": "Spiderman"
       },
      ]
  }
]

channels

channels are list of tv channels that will be rendered vertically

[
    {
        "channelID": "channel-id mapped to schedule in list. ( refer schedules )",
        "channelImages": [{
            "url": "channel icon image url"
        }],
        "channelTitle": "My Live TV 21"
    },
    {
        "channelID": "channel-id mapped to schedule in list. ( refer schedules )",
        "channelImages": [{
            "url": "channel icon image url"
        }],
        "channelTitle": "Spider Live TV"
    },

]