Модуль 5 «React и паттерны» #5
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Для воспроизведения мелодий создадим новый компонент «AudioPlayer». Оба игровых экрана (`ArtistQuestionScreen`, `GenreQuestionScreen`) умеют воспроизводить мелодии. Поэтому функциональность для воспроизведения разумно вынести в отдельный компонент и переиспользовать многократно. Проигрывать мелодии будем с помощью тега `<audio>` и хука `useRef`. Чтобы связать `ref` с компонентом `audio`, передадим ему в пропе `ref`, созданную после вызова `useRef` ссылку. Поскольку в игре предусмотрена возможность приостанавливать и возобновлять воспроизведение мелодий, компоненту `AudioPlayer` потребуется состояние. В стейте сохраним информацию о готовности воспроизводить мелодию (`isLoaded`), и статусу воспроизведения (`isPlaying`): проигрывается или приостановлено.
Воспользуемся пакетом `classnames`, чтобы изменять классы элемента в зависимости от состояния.
Воспользуемся компонентом `AudioPlayer` в `ArtistQuestionScreen`. Плееру требуется передать путь к мелодии, которую следует воспроизводить (`src`) и необходимость воспроизведения сразу как только мелодия будет готова для воспроизведения.
Аналогичную процедуру проделаем в компоненте `GenreQuestionScreen`.
Мелодии проигрываются, но есть сложности с управлением воспроизведением. Например, в игре «Угадай жанр» можно одновременно запустить несколько мелодий. Перенос контроля за состоянием плеера в родительские компоненты поможет решить эту проблему. Проведём небольшой рефакторинг `ArtistQuestionScreen` и `GenreQuestionScreen`. В первом компоненте определим стейт с одним полем: `isPlaying`. А для `GenreQuestionScreen` добавим в стейт поле `activePlayer`. В нём будем фиксировать плеер, который воспроизводит мелодию в данный момент. В компоненте `AudioPlayer` удалим из стейта поле `isPlaying`. Больше оно нам не потребуется.
Создадим директорию hocs, а в ней новый модуль `with-audio-player.jsx`. В нём опишем одноимённый HOC. В этом HOC реализуем стейт для хранения информации о плеере, который воспроизводит мелодию в настоящий момент времени. HOC вернёт новый компонент и через render-prop прокинет `AudioPlayer`.
Стейт в компоненте `ArtistQuestionScreen` больше не нужен. Ровным счётом как и подключение `AudioPlayer`. Выполним небольшой рефакторинг и для отрисовки плеера воспользуемся рендер-пропом `renderPlayer`.
Компонент `AudioPlayer` больше не нужен в `GenreQuestionScreen`. Для этого мы создали HOC. Следовательно, подключение компонента необходимо удалить, а заодно убрать из стейта `activePlayer`.
Воспользуемся HOC `withActivePlayer` в компоненте `GameScreen`. Подключим HOC, создадим обёртки (`GenreQuestionScreenWrapped`, `ArtistQuestionScreenWrapped`) и воспользуемся ими.
Компонент `AudioPlayer` можно оптимизировать. Для этого вынесем логику добавления и удаления событий на элемент `<audio>` в новый хук useElementListener.
Отдельно добавим типизацию хука useElementListener.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.