- Студент: Ирина Рамицан.
- Наставник: Кирилл Чистяков.
«Киноман» — сервис для фанатов большого кино. Подробная информация о горячих новинках кино, возможность выбрать и сформировать собственный список фильмов к просмотру, обсуждение кинофильмов и многое другое. «Киноман» — поможет провести время интересно.
- JavaScript (ES6)
- OOП
- MVP
- SPA
- REST API
- Паттерны программирования (Observer, Adapter)
- Webpack
После загрузки приложения в списке отображается не более 5 карточек фильмов. Показ оставшихся фильмов выполняется нажатием на кнопку «Show more». При нажатии показываются очередные 5 фильмов или оставшиеся фильмы, если их количество меньше 5. После показа всех карточек с фильмами, кнопка «Show more» скрывается. Любое изменение фильтра или сортировки сбрасывает счётчик показанных фильмов и отсчёт начинается заново. В случае отсутствия фильмов вместо списка отображается текст: «There are no movies in our database».
Карточки фильмов представлены в двух вариантах: стандартный (в списке фильмов) и расширенный (отдельный попап с описанием фильма).
В стандартном варианте карточка с фильмом содержит следующую информацию:
- Постер (картинка);
- Название фильма;
- Рейтинг;
- Год релиза;
- Продолжительность в формате часы минуты (например «1h 36m»);
- Жанр;
- Краткое описание (не более 140 символов);
- Количество комментариев;
Если описание фильма больше 140 символов, то в карточке отображается 139 символов описания и знак многоточие (…).
В карточке фильма отображается блок с кнопками управления:
- «Add to watchlist» — добавляет/удаляет фильм из списка к просмотру;
- «Already watched» — помечает фильм как просмотренный/непросмотренный;
- «Add to favorites» — добавляет/удаляет фильм в избранное.
Клик по карточке фильма (за исключением кликов по кнопкам управления) открывает попап с подробной информацией о фильме;
Попап содержит расширенную информацию о фильме:
- Полноразмерная обложка;
- Название фильма;
- Оригинальное название фильма;
- Рейтинг;
- Режиссёр;
- Сценаристы;
- Актёрский состав;
- Дата и год релиза в формате день месяц год (например: «01 April 1995»);
- Продолжительность в формате часы минуты (например «1h 36m»);
- Страна;
- Жанр (ы);
- Полное описание;
- Возрастной рейтинг;
Фильм может относиться к нескольким жанрам. Если фильм относится к нескольким жанрам, выводится «Genres», иначе «Genre».
В заголовке «Comments» отображается количество комментариев к фильму. Например: «Comments 8».
Любое изменение информации о фильме в попапе должно отображаться в списке фильмов мгновенно. При изменении информации попап не должен закрываться самовольно.
Попап можно закрыть нажатием на кнопку закрытия в правом верхнем углу (крестик) или нажатием на клавиатуре кнопки «Esc». При закрытии попап удаляется из DOM.
Одновременно может быть открыт только один попап. При открытии нового попапа прежний закрывается, например при клике на другую карточку при открытом попапе. Несохранённые изменения (неотправленный комментарий) пропадают.
Список комментариев к фильму и форма добавления нового комментария доступны в попапе. Комментарии загружаются при открытии попапа.
Каждый комментарий состоит из:
- Текст комментария;
- Эмоция;
- Автор комментария;
- Дата комментария;
- Кнопка удаления.
Дата комментария отображается в формате год/месяц/день часы:минуты (например «2019/12/31 23:59»).
Для добавления нового комментария пользователь заполняет текст комментария и выбирает эмоцию (один вариант из: smile, sleeping, puke, angry). Имя автора формируется случайным образом на сервере, с клиента оно не передаётся. Дата также приходит с сервера.
Введённые пользователем данные экранируются.
Отправка формы осуществляется нажатием комбинации клавиш Ctrl/Command + Enter.
Пользователь может удалить произвольный комментарий. Комментарий удаляется нажатием на кнопку «Delete», расположенную в блоке с комментарием.
Пользователь никак не может влиять на оценку фильма. Рейтинг фильма высчитывается на сервере.
В приложении предусмотрено несколько фильтров:
- «All movies» — все фильмы;
- «Watchlist» — фильмы, добавленные в список к просмотру (Watchlist);
- «History» — просмотренные фильмы (Already watched);
- «Favorites» — фильмы, добавленные в избранное (Favorites).
Количество фильмов, соответствующих фильтру отображается справа в элементе с фильтром. Для фильтра «All movies» количество не отображается.
Информация о количестве фильмов, соответствующих каждому фильтру доступна сразу, без необходимости применения фильтра.
Фильтр должен переключаться при клике и на надпись, и на счётчик.
Если фильтру соответствует больше 5 фильмов, то в списке фильмов по этому фильтру отображается первые 5 фильмов, а остальные отображаются по нажатию на кнопку «Show more», как и в списке фильмов «All movies».
Если список фильмов был отфильтрован, и какой-то из фильмов перестал соответствовать критериям фильтрации (например пользователь убрал отметку «Add to favorites» в списке по фильтру «Favorites»), карточка этого фильма должна быть моментально удалена из списка. Это удаление карточки не должно каким-либо образом ломать логику кнопки «Show more» или нарушать порядок сортировки.
Если в отфильтрованном списке были удалены все карточки, вместо списка отображается соответствующий текст. Например, если пользователь убрал отметки «Add to favorites» во всех фильмах в списке по фильтру «Favorites», должна появиться заглушка «There are no favorite movies now». Все фразы приведены в файле в директории с разметкой.
Пользователю доступна возможность сортировки фильмов по дате выхода (клик по ссылке «Sort by date») и рейтингу (клик по ссылке «Sort by rating»). Сортировка работает в одном направлении — от максимального к минимальному: при сортировке по дате выхода в начале списка будут самые новые фильмы, при сортировке по рейтингу — с самым высоким рейтингом.
Для отмены сортировки и возвращению к исходному порядку пользователь кликает по ссылке «Sort by default».
При смене фильтра сортировка сбрасывается на состояние «Sort by default».
Сортировка не должна отображаться, если нет фильмов для сортировки.
Сервер расположен по адресу: https://17.ecmascript.pages.academy/cinemaddict/;
Все запросы, которые отправляются серверу, должны содержать заголовок Authorization со значением Basic ${случайная строка}. Например, Basic er883jdzbdw. Случайная строка формируется однократно при старте приложения.
При отправке комментария форма, содержащая текст комментария, должна быть заблокирована. Если запрос на отправку комментария выполнился успешно, то комментарий добавляется в список комментариев. Форма добавления комментария очищается и разблокируется. При возникновении ошибки в момент отправки комментария форма, содержащая текст комментария, должна быть разблокирована и к ней применяется эффект «покачивание головой».
Обновление любого элемента в DOM происходят только после успешного выполнения запроса на сервере.
На время загрузки вместо карточек фильмов выводится информационное сообщение.
При нажатии на кнопку удаления комментария «Delete» её заголовок изменяется на «Deleting...», а сама кнопка блокируется. Если при выполнении запроса к серверу возникла ошибка, заголовок нужно вернуть к изначальному — «Delete», а кнопку разблокировать.
В момент отправки запроса на создание комментария форма блокируется от внесения изменений. Разблокировка формы происходит после завершения выполнения запроса (неважно, успешно выполнен запрос или нет).
Если запрос не удалось выполнить (сервер недоступен, произошла ошибка), форма создания остаётся открытой, к ней применяется эффект «покачивание головой».
Обновление элементов (удаление комментариев, обновление информации о фильме и так далее) в DOM происходит после успешного выполнения запроса к серверу.
Репозиторий создан для обучения на профессиональном курсе «JavaScript. Архитектура клиентских приложений» от HTML Academy.