Startseite>Ressourcen zum Erstellen von Websites>Website-Daten
Herunterladen

Beschreibung

PlanBy ist eine auf React -basierte Komponente für eine schnelle Implementierung von EPG, Zeitplänen, Live -Streaming, Musikveranstaltungen, Zeitplänen und vielen weiteren Ideen. Es verwendet eine benutzerdefinierte virtuelle Ansicht, mit der Sie eine wirklich große Anzahl von Daten betreiben können. Die Komponente verfügt über eine einfache API, die Sie problemlos in andere UI -Bibliotheken von Drittanbietern integrieren können. Das Komponententhema wird den Anforderungen des Anwendungsdesigns angepasst.

CodesandBox -Beispiel

Live -Beispiel - Codesandbox

Live -Beispiel - TypeScript -Codesandbox

Live -Beispiel - Website mit Bedienfeld

Zeugnisse

Werden Sie Sponsor!

Werden Sie Sponsor, unterstützen Sie und helfen Sie uns bei der Fortsetzung unserer Entwicklung. -> openCollective

Erste Schritte

Installation

  • Garn 
yarn add planby
  • NPM 
npm install planby

Verwendung 

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

oder

Benutzerdefinierte Breite und Höhe 

 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 >

oder

Zeitbereich 

 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

Usepg

Optionen

Verfügbare Optionen in Usepg

Eigentum Typ Status Beschreibung Zugang
channels array erforderlich Array mit Kanälendaten Array
epg array erforderlich Array mit EPG -Daten
width number optional EPG -Breite
height number optional EPG -Höhe
sidebarWidth number optional Breite der Seitenleiste mit Kanälen
timelineHeight number optional Höhe der Zeitleiste PRO
itemHeight number optional Höhe der Kanäle und Programme in der EPG. Standardwert ist 80
dayWidth number optional Breite des Tages. Der Standardwert ist 7200. Berechnung zur Einrichtung der Tagesbreite dayWidth eigenem Stunden Breite, z.
startDate string optional Datumsformat 2022/02/02 oder 2022-02-02T00:00:00 . Sie können Ihre eigene Startzeit, 2022-02-02T14:00:00 2022-02-02T10:00:00
endDate string optional Datumsformat 2022-02-02T00:00:00 , 2022-02-02T20:00:00 : usw. muss innerhalb des gleichen 24-Stunden-Zeitraums wie startDate liegen. Nur volle Uhrzeiten. Scrollen Sie durch multiple days , und der Zeitleistenmodus ist nur im PRO -Plan verfügbar. PRO
hoursInDays array optional Legen Sie die Startzeit und die Endzeit eines jeden Tages in multiple days fest, wenn Ihre Daten für jeden Tag einige Zeiträume zwischen den Elementen des Tages haben. PRO
initialScrollPositions object optional Setzen Sie die erste Bildlaufposition in Layout, z. B. initialScrollPositions: { top: 500, left: 800 } PRO
liveRefreshTime number optional Lebe Auffrischungszeit der Ereignisse. Der Standardwert beträgt 120 Sek. PRO
isBaseTimeFormat boolean optional Konvertieren Sie in 12-Stunden-Format, z. B. 2:00am , 4:00pm usw. Der Standardwert ist falsch.
isCurrentTime boolean optional Zeigen Sie die aktuelle Zeit in der Zeitleiste. Der Standardwert ist falsch. PRO
isInitialScrollToNow boolean optional Scrollen Sie zum aktuellen Live -Element. PRO
isVerticalMode boolean optional Timeline in vertikaler Ansicht anzeigen. Der Standardwert ist falsch. PRO
isResize boolean optional Möglichkeit, das Element zu ändern. PRO
isSidebar boolean optional Seitenleiste zeigen/verstecken
isTimeline boolean optional Timeline anzeigen/ausblenden
isLine boolean optional Zeigen/Versteck
isRTL boolean optional Ändern Sie die Richtung in RTL oder LTR. Der Standardwert ist falsch. PRO
theme object optional Objekt mit Themenschema
timezone object optional Konvertieren und Anzeigen von Daten aus dem UTC -Format in Ihre eigene Zeitzone PRO
areas array optional Flächen bietet Möglichkeiten, dem Timeline -Layout Feldbereiche hinzuzufügen. PRO
mode object optional Geben Sie Werte ein: day/week/month . Stilwerte: default/modern Definieren Sie den Modus und den Stil der Zeitleiste. Der Standardmodus ist day und Stil default PRO
overlap object optional Aktivieren Sie das Elementlupen im Layout. Moduswerte: stack/layer , Layeroverlaplevel: number PRO
drag and drop object optional Ziehen Sie das Element im Layout und bewegen Sie sie. Moduswerte: row/multi-rows PRO
grid layout object optional Hintergrundnetz auf dem Layout. Modus Hoverhighlight -Werte: true/false , ONGRIDITEMCLICK: Funktion mit allen Eigenschaften auf geklicktem Element Grid PRO
channelMapKey string optional Das Kanal uuid -Attribut kann durch Prop gesteuert werden. Die Schlüsselkarte bietet Möglichkeiten, spezifische Prop aus eigenen Daten zu verwenden, anstatt in eigenen Daten an UUID zuzuordnen PRO
programChannelMapKey string optional Die Programme channelUuid -Attribute können durch Prop kontrolliert werden. Die Schlüsselkarte bietet Möglichkeiten, eine bestimmte Prop aus eigenen Daten zu verwenden, anstatt in Ihre Daten kanaluuid zu kartieren müssen PRO
globalStyles string optional Benutzerdefinierte globale Stile und Schriftart einführen. Schriftgewicht: 400.500.600. Die Standardschrift ist "inter" PRO

