用這個開源工具在 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 獲得。

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

作者：Karol Kozer 選題：lkxed 譯者：geekpi 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive