planby

説明

Planbyは、EPG、スケジュール、ライブストリーミング、音楽イベント、タイムラインなどのアイデアを迅速に実装するためのReactベースのコンポーネントです。カスタム仮想ビューを使用して、非常に多くのデータを操作できるようにします。コンポーネントには、他のサードパーティのUIライブラリと簡単に統合できる単純なAPIがあります。コンポーネントテーマは、アプリケーション設計のニーズに合わせてカスタマイズされます。

CodeSandBoxの例

ライブ例-CodeSandBox

ライブ例-TypeScriptCodeSandBox

ライブの例 - コントロールパネル付きのWebサイト

証言

スポンサーになりましょう！

スポンサーになり、サポートし、開発を継続するのに役立ちます。 - > opencollective

はじめる

インストール

• 糸

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です。独自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 startDate同じ24時間以内でなければなりません。フルクロック時間のみ。 multiple daysをスクロールし、タイムラインモードはPROプランでのみ使用できます。	PRO
hoursInDays	array	オプション	毎日のmultiple daysの開始時間と終了時間を設定します。各日のデータには、1日のアイテム間の時間スペースがあります。	PRO
initialScrollPositions	object	オプション	レイアウトで初期スクロール位置を設定しますinitialScrollPositions: { top: 500, left: 800 }	PRO
liveRefreshTime	number	オプション	イベントのライブリフレッシュタイム。デフォルト値は120秒です。	PRO
isBaseTimeFormat	boolean	オプション	たとえば、 2:00am 、 4:00pmなど、12時間形式に変換します。デフォルト値は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 、layeroverlaplevel： number	PRO
drag and drop	object	オプション	レイアウトで要素をドラッグして移動します。モード値： row/multi-rows	PRO
grid layout	object	オプション	レイアウト上の背景グリッド。モードHoverhighlight値： true/false 、ongriditemclick：クリックされたアイテムグリッド上のすべてのプロパティを備えた機能	PRO
channelMapKey	string	オプション	チャネルuuid属性は、提案によって制御できます。キーマップは、独自のデータにUUIDにマッピングする必要がある代わりに、自分のデータから特定の小道具を使用する可能性を提供します	PRO
programChannelMapKey	string	オプション	プログラムchannelUuid属性は、提案によって制御できます。キーマップは、データに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ライブラリEgと統合できます。チャクラUI、マテリアルUIなど、カスタムスタイルを作成します。

renderprogram

以下は、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 -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 ; 

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

 ...
} 

テーマ

スキーマ

テーマをカスタムにします。以下は、EPGフックuseEpgオプションの1つとして渡すことができるテーマスキーマです。

 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