Crie uma linha do tempo interativa no React com esta ferramenta de código aberto
Planby é um componente JavaScript para ajudar a criar programações, cronogramas e guias eletrônicos de programação (EPG) para serviços de streaming, eventos musicais e esportivos e muito mais.
Durante vários anos, trabalhei na indústria de TV online e vídeo sob demanda (VOD). Enquanto trabalhava em um aplicativo web de agendamento, percebi que não havia boas soluções para guias eletrônicos de programação (EPG) e agendamento. É certo que este é um recurso de nicho para a maioria dos desenvolvedores web, mas é um requisito comum para aplicativos de TV. Já vi e analisei vários sites que implementaram seu próprio EPG ou cronograma, e muitas vezes me perguntei por que todos pareciam estar inventando suas próprias soluções em vez de trabalhar em uma solução compartilhada que todos pudessem usar. E foi aí que comecei a desenvolver o Planby.
Planby é um componente React (JavaScript) para ajudá-lo a criar programações, cronogramas e guias eletrônicos de programação (EPG) para TV online e serviços de vídeo sob demanda (VOD), música e eventos esportivos e muito mais. Planby usa uma visualização virtual personalizada, permitindo operar com muitos dados e apresentá-los aos seus visualizadores de uma forma amigável e útil.
Planby tem uma API simples que você pode integrar com bibliotecas de UI de terceiros. O tema do componente é customizado de acordo com as necessidades do design do aplicativo.
Desempenho da linha do tempo
A coisa mais importante ao implementar um recurso de linha do tempo é o desempenho. Você está potencialmente lidando basicamente com um fluxo interminável de dados em muitos canais diferentes. Os aplicativos podem ter dificuldades para atualizar, mover e rolar. Você deseja que as interações do usuário com o conteúdo sejam fluidas.
Também existe o potencial para um design deficiente. Às vezes, um aplicativo implementa uma linha do tempo EPG na forma de uma lista que você deve rolar verticalmente, o que significa que você deve clicar nos botões para mover para a esquerda e para a direita no tempo, o que rapidamente se torna cansativo. Além do mais, às vezes a personalização para interagir com um EPG (como classificação, escolha de seus canais favoritos, leitura da direita para a esquerda (RTL) e assim por diante) não está disponível ou, quando está, causa problemas de desempenho .
Outro problema que enfrento frequentemente é que um aplicativo é muito detalhado na transferência de dados. Quando um aplicativo solicita dados enquanto você percorre o EPG, a linha do tempo parece lenta e pode até travar.
O que é Planby?
É aqui que entra o Planby. O Planby é construído do zero, usando React e Typescript e uma quantidade mínima de recursos. Ele usa uma visualização virtual personalizada, permitindo operar com grandes quantidades de dados. Apresenta programas e canais ao usuário e posiciona automaticamente todos os elementos de acordo com horários e canais atribuídos. Quando um recurso não contém conteúdo, o Planby calcula o posicionamento para que os intervalos de tempo fiquem devidamente alinhados.
Planby possui uma interface simples e inclui todos os recursos necessários, como barra lateral, a própria linha do tempo, um layout agradável e atualização do programa ao vivo. Além disso, há um recurso opcional que permite ocultar qualquer elemento que você não deseja incluir no layout.
Planby tem uma API simples que permite que você, como desenvolvedor, implemente seus próprios itens junto com suas preferências de usuário. Você pode usar o tema do Planby para desenvolver novos recursos ou pode criar estilos personalizados para se adequar ao design escolhido. Você pode integrar facilmente outros recursos, como calendário, opções de classificação, lista de favoritos do usuário, rolagem, botões "agora", programação de gravação, conteúdo de atualização e muito mais. Além do mais, você pode adicionar estilos globais personalizados, incluindo funcionalidade de nível de transferência de registro (RTL).
E o melhor de tudo é que utiliza código aberto licenciado pelo MIT.
Experimente o Planby
Se você quiser experimentar o Planby, ou apenas saber mais sobre ele, visite o repositório Git. Lá, tenho alguns exemplos do que é possível e você pode ler a documentação para obter detalhes. O pacote também está disponível com npm.