Download planby - Download do Código Fonte planby

Descrição

O Planby é um componente baseado em React para uma rápida implementação de EPG, horários, transmissão ao vivo, eventos musicais, cronogramas e muitas outras idéias. Ele usa uma visualização virtual personalizada que permite operar em um grande número de dados. O componente possui uma API simples que você pode integrar facilmente a outras bibliotecas de interface do usuário de terceiros. O tema do componente é personalizado para as necessidades do design do aplicativo.

Código e exemplo de caixa

Exemplo ao vivo - Código e caixa

Exemplo ao vivo - Códigos TypeScript e caixa

Exemplo ao vivo - site com painel de controle

Depoimentos

Torne -se um patrocinador!

Torne -se um patrocinador, apoie e ajude -nos a continuar nosso desenvolvimento. -> OpenCollective

Começando

Instalação

yarn add planby

npm install planby

Uso

 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 >
) ;

Largura e altura personalizadas

 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 >

Intervalo de tempo

 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 >

API

useepg

Opções

Opções disponíveis no useepg

Propriedade	Tipo	Status	Descrição	Acesso
`channels`	`array`	obrigatório	Array com dados de canais
`epg`	`array`	obrigatório	Array com dados EPG
`width`	`number`	opcional	Largura do EPG
`height`	`number`	opcional	Altura EPG
`sidebarWidth`	`number`	opcional	Largura da barra lateral com canais
`timelineHeight`	`number`	opcional	Altura da linha do tempo	`PRO`
`itemHeight`	`number`	opcional	Altura dos canais e programas no EPG. O valor padrão é 80
`dayWidth`	`number`	opcional	Largura do dia. O valor padrão é 7200. Cálculo para configurar a largura do dia com valor de largura de hora, por exemplo, 24h * 300px (sua largura de hora personalizada) = 7200px -> `dayWidth`
`startDate`	`string`	opcional	Data Formato `2022/02/02` ou `2022-02-02T00:00:00` . Você pode definir seu próprio horário de início, por exemplo, `2022-02-02T10:00:00` , `2022-02-02T14:00:00` , etc. Apenas o relógio
`endDate`	`string`	opcional	Data Formato `2022-02-02T00:00:00` , `2022-02-02T20:00:00` , etc. Deve estar dentro do mesmo período de 24 horas que `startDate` . Apenas horário de relógio. Percorra `multiple days` e o modo da linha do tempo está disponível apenas no Plan `PRO` .	`PRO`
`hoursInDays`	`array`	opcional	Defina a hora de início e o horário de término de cada dia em `multiple days` se os seus dados para cada dia tiver algum tempo de tempo entre os itens do dia.	`PRO`
`initialScrollPositions`	`object`	opcional	Defina a posição inicial de rolagem no layout, por exemplo, `initialScrollPositions: { top: 500, left: 800 }`	`PRO`
`liveRefreshTime`	`number`	opcional	Hora de atualização ao vivo dos eventos. O valor padrão é 120 seg.	`PRO`
`isBaseTimeFormat`	`boolean`	opcional	Converta em formato de 12 horas, por exemplo, `2:00am` , `4:00pm` , etc. O valor padrão é falso.
`isCurrentTime`	`boolean`	opcional	Mostre a hora atual na linha do tempo. O valor padrão é falso.	`PRO`
`isInitialScrollToNow`	`boolean`	opcional	Role até o elemento vivo atual.	`PRO`
`isVerticalMode`	`boolean`	opcional	Mostre a linha do tempo na visão vertical. O valor padrão é falso.	`PRO`
`isResize`	`boolean`	opcional	Possibilidade de redimensionar o elemento.	`PRO`
`isSidebar`	`boolean`	opcional	Mostre/oculte a barra lateral
`isTimeline`	`boolean`	opcional	Mostre/oculte a linha do tempo
`isLine`	`boolean`	opcional	Mostre/oculto linha
`isRTL`	`boolean`	opcional	Altere a direção para RTL ou LTR. O valor padrão é falso.	`PRO`
`theme`	`object`	opcional	Objeto com esquema temático
`timezone`	`object`	opcional	Converta e exiba dados do formato UTC para o seu próprio fuso horário	`PRO`
`areas`	`array`	opcional	A área oferece possibilidades para adicionar faixas de campo ao layout da linha do tempo.	`PRO`
`mode`	`object`	opcional	Valores do tipo: `day/week/month` . Valores de estilo: `default/modern` define o modo e o estilo da linha do tempo. O modo padrão é `day` e o estilo é `default`	`PRO`
`overlap`	`object`	opcional	Ativar o elemento se sobrepõe ao layout. Valores do modo: `stack/layer` , layeroverlaplevel: `number`	`PRO`
`drag and drop`	`object`	opcional	Arraste e mova o elemento no layout. Valores do modo: `row/multi-rows`	`PRO`
`grid layout`	`object`	opcional	Grade de fundo no layout. Modo HoverHighlight Valores: `true/false` , OnGridItemClick: Funcionar com todas as propriedades na grade de itens clicados	`PRO`
`channelMapKey`	`string`	opcional	O atributo `uuid` do canal pode ser controlado pelo Prop. O mapa -chave oferece uma possibilidade de usar o suporte específico de dados próprios, em vez de precisar mapear para o UUID em dados próprios	`PRO`
`programChannelMapKey`	`string`	opcional	Os programas atributos `channelUuid` podem ser controlados pelo Prop. O Mapa -chave oferece uma possibilidade de usar um suporte específico de dados próprios, em vez de precisar mapear para o canal em seus dados	`PRO`
`globalStyles`	`string`	opcional	Injete estilos e fontes globais personalizados. Peso da fonte: 400.500.600. A fonte padrão é "inter"	`PRO`

