planby下載 - planby源代碼下載

描述

Planby是一個基於React的組件，可快速實施EPG，時間表，實時流媒體，音樂活動，時間表和更多想法。它使用自定義的虛擬視圖，該視圖使您可以在大量數據上操作。該組件具有簡單的API，您可以輕鬆地與其他第三方UI庫集成。組件主題是根據應用程序設計的需求進行定制的。

codesandbox示例

實時示例 - codesandbox

實時示例 - 打字稿代碼框

實時示例 - 帶有控制面板的網站

成為贊助商！

成為贊助商，支持並幫助我們繼續發展。 - > OpenCollyce

入門

安裝

yarn add planby

npm install planby

用法

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

或者

自定義寬度和高度

 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 >

或者

時間範圍

 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

選項

USEEPG中的可用選項

財產	類型	地位	描述	使用權
`channels`	`array`	必需的	帶有頻道數據的數組
`epg`	`array`	必需的	帶有EPG數據的數組
`width`	`number`	選修的	EPG寬度
`height`	`number`	選修的	EPG高度
`sidebarWidth`	`number`	選修的	側邊欄的寬度
`timelineHeight`	`number`	選修的	時間軸的高度	`PRO`
`itemHeight`	`number`	選修的	EPG中的渠道和程序的高度。默認值為80
`dayWidth`	`number`	選修的	一天的寬度。默認值為7200。用自己的小時寬度值（例如24H * `dayWidth` （您的自定義小時寬度）設置日寬度的計算
`startDate`	`string`	選修的	日期格式`2022/02/02`或`2022-02-02T00:00:00` 。您可以設置自己的開始時間，例如`2022-02-02T10:00:00` `2022-02-02T14:00:00`等。
`endDate`	`string`	選修的	日期格式`2022-02-02T00:00:00` ： `2022-02-02T20:00:00`等必須在與`startDate` 24小時時間內。僅全時鍾小時。滾動瀏覽`multiple days` ，時間線模式僅在`PRO`計劃中可用。	`PRO`
`hoursInDays`	`array`	選修的	如果您每天的數據在一天之間有一些時間空間，則設置`multiple days`每天的開始時間和結束時間。	`PRO`
`initialScrollPositions`	`object`	選修的	在佈局中設置初始滾動位置，例如， `initialScrollPositions: { top: 500, left: 800 }`	`PRO`
`liveRefreshTime`	`number`	選修的	活動的現場刷新時間。默認值為120秒。	`PRO`
`isBaseTimeFormat`	`boolean`	選修的	轉換為12小時格式，例如， `2:00am` ， `4:00pm`等。默認值為false。
`isCurrentTime`	`boolean`	選修的	在時間表中顯示當前時間。默認值為false。	`PRO`
`isInitialScrollToNow`	`boolean`	選修的	滾動到當前的實時元素。	`PRO`
`isVerticalMode`	`boolean`	選修的	在垂直視圖中顯示時間表。默認值為false。	`PRO`
`isResize`	`boolean`	選修的	調整元素大小的可能性。	`PRO`
`isSidebar`	`boolean`	選修的	顯示/隱藏側邊欄
`isTimeline`	`boolean`	選修的	顯示/隱藏時間表
`isLine`	`boolean`	選修的	顯示/隱藏線
`isRTL`	`boolean`	選修的	將方向更改為RTL或LTR。默認值為false。	`PRO`
`theme`	`object`	選修的	主題模式的對象
`timezone`	`object`	選修的	將數據從UTC格式轉換為您自己的時區	`PRO`
`areas`	`array`	選修的	區域提供了將字段範圍添加到時間軸佈局的可能性。	`PRO`
`mode`	`object`	選修的	類型值： `day/week/month` 。樣式值： `default/modern`定義時間表的模式和样式。默認模式為`day` ，樣式為`default`	`PRO`
`overlap`	`object`	選修的	啟用佈局中的元素重疊。模式值： `stack/layer` ，demisoverlaplevel： `number`	`PRO`
`drag and drop`	`object`	選修的	在佈局中拖動並移動元素。模式值： `row/multi-rows`	`PRO`
`grid layout`	`object`	選修的	佈局上的背景網格。模式HoverHighlight值： `true/false` ，ongriditemClick：函數在單擊項目網格上具有所有屬性	`PRO`
`channelMapKey`	`string`	選修的	通道`uuid`屬性可以通過Prop控制。密鑰映射提供了使用自己數據的特定道具的可能性，而不是需要在自己的數據中映射到UUID	`PRO`
`programChannelMapKey`	`string`	選修的	可以通過Prop控製程序`channelUuid`屬性。鑰匙映射提供了使用來自自己數據的特定道具的可能性	`PRO`
`globalStyles`	`string`	選修的	注入自定義全局樣式和字體。字體重量：400,500,600。默認字體是“ Inter”	`PRO`

