Реализуйте расписание в React с помощью компонента Planby

Реализуйте расписание в React с помощью компонента Planby

Если вы ищете быстрое решение для реализации собственного расписания, временной шкалы, EPG, живых событий, музыкальных событий, то компонент Planby — правильный инструмент.

Здравствуйте, читатели!

Сегодня я хотел бы рассказать об основах платформ веб-приложений для онлайн-телевидения и видео по запросу, которые в последнее время становятся очень популярными на рынке, что приводит к увеличению спроса на определенные функции, такие как электронная программа передач 🚀.

Краткое введение

Planby — компонент для быстрой реализации расписаний, EPG, музыкальных событий, таймлайнов и многих других нужд. Он использует настраиваемое виртуальное представление, которое позволяет вам работать с большим объемом данных. Компонент имеет простой API, который можно легко интегрировать с другими сторонними библиотеками пользовательского интерфейса, а его тему можно настроить в соответствии с потребностями дизайна приложения.

Текущая версия 0.2.0 включает в себя несколько ключевых функций, которые делают Planby полностью многофункциональным компонентом, отвечающим всем требованиям проекта.

Ниже приведен список его новых функций:

· настраиваемые временные диапазоны

· часовой формат 24ч или 12ч (AM/PM)

· пользовательская ширина часа, например. 300px и т. д.

· нестандартная ширина боковой панели

· высота пользовательского события

· настраиваемый пользовательский интерфейс событий, боковая панель и элементы временной шкалы. (Материальный пользовательский интерфейс, пользовательский интерфейс чакры, дизайн муравья и т. д.)

Что такое временная шкала на основе EPG?

EPG — это ярлык для Электронной программы передач. Он обычно используется в приложениях Online TV и VOD. В веб-разработке это новая функция, которая набирает популярность 🚀.

· Это система, которая предоставляет пользователям все доступные прошлые, текущие и будущие программы вещания от данного поставщика сигнала.

· Это позволяет вам получить текущую программу на данный день и показывает вам содержание до 7 дней вперед.

· Он включает в себя боковую панель каналов, временную шкалу и макет транслируемых программ. Пользователи могут быстро перемещаться по всему макету, чтобы увидеть информацию о программах вещания по своему выбору.

· Он содержит дополнительные функции, такие как опция напоминания, расписание записи, список избранных каналов и отображение сведений о транслируемых программах.

Описание

Много лет работая над онлайн-телевидением и веб-приложениями VOD, я понял, что нет хороших или плохих решений для реализации EPG. Я бы сказал, что есть нишевые функции для веб-разработки, которые более популярны в приложениях для Android TV. Я видел и проанализировал несколько веб-сайтов, которые внедрили свои собственные EPG, и понял, что это интересная тема для моих рук 😄.

Наиболее важной особенностью этого типа функций является ее производительность по сравнению с большими данными на веб-сайте. Приложения сталкиваются с несколькими проблемами, такими как обновление, перемещение, прокрутка EPG и взаимодействие с контентом. Иногда приложение реализует EPG в виде списка, который вы можете прокручивать по оси Y, но для прокрутки по оси X вы должны нажимать кнопки слева и справа, что утомительно и не очень хорошо для UX 😕. Кроме того, иногда на веб-сайте отсутствуют многие параметры взаимодействия с EPG, такие как рейтинг, выбор избранных каналов и RTL, поскольку они вызывают проблемы с производительностью.

Еще одна проблема, с которой я часто сталкиваюсь, заключается в том, что приложение слишком часто запрашивает данные, пока я прокручиваю EPG. Хранение всех программ без какой-либо оптимизации на странице может привести к ужасным замедлениям работы приложения, что в конечном итоге приведет к сбою браузера. Позиционирование всех программ в макете кажется простым, но иногда также может быть проблематичным и принимать форму затемнения или отсутствия контента. Суть EPG в том, что он должен быть быстрым. В целом, EPG для Интернета является проблематичным.

Планби, решение

Вот тут на помощь приходит Planby 😍. Компонент создается с нуля с помощью React и Typescript с использованием минимального количества ресурсов. Он использует настраиваемое виртуальное представление, которое позволяет вам работать с большим объемом данных. Он показывает только видимые программы и каналы в пользовательском интерфейсе и размещает все элементы в соответствии с часами на временной шкале и назначенными каналами. Если у ресурса есть программа затемнения или нет контента в EPG, проблем не будет, потому что компоненты могут сразу решить эту проблему и рассчитать позиционирование.

