Description

Planby is a React based component for a quick implementation of Epg, schedules, music events, timelines and many more ideas. It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design

Getting Started

Installation

yarn

yarn add planby

npm install planby

Usage

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,
  onScrollToNow,
  onScrollLeft,
  onScrollRight,
} = 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>
);

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
 startDate: '2022/02/02', // or 2022-02-02T00:00:00
  width: 1200,
  height: 600
});

return (
  <div>
     <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
  </div>

API

useEpg

Options

Available options in useEpg

Property	Type	Status	Description
`channels`	`array`	required	Array with channels data
`epg`	`array`	required	Array with epg data
`width`	`number`	optional	Epg width
`height`	`number`	optional	Epg height
`sidebarWidth`	`number`	optional	Width of the sidebar with channels
`startDate`	`string` / `Date`	optional	Date format `2022/02/02` or `2022-02-02T00:00:00`
`isSidebar`	`boolean`	optional	Show/hide sidebar
`isTimeline`	`boolean`	optional	Show/hide timeline
`isLine`	`boolean`	optional	Show/hide line
`theme`	`object`	optional	Object with theme schema

Note about width and height props

Without declaring the width and length properties, the component takes the dimensions of the parent element.

Instance Properties

Properties returned from useEpg

Property	Type	Description
`scrollY`	`number`	Current scroll y value
`scrollX`	`number`	Current scroll x value
`onScrollLeft`	`function(value: number)`	Default value is 300
`onScrollRight`	`function(value: number)`	Default value is 300
`onScrollToNow`	`function()`	Scroll to current time/live programs
`onScrollTop`	`function(value: number)`	Default value is 300

Channel schema

Property	Type	Status
`logo`	`string`	required
`uuid`	`string`	required

Epg schema

Property	Type	Status
`channelUuid`	`string`	required
`id`	`string`	required
`image`	`string`	required
`since`	`string`	required
`till`	`string`	required
`title`	`string`	required

Epg

Base props

Available props in Epg

Property	Type	Description	Status
`isLoading`	`boolean`	Loader state	optional
`loader`	`Component`	Loader custom cpomponent	optional

Layout

Base props

Available props in Layout.

Property	Type	Description	Status
`renderProgram`	`function({ program: { data: object, position: object})`	`data` object contains all properties related to the program, `position` object includes all position styles	optional
`renderChannel`	`function({ channel: { ..., position: object})`	`channel` object contains all properties related to the channel, `position` object includes all position styles	optional
`renderTimeline`	`function({sidebarWidth: number})`	`sidebarWidth` value of the channel’s sidebar width	optional

Render functions

You can use Plaby’s style components to develop main features. Moreover, you can integrate with third party UI library eg. Chakra UI, Material UI etc or make custom styles.

renderProgram

Below is an example that allows you to render your custom Program component using Plaby’s style components.

import {
  useEpg,
  Epg,
  Layout,
  ProgramBox,
  ProgramContent,
  ProgramFlex,
  ProgramStack,
  ProgramTitle,
  ProgramText,
  ProgramImage,
  useProgram,
  Program,
} from "planby";

interface ItemProps {
  program: Program
}

const Item = ({ program }: ItemProps) => {
  const { styles, formatTime, isLive, isMinWidth } = useProgram({ program });

  const { data } = program;
  const { image, title, since, till } = data;

  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>
              {formatTime(since)} - {formatTime(till)}
            </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 }) => (
              <Item key={program.data.id} program={program} />
            )}
          />
      </Epg>
    </div>
  </div>
);
}

export default App;

renderChannel

Below is an example that allows you to render your custom Channel component using Plaby’s style components.

import { useEpg, Epg, Layout, ChannelBox, ChannelLogo, Channel } from 'planby';

interface ChannelItemProps {
  channel: Channel;
}

const ChannelItem = ({ channel }: ChannelItemProps) => {
  const {
    position: { top },
    logo,
  } = channel;
  return (
    <ChannelBox top={top}>
      <ChannelLogo
        onClick={() => console.log('channel', channel)}
        src={logo}
        alt="Logo"
      />
    </ChannelBox>
  );
};

Theme

Schema

Make your theme custom. Below is theme schema that you can pass as one of the options to useEpg hook.

const theme = {
  primary: {
    600: '#1a202c',
    900: '#171923',
  },
  grey: { 300: '#d1d1d1' },
  white: '#fff',
  green: {
    300: '#2C7A7B',
  },
  loader: {
    teal: '#5DDADB',
    purple: '#3437A2',
    pink: '#F78EB6',
    bg: '#171923db',
  },
  scrollbar: {
    border: '#ffffff',
    thumb: {
      bg: '#e1e1e1',
    },
  },
  gradient: {
    blue: {
      300: '#002eb3',
      600: '#002360',
      900: '#051937',
    },
  },
  text: {
    grey: {
      300: '#a0aec0',
      500: '#718096',
    },
  },
  timeline: {
    divider: {
      bg: '#718096',
    },
  },
};

All import options

import {
  Epg,
  Layout,
  ChannelBox,
  ChannelLogo,
  ProgramBox,
  ProgramContent,
  ProgramFlex,
  ProgramStack,
  ProgramTitle,
  ProgramText,
  ProgramImage,
  useEpg,
  useProgram,
  Program, // Interface
  Channel, // Interface
  Theme, // Interface
} from 'planby';

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Karol Kozer – @kozerkarol_twitter