Разработать компонент lightbox для Vue 3 (typescript)

Необходимо разработать lightbox c поддержкой двух типов контента для Vue 3 (composition API) на TS.

Есть социальная лента с уменьшеными версиями медиа-контента - изображениями и видео. При клике на уменьшеную версию, должен открываться lightbox с увеличеной версией контента. 

Что должно поддерживаться:

• Responsive - должно выглядеть, работать, и нормально масштабироваться под мобильные/планшетные/декстопные экраны
• Для видео необходимо использовать video.js как плеер
• Переключение между переданными медиа-элементами (свайпом и кнопками-стрелками)
• Индикатор текущего элемента/всех элементов
• Анимация (с возможностью отключения) переключения элементов
• Закрытие лайтбокса - при клике в любое место не занятное контентом и отдельной кнопкой “закрыть”
• Зум для изображений (pinch-to-zoom, колесиком, или кнопкой), pan изображений при зуме
• Возможность контроллировать размер видео-контента через props (подробнее в Проблемах)

Проблемы, которые надо учитывать:

• Видео 
  • Плеер слишком большой - Video.js в режиме fill будет пытаться заполнить свой контейнер, на больших экранах это выглядит так себе. Пока решали это media-query с разной шириной для контейнера видеоплеера, но возможно есть более элегантное решение.
  • Регулятор громкости и seek bar в video.js не работают, из-за mouse-drag listener-ов для листания контента.
• Изображения
  • На мобилках изображения в ligthbox-е меньше чем они в ленте (так как лента занимает всю ширину на мобилке, а lightbox нет). Пока не решили никак, но скорее всего lightbox на мобилках должен занимать весь экран, и изображения должны fit-итить в него.
  • Маленькие изображения (например 100 на 100) скейлятся до большего размера - выглядит это плохо. Чинили через object-fit: scale-down, но может есть решение лучше.

Что передается:

Как propsы компоненту передается массив объектов - каждый элемент содержит тип (видео/изображение) и ссылку на файл:

props: {

   content: {

      type: Array as PropType<ContentInfo[]>,

      required: true

   }

}

Интерфейсы:

export interface ContentInfo {

   type: string;

   video: VideoInfo;

   image: ImageInfo;

}

export interface VideoInfo {

   url: string;

   orientation: string;

   duration: string;

   poster?: string;

}

export interface ImageInfo {

   url: string;

}

Смотрели на много open-source решений, ни одно не делает что надо. По функционалу схоже c https://vue-cool-lightbox.lucaspulliese.com/, но очень важно использовать именно video.js как плеер для видео.

Возможно кто-то раньше имел опыт разработки подобных компонентов. 

Пишите сроки, цены, вопросы.