Inicio>Recursos para la creación de sitios web>Datos del sitio web
Descargar

Descripción

Planby es un componente basado en React para una implementación rápida de EPG, horarios, transmisión en vivo, eventos musicales, plazos y muchas más ideas. Utiliza una vista virtual personalizada que le permite operar con una gran cantidad de datos. El componente tiene una API simple que puede integrar fácilmente con otras bibliotecas de UI de terceros. El tema del componente está personalizado para las necesidades del diseño de la aplicación.

Ejemplo de Codesandbox

Ejemplo en vivo - Codesandbox

Ejemplo en vivo - TypeScript CodesandBox

Ejemplo en vivo - Sitio web con panel de control

Testimonios

¡Conviértete en patrocinador!

Conviértete en patrocinador, apoyo y ayúdanos a continuar nuestro desarrollo. -> opencolective

Empezando

Instalación

  • hilo 
yarn add planby
  • npm 
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 >
) ;

o

Ancho personalizado y altura 

 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 >

o

Rango de tiempo 

 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

Opción

Opciones disponibles en UseEpg

Propiedad Tipo Estado Descripción Acceso
channels array requerido Matriz con datos de canales
epg array requerido Matriz con datos de EPG
width number opcional Ancho de epg
height number opcional Altura de EPG
sidebarWidth number opcional Ancho de la barra lateral con canales
timelineHeight number opcional Altura de la línea de tiempo PRO
itemHeight number opcional Altura de canales y programas en la EPG. El valor predeterminado es 80
dayWidth number opcional Ancho del día. El valor predeterminado es 7200. Cálculo para configurar el ancho del día con el valor de ancho de hora propio, por ejemplo, 24h * 300px (su ancho de hora personalizado) = 7200px -> dayWidth
startDate string opcional Formato de fecha 2022/02/02 o 2022-02-02T00:00:00 . Puede establecer su propia hora de inicio, por ejemplo, 2022-02-02T10:00:00 , 2022-02-02T14:00:00 , etc. Horas de reloj completo solamente
endDate string opcional Formato de fecha 2022-02-02T00:00:00 , 2022-02-02T20:00:00 , etc. debe estar dentro del mismo período de 24 horas que startDate . Solo horas de reloj completo. Desplácese por multiple days y el modo de línea de tiempo solo está disponible en PRO Plan. PRO
hoursInDays array opcional Establezca la hora de inicio y la hora de finalización de cada día en multiple days si sus datos para cada día tienen algunos espacios de tiempo entre los elementos en el día. PRO
initialScrollPositions object opcional Establezca la posición inicial de desplazamiento en el diseño, por ejemplo, initialScrollPositions: { top: 500, left: 800 } PRO
liveRefreshTime number opcional Viva la hora de actualizar de los eventos. El valor predeterminado es de 120 segundos. PRO
isBaseTimeFormat boolean opcional Convierta a formato de 12 horas, por ejemplo, 2:00am , 4:00pm , etc. El valor predeterminado es falso.
isCurrentTime boolean opcional Muestre la hora actual en la línea de tiempo. El valor predeterminado es falso. PRO
isInitialScrollToNow boolean opcional Desplácese al elemento en vivo actual. PRO
isVerticalMode boolean opcional Mostrar línea de tiempo en vista vertical. El valor predeterminado es falso. PRO
isResize boolean opcional Posibilidad de cambiar el tamaño del elemento. PRO
isSidebar boolean opcional Mostrar/ocultar barra lateral
isTimeline boolean opcional Mostrar/ocultar la línea de tiempo
isLine boolean opcional Mostrar/ocultar línea
isRTL boolean opcional Cambiar la dirección a RTL o LTR. El valor predeterminado es falso. PRO
theme object opcional Objeto con esquema de tema
timezone object opcional Convertir y mostrar datos de formato UTC a su propia zona horaria PRO
areas array opcional El área ofrece posibilidades de agregar rangos de campo al diseño de la línea de tiempo. PRO
mode object opcional Valores de tipo: day/week/month . Valores de estilo: default/modern Defina el modo y el estilo de la línea de tiempo. El modo predeterminado es day y el estilo es default PRO
overlap object opcional Habilite el elemento superpuesto en el diseño. Valores de modo: stack/layer , LayeroverLaplevel: number PRO
drag and drop object opcional Arrastre y mueva el elemento en el diseño. Valores de modo: row/multi-rows PRO
grid layout object opcional Cuadrícula de fondo en el diseño. MODE HOVERHIGHLIGHT VALORES: true/false , OnGridItemClick: Funcion con todas las propiedades en la cuadrícula de elementos haciendo clic PRO
channelMapKey string opcional El atributo uuid del canal se puede controlar mediante Prop. El mapa clave ofrece la posibilidad de usar el accesorio específico de los datos propios en lugar de necesitar mapear a UUID en datos propios PRO
programChannelMapKey string opcional Los programas channelUuid Attributes pueden ser controlados por Prop. El mapa clave brinda la posibilidad de usar un accesorio específico de los datos propios en lugar de necesitar mapear a Channeluuid en sus datos PRO
globalStyles string opcional Inyecte estilos y fuentes globales personalizados. Peso de fuente: 400,500,600. La fuente predeterminada es "Inter" PRO

