Unduh planby - Unduh Kode Sumber planby

Keterangan

Planby adalah komponen berbasis reaksi untuk implementasi cepat EPG, jadwal, streaming langsung, acara musik, jadwal dan banyak lagi ide. Ini menggunakan tampilan virtual khusus yang memungkinkan Anda untuk beroperasi pada sejumlah besar data. Komponen ini memiliki API sederhana yang dapat Anda integrasikan dengan mudah dengan perpustakaan UI pihak ketiga lainnya. Tema komponen disesuaikan dengan kebutuhan desain aplikasi.

Contoh CodeSandBox

Contoh Langsung - CodeSandBox

Contoh Langsung - Kode TypeScript

Contoh Langsung - Situs Web dengan Panel Kontrol

Kesaksian

Menjadi sponsor!

Menjadi sponsor, dukungan, dan bantu kami dalam melanjutkan pengembangan kami. -> OpenCollective

Memulai

Instalasi

benang

yarn add planby

npm install planby

Penggunaan

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

atau

Lebar dan Tinggi Kustom

 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 >

atau

Jangkauan waktu

 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

Opsi

Opsi yang tersedia di useepg

Milik	Jenis	Status	Keterangan	Mengakses
`channels`	`array`	diperlukan	Array dengan data saluran
`epg`	`array`	diperlukan	Array dengan data EPG
`width`	`number`	opsional	Lebar EPG
`height`	`number`	opsional	Tinggi EPG
`sidebarWidth`	`number`	opsional	Lebar bilah sisi dengan saluran
`timelineHeight`	`number`	opsional	Ketinggian garis waktu	`PRO`
`itemHeight`	`number`	opsional	Tinggi saluran dan program di EPG. Nilai default adalah 80
`dayWidth`	`number`	opsional	Lebar hari ini. Nilai default adalah 7200. Perhitungan untuk mengatur lebar hari dengan nilai lebar jam sendiri misalnya, 24 jam * 300px (lebar jam kustom Anda) = 7200px -> `dayWidth`
`startDate`	`string`	opsional	Format Tanggal `2022/02/02` atau `2022-02-02T00:00:00` . Anda dapat mengatur waktu mulai Anda sendiri, misalnya, `2022-02-02T10:00:00` , `2022-02-02T14:00:00` , dll. Jam penuh saja jam saja saja
`endDate`	`string`	opsional	Format Tanggal `2022-02-02T00:00:00` , `2022-02-02T20:00:00` , dll. Harus dalam periode 24 jam yang sama dengan `startDate` . Jam penuh hanya jam. Gulir melalui `multiple days` dan mode timeline hanya tersedia dalam Paket `PRO` .	`PRO`
`hoursInDays`	`array`	opsional	Tetapkan waktu mulai dan akhir waktu setiap hari dalam `multiple days` fitur jika data Anda untuk setiap hari memiliki beberapa ruang waktu antar item dalam sehari.	`PRO`
`initialScrollPositions`	`object`	opsional	Setel posisi gulir awal di tata letak, misalnya, `initialScrollPositions: { top: 500, left: 800 }`	`PRO`
`liveRefreshTime`	`number`	opsional	Waktu menyegarkan langsung dari acara tersebut. Nilai default adalah 120 detik.	`PRO`
`isBaseTimeFormat`	`boolean`	opsional	Konversi ke format 12 jam, mis. `2:00am` , `4:00pm` , dll. Nilai default salah.
`isCurrentTime`	`boolean`	opsional	Tunjukkan waktu saat ini dalam timeline. Nilai default salah.	`PRO`
`isInitialScrollToNow`	`boolean`	opsional	Gulir ke elemen hidup saat ini.	`PRO`
`isVerticalMode`	`boolean`	opsional	Tampilkan garis waktu dalam tampilan vertikal. Nilai default salah.	`PRO`
`isResize`	`boolean`	opsional	Kemungkinan untuk mengubah ukuran elemen.	`PRO`
`isSidebar`	`boolean`	opsional	Tampilkan/Sembunyikan Sidebar
`isTimeline`	`boolean`	opsional	Tampilkan/Sembunyikan Timeline
`isLine`	`boolean`	opsional	Tampilkan/Sembunyikan Garis
`isRTL`	`boolean`	opsional	Ubah arah menjadi RTL atau LTR. Nilai default salah.	`PRO`
`theme`	`object`	opsional	Objek dengan skema tema
`timezone`	`object`	opsional	Konversi dan tampilkan data dari format UTC ke zona waktu Anda sendiri	`PRO`
`areas`	`array`	opsional	Area memberikan kemungkinan untuk menambahkan rentang lapangan ke tata letak timeline.	`PRO`
`mode`	`object`	opsional	Jenis Nilai: `day/week/month` . Nilai Gaya: `default/modern` Menentukan mode dan gaya timeline. Mode default adalah `day` dan gaya adalah `default`	`PRO`
`overlap`	`object`	opsional	Aktifkan elemen yang tumpang tindih dalam tata letak. Nilai Mode: `stack/layer` , LayeroverLaplevel: `number`	`PRO`
`drag and drop`	`object`	opsional	Seret dan pindahkan elemen di tata letak. Nilai Mode: `row/multi-rows`	`PRO`
`grid layout`	`object`	opsional	Latar belakang kisi -kisi di tata letak. Mode Nilai Hoverhighlight: `true/false` , OngridItemClick: Fungsi dengan semua properti pada grid item yang diklik	`PRO`
`channelMapKey`	`string`	opsional	Atribut saluran `uuid` dapat dikontrol oleh prop. Peta kunci memberikan kemungkinan untuk menggunakan prop spesifik dari data sendiri alih -alih perlu memetakan ke uuid dalam data sendiri	`PRO`
`programChannelMapKey`	`string`	opsional	Atribut Program `channelUuid` dapat dikontrol oleh Prop. Peta kunci memberikan kemungkinan untuk menggunakan prop tertentu dari data sendiri alih -alih perlu memetakan ke channeluuid dalam data Anda	`PRO`
`globalStyles`	`string`	opsional	Suntikkan gaya dan font global khusus. Berat Font: 400.500.600. Font default adalah "Inter"	`PRO`

