planby Download - planby Source Code Download

Description

Planby est un composant basé sur React pour une mise en œuvre rapide de l'EPG, des horaires, du streaming en direct, des événements musicaux, des chronologies et bien d'autres idées. Il utilise une vue virtuelle personnalisée qui vous permet de fonctionner sur un très grand nombre de données. Le composant dispose d'une API simple que vous pouvez facilement intégrer avec d'autres bibliothèques d'interface utilisateur tierces. Le thème du composant est personnalisé selon les besoins de la conception de l'application.

Exemple de boîte de codes et de boîte

Exemple en direct - codes et boîte

Exemple en direct - codes de type dactylographié

Exemple en direct - Site Web avec panneau de configuration

Témoignages

Devenez sponsor!

Devenez sponsor, soutienz et aidez-nous à poursuivre notre développement. -> OpenCollective

Commencer

Installation

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

Largeur et hauteur personnalisées

 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 >

Plage de temps

 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

Options

Options disponibles dans useepg

Propriété	Taper	Statut	Description	Accéder
`channels`	`array`	requis	Tableau avec des données de canaux
`epg`	`array`	requis	Array avec des données EPG
`width`	`number`	facultatif	EPG Largeur
`height`	`number`	facultatif	Hauteur EPG
`sidebarWidth`	`number`	facultatif	Largeur de la barre latérale avec des canaux
`timelineHeight`	`number`	facultatif	Hauteur de la chronologie	`PRO`
`itemHeight`	`number`	facultatif	Hauteur des canaux et des programmes dans l'EPG. La valeur par défaut est de 80
`dayWidth`	`number`	facultatif	Largeur du jour. La valeur par défaut est de 7200. Calcul pour configurer la largeur du jour avec une valeur de largeur d'heure propre par exemple, 24h * 300px (votre largeur d'heure personnalisée) = 7200px -> `dayWidth`
`startDate`	`string`	facultatif	Date Format `2022/02/02` ou `2022-02-02T00:00:00` . Vous pouvez définir votre propre heure de début, par exemple, `2022-02-02T10:00:00` , `2022-02-02T14:00:00` , etc. Hautes complètes seulement
`endDate`	`string`	facultatif	Date Format `2022-02-02T00:00:00` , `2022-02-02T20:00:00` , etc. doit être dans la même période de 24 heures que `startDate` . Horloges complètes seulement. Faites défiler `multiple days` et le mode chronologie est disponible uniquement dans `PRO` Plan.	`PRO`
`hoursInDays`	`array`	facultatif	Définissez l'heure de début et l'heure de fin de chaque journée dans `multiple days` si vos données pour chaque jour ont des espaces de temps entre les éléments de la journée.	`PRO`
`initialScrollPositions`	`object`	facultatif	Définissez la position initiale de défilement dans la mise en page, par exemple, `initialScrollPositions: { top: 500, left: 800 }`	`PRO`
`liveRefreshTime`	`number`	facultatif	Rafraîchissement en direct des événements. La valeur par défaut est de 120 sec.	`PRO`
`isBaseTimeFormat`	`boolean`	facultatif	Convertissez en format 12 heures, par exemple, `2:00am` , `4:00pm` , etc. La valeur par défaut est fausse.
`isCurrentTime`	`boolean`	facultatif	Afficher l'heure actuelle dans la chronologie. La valeur par défaut est fausse.	`PRO`
`isInitialScrollToNow`	`boolean`	facultatif	Faites défiler vers l'élément en direct actuel.	`PRO`
`isVerticalMode`	`boolean`	facultatif	Afficher la chronologie en vue verticale. La valeur par défaut est fausse.	`PRO`
`isResize`	`boolean`	facultatif	Possibilité de redimensionner l'élément.	`PRO`
`isSidebar`	`boolean`	facultatif	Afficher / masquer la barre latérale
`isTimeline`	`boolean`	facultatif	Afficher / masquer la chronologie
`isLine`	`boolean`	facultatif	Afficher / masquer la ligne
`isRTL`	`boolean`	facultatif	Changer la direction en RTL ou LTR. La valeur par défaut est fausse.	`PRO`
`theme`	`object`	facultatif	Objet avec schéma de thème
`timezone`	`object`	facultatif	Convertir et afficher les données du format UTC à votre propre fuseau horaire	`PRO`
`areas`	`array`	facultatif	La zone offre les possibilités d'ajouter des plages de champ à la disposition de la chronologie.	`PRO`
`mode`	`object`	facultatif	Valeurs de type: `day/week/month` . Valeurs de style: `default/modern` Définissez le mode et le style de la chronologie. Le mode par défaut est `day` et le style est `default`	`PRO`
`overlap`	`object`	facultatif	Activer l'élément se chevauche dans la disposition. Valeurs de mode: `stack/layer` , coucheverlaplevel: `number`	`PRO`
`drag and drop`	`object`	facultatif	Faites glisser et déplacez l'élément dans la disposition. Valeurs de mode: `row/multi-rows`	`PRO`
`grid layout`	`object`	facultatif	Grille de fond sur la mise en page. MODE HOVERHIGHlight Valeurs: `true/false` , OnGriDitemClick: Fonction avec toutes les propriétés sur la grille d'élément cliqué	`PRO`
`channelMapKey`	`string`	facultatif	L'attribut `uuid` de canal peut être contrôlé par Prop. La carte clé donne les possibilités d'utiliser un accessoire spécifique à partir de propres données au lieu de devoir mapper à UUID dans ses propres données	`PRO`
`programChannelMapKey`	`string`	facultatif	Les programmes `channelUuid` Les attributs peuvent être contrôlés par Prop. La carte clé donne les possibilités d'utiliser un access	`PRO`
`globalStyles`	`string`	facultatif	Injecter des styles et des polices mondiales personnalisées. Poids de police: 400 500 600. La police par défaut est "inter"	`PRO`

