Яндекс Дом

https://vak1n.github.io/smarthouse/public/

Версия ноды

Используемая версия ноды при разработке v10.12.0

Разработка

npm install
npm run dev

Сборка

npm run build

Инструменты

в качестве препроцессора css используется sass
в качестве сборщика используется webpack
normalize.css подключается через CDN
в качестве линтера используется eslint c конофигом от airbnb
в качестве шаблонизатора используется механизм для отложенного рендера клиентского контента <template>

Первое задание «Адаптивная вёрстка»

Вёрстку адаптирована для экранов размером от 320px до 1920px по ширине

Шапка

в мобильной версии шапка прибита к вверзу экрана
в мобильной версии меню скрывается под 'гамбургер'
меню рендерится на основе получаемых от сервера данных в фомате json

Подвал

меню рендерится на основе все тех же получаемых данных

Карточка события

карточки рендерятся на основе получаемых от сервера данных в фомате json
у карточек без дополнительных данных показываются контролы (крестик и стрелка),
на десктопе контолы показываются при наведении, на мобильных устройствах всегда

Копмоновка карточек

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

Дополнитеьно

добавлена адаптивная типографика, шрифты указываются с еденицами rem относительно елемента html, под разные экраны у html задаются свои размеры шрифта
изображения графика и камеры адаптивные
иконки карточек выводятся разного размера, взависимости от ширины экрана

Второе задание «Работа с сенсорным пользовательским вводом»

В блоке "Пылесос застрял" на изображении добавлены жесты на сенсорных устройствах

zoom / pinch позволяет увеличивать и сужать изображение
после zoom доступен swipe позволяющий перемещатся по кратинке
rotate позволяет изменять яркость изображения

В десктопной версии для масштабирования, перемещения и изменения яркости добавлены контролы

Третье задание «Мультимедиа»

Запуск

См. выше версию ноды

Видео потоки

git clone https://github.com/mad-gooze/shri-2018-2-multimedia-homework.git
cd shri-2018-2-multimedia-homework
npm i
npm start

Фронетд

git clone https://github.com/vak1n/smarthouse.git --branch task-3
cd smarthouse
npm i
npm start

Страница "Видеонаблюдение"

Добавлена страница "Видеонаблюдение" http://localhost:9000/video.html на которой находится сетка из 4-ёх видео-превью. Клик по превью разворачивает соответствующее видео на всю страницу с анимацией по аналогии с маковским приложением Photo Booth. Анимация реализована через css свойство transform scale. При повороте мобильного устройтсва, открытое видео адаптируется под новые размеры экрана. В правом верхнем углу кнопка "Все камеры" позволяет вернуться назад.

Страница работатет в актуальной версии Chrome (а так же Яндекс Браузер, Firefox, Edge) на десктопе и на Android. Для проигрывания HLS-потока на платформах без нативной поддержки HLS подключается библиотека hls.js.

Фильтры для видео

При развернутом видео внизу находятся контролы яркости и контрастности. Фильтры на видео накладываютмя через css свойство filter.

Анализатор звука

В окне с развернутым видео в левом верхнем углу есть анализатор громкости звука потока из открытой камеры. Анализатор получает данные через Web Audio Api и выводит в canvas в виде столбчатой диаграммы.

Бонусные задания

Информация об уровне освещенности при раскрытом видео выводится внизу по центру экрана в процентах.

Четвертое задание «Node.js»

Здесь https://github.com/vak1n/smarthouse-server

Седьмое задание «Типизация»

Код переписан на TypeScript Компиляция и запуск см. выше пункты Сборка и Разработка

используется строгий режим "strict": true
отсутствуют @ts-ignore
минимальное использование type assertions, как например someVar as SomeType
подключен tslint

Сложные моменты перевода проекта на TypeScript

Сложных моментов не было, были объемные.

Найдены ошибки в процессе перевода

В процессе работы были найдены места, которые в дальнешей работе с проетом могли привести к ошибкам:

отсутствие нужных дом элементов на странице
изменение получаемых от api данных

Продолжу ли работать с TypeScript?

Да. Типизация дает большую уверенность в том, что при внесении изменений к проект, что-то сломается.