使用这个开源工具在 React 中构建交互式时间线 编程和开发
多年来，我一直从事在线电视和视频点播 (VOD) 行业。 在开发调度程序 Web 应用程序时，我意识到电子节目指南 (EPG) 和调度没有好的解决方案。 诚然，对于大多数 Web 开发人员来说，这是一个小众功能，但它是电视应用程序的普遍要求。 我看过并分析过许多实施了自己的 EPG 或时间线的网站，我经常想知道为什么每个人似乎都在发明自己的解决方案，而不是研究每个人都可以使用的共享解决方案。 那是我开始开发 Planby 的时候。
Planby 是一个 React (JavaScript) 组件，可帮助您为在线电视和视频点播 (VOD) 服务、音乐和体育赛事等创建时间表、时间表和电子节目指南 (EPG)。 Planby 使用自定义虚拟视图，允许您对大量数据进行操作，并以友好且有用的方式将其呈现给您的查看者。
Planby 有一个简单的 API，您可以将其与第三方 UI 库集成。 组件主题是根据应用程序设计的需要定制的。
时间线表现
实现时间轴功能时最重要的是性能。 您基本上可能会处理许多不同渠道的无穷无尽的数据流。 应用程序可能难以刷新、移动和滚动。 您希望用户与内容的交互是流畅的。
也有可能出现糟糕的设计。 有时，应用程序会以列表形式实现 EPG 时间轴，您必须垂直滚动，这意味着您必须单击按钮才能左右移动时间，这很快就会变得很累。 此外，有时与 EPG 交互的自定义设置（例如评级、选择您喜欢的频道、从右到左阅读 (RTL) 等）根本不可用，或者当它们可用时，它们会导致性能问题.
我经常遇到的另一个问题是应用程序的数据传输过于冗长。 当您滚动浏览 EPG 时应用程序请求数据时，时间线会感觉很慢，甚至会崩溃。
编程和开发 红帽开发人员博客 编程速查表 免费试用：红帽学习订阅电子书：Bash 编程简介 Bash shell 脚本速查表电子书：现代化企业 Java 构建应用程序的开源开发人员指南
什么是计划？
这就是 Planby 的用武之地。Planby 是从头开始构建的，使用 React 和 Typescript 以及最少的资源。 它使用自定义虚拟视图，允许您对大量数据进行操作。 它向用户显示节目和频道，并根据时间和分配的频道自动定位所有元素。 当资源不包含任何内容时，Planby 会计算定位，以便正确对齐时隙。
Planby 有一个简单的界面，包括所有必要的功能，例如侧边栏、时间线本身、令人愉快的布局和实时节目刷新。 此外，还有一个可选功能，允许您隐藏任何不想包含在布局中的元素。
Planby 有一个简单的 API，允许您作为开发人员实现您自己的项目以及您的用户偏好。 您可以使用 Planby 的主题来开发新功能，或者您可以制作自定义样式以适合您选择的设计。 您可以轻松地与其他功能集成，例如日历、评级选项、用户收藏夹列表、滚动、“现在”按钮、录制时间表、追赶内容等等。 此外，您可以添加自定义全局样式，包括寄存器传输级 (RTL) 功能。
最重要的是，它使用开源 MIT 许可。
尝试计划
如果您想尝试 Planby，或者只是想了解更多信息，请访问 Git 存储库。 在那里，我有一些可能的示例，您可以阅读文档以了解详细信息。 该包也可与 npm.