Remarque sur la largeur et les accessoires de hauteur

Sans déclarer les propriétés width et length , le composant prend les dimensions de l'élément parent.

Globalstyles

Injectez la propre police personnalisée et d'autres styles mondiaux.

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

Propriétés d'instance

Propriétés renvoyées de useepg

Propriété	Taper	Description
`scrollY`	`number`	Valeur de défilement actuelle
`scrollX`	`number`	Valeur de défilement actuel
`onScrollLeft`	`function(value: number)`	La valeur par défaut est de 300
`onScrollRight`	`function(value: number)`	La valeur par défaut est de 300
`onScrollToNow`	`function()`	Faites défiler les programmes d'heure actuelle / live
`onScrollTop`	`function(value: number)`	La valeur par défaut est de 300

Schéma de canal

Propriété	Taper	Statut
`logo`	`string`	requis
`uuid`	`string`	requis

Schéma EPG

Propriété	Taper	Statut	Description	Accéder
`channelUuid`	`string`	requis
`id`	`string`	requis
`image`	`string`	requis
`since`	`string`	requis
`till`	`string`	requis
`title`	`string`	requis
`fixedVisibility`	`boolean`	facultatif	L'élément est toujours visible dans la disposition lors des événements de défilement	Sponsors

EPG

Accessoires de base

Accessoires disponibles dans EPG

Propriété	Taper	Description	Statut
`isLoading`	`boolean`	État de chargeur	facultatif
`loader`	`Component`	Composant personnalisé du chargeur	facultatif

Mise en page

Accessoires de base

Accessoires disponibles dans la mise en page.

Propriété	Taper	Description	Statut	Accéder
`renderProgram`	`function({ program: { data: object, position: object})`	L'objet `data` contient toutes les propriétés liées au programme, l'objet `position` comprend tous les styles de position	facultatif
`renderChannel`	`function({ channel: { ..., position: object})`	L'objet `channel` contient toutes les propriétés liées au canal, l'objet `position` comprend tous les styles de position	facultatif
`renderTimeline`	`function({sidebarWidth: number})`	Valeur de `sidebarWidth` de la largeur de la barre latérale du canal	facultatif
`renderLine`	`function({styles: object})`	`styles` de base et valeurs `position` pour la ligne de suivi en direct personnalisée	facultatif	`Sponsors`
`renderCurrentTime`	`function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})`	Valeurs `styles` de base pour l'heure actuelle personnalisée	facultatif	`Sponsors`

Rendre les fonctions

Vous pouvez utiliser les composants de style de Plaby pour développer des fonctionnalités principales. De plus, vous pouvez vous intégrer à la bibliothèque d'interface utilisateur tierce par exemple. Chakra ui, ui matériel, etc. ou faire des styles personnalisés.

RenderProgram

Vous trouverez ci-dessous un exemple qui vous permet de rendre votre composant de programme personnalisé à l'aide des composants de style 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 - format de 12 heures

Vous trouverez ci-dessous un exemple qui vous permet de rendre votre composant de programme personnalisé avec un format de 12 heures à l'aide des composants de style 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 - Direction RTL

Vous trouverez ci-dessous un exemple qui vous permet de rendre votre composant de programme personnalisé avec RTL Direction à l'aide des composants de style 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 ;

rendu

Vous trouverez ci-dessous un exemple qui vous permet de rendre votre composant de canal personnalisé à l'aide des composants de style 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 >
  ) ;
}

Rendermeline

Vous trouverez ci-dessous un exemple qui vous permet de rendre votre composant Timeline personnalisé à l'aide des composants de style 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 - Direction RTL

Vous trouverez ci-dessous un exemple qui vous permet de rendre votre composant Timeline personnalisé à l'aide des composants de style 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 >
  ) ;

 ...
}

Thème

Schéma

Rendre votre thème personnalisé. Vous trouverez ci-dessous le schéma de thème que vous pouvez passer comme l'une des options pour useEpg le crochet.

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

Toutes les options d'importation

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

Licence

Contact

Karol Kozer - @kozerkarol_twitter

Lien du projet: https://github.com/karolkozer/planby

Développer