Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Модуль 5 «React и паттерны» #5

Merged
merged 11 commits into from
Dec 1, 2023
Merged

Модуль 5 «React и паттерны» #5

merged 11 commits into from
Dec 1, 2023

Commits on Dec 1, 2023

  1. 5.1. Добавит новый компонент AudioPlayer. 

    Для воспроизведения мелодий создадим новый компонент «AudioPlayer». Оба
игровых экрана (`ArtistQuestionScreen`, `GenreQuestionScreen`) умеют
воспроизводить мелодии. Поэтому функциональность для воспроизведения
разумно вынести в отдельный компонент и переиспользовать многократно.

Проигрывать мелодии будем с помощью тега `<audio>` и хука `useRef`.
Чтобы связать `ref` с компонентом `audio`, передадим ему в пропе `ref`,
созданную после вызова `useRef` ссылку. Поскольку в игре предусмотрена
возможность приостанавливать и возобновлять воспроизведение мелодий,
компоненту `AudioPlayer` потребуется состояние.

В стейте сохраним информацию о готовности воспроизводить мелодию
(`isLoaded`), и статусу воспроизведения (`isPlaying`): проигрывается
или приостановлено.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    e916782 View commit details
    Browse the repository at this point in the history

  2. 5.2. Добавит classnames. 

    Воспользуемся пакетом `classnames`, чтобы изменять классы элемента
в зависимости от состояния.
    @Jahonta @AntonovIgor
    Jahonta authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    3f0f45c View commit details
    Browse the repository at this point in the history

  3. 5.3. Подключит компонент AudioPlayer в ArtistQuestionScreen. 

    Воспользуемся компонентом `AudioPlayer` в `ArtistQuestionScreen`. Плееру
требуется передать путь к мелодии, которую следует воспроизводить
(`src`) и необходимость воспроизведения сразу как только мелодия будет
готова для воспроизведения.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    8b33803 View commit details
    Browse the repository at this point in the history

  4. 5.4. Подключит компонент AudioPlayer в GenreQuestionScreen. 

    Аналогичную процедуру проделаем в компоненте `GenreQuestionScreen`.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    41711ab View commit details
    Browse the repository at this point in the history

  5. 5.5. Перенесёт контроль за состоянием плеера в родительский компонент. 

    Мелодии проигрываются, но есть сложности с управлением воспроизведением.
Например, в игре «Угадай жанр» можно одновременно запустить несколько
мелодий.

Перенос контроля за состоянием плеера в родительские компоненты поможет
решить эту проблему. Проведём небольшой рефакторинг `ArtistQuestionScreen`
и `GenreQuestionScreen`.

В первом компоненте определим стейт с одним полем: `isPlaying`. А для
`GenreQuestionScreen` добавим в стейт поле `activePlayer`. В нём
будем фиксировать плеер, который воспроизводит мелодию в данный момент.

В компоненте `AudioPlayer` удалим из стейта поле `isPlaying`. Больше оно
нам не потребуется.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    77d9ca5 View commit details
    Browse the repository at this point in the history

  6. 5.6. Добавит HOC withAudioPlayer. 

    Создадим директорию hocs, а в ней новый модуль `with-audio-player.jsx`.
В нём опишем одноимённый HOC.

В этом HOC реализуем стейт для хранения информации о плеере, который
воспроизводит мелодию в настоящий момент времени. HOC вернёт новый
компонент и через render-prop прокинет `AudioPlayer`.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    84fbe57 View commit details
    Browse the repository at this point in the history

  7. 5.7. Уберёт подключение AudioPlayer из ArtistQuestionScreen. WIP 

    Стейт в компоненте `ArtistQuestionScreen` больше не нужен. Ровным счётом
как и подключение `AudioPlayer`. Выполним небольшой рефакторинг и для
отрисовки плеера воспользуемся рендер-пропом `renderPlayer`.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    8660266 View commit details
    Browse the repository at this point in the history

  8. 5.8. Уберёт подключение AudioPlayer из GenreQuestionScreen. WIP 

    Компонент `AudioPlayer` больше не нужен в `GenreQuestionScreen`. Для
этого мы создали HOC. Следовательно, подключение компонента необходимо
удалить, а заодно убрать из стейта `activePlayer`.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    421a8b4 View commit details
    Browse the repository at this point in the history

  9. 5.9. Подключит HOC в GameScreen. 

    Воспользуемся HOC `withActivePlayer` в компоненте `GameScreen`.
Подключим HOC, создадим обёртки (`GenreQuestionScreenWrapped`,
`ArtistQuestionScreenWrapped`) и воспользуемся ими.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    38503a5 View commit details
    Browse the repository at this point in the history

  10. 5.10. Добавит новый хук useElementListener 

    Компонент `AudioPlayer` можно оптимизировать. Для этого вынесем логику
добавления и удаления событий на элемент `<audio>` в новый хук useElementListener.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    f64158c View commit details
    Browse the repository at this point in the history

  11. 5.11. Добавит типизацию хука useElementListener 

    Отдельно добавим типизацию хука useElementListener.
    @kam4atka @AntonovIgor
    kam4atka authored and AntonovIgor committed Dec 1, 2023
    Configuration menu
    Copy the full SHA
    7c46a9b View commit details
    Browse the repository at this point in the history