ashugaev / shri-1-verstka Goto Github PK

Показ видео я реализовал через стандартный тег "video". Изначально начинал делать через canvas, но быстро понял, что это бессмысленное увеличение потребления CPU для моих задач.

Открытие попапа происходит через перевод контейнера в абсолютное позиционирование. Сначала ему присваиваются текущие размеры и положение, затем "position: absolute" и с небольшой задержкой (что бы сработал транзишн) добавляется класс нового позиционирования. По закрытия контейнер вовращается в свои старый координаи и проиходит переключение в "position: relative".

Изменение яркость и контрастности сделано на css фильтрах, а управление через инпуты c атрибутом "type=range"

Сразу же ссори за коммиты, они получились не такими как ты просил. Мне сложно делать их маленькими и понятными, когда я делаю сам пока не знаю что и все очень быстро меняется. В общем на этим моментом буду работать.

Проверял проект в хроме и на пк(windows) на телефоне к сожалению не успел, потому что там два локал хоста(второй со стримом). Я запускал оба черен ngrok, но это не работало нормально. В общем подумаю или спрошу и сделаю апдейт, если найду способ.

Видео лагает, потому что баги эмулируются, я не успел поковыряться в настройках, оставил так

На узком экране видео при открытии может улетать выше, чем нужно. Это не успел пофиксить.

Я поленился использовать событие transitionend и сделал ожидание окончания анимации через settimeout

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

Очень хочется сделать видео одинаковыми по размеру на большой версии

Попап жутко багованный и не кроссплатформенный. Можно было бы придумать вариант получше, либо сделать лучше этот.

Страницу хорошо было бы сделать в формате главной. Т.е. сохранить хедер и футер.

Много раз мелась структура html и класы потеряли взаимосвязь, хорошобы сделать по БЭМ

Скачать и запустить этот репозиторий

Видео находятся на вкладке "видеонаблюдение"