---
author: Karol Kozer
category: 软件开发
comments_data: []
count:
  commentnum: 0
  favtimes: 0
  likes: 0
  sharetimes: 0
  viewnum: 2055
date: '2023-02-24 09:22:41'
editorchoice: false
excerpt: Planby 是一个 JavaScript 组件，用于帮助创建流媒体服务、音乐和体育赛事等的时间表、时间线和电子节目指南（EPG）。
fromurl: https://opensource.com/article/22/11/react-timeline-planby
id: 15571
islctt: true
largepic: /images/p/202302/24/092229kgr2rqm6326rgdbl.jpg
permalink: /article-15571-1.html
pic: /images/p/202302/24/092229kgr2rqm6326rgdbl.jpg.thumb.jpg
related: []
reviewer: wxy
selector: lkxed
summary: Planby 是一个 JavaScript 组件，用于帮助创建流媒体服务、音乐和体育赛事等的时间表、时间线和电子节目指南（EPG）。
tags:
- 时间线
thumb: false
title: 用这个开源工具在 React 中建立一个交互式时间轴
titlepic: true
translator: geekpi
updated: '2023-02-24 09:22:41'
---

![](/images/p/202302/24/092229kgr2rqm6326rgdbl.jpg)



> 
> Planby 是一个 JavaScript 组件，用于帮助创建流媒体服务、音乐和体育赛事等的时间表、时间线和电子节目指南（EPG）。
> 
> 
> 


几年来，我在电视在线和视频点播（VOD）行业工作。在开发一个调度器网络应用时，我意识到在电子节目指南（EPG）和调度方面没有好的解决方案。诚然，对于大多数网络开发者来说，这是一个小众的功能，但对于电视应用来说，这是一个常见的需求。我看到并分析了许多网站实现了他们自己的 EPG 或时间表，我经常想，为什么每个人似乎都在发明他们自己的解决方案，而不是致力于开发一个大家都能使用的共享解决方案。这就是我开始开发 Planby 的时候。


[Planby](https://github.com/karolkozer/planby) 是一个 React（JavaScript）组件，帮助你为在线电视和视频点播（VOD）服务、音乐和体育赛事等创建计划、时间线和电子节目指南（EPG）。Planby 使用自定义的虚拟视图，允许你对大量的数据进行操作，并以友好和有用的方式呈现给你的观众。


Planby 有一个简单的 API，你可以与第三方 UI 库集成。组件的主题是根据应用设计的需要定制的。


### 时间线性能


实现时间线功能时，最重要的是性能。你有可能在许多不同频道处理无穷无尽的数据流。应用可能不断地在刷新、移动和滚动。你希望用户与内容的互动是流畅的。


还有一个潜在的问题是设计不当。有时，一个应用以列表的形式实现 EPG 时间线，你必须垂直滚动，这意味着你必须点击按钮在时间上左右移动，这很快就会变得很累。更重要的是，有时与 EPG 互动的自定义功能（如评级、选择你最喜欢的频道、从右到左（RTL）阅读等）根本无法使用，或者即便它们可用，也会导致性能问题。


我经常面临的另一个问题是，应用的数据传输过于冗长。当一个应用在你滚动浏览 EPG 的时候请求数据，时间线会感觉很慢，甚至会崩溃。


### 什么是 Planby？


这就是 Planby 的作用。Planby 是从头开始建立的，使用 React 和 Typescript 以及少量的资源。它使用一个自定义的虚拟视图，允许你对大量的数据进行操作。它向用户显示节目和频道，并根据时间和指定频道自动定位所有元素。当一个资源不包含任何内容时，Planby 会计算定位，使时间段正确对齐。


Planby 有一个简单的界面，包括所有必要的功能，如侧边栏、时间轴本身、愉快的布局和实时节目刷新。此外，还有一个可选的功能，允许你隐藏任何你不想包括在布局中的元素。


Planby 有一个简单的 API，允许你作为开发者实现你自己的项目以及用户的偏好。你可以使用 Planby 的主题来开发新的功能，也可以制作自定义的样式来配合你选择的设计。你可以很容易地整合其他功能，如日历、评级选项、用户最喜欢的列表、滚动、“现在” 按钮、录制计划、追播内容等等。更重要的是，你可以添加自定义的全局样式，包括 RTL 功能。


最重要的是，它在 MIT 许可下开源。


### 尝试 Planby


如果你想尝试一下 Planby，或者只是想了解一下它，请访问 [Git 仓库](https://github.com/karolkozer/planby)。在那里，我已经有了一些例子，你可以阅读文档了解详情。该软件包也可以通过 `npm` 获得。




---


via: <https://opensource.com/article/22/11/react-timeline-planby>


作者：[Karol Kozer](https://opensource.com/users/karolkozer) 选题：[lkxed](https://github.com/lkxed) 译者：[geekpi](https://github.com/geekpi) 校对：[wxy](https://github.com/wxy)


本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出