Редактор мозаик видео

О проекте

Сервис, который позволяет:

Создавать и гибко редактировать мозаики(раскладки) видеопотоков с камер видеонаблюдения;
Хранить мозаики в виде дерева в соответствии с иерархией производств;
Создавать и редактировать видеопотоки.

Моя роль

Проработка и отрисовка страниц сервиса;
Разработка интуитивно понятной навигации, чтобы пользователи могли легко просматривать и редактировать данные;
Обеспечение корректного отображения интерфейса на десктопных экранах различной ширины: от 1280px до 1920px по ширине;
Передача макетов разработчикам;
Ревью верстки.

Проблемы и решения

Проблема

Редактор мозаик должен быть гибким: должна быть возможность делать горизонтальные и вертикальные ячейки видео и максимально использовать пространство, должна быть возможность делать одни ячейки крупнее других. Мозаика не должна выглядеть хаотично.

Решение

Каждую ячейку можно растянуть на соседние ячейки, тем самым объединив их области. Таким образом можно создавать как горизонтальные, так и вертикальные ячейки.

Проблема

Должен быть список непривязанных мозаик, которые можно привязать к существующим страницам.

Решение

Немодальное окно со списком непривязанных мозаик. Мозаики добавляются на страницы с помощью Drag-and-drop.

Проблема

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

Решение

Для быстрой навигации добавлен поиск по вхождению и кнопка разворачивания/сворачивания дерева. Так же возможно навигироваться в правой области с таблицей проваливаясь внутрь папок и страниц. Имеются хлебные крошки для быстрого возврата на нужный уровень. Для комфортного просмотра дерева добавлена возможность растягивать панель с деревом по ширине.

Проблема

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

Решение

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