Note sobre os adereços de largura e altura

Sem declarar as propriedades width e length , o componente pega as dimensões do elemento pai.

Globalstyles

Injete a própria fonte personalizada e outros estilos globais.

 const globalStyles = `
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* Available in PRO plan */
 .planby {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Layout */
  .planby-layout {}

  /* Line */
  .planby-line {}

  /* Current time */
  .planby-current-time {}
  .planby-current-content {}

  /* Channels */
  .planby-channels {}

  /* Channel */
  .planby-channel {}

  /* Program */
  .planby-program {}
  .planby-program-content {}
  .planby-program-flex {}
  .planby-program-stack {}
  .planby-program-title {}
  .planby-program-text {}

  /* Timeline */
  .planby-timeline-wrapper {}
  .planby-timeline-box {}
  .planby-timeline-time {}
  .planby-timeline-dividers {}
  .planby-timeline-wrapper {}
}
  
` ;

Propriedades da instância

Propriedades retornadas de useepg

Propriedade	Tipo	Descrição
`scrollY`	`number`	Valor de rolagem atual Y
`scrollX`	`number`	Valor de rolagem atual X
`onScrollLeft`	`function(value: number)`	O valor padrão é 300
`onScrollRight`	`function(value: number)`	O valor padrão é 300
`onScrollToNow`	`function()`	Role até os programas atuais de horário/vivo
`onScrollTop`	`function(value: number)`	O valor padrão é 300

Esquema de canal

Propriedade	Tipo	Status
`logo`	`string`	obrigatório
`uuid`	`string`	obrigatório

Esquema EPG

Propriedade	Tipo	Status	Descrição	Acesso
`channelUuid`	`string`	obrigatório
`id`	`string`	obrigatório
`image`	`string`	obrigatório
`since`	`string`	obrigatório
`till`	`string`	obrigatório
`title`	`string`	obrigatório
`fixedVisibility`	`boolean`	opcional	O elemento é sempre visível no layout durante os eventos de rolagem	Patrocinadores

Epg

Adereços de base

Adereços disponíveis no EPG

Propriedade	Tipo	Descrição	Status
`isLoading`	`boolean`	Estado do carregador	opcional
`loader`	`Component`	Componente personalizado do carregador	opcional

Layout

Adereços de base

Adereços disponíveis no layout.

