幾年來，我在電視在線和視頻點播（VOD）行業(yè)工作。在開發(fā)一個調(diào)度器網(wǎng)絡應用時，我意識到在電子節(jié)目指南（EPG）和調(diào)度方面沒有好的解決方案。誠然，對于大多數(shù)網(wǎng)絡開發(fā)者來說，這是一個小眾的功能，但對于電視應用來說，這是一個常見的需求。我看到并分析了許多網(wǎng)站實現(xiàn)了他們自己的 EPG 或時間表，我經(jīng)常想，為什么每個人似乎都在發(fā)明他們自己的解決方案，而不是致力于開發(fā)一個大家都能使用的共享解決方案。這就是我開始開發(fā) Planby 的時候。

??Planby?? 是一個 React（JavaScript）組件，幫助你為在線電視和視頻點播（VOD）服務、音樂和體育賽事等創(chuàng)建計劃、時間線和電子節(jié)目指南（EPG）。Planby 使用自定義的虛擬視圖，允許你對大量的數(shù)據(jù)進行操作，并以友好和有用的方式呈現(xiàn)給你的觀眾。

Planby 有一個簡單的 API，你可以與第三方 UI 庫集成。組件的主題是根據(jù)應用設計的需要定制的。

時間線性能

實現(xiàn)時間線功能時，最重要的是性能。你有可能在許多不同頻道處理無窮無盡的數(shù)據(jù)流。應用可能不斷地在刷新、移動和滾動。你希望用戶與內(nèi)容的互動是流暢的。

還有一個潛在的問題是設計不當。有時，一個應用以列表的形式實現(xiàn) EPG 時間線，你必須垂直滾動，這意味著你必須點擊按鈕在時間上左右移動，這很快就會變得很累。更重要的是，有時與 EPG 互動的自定義功能（如評級、選擇你最喜歡的頻道、從右到左（RTL）閱讀等）根本無法使用，或者即便它們可用，也會導致性能問題。

我經(jīng)常面臨的另一個問題是，應用的數(shù)據(jù)傳輸過于冗長。當一個應用在你滾動瀏覽 EPG 的時候請求數(shù)據(jù)，時間線會感覺很慢，甚至會崩潰。

什么是 Planby？

這就是 Planby 的作用。Planby 是從頭開始建立的，使用 React 和 Typescript 以及少量的資源。它使用一個自定義的虛擬視圖，允許你對大量的數(shù)據(jù)進行操作。它向用戶顯示節(jié)目和頻道，并根據(jù)時間和指定頻道自動定位所有元素。當一個資源不包含任何內(nèi)容時，Planby 會計算定位，使時間段正確對齊。

Planby 有一個簡單的界面，包括所有必要的功能，如側(cè)邊欄、時間軸本身、愉快的布局和實時節(jié)目刷新。此外，還有一個可選的功能，允許你隱藏任何你不想包括在布局中的元素。

Planby 有一個簡單的 API，允許你作為開發(fā)者實現(xiàn)你自己的項目以及用戶的偏好。你可以使用 Planby 的主題來開發(fā)新的功能，也可以制作自定義的樣式來配合你選擇的設計。你可以很容易地整合其他功能，如日歷、評級選項、用戶最喜歡的列表、滾動、“現(xiàn)在” 按鈕、錄制計劃、追播內(nèi)容等等。更重要的是，你可以添加自定義的全局樣式，包括 RTL 功能。

最重要的是，它在 MIT 許可下開源。

嘗試 Planby

如果你想嘗試一下 Planby，或者只是想了解一下它，請訪問 ??Git 倉庫??。在那里，我已經(jīng)有了一些例子，你可以閱讀文檔了解詳情。該軟件包也可以通過 ??npm?? 獲得。