JS: Интерфейс для работы с youtube-видео (проигрывание, синхронизация)

Задача состоит из трех экранов:

1) Интерфейс добавления видео

За основу берем viewsync.net (можно взять основу скриптов оттуда):

Пользователь создает новую "коллекцию" - набор из видео, указывает название для неё.

В ней добавляет ссылки на youtube видео и синхронизирует их по аудио дорожке (по аналогии с viewsync.net). Сохраняет.

Можно редактировать коллекцию, добавлять/убирать видео, редактировать синхронизацию.

Все сохраненные коллекции списком отображаются на главной странице.

Данные по видео (урл, время старта) храним не в url (как viewsync), а в базе.

2) Список коллекций

На главной странице видим список всех сохраненных коллекций.

По клику - переходим к плееру выбранной коллекции.

3) Плеер

За основу вида берем unsecure.viewsync.net

Просмотр начинается с первого видео из коллекции. Стрелками влево/вправо можем переключить видео на соседнее.

По нажатию на кнопку - видим список всех видео коллекции и можем переключаться между ними (Х в примере).

В итоге получается, что одновременно мы можем смотреть 1 видео из коллекции, а при переключении слышим минимально расхождение по аудио дорожке, т.к. свели видео по звуку.

Перемотка на n-секунд влияет на все видео, т.к. синхронизация по звуку должна сохраняться.

Для загрузки видео хорошо бы использовать что-то типа lazy load, чтобы подгружать нужные ролики не сразу все, а по необходимости.

Пример видео для теста синхронизации - https://viewsync.net/watch?v=NU2054dvXSQ&t=125.32&...

В качестве реализации можно написать и отдельное от viewsync решение, других я не нашел.

Возможно вместо ручной синхронизации можно сделать полностью автоматическую (чтобы было бы плюсом).