關於寬度和高度道具的注意

在不聲明width和length屬性的情況下，組件採用父元素的尺寸。

全球風格

注入自己的自定義字體和其他全球樣式。

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

實例屬性

從USEEPG返回的屬性

財產	類型	描述
`scrollY`	`number`	當前滾動y值
`scrollX`	`number`	當前滾動x值
`onScrollLeft`	`function(value: number)`	默認值為300
`onScrollRight`	`function(value: number)`	默認值為300
`onScrollToNow`	`function()`	滾動到當前時間/實時程序
`onScrollTop`	`function(value: number)`	默認值為300

頻道模式

財產	類型	地位
`logo`	`string`	必需的
`uuid`	`string`	必需的

EPG模式

財產	類型	地位	描述	使用權
`channelUuid`	`string`	必需的
`id`	`string`	必需的
`image`	`string`	必需的
`since`	`string`	必需的
`till`	`string`	必需的
`title`	`string`	必需的
`fixedVisibility`	`boolean`	選修的	在滾動事件期間的佈局中，該元素總是可見的	贊助商

EPG

基本道具

EPG的可用道具

財產	類型	描述	地位
`isLoading`	`boolean`	加載器狀態	選修的
`loader`	`Component`	加載程序自定義組件	選修的

佈局

基本道具

佈局中可用的道具。

財產	類型	描述	地位	使用權
`renderProgram`	`function({ program: { data: object, position: object})`	`data`對象包含與程序相關的所有屬性， `position`對象包括所有位置樣式	選修的
`renderChannel`	`function({ channel: { ..., position: object})`	`channel`對象包含與通道相關的所有屬性， `position`對象包括所有位置樣式	選修的
`renderTimeline`	`function({sidebarWidth: number})`	頻道側邊欄寬度的`sidebarWidth`值	選修的
`renderLine`	`function({styles: object})`	自定義實時跟踪行的基本`styles`和`position`值	選修的	`Sponsors`
`renderCurrentTime`	`function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})`	自定義當前時間的基本`styles`值	選修的	`Sponsors`

渲染功能

您可以使用Plaby的樣式組件來開發主要功能。此外，您可以與第三方UI庫集成。脈輪UI，材料UI等或製作自定義樣式。

渲染程序

以下是一個示例，它允許您使用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 ;

渲染圖 - 12小時的時間格式

下面是一個示例，它允許您使用Plaby的樣式組件以12小時的時間格式渲染自定義程序組件。

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

渲染圖 - RTL方向

以下是一個示例，它允許您使用Plaby的樣式組件將自定義程序組件呈現為RTL方向。

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

以下是一個示例，它允許您使用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

以下是一個示例，它允許您使用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 -RTL方向

以下是一個示例，它允許您使用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 >
  ) ;

 ...
}

主題

模式

使您的主題自定義。以下是主題模式，您可以將其作為useEpg掛鉤的選項之一。

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

所有導入選項

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