Planby имеет простой интерфейс и включает в себя все необходимые функции, такие как боковая панель, временная шкала, макет и обновление программ в реальном времени. Кроме того, есть дополнительная функция, позволяющая скрыть любой элемент, который вы не хотите включать в макет. Компонент имеет действительно простой API, который позволяет вам реализовывать свои собственные элементы вместе с вашими предпочтениями. Вы можете использовать компоненты стиля Planby для разработки основных функций или создания пользовательских стилей в соответствии с выбранным дизайном. Вы можете легко интегрироваться со своим приложением функций, таким как календарь, параметры рейтинга, избранное, прокрутка, кнопки «Сейчас», планирование записи, догоняющий контент и любые компоненты сторонних библиотек пользовательского интерфейса. Более того, ведется работа над поддержкой функций RTL! 🔥

Принимая во внимание всю информацию, упомянутую выше, вы можете быстро и просто настроить EPG.

Если вы хотите узнать больше, вы можете перейти на веб-сайт Planby, чтобы увидеть еще несколько примеров, или вы можете прочитать документацию в репозитории GitHub. Пакет доступен на основе npm.

Быстрый старт

Установите пакет из npm.

yarn add planby or npm install planby

Применение

import { useEpg, Epg, Layout } from 'planby';
const channels = React.useMemo(
  () => [
    {
      logo: 'https://via.placeholder.com',
      uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
      ...
    },
  ],
  []
);
const epg = React.useMemo(
  () => [
    {
      channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
      description:
        'Ut anim nisi consequat minim deserunt...',
      id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
      image: 'https://via.placeholder.com',
      since: "2022-02-02T23:50:00",
      till: "2022-02-02T00:55:00",
      title: 'Title',
      ...
    },
  ],
  []
);
const {
  getEpgProps,
  getLayoutProps
} = useEpg({
  epg,
  channels,
  startDate: '2022/02/02', // or 2022-02-02T00:00:00
});
return (
  <div>
    <div style={{ height: '600px', width: '1200px' }}>
      <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
    </div>
  </div>
);

Пример CodeSandbox

Объявление размера родительского компонента может вычислить и настроить измерение компонента.

Если вы хотите установить свой собственный диапазон времени, вам нужно добавить время в реквизиты startDate и endDate.

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
  startDate: '2022-02-02T10:00:00',
  endDate: '2022-02-02T20:00:00',
  width: 1200,
  height: 600
});

return (
  <div>
     <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
  </div>

Если вы хотите, вы можете объявить свой собственный компонент элемента программы или создать собственные стили в соответствии с выбранным дизайном.

import {
  useEpg,
  Epg,
  Layout,
  ProgramBox,
  ProgramContent,
  ProgramFlex,
  ProgramStack,
  ProgramTitle,
  ProgramText,
  ProgramImage,
  useProgram,
  Program,
  ProgramItem
} from "planby";


const Item = ({ program,...rest }: ProgramItem) => {
  const { styles, formatTime, isLive, isMinWidth } = useProgram({ program,...rest });

  const { data } = program;
  const { image, title, since, till } = data;

  const sinceTime = formatTime(since);
  const tillTime = formatTime(till);

  return (
    <ProgramBox width={styles.width} style={styles.position}>
      <ProgramContent
        width={styles.width}
        isLive={isLive}
      >
        <ProgramFlex>
          {isLive && isMinWidth && <ProgramImage src={image} alt="Preview" />}
          <ProgramStack>
            <ProgramTitle>{title}</ProgramTitle>
            <ProgramText>
              {sinceTime} - {tillTime}
            </ProgramText>
          </ProgramStack>
        </ProgramFlex>
      </ProgramContent>
    </ProgramBox>
  );
};

function App() {

  ...

 const {
  getEpgProps,
  getLayoutProps,
} = useEpg({
  epg,
  channels,
  startDate: '2022/02/02', // or 2022-02-02T00:00:00
});

return (
  <div>
    <div style={{ height: '600px', width: '1200px' }}>
      <Epg {...getEpgProps()}>
        <Layout
            {...getLayoutProps()}
            renderProgram={({ program,...rest }) => (
              <Item key={program.data.id} program={program} {...rest} />
            )}
          />
      </Epg>
    </div>
  </div>
);
}

export default App;

Вот и вся установка! 🚀

Сводка

Надеюсь, вам будет интересна эта статья 😄. Если вы работаете с Online TV/VOD или ваша компания ищет EPG, ознакомьтесь с Planby и рассмотрите его как окончательное решение. 😄