mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
geekpi
GitHub
commit
e35215a9e4
@ -1,54 +0,0 @@
|
||||
[#]: subject: "Build an interactive timeline in React with this open source tool"
|
||||
[#]: via: "https://opensource.com/article/22/11/react-timeline-planby"
|
||||
[#]: author: "Karol Kozer https://opensource.com/users/karolkozer"
|
||||
[#]: collector: "lkxed"
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
Build an interactive timeline in React with this open source tool
|
||||
======
|
||||
|
||||
For several years, I worked in the TV online and video-on-demand (VOD) industry. While working on a scheduler web application, I realized that there were no good solutions for electronic program guides (EPG) and scheduling. Admittedly, this is a niche feature for most web developers, but it's a common requirement for TV applications. I've seen and analyzed a number of websites that have implemented their own EPG or timeline, and I often wondered why everyone seemed to be inventing their own solutions instead of working on a shared solution everyone could use. And that's when I started developing Planby.
|
||||
|
||||
[Planby][1] is a React (JavaScript) component to help you create schedules, timelines, and electronic program guides (EPG) for online TV and video-on-demand (VOD) services, music and sporting events, and more. Planby uses a custom virtual view, allowing you to operate on a lot of data, and present it to your viewers in a friendly and useful way.
|
||||
|
||||
Planby has a simple API that you can integrate with third party UI libraries. The component theme is customised to the needs of the application design.
|
||||
|
||||
### Timeline performance
|
||||
|
||||
The most significant thing when implementing a timeline feature is performance. You're potentially handling basically an endless stream of data across many many different channels. Applications can struggle with refreshing, moving, and scrolling. You want the user's interactions with the content to be fluid.
|
||||
|
||||
There's also the potential for poor design. Sometimes, an app implements an EPG timeline in the form of a list that you must scroll vertically, meaning you must click on buttons to move left and right through time, which quickly becomes tiring. What's more, sometimes customization for interacting with an EPG (such as rating, choosing your favorite channels, reading right-to-left (RTL), and so on) aren't available at all, or when they are, they cause performance issues.
|
||||
|
||||
Another problem I often face is that an app is too verbose in its data transfer. When an app requests data _while_ you scroll through the EPG, the timeline feels slow and can even crash.
|
||||
|
||||
### What is Planby?
|
||||
|
||||
This is where Planby comes in. Planby is built from scratch, using React and Typescript and a minimal amount of resources. It uses a custom virtual view, allowing you to operate on vast amounts of data. It displays programs and channels to the user, and automatically positions all elements according to hours and assigned channels. When a resource contains no content, Planby calculates the positioning so the time slots are properly aligned.
|
||||
|
||||
Planby has a simple interface and includes all necessary features, such as a sidebar, the timeline itself, a pleasant layout, and live program refreshing. In addition, there's an optional feature allowing you to hide any element you don't want to include in the layout.
|
||||
|
||||
Planby has a simple API that allows you as the developer to implement your own items along with your user preferences. You can use Planby's theme to develop new features, or you can make custom styles to fit in with your chosen design. You can easily integrate with other features, like a calendar, rating options, a list of user favorites, scroll, "now" buttons, a recording schedule, catch-up content, and much more. What's more, you can add custom global styles, including register-transfer level (RTL) functionality.
|
||||
|
||||
And best of all, it uses the open source MIT licensed.
|
||||
|
||||
### Try Planby
|
||||
|
||||
If you would like to try Planby, or just to learn more about it, visit the [Git repository][1]. There, I've got some examples of what's possible and you can read the documentation for the details. The package is also available with `npm`.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/22/11/react-timeline-planby
|
||||
|
||||
作者：[Karol Kozer][a]
|
||||
选题：[lkxed][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/karolkozer
|
||||
[b]: https://github.com/lkxed
|
||||
[1]: https://github.com/karolkozer/planby
|
||||
@ -2,7 +2,7 @@
|
||||
[#]: via: "https://itsfoss.com/downgrade-apt-package/"
|
||||
[#]: author: "Abhishek Prakash https://itsfoss.com/author/abhishek/"
|
||||
[#]: collector: "lkxed"
|
||||
[#]: translator: " "
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
[#]: subject: "Build an interactive timeline in React with this open source tool"
|
||||
[#]: via: "https://opensource.com/article/22/11/react-timeline-planby"
|
||||
[#]: author: "Karol Kozer https://opensource.com/users/karolkozer"
|
||||
[#]: collector: "lkxed"
|
||||
[#]: translator: "geekpi"
|
||||
[#]: reviewer: " "
|
||||
[#]: publisher: " "
|
||||
[#]: url: " "
|
||||
|
||||
用这个开源工具在 React 中建立一个互动的时间轴
|
||||
======
|
||||
|
||||
几年来，我在电视在线和视频点播（VOD）行业工作。在开发一个调度器网络应用时，我意识到在电子节目指南（EPG）和调度方面没有好的解决方案。诚然，对于大多数网络开发者来说，这是一个小众的功能，但对于电视应用来说，这是一个常见的需求。我看到并分析了许多网站实现了他们自己的 EPG 或时间表，我经常想，为什么每个人似乎都在发明他们自己的解决方案，而不是致力于开发一个大家都能使用的共享解决方案。这就是我开始开发 Planby 的时候。
|
||||
|
||||
[Planby][1] 是一个 React（JavaScript）组件，帮助你为在线电视和视频点播（VOD）服务、音乐和体育赛事等创建计划、时间线和电子节目指南（EPG）。Planby 使用自定义的虚拟视图，允许你对大量的数据进行操作，并以友好和有用的方式呈现给你的观众。
|
||||
|
||||
Planby 有一个简单的 API，你可以与第三方 UI 库集成。组件的主题是根据应用设计的需要定制的。
|
||||
|
||||
### 时间线性能
|
||||
|
||||
实现时间线功能时，最重要的是性能。你基本上可能会处理许多不同渠道的无穷无尽的数据流。应用可能难以刷新、移动和滚动。你希望用户与内容的互动是流畅的。
|
||||
|
||||
还有一个潜在的问题是设计不当。有时，一个应用以列表的形式实现 EPG 时间线，你必须垂直滚动，这意味着你必须点击按钮在时间上左右移动，这很快就会变得很累。更重要的是，有时与 EPG 互动的自定义功能（如评级、选择你最喜欢的频道、从右到左（RTL）阅读等）根本无法使用，或者当它们可用时，会导致性能问题。
|
||||
|
||||
我经常面临的另一个问题是，一个应用的数据传输过于冗长。当一个应用在你滚动浏览 EPG 的时候请求数据，时间线会感觉很慢，甚至会崩溃。
|
||||
|
||||
### 什么是 Planby？
|
||||
|
||||
这就是 Planby 的作用。Planby 是从头开始建立的，使用 React 和 Typescript 以及少量的资源。它使用一个自定义的虚拟视图，允许你对大量的数据进行操作。它向用户显示节目和频道，并根据时间和指定频道自动定位所有元素。当一个资源不包含任何内容时，Planby 会计算定位，使时间段正确对齐。
|
||||
|
||||
Planby 有一个简单的界面，包括所有必要的功能，如侧边栏、时间轴本身、愉快的布局和实时节目刷新。此外，还有一个可选的功能，允许你隐藏任何你不想包括在布局中的元素。
|
||||
|
||||
Planby 有一个简单的 API，允许你作为开发者实现你自己的项目以及用户的偏好。你可以使用 Planby 的主题来开发新的功能，也可以制作自定义的样式来配合你选择的设计。你可以很容易地整合其他功能，如日历、评级选项、用户最喜欢的列表、滚动、“now” 按钮、录制计划、追播内容等等。更重要的是，你可以添加自定义的全局样式，包括 RTL 功能。
|
||||
|
||||
最重要的是，它在 MIT 许可下开源。
|
||||
|
||||
### 尝试 Planby
|
||||
|
||||
如果你想尝试一下 Planby，或者只是想了解一下它，请访问 [Git 仓库][1]。在那里，我已经有了一些例子，你可以阅读文档了解详情。该软件包也可以通过 `npm` 获得。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/22/11/react-timeline-planby
|
||||
|
||||
作者：[Karol Kozer][a]
|
||||
选题：[lkxed][b]
|
||||
译者：[geekpi](https://github.com/geekpi)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/karolkozer
|
||||
[b]: https://github.com/lkxed
|
||||
[1]: https://github.com/karolkozer/planby
|
||||
Loading…
Reference in New Issue
Block a user