Hinweis über Breite und Höhenrequisiten

Ohne die width und die length zu deklarieren, nimmt die Komponente die Abmessungen des übergeordneten Elements ein.

Globalstyles

INPRECHTEN SIE SEHRSCHNITTE SCHRIFT FONT UND ANDEREN GLAFTE STYLES. 

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

Instanzeigenschaften

Eigenschaften, die von UsePG zurückgegeben wurden

Eigentum Typ Beschreibung
scrollY number Aktueller Scroll Y -Wert
scrollX number Aktueller Scroll X -Wert
onScrollLeft function(value: number) Standardwert beträgt 300
onScrollRight function(value: number) Standardwert beträgt 300
onScrollToNow function() Scrollen Sie zu aktuellen Zeit-/Live -Programmen
onScrollTop function(value: number) Standardwert beträgt 300

Kanalschema

Eigentum Typ Status
logo string erforderlich
uuid string erforderlich

EPG -Schema

Eigentum Typ Status Beschreibung Zugang
channelUuid string erforderlich
id string erforderlich
image string erforderlich
since string erforderlich
till string erforderlich
title string erforderlich
fixedVisibility boolean optional Das Element ist im Layout während der Scrollereignisse immer sichtbar Sponsoren

EPG

Basisrequisiten

Verfügbare Requisiten in EPG

Eigentum Typ Beschreibung Status
isLoading boolean Laderzustand optional
loader Component Ladern benutzerdefinierte Komponente optional

Layout

Basisrequisiten

Verfügbare Requisiten im Layout.

Eigentum Typ Beschreibung Status Zugang
renderProgram function({ program: { data: object, position: object}) data enthält alle Eigenschaften, die sich auf das Programm beziehen, position enthält alle Positionsstile optional
renderChannel function({ channel: { ..., position: object}) channel enthält alle Eigenschaften, die sich mit dem Kanal beziehen. position Objekt enthält alle Positionsstile optional
renderTimeline function({sidebarWidth: number}) sidebarWidth der Seitenleistebreite des Kanals optional
renderLine function({styles: object}) Grundlegende styles und position für die benutzerdefinierte Live -Tracking -Linie optional Sponsors
renderCurrentTime function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string}) styles für die benutzerdefinierte aktuelle Zeit optional Sponsors

Renderfunktionen

Sie können Plabys Stilkomponenten verwenden, um Hauptfunktionen zu entwickeln. Darüber hinaus können Sie sich in die UI -Bibliothek von Drittanbietern integrieren, z. Chakra UI, Material UI usw. oder maßgefertigte Stile.

Renderprogramm

Im Folgenden finden Sie ein Beispiel, mit dem Sie Ihre benutzerdefinierte Programmkomponente mithilfe von Plabys Stilkomponenten rendern können. 

 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 ;

RenderProgramm - 12 Stunden Zeitformat

Im Folgenden finden Sie ein Beispiel, mit dem Sie Ihre benutzerdefinierte Programmkomponente mit einem Zeitformat von 12 Stunden mithilfe von Plabys Stilkomponenten rendern können. 

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

RenderProgramm - RTL -Richtung

Im Folgenden finden Sie ein Beispiel, mit dem Sie Ihre benutzerdefinierte Programmkomponente mit der RTL -Richtung mithilfe von Plabys Stilkomponenten rendern können. 

...
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

Im Folgenden finden Sie ein Beispiel, mit dem Sie Ihre benutzerdefinierte Kanalkomponente mithilfe von Plabys Stilkomponenten rendern können. 

 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

Im Folgenden finden Sie ein Beispiel, mit dem Sie Ihre benutzerdefinierte Timeline -Komponente mithilfe von Plabys Stilkomponenten rendern können. 

 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 - RTL -Richtung

Im Folgenden finden Sie ein Beispiel, mit dem Sie Ihre benutzerdefinierte Timeline -Komponente mithilfe von Plabys Stilkomponenten rendern können. 

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

 ...
}

Thema

Schema

Machen Sie Ihr Thema benutzerdefiniert. Im Folgenden finden Sie ein Themenschema, das Sie als eine der Optionen zum useEpg Haken übergeben können. 

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

Alle Importoptionen 

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

Lizenz

Benutzerdefinierte Lizenz - Alle Rechte vorbehalten. Weitere Informationen finden Sie LICENSE .

Kontakt

Karol Kozer - @kozerkarol_twitter

Projektlink: https://github.com/karolkozer/planby

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle