Schemas

This section describes the schemas used in the Planby component.

Channel schema

You can add other properties that you wish to have according to your specific requirements or functionalities you want to implement.

Property	Type	Status	Description
logo	string	required	Image URL
uuid	string	required
title	string	optional	Title of the channel
groupTree	boolean	optional	Set to true if the channel is the first main top channel in a group, used to display the channel group name in sidebar
parentChannelUuid	string	optional	Set for nested children. Required when main channel has groupTree set to true
isOpen	boolean	optional	Used to open the channel group in the sidebar

Epg schema

You can add other properties that you wish to have according to your specific requirements or functionalities you want to implement.

Property	Type	Status	Description
channelUuid	string	required
id	string	required
image	string	required	Image URL
since	string	required	Start date time
till	string	required	End date time
title	string	required	Tile of the element
fixedVisibility	boolean	optional	The element is always visible in the layout during the scroll events

Theme

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",
  teal: {
    100: "#38B2AC",
  },
  green: {
    200: "#389493",
    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",
    },
  },
  grid: {
    item: "#7180961a",
    divider: "#7180961a",
    highlight: "#38B2AC",
  },
  program: {
    border: "#171923",
    hover: {
      title: "#a0aec0",
      text: "#718096",
      border: "#171923",
    },
  },
};