用这个开源工具在 React 中建立一个交互式时间轴

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

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

​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 仓库​​。在那里,我已经有了一些例子,你可以阅读文档了解详情。该软件包也可以通过 ​​npm​​ 获得。

责任编辑:庞桂玉 来源: Linux中国
相关推荐

2020-04-06 20:47:42

FishShellLinux

2017-02-17 09:20:24

rtopSSH监控

2021-06-09 11:26:37

BokehPython可视化

2013-08-02 10:20:03

android时间轴

2022-07-14 14:37:05

Linux软件开发工具

2018-05-14 10:56:25

APPiOS开发代码

2018-05-08 08:35:34

LinuxDocker 容器管理器

2015-11-09 15:42:28

2010-12-09 21:46:26

Scapy

2013-12-18 09:51:02

2019-07-05 15:42:58

GitHub代码开发者

2021-10-27 16:03:43

Python编程语言代码

2021-09-01 09:47:25

Linux 工具 开发

2021-08-31 09:41:57

LinuxiPhone开源工具

2021-02-20 09:36:11

数据大数据数据可视化

2021-06-24 06:00:51

EleventyJavaScript静态网站

2019-06-13 10:50:17

GoAccessWebLinux

2015-10-14 17:59:53

Google数据探索交互开发

2016-11-29 12:25:56

Python大数据数据可视化

2021-04-01 13:25:46

Node命令工具
点赞
收藏

51CTO技术栈公众号