Catatan tentang alat bantu lebar dan tinggi

Tanpa mendeklarasikan sifat width dan length , komponen mengambil dimensi elemen induk.

GlobalStyles

Menyuntikkan font khusus sendiri dan gaya global lainnya.

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

Properti instan

Properti kembali dari Useepg

Milik	Jenis	Keterangan
`scrollY`	`number`	Nilai gulir Y saat ini
`scrollX`	`number`	Nilai gulir x saat ini
`onScrollLeft`	`function(value: number)`	Nilai default adalah 300
`onScrollRight`	`function(value: number)`	Nilai default adalah 300
`onScrollToNow`	`function()`	Gulir ke program waktu/langsung saat ini
`onScrollTop`	`function(value: number)`	Nilai default adalah 300

Skema saluran

Milik	Jenis	Status
`logo`	`string`	diperlukan
`uuid`	`string`	diperlukan

Skema EPG

Milik	Jenis	Status	Keterangan	Mengakses
`channelUuid`	`string`	diperlukan
`id`	`string`	diperlukan
`image`	`string`	diperlukan
`since`	`string`	diperlukan
`till`	`string`	diperlukan
`title`	`string`	diperlukan
`fixedVisibility`	`boolean`	opsional	Elemen selalu terlihat di tata letak selama acara gulir	Sponsor

EPG

Alat peraga dasar

Alat peraga yang tersedia di EPG

Milik	Jenis	Keterangan	Status
`isLoading`	`boolean`	Status loader	opsional
`loader`	`Component`	Komponen Kustom Loader	opsional

Tata letak

Alat peraga dasar

Alat peraga yang tersedia dalam tata letak.

Milik	Jenis	Keterangan	Status	Mengakses
`renderProgram`	`function({ program: { data: object, position: object})`	Objek `data` berisi semua properti yang terkait dengan program, objek `position` mencakup semua gaya posisi	opsional
`renderChannel`	`function({ channel: { ..., position: object})`	Objek `channel` berisi semua properti yang terkait dengan saluran, objek `position` mencakup semua gaya posisi	opsional
`renderTimeline`	`function({sidebarWidth: number})`	Nilai `sidebarWidth` dari lebar sidebar saluran	opsional
`renderLine`	`function({styles: object})`	`styles` Dasar dan Nilai `position` untuk Garis Pelacakan Langsung Kustom	opsional	`Sponsors`
`renderCurrentTime`	`function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})`	Nilai `styles` dasar untuk waktu saat ini kustom saat ini	opsional	`Sponsors`

Fungsi render

Anda dapat menggunakan komponen gaya Plaby untuk mengembangkan fitur utama. Selain itu, Anda dapat berintegrasi dengan perpustakaan UI pihak ketiga misalnya. Chakra UI, material UI dll atau membuat gaya khusus.

RenderProgram

Di bawah ini adalah contoh yang memungkinkan Anda untuk membuat komponen program khusus Anda menggunakan komponen gaya 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 Waktu 12 Jam

Di bawah ini adalah contoh yang memungkinkan Anda untuk membuat komponen program khusus Anda dengan format waktu 12 jam menggunakan komponen gaya 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 - arah RTL

Di bawah ini adalah contoh yang memungkinkan Anda untuk membuat komponen program khusus Anda dengan arah RTL menggunakan komponen gaya 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

Di bawah ini adalah contoh yang memungkinkan Anda untuk membuat komponen saluran khusus Anda menggunakan komponen gaya 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

Di bawah ini adalah contoh yang memungkinkan Anda untuk membuat komponen timeline khusus Anda menggunakan komponen gaya 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 - arah RTL

Di bawah ini adalah contoh yang memungkinkan Anda untuk membuat komponen timeline khusus Anda menggunakan komponen gaya 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

Skema

Buat tema Anda khusus. Di bawah ini adalah skema tema yang dapat Anda lewati sebagai salah satu opsi untuk 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' ,
    } ,
  } ,
} ;

Semua opsi impor

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

Lisensi

Lisensi Kustom - Semua Hak Dilindungi. Lihat LICENSE untuk informasi lebih lanjut.

Kontak

Karol Kozer - @kozerkarol_twitter

Tautan Proyek: https://github.com/karolkozer/planby

Memperluas