Создайте интерактивную временную шкалу в React с помощью этого инструмента с открытым исходным кодом.
Planby — это компонент JavaScript, который помогает создавать расписания, графики и электронные программы передач (EPG) для потоковых сервисов, музыкальных и спортивных мероприятий и многого другого.
В течение нескольких лет я работал в сфере онлайн-телевидения и видео по запросу (VOD). Работая над веб-приложением-планировщиком, я понял, что хороших решений для электронных программ передач (EPG) и планирования не существует. Следует признать, что это нишевая функция для большинства веб-разработчиков, но это обычное требование для телевизионных приложений. Я видел и анализировал ряд веб-сайтов, на которых реализованы собственные EPG или временные шкалы, и часто задавался вопросом, почему каждый изобретает свои собственные решения вместо того, чтобы работать над общим решением, которое каждый мог бы использовать. И именно тогда я начал разрабатывать Planby.
Planby — это компонент React (JavaScript), который поможет вам создавать расписания, графики и электронные программы передач (EPG) для онлайн-телевидения и услуг видео по запросу (VOD), музыкальных и спортивных мероприятий и многого другого. Planby использует собственное виртуальное представление, позволяющее работать с большим количеством данных и представлять их зрителям в удобной и полезной форме.
У Planby есть простой API, который можно интегрировать со сторонними библиотеками пользовательского интерфейса. Тема компонента настраивается в соответствии с потребностями дизайна приложения.
График производительности
Самым важным моментом при реализации функции временной шкалы является производительность. Потенциально вы обрабатываете бесконечный поток данных по множеству разных каналов. Приложения могут испытывать трудности с обновлением, перемещением и прокруткой. Вы хотите, чтобы взаимодействие пользователя с контентом было плавным.
Также существует вероятность плохого дизайна. Иногда приложение реализует временную шкалу EPG в виде списка, который необходимо прокручивать по вертикали, то есть нажимать на кнопки, чтобы перемещаться во времени влево и вправо, что быстро утомляет. Более того, иногда настройки для взаимодействия с EPG (например, рейтинг, выбор любимых каналов, чтение справа налево (RTL) и т. д.) вообще недоступны, а если и доступны, то вызывают проблемы с производительностью. .
Другая проблема, с которой я часто сталкиваюсь, заключается в том, что приложение слишком многословно передает данные. Когда приложение запрашивает данные, пока вы просматриваете EPG, временная шкала кажется медленной и даже может привести к сбою.
Что такое Планби?
Именно здесь на помощь приходит Planby. Planby создан с нуля, с использованием React и Typescript и минимального количества ресурсов. Он использует собственное виртуальное представление, позволяющее работать с огромными объемами данных. Он отображает программы и каналы пользователю и автоматически позиционирует все элементы в соответствии с часами и назначенными каналами. Если ресурс не содержит контента, Planby вычисляет расположение, чтобы временные интервалы были правильно выровнены.
Planby имеет простой интерфейс и включает в себя все необходимые функции, такие как боковая панель, сама временная шкала, приятный макет и обновление программы в реальном времени. Кроме того, есть дополнительная функция, позволяющая скрыть любой элемент, который вы не хотите включать в макет.
Planby имеет простой API, который позволяет вам как разработчику реализовывать свои собственные элементы в соответствии с вашими пользовательскими предпочтениями. Вы можете использовать тему Planby для разработки новых функций или создавать собственные стили, соответствующие выбранному вами дизайну. Вы можете легко интегрироваться с другими функциями, такими как календарь, параметры рейтинга, список избранного пользователя, прокрутка, кнопки «сейчас», расписание записи, дополнительный контент и многое другое. Более того, вы можете добавлять собственные глобальные стили, включая функциональность уровня передачи регистров (RTL).
И что самое приятное, он использует открытый исходный код, лицензированный MIT.
Попробуйте Планби
Если вы хотите попробовать Planby или просто узнать о нем больше, посетите репозиторий Git. Там у меня есть несколько примеров того, что возможно, и вы можете прочитать документацию для получения подробной информации. Пакет также доступен с помощью npm.