Propriedade	Tipo	Descrição	Status	Acesso
`renderProgram`	`function({ program: { data: object, position: object})`	O objeto `data` contém todas as propriedades relacionadas ao programa, o objeto `position` inclui todos os estilos de posição	opcional
`renderChannel`	`function({ channel: { ..., position: object})`	O objeto `channel` contém todas as propriedades relacionadas ao canal, o objeto `position` inclui todos os estilos de posição	opcional
`renderTimeline`	`function({sidebarWidth: number})`	Valor da `sidebarWidth` da largura da barra lateral do canal	opcional
`renderLine`	`function({styles: object})`	`styles` básicos e valores `position` para a linha de rastreamento ao vivo personalizada	opcional	`Sponsors`
`renderCurrentTime`	`function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})`	Valores básicos `styles` para o horário atual personalizado	opcional	`Sponsors`

Renderizar funções

Você pode usar os componentes de estilo de Plaby para desenvolver os principais recursos. Além disso, você pode se integrar à biblioteca de interface do usuário de terceiros, por exemplo. UI de chakra, interface do usuário do material etc ou faça estilos personalizados.

renderprograma

Abaixo está um exemplo que permite renderizar seu componente de programa personalizado usando os componentes de estilo de Plaby.

 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 ;

renderprograma - formato de 12 horas

Abaixo está um exemplo que permite renderizar seu componente de programa personalizado com formato de 12 horas usando os componentes de estilo de Plaby.

...
const Item = ( { program , ... rest } : ProgramItem ) => {
  const {
    styles ,
    formatTime ,
    set12HoursTimeFormat ,
    isLive ,
    isMinWidth ,
  } = useProgram ( {
    program ,
    ... rest
  } ) ;

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

  const sinceTime = formatTime ( since , set12HoursTimeFormat ( ) ) . toLowerCase ( ) ;
  const tillTime = formatTime ( till , set12HoursTimeFormat ( ) ) . toLowerCase ( ) ;

  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 ,
  isBaseTimeFormat : true ,
  startDate : '2022/02/02' , // or 2022-02-02T00:00:00
} ) ;

...
}

export default App ;

renderprograma - direção rtl

Abaixo está um exemplo que permite renderizar seu componente de programa personalizado com a direção RTL usando os componentes de estilo de Plaby.

...
const Item = ( { program , ... rest } : ProgramItem ) => {
  const {
    isRTL ,
    isLive ,
    isMinWidth ,
    formatTime ,
    styles ,
    set12HoursTimeFormat ,
    getRTLSinceTime ,
    getRTLTillTime ,
  } = useProgram ( {
    program ,
    ... rest
  } ) ;

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

  const sinceTime = formatTime (
    getRTLSinceTime ( since ) ,
    set12HoursTimeFormat ( )
  ) . toLowerCase ( ) ;
  const tillTime = formatTime (
    getRTLTillTime ( till ) ,
    set12HoursTimeFormat ( )
  ) . toLowerCase ( ) ;

  return (
    < ProgramBox width = { styles . width } style = { styles . position } >
      < ProgramContent width = { styles . width } isLive = { isLive } >
        < ProgramFlex >
          { isLive && isMinWidth && < ProgramImage src = { image } alt = "Preview" /> }
          < ProgramStack isRTL = { isRTL } >
            < ProgramTitle > { title } </ ProgramTitle >
            < ProgramText >
              { sinceTime } - { tillTime }
            </ ProgramText >
          </ ProgramStack >
        </ ProgramFlex >
      </ ProgramContent >
    </ ProgramBox >
  ) ;
} ;

function App ( ) {

  ...

 const {
  getEpgProps ,
  getLayoutProps ,
} = useEpg ( {
  epg ,
  channels ,
  isBaseTimeFormat : true ,
  startDate : '2022/02/02' , // or 2022-02-02T00:00:00
} ) ;

...
}

export default App ;

renderchannel

Abaixo está um exemplo que permite renderizar seu componente de canal personalizado usando os componentes de estilo de Plaby.

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

interface ChannelItemProps {
  channel : Channel ;
}

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


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 ( ) }
              renderChannel = { ( { channel } ) => (
              < ChannelItem key = { channel . uuid } channel = { channel } />
            ) }
            />
        </ Epg >
      </ div >
    </ div >
  ) ;
}

RenderTimeline

Abaixo está um exemplo que permite renderizar seu componente de linha do tempo personalizado usando os componentes de estilo de Plaby.

 import {
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDivider ,
  TimelineDividers ,
  useTimeline ,
} from 'planby' ;