Nota sobre los accesorios de ancho y altura

Sin declarar las propiedades width y length , el componente toma las dimensiones del elemento principal.

estilos globales

Inyecte su propia fuente personalizada y otros estilos globales. 

 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 {}
}
  
` ;

Propiedades de instancia

Propiedades devueltas de UseEpg

Propiedad Tipo Descripción
scrollY number Valor actual de desplazamiento Y
scrollX number Valor de desplazamiento x actual
onScrollLeft function(value: number) El valor predeterminado es 300
onScrollRight function(value: number) El valor predeterminado es 300
onScrollToNow function() Desplácese a los programas de hora actual/en vivo
onScrollTop function(value: number) El valor predeterminado es 300

Esquema de canal

Propiedad Tipo Estado
logo string requerido
uuid string requerido

Esquema de EPG

Propiedad Tipo Estado Descripción Acceso
channelUuid string requerido
id string requerido
image string requerido
since string requerido
till string requerido
title string requerido
fixedVisibility boolean opcional El elemento siempre es visible en el diseño durante los eventos de desplazamiento. Patrocinadores

EPG

Accesorios básicos

Accesorios disponibles en EPG

Propiedad Tipo Descripción Estado
isLoading boolean Estado del cargador opcional
loader Component Componente personalizado del cargador opcional

Disposición

Accesorios básicos

Apoyos disponibles en diseño.

Propiedad Tipo Descripción Estado Acceso
renderProgram function({ program: { data: object, position: object}) El objeto data contiene todas las propiedades relacionadas con el programa, el objeto position incluye todos los estilos de posición opcional
renderChannel function({ channel: { ..., position: object}) El objeto channel contiene todas las propiedades relacionadas con el canal, el objeto position incluye todos los estilos de posición opcional
renderTimeline function({sidebarWidth: number}) Valor de ancho sidebarWidth del ancho de la barra lateral del canal opcional
renderLine function({styles: object}) styles básicos y valores position para la línea de seguimiento en vivo personalizado opcional Sponsors
renderCurrentTime function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string}) Valores styles básicos para la hora actual personalizada opcional Sponsors

Renderizar funciones

Puede usar los componentes de estilo Plaby para desarrollar características principales. Además, puede integrarse con la biblioteca de UI de terceros, por ejemplo. Chakra UI, Material UI, etc. o hacer estilos personalizados.

programa de renderizado

A continuación se muestra un ejemplo que le permite representar su componente de programa personalizado utilizando los 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 ;

RenderProgram - Formato de tiempo de 12 horas

A continuación se muestra un ejemplo que le permite representar el componente de su programa personalizado con 12 horas de formato de tiempo utilizando los 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 ;

renderprogram - dirección rtl

A continuación se muestra un ejemplo que le permite representar su componente de programa personalizado con la dirección RTL utilizando los 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

A continuación se muestra un ejemplo que le permite representar su componente de canal personalizado utilizando los 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

A continuación se muestra un ejemplo que le permite representar su componente de línea de tiempo personalizado utilizando los 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 - Dirección RTL

A continuación se muestra un ejemplo que le permite representar su componente de línea de tiempo personalizado utilizando los 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

Haga su tema personalizado. A continuación se muestra el esquema de temas que puede pasar como una de las opciones para 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' ,
    } ,
  } ,
} ;

Todas las opciones de importación 

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

Licencia

Licencia personalizada: todos los derechos reservados. Vea LICENSE para más información.

Contacto

Karol Kozer - @kozerkarol_twitter

Enlace del proyecto: https://github.com/karolkozer/planby

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo