Задание 3. Найдите ошибки

Это решение тестового задания 3 в Школу разработки интерфейсов, Яндекс, 2021.

В данном репозитории находится исправленный код плеера, а также встроенный репозиторий с кодом для первого задания.

Запуск

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

git clone  --recursive

Если вы забыли указать флаг --recursive при клонировании, вы можете склонировать субмодули отдельно, выполнив следующие команды в директории проекта:

git submodule init
git submodule update

Для запуска понадобится pnpm.
Если его нет, смотрите ниже.

Сначала установите зависимости для всех воркспейсов:

pnpm install

Соберите приложения из первого и третьего задания и запустите сервер одной командой:

pnpm start

---

Без pnpm можно воспользоваться тем фактом, что тестовая система требует добавления собранных файлов и запустить сервер так:

npm install
cd task3
npm start

Что было исправлено

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

1. Ошибки компиляции TypeScript (89cf40).
   Чтоб приложение хотя бы компилировалось, нужно было понять, где TS ругается. Проблема была в забытом и не включенном в объединение типе.

2. Ошибка копирования в действиях кнопок плеера (36046f).
   Возможно, при копировании (а может, и специально 😈) забыли поменять действие кнопки "Следующий слайд", из-за чего она переключала слайды назад.

3. Прописан режим development для Webpack (c5514c).
   Без него Webpack спамил предупреждениями в консоль браузера о неуказанном режиме и слишком больших размерах бандлов. Это мешало разобраться с остальными проблемами в коде.

4. Добавлена проверка на null в обработчике кликов для iframe (ecbaba).
   В противном случае при клике на неинтерактивный элемент была ошибка чтения свойства из undefined.

5. Убран страшный неиспользуемый код (900312).
   Видимо, намеренно добавлен был лишний код, при чем максимально запутанный. Убрал, чтоб не тратить время на его осознание.

6. Добавлен сброс темы при установке новой (c02ce6).
   Ранее при установке другой темы класс имеющейся темы не снимался, что мешало стилям.

7. Снято ограничение на высоту для показа кнопки "Предыдущий слайд" (5f081a).
   В спецификации задания ничего не сказано о том, что кнопка "Предыдущий слайд" должна быть скрыта для низких экранов, тем более, что адаптивности это не мешает.

8. Установлено корректное значение высоты для прогресс-баров (62d9ba).
   Вероятно, предыдущие разработчики забыли дописать единицы измерения. px в данном случае оказался наиболее адекватной единицой измерения.

9. Тема по умолчанию изменена на темную (00a90a).
   В четком соответствии со спецификацией задания.

10. Размер по умолчанию для прогресс-баров установлен в 0 (12cfe1).
    В спецификации это, вроде бы, не требуется, но так намного красивее.

11. Исправлен селектор индексов слайда (76d27a).
    На кой-то черт Непонятно, с какой целью, прошлые разработчки добавили mergeMapTo(EMPTY) в Observable, который должен был передавать информацию о смене слайдов. Этот лишний объект в цепи обработки событий заменял каждое событие на пустую последовательность событий, из-за чего слайды не менялись.

12. Починено голосование (02708c).
    Теперь при голосовании за какого-то участника слайд показывает результаты голосования.

Выбор инструментов

• pnpm – намного более быстрая и удобная альтернатива npm. В отличие от yarn, не позволяет папке node_modules/ раздуваться. Думаю, не стоит объяснять, почему это хорошо :)

• Prettier – согласен со многими стилевыми решениями, которые реализует этот форматтер. Минимальные усилия на конфигурацию + работа с большим количеством форматов. Прогнал его в самом начале работы над кодом, чтоб в дальнейшем не отвлекаться на форматирование.