interface TimelineProps {
  isBaseTimeFormat : boolean ;
  isSidebar : boolean ;
  dayWidth : number ;
  hourWidth : number ;
  numberOfHoursInDay : number ;
  offsetStartHoursRange : number ;
  sidebarWidth : number ;
}

export function Timeline ( {
  isBaseTimeFormat ,
  isSidebar ,
  dayWidth ,
  hourWidth ,
  numberOfHoursInDay ,
  offsetStartHoursRange ,
  sidebarWidth ,
} : TimelineProps ) {
  const { time , dividers , formatTime } = useTimeline (
    numberOfHoursInDay ,
    isBaseTimeFormat
  ) ;

  const renderTime = ( index : number ) => (
    < TimelineBox key = { index } width = { hourWidth } >
      < TimelineTime >
        { formatTime ( index + offsetStartHoursRange ) . toLowerCase ( ) }
      </ TimelineTime >
      < TimelineDividers > { renderDividers ( ) } </ TimelineDividers >
    </ TimelineBox >
  ) ;

  const renderDividers = ( ) =>
    dividers . map ( ( _ , index ) => (
      < TimelineDivider key = { index } width = { hourWidth } />
    ) ) ;

  return (
    < TimelineWrapper
      dayWidth = { dayWidth }
      sidebarWidth = { sidebarWidth }
      isSidebar = { isSidebar }
    >
      { time . map ( ( _ , index ) => renderTime ( index ) ) }
    </ TimelineWrapper >
  ) ;
}

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 ( ) }
              renderTimeline = { ( props ) => < Timeline { ... props } /> }
            />
        </ Epg >
      </ div >
    </ div >
  ) ;
}

export default App ;

RenderTimeline - direção RTL

Abaixo está um exemplo que permite renderizar seu componente de linha do tempo personalizado usando os componentes de estilo de Plaby.

 import {
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDivider ,
  TimelineDividers ,
  useTimeline ,
} from 'planby' ;

interface TimelineProps {
  isRTL : boolean ;
  isBaseTimeFormat : boolean ;
  isSidebar : boolean ;
  dayWidth : number ;
  hourWidth : number ;
  numberOfHoursInDay : number ;
  offsetStartHoursRange : number ;
  sidebarWidth : number ;
}

export function Timeline ( {
  isRTL ,
  isBaseTimeFormat ,
  isSidebar ,
  dayWidth ,
  hourWidth ,
  numberOfHoursInDay ,
  offsetStartHoursRange ,
  sidebarWidth ,
} : TimelineProps ) {
  const { time , dividers , formatTime } = useTimeline (
    numberOfHoursInDay ,
    isBaseTimeFormat
  ) ;

  const renderTime = ( index : number ) => (
    < TimelineBox key = { index } width = { hourWidth } >
      < TimelineTime isBaseTimeFormat = { isBaseTimeFormat } isRTL = { isRTL } >
        { formatTime ( index + offsetStartHoursRange ) . toLowerCase ( ) }
      </ TimelineTime >
      < TimelineDividers > { renderDividers ( ) } </ TimelineDividers >
    </ TimelineBox >
  ) ;

 ...
}

Tema

Esquema

Faça do seu tema personalizado. Abaixo está o esquema do tema que você pode passar como uma das opções para useEpg o gancho.

 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' ,
    } ,
  } ,
} ;

Todas as opções de importação

 import {
  Epg ,
  Layout ,
  ChannelBox ,
  ChannelLogo ,
  ProgramBox ,
  ProgramContent ,
  ProgramFlex ,
  ProgramStack ,
  ProgramTitle ,
  ProgramText ,
  ProgramImage ,
  TimelineWrapper ,
  TimelineBox ,
  TimelineTime ,
  TimelineDividers ,
  useEpg ,
  useProgram ,
  useTimeline ,
  Program , // Interface
  Channel , // Interface
  ProgramItem , // Interface for program render
  Theme , // Interface
} from 'planby' ;

Licença

Contato

Karol Kozer - @kozerkarol_twitter

Link do projeto: https://github.com/karolkozer/planby

Expandir