首页>建站资源>网站数据
下载

描述

Planby是一个基于React的组件，可快速实施EPG，时间表，实时流媒体，音乐活动，时间表和更多想法。它使用自定义的虚拟视图，该视图使您可以在大量数据上操作。该组件具有简单的API，您可以轻松地与其他第三方UI库集成。组件主题是根据应用程序设计的需求进行定制的。

codesandbox示例

实时示例 - codesandbox

实时示例 - 打字稿代码框

实时示例 - 带有控制面板的网站

推荐

成为赞助商！

成为赞助商，支持并帮助我们继续发展。 - > OpenCollyce

入门

安装

  • 纱
yarn add planby
  • NPM 
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' ;

执照

自定义许可证 - 保留所有权利。有关更多信息，请参见LICENSE 。

接触

Karol Kozer -@kozerkarol_twitter

项目链接：https：//github.com/karolkozer/planby

展开
附加信息
相关应用
为您推荐
相关资讯 全部