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

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

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

時(shí)間線性能

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

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

我經(jīng)常面臨的另一個(gè)問題是，應(yīng)用的數(shù)據(jù)傳輸過于冗長。當(dāng)一個(gè)應(yīng)用在你滾動(dòng)瀏覽 EPG 的時(shí)候請(qǐng)求數(shù)據(jù)，時(shí)間線會(huì)感覺很慢，甚至?xí)罎ⅰ?/p>

什么是 Planby？

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

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

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

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

嘗試 Planby

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