Implement a Schedule in React with Planby component
If you are looking for a quick solution to implement your own schedule, timeline, EPG, live events, music events, then the Planby component is the right tool.
Hello readers!
Today, I would like to cover the basis of Online Tv and VOD web app platforms, which are recently getting really popular on the market, resulting in an increased demand for specific features such as Electronic Program Guide 🚀.
Short introduction
Planby is a component for a quick implementation of schedules, EPG, music events, timelines and many other needs. It uses a customed virtual view which allows you to operate on a big amount of data. The component has a simple API that you can easily integrate with other third-party UI libraries, and it’s theme is customizable to the needs of the application design.
The current version 0.2.0 includes several key functionalities that make Planby a fully multifunctional component that meets all project requirements.
Below is a list of its new functionalities:
· custom time ranges
· hour format 24h or 12h (AM / PM)
· custom width of an hour, e.g. 300px, etc.
· custom sidebar’s width
· custom event’s height
· custom UI of an event, sidebar and timeline elements. (Material UI, Chakra UI, Ant Design etc.)
What is EPG based Timeline?
EPG is a shortcut for Electronic Program Guide. It is commonly used in Online TV and VOD applications. In web development it is a new feature that is gaining popularity 🚀.
· It is a system that provides users with all available past, current and upcoming broadcast programs from a given signal provider.
· It allows you to get the current program for a given day and shows you the contents up to 7 days ahead.
· It includes channels sidebar, timeline and layout of the broadcast programs. Users can move fast through all the layout to see information about broadcast programs of their choice.
· It contains optional functions, such as the reminder option, recording scheduling, favorite channels list and display of the broadcasted programs’ details.
Description
Working for many years on Online TV and VOD web applications, I have realized that there aren’t good or bad solutions for EPG implementations. I would say that there are niche features for web development, which are more popular in Android TV applications. I have seen and analyzed a few websites which have implemented their own EPGs and realized that it is an interesting topic to get my hands on 😄.
The most significant thing about this type of feature is its performance, versus big data on the website. Applications struggle with several problems such as refreshing, moving, scrolling EPG, and interactions with the content. Sometimes, an app implements EPG in the form of a list that you can scroll on the Y axis, but for scrolling through the X axis, you must click on buttons on your left and right, which is tiring and not good UX 😕. Furthermore, sometimes many options of interaction with EPG, such as rating, choosing favorite channels, and RTL are not present on the website as they cause performance issues.
Another problem I often face is that the app is too frequently requesting data while I am scrolling the EPG. Keeping all programs without any optimization on the page can lead to terrible slowdowns of the application which eventually cause the browser to crash. The positioning of all programs in the layout seems simple but sometimes could also be problematic and take the form of blackouts or lack of content. The core point of EPG is that it should be fast. Overall, EPG for the web is a problematic subject.
Planby, the solution
This is where Planby comes to help 😍. The component is built from scratch, with React and Typescript, using a minimal number of resources. It uses a custom virtual view which allows you to operate on a big amount of data. It shows only the visible programs and channels to the user interface and positions all the elements according to timeline hours and assigned channels. If a resource has a blackouts program or no content in their EPG, there won’t be any problem because components can immediately fix that issue and calculate the positioning.
Planby has a simple interface and includes all the necessary features such as sidebar, timeline, layout, and live program refreshing. In addition, there is an optional feature allowing you to hide any element you don’t want to include in the layout. The component has a really simple API that allows you to implement your own items along with your preferences. You can use Planby’s style components to develop primary features or make custom styles in line with the chosen design. You can easily integrate with your features app like calendar, rating options, favorites, scroll, now buttons, recording scheduling, catch up content and any third-party UI libraries components. What is more, work is on the anvil to support RTL features! 🔥
Taking into consideration all the information mentioned above you can set your EPG fast and simply.
If you would like to get to know more, you can jump to Planby’s website to see some more examples, or you can read the documentation on GitHub repo. The package is available on npm basis.
Quick start
Install package from npm.
yarn add planby or npm install planbyUsage
import { useEpg, Epg, Layout } from 'planby';
const channels = React.useMemo(
() => [
{
logo: 'https://via.placeholder.com',
uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
...
},
],
[]
);
const epg = React.useMemo(
() => [
{
channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
description:
'Ut anim nisi consequat minim deserunt...',
id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
image: 'https://via.placeholder.com',
since: "2022-02-02T23:50:00",
till: "2022-02-02T00:55:00",
title: 'Title',
...
},
],
[]
);
const {
getEpgProps,
getLayoutProps
} = useEpg({
epg,
channels,
startDate: '2022/02/02', // or 2022-02-02T00:00:00
});
return (
<div>
<div style={{ height: '600px', width: '1200px' }}>
<Epg {...getEpgProps()}>
<Layout
{...getLayoutProps()}
/>
</Epg>
</div>
</div>
);
Declaring the dimension of the parent component can calculate and adjust the measurement of the component.
If you would like to set your custom time range you have to add time to startDate and endDate props.
const {
getEpgProps,
getLayoutProps,
...
} = useEpg({
epg,
channels,
startDate: '2022-02-02T10:00:00',
endDate: '2022-02-02T20:00:00',
width: 1200,
height: 600
});
return (
<div>
<Epg {...getEpgProps()}>
<Layout
{...getLayoutProps()}
/>
</Epg>
</div>If you would like you can declare your own Program item component or make custom styles in line with the chosen design.
import {
useEpg,
Epg,
Layout,
ProgramBox,
ProgramContent,
ProgramFlex,
ProgramStack,
ProgramTitle,
ProgramText,
ProgramImage,
useProgram,
Program,
ProgramItem
} from "planby";
const Item = ({ program,...rest }: ProgramItem) => {
const { styles, formatTime, isLive, isMinWidth } = useProgram({ program,...rest });
const { data } = program;
const { image, title, since, till } = data;
const sinceTime = formatTime(since);
const tillTime = formatTime(till);
return (
<ProgramBox width={styles.width} style={styles.position}>
<ProgramContent
width={styles.width}
isLive={isLive}
>
<ProgramFlex>
{isLive && isMinWidth && <ProgramImage src={image} alt="Preview" />}
<ProgramStack>
<ProgramTitle>{title}</ProgramTitle>
<ProgramText>
{sinceTime} - {tillTime}
</ProgramText>
</ProgramStack>
</ProgramFlex>
</ProgramContent>
</ProgramBox>
);
};
function App() {
...
const {
getEpgProps,
getLayoutProps,
} = useEpg({
epg,
channels,
startDate: '2022/02/02', // or 2022-02-02T00:00:00
});
return (
<div>
<div style={{ height: '600px', width: '1200px' }}>
<Epg {...getEpgProps()}>
<Layout
{...getLayoutProps()}
renderProgram={({ program,...rest }) => (
<Item key={program.data.id} program={program} {...rest} />
)}
/>
</Epg>
</div>
</div>
);
}
export default App;That’s the whole set up! 🚀
Summary
I hope you find this article interesting 😄. If you work with Online TV / VOD or your company is searching for an EPG, check out Planby and consider it as your final solution. 😄
