feat(audio): audio settings in local storage #831
Conversation
WalkthroughThis pull request introduces enhancements to the audio management system within the application. Key changes include the addition of a configuration file for Cucumber.js tests targeting audio functionalities, updates to the audio store to support local storage for user preferences, and modifications to various components to integrate audio settings. New test cases have also been added to ensure comprehensive coverage of the audio features, including user interactions and state persistence. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant AudioStore
participant Howler
User->>App: Load application
App->>AudioStore: Retrieve audio settings from local storage
AudioStore-->>App: Return audio settings
App->>Howler: Set audio settings based on store state
Howler-->>App: Confirm settings applied
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (12)
- .run/Audio.run.xml (1 hunks)
- app/app.vue (2 hunks)
- app/components/layouts/default/NavBar/MuteButton/MuteButton.vue (1 hunks)
- app/stores/audio/constants/audio.constants.ts (2 hunks)
- app/stores/audio/types/audio.types.ts (1 hunks)
- app/stores/audio/useAudioStore.ts (3 hunks)
- app/utils/enums/local-storage.enums.ts (1 hunks)
- tests/acceptance/features/audio/features/audio.feature (1 hunks)
- tests/acceptance/features/audio/step-definitions/audio.when-steps.ts (1 hunks)
- tests/unit/specs/app.nuxt.spec.ts (2 hunks)
- tests/unit/specs/components/layouts/default/MuteButton/MuteButton.nuxt.spec.ts (1 hunks)
- tests/unit/specs/stores/audio/useAudioStore.spec.ts (4 hunks)
Additional comments not posted (17)
app/utils/enums/local-storage.enums.ts (1)
3-3: Approved: Addition ofAUDIO_SETTINGStoLocalStorageKeys.The addition of
AUDIO_SETTINGSto theLocalStorageKeysenum is correctly implemented and aligns with the PR objectives to enhance local storage management for audio settings.app/stores/audio/types/audio.types.ts (2)
4-6: Approved: Definition ofAudioSettings.The new type
AudioSettingsis well-defined with a boolean propertyisMuted, enhancing the type system for managing audio settings.
13-13: Approved: Export ofAudioSettings.The inclusion of
AudioSettingsin the exported types ensures it is available for use throughout the application, aligning with the PR objectives.tests/acceptance/features/audio/step-definitions/audio.when-steps.ts (1)
5-7: Approved: Cucumber step definitions for audio settings.The new Cucumber step definitions for muting and unmuting audio are clearly defined and utilize the helper function
clickOnRoleWithTexteffectively. This aligns well with the PR objectives to enhance audio management through user interactions.Also applies to: 9-11
.run/Audio.run.xml (1)
1-12: Configuration for Cucumber.js tests is well-defined.The XML configuration for Cucumber.js tests is correctly set up with appropriate paths, arguments, and environment settings. Using
$PROJECT_DIR$for paths ensures flexibility and correctness in various environments. The specific inclusion of--tags @audioincucumberJsArgumentsis well-aligned with the PR's focus on enhancing audio functionalities.app/app.vue (1)
40-40: Ensure audio settings are applied correctly.The call to
setHowlerAudioSettingsFromAudioStoreStateis placed correctly in the control flow to ensure audio settings are applied immediately after roles are fetched. However, adding a check to confirm that the settings have been applied successfully would enhance reliability.Verification successful
Audio settings application is verified by existing tests.
The function
setHowlerAudioSettingsFromAudioStoreStateis tested to ensure it correctly applies audio settings by calling Howler's mute function with the appropriate value. While the review comment suggests adding runtime checks for confirmation, the existing unit tests already provide verification of the function's behavior. Consider adding runtime checks as an enhancement for future reliability improvements.
app/stores/audio/useAudioStore.ts: Function definition and logic.tests/unit/specs/stores/audio/useAudioStore.spec.ts: Unit tests verifying the function's behavior.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that audio settings are applied correctly. # Test: Check for error handling around audio settings application. rg --type vue -A 5 $'setHowlerAudioSettingsFromAudioStoreState'Length of output: 90
Script:
#!/bin/bash # Description: Search for the function setHowlerAudioSettingsFromAudioStoreState across all files to verify error handling or confirmation of settings application. # Locate all occurrences of the function call and check for error handling or confirmation logic. rg 'setHowlerAudioSettingsFromAudioStoreState' -A 5Length of output: 94141
tests/acceptance/features/audio/features/audio.feature (1)
1-32: Comprehensive Cucumber feature tests for audio functionalities.The scenarios outlined in the Cucumber feature file are well-structured and effectively test the audio functionality, including default behavior and persistence through local storage. Ensure that all edge cases are covered, such as handling failures or unexpected user inputs, to enhance the robustness of the tests.
app/stores/audio/constants/audio.constants.ts (1)
3-6: Well-implemented constant for default audio settings.The addition of
DEFAULT_AUDIO_SETTINGSis well-implemented with explicit typing and immutability ensured byas const. Usingsatisfies AudioSettingsensures that the constant adheres to the expected type, enhancing type safety and maintainability.app/components/layouts/default/NavBar/MuteButton/MuteButton.vue (2)
40-51: Refactoring and new functionality inMuteButton.vueenhances modularity and error handling.The addition of
animateSoundLottiefunction and the refactoring ofonClickFromMuteButtonimprove the structure and readability of the component. The error handling inanimateSoundLottieis robust, preventing silent failures if the component is not properly initialized.
59-66: Proactive handling of component state on mount.The use of
onMountedto check theisMutedstate and trigger the animation accordingly is a good practice. It ensures that the component reflects the correct state upon initialization, enhancing the user experience.tests/unit/specs/app.nuxt.spec.ts (1)
51-55: Enhanced test coverage for audio settings.The addition of a new test case to verify the interaction with the audio store is a significant improvement. It ensures that the audio settings are correctly configured from the store, enhancing the reliability of the application.
app/stores/audio/useAudioStore.ts (1)
12-12: Approved: Integration of local storage for audio settings.The use of
useLocalStoragefor persisting audio settings is a good practice, ensuring user preferences are maintained across sessions.tests/unit/specs/components/layouts/default/MuteButton/MuteButton.nuxt.spec.ts (3)
47-63: Approved: Test case for mute button animation when audio is initially muted.The test case is well-structured and effectively verifies the animation behavior of the mute button under the specified condition. It correctly uses the
advanceTimersByTimefunction to simulate the delay.
65-67: Approved: Test case for no animation when audio is not muted.The test case effectively verifies that no animation is triggered when the audio is not muted, ensuring that the
playSegmentsmethod is not called.
69-84: Approved: Test case for no animation when rendered before 10ms.The test case effectively verifies that no animation occurs if the mute button is rendered and the audio is muted, but the time elapsed is less than 10 milliseconds. It correctly uses the
advanceTimersByTimefunction to simulate the time condition.tests/unit/specs/stores/audio/useAudioStore.spec.ts (2)
69-73: Approved: Test case for setting audio settings from local storage when created.The test case effectively verifies that audio settings are correctly retrieved from local storage upon creation of the audio store. It correctly uses the
useLocalStoragemock to simulate this behavior.
100-107: Approved: Test suite forsetHowlerAudioSettingsFromAudioStoreState.The test suite is comprehensive and effectively verifies that the mute state is correctly applied to the
Howlerinstance based on the audio store's state. It correctly uses theHowler.mutemock to simulate this behavior.
|
## [1.32.0](v1.31.0...v1.32.0) (2024-09-18) ### 🚀 Features * **audio:** audio settings in local storage ([#831](#831)) ([cd8a2cb](cd8a2cb)) * **game-lobby:** all game lobby is responsive ([#877](#877)) ([aaccf38](aaccf38)) * **game-lobby:** auto-focus on player name input ([#860](#860)) ([7897da3](7897da3)) * **game-lobby:** auto-focus on player name input even after changing page ([#873](#873)) ([3bb8401](3bb8401)) * **game-lobby:** display disclaimer for small screens ([#853](#853)) ([81029b8](81029b8)) * **game-lobby:** game options confirm step in lobby ([#845](#845)) ([20cc2ce](20cc2ce)) * **game:** all game screens are responsive ([#880](#880)) ([b54b1dc](b54b1dc)) * **game:** game over screens are responsive ([#883](#883)) ([aacb761](aacb761)) * **misc-pages:** responsive for canceled game and not found game pages ([#888](#888)) ([deeb7b2](deeb7b2)) * **nuxt:** set route announcer ([#835](#835)) ([dd1115f](dd1115f)) * **nuxt:** typecheck on hooks and ci ([#832](#832)) ([794157f](794157f)) ### 🐛 Bug Fixes * **deps:** update dependency @primevue/themes to ^4.0.6 ([#842](#842)) ([4d3e063](4d3e063)) * **deps:** update dependency @primevue/themes to ^4.0.7 ([#855](#855)) ([2b80485](2b80485)) * **deps:** update dependency primevue to ^4.0.6 ([#843](#843)) ([3a20f01](3a20f01)) * **deps:** update dependency primevue to ^4.0.7 ([#856](#856)) ([6c75a61](6c75a61)) * **game-events:** icon animation null instance handler ([#889](#889)) ([ee0a17e](ee0a17e)) * **pwa:** remove redirect fallback ([#830](#830)) ([69c2c21](69c2c21)) ### 🔩 Refactor * **primevue:** use new accordion component ([#834](#834)) ([f611995](f611995)) * **primevue:** use new tab components ([#836](#836)) ([4f9c1b9](4f9c1b9)) ### ✅ Tests * **scapegoat:** acceptance tests ([#884](#884)) ([add895e](add895e)) ### 🔁 CI * **node:** use last node version in ci ([#848](#848)) ([aa047b3](aa047b3)) ### 🧹 Chore * **deps:** update commitlint monorepo to ^19.5.0 ([#852](#852)) ([cefe4af](cefe4af)) * **deps:** update dependency @cucumber/cucumber to ^11.0.1 ([#869](#869)) ([c00d3e7](c00d3e7)) * **deps:** update dependency @cucumber/cucumber to v11 ([#817](#817)) ([dcbad46](dcbad46)) * **deps:** update dependency @faker-js/faker to ^9.0.1 ([#870](#870)) ([da15f7c](da15f7c)) * **deps:** update dependency @nuxt/test-utils to ^3.14.2 ([#846](#846)) ([f0f715a](f0f715a)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.2 ([#764](#764)) ([0fe9bf0](0fe9bf0)) * **deps:** update dependency @nuxtjs/i18n to ^8.5.3 ([#849](#849)) ([1689312](1689312)) * **deps:** update dependency @nuxtjs/robots to ^4.1.7 ([#861](#861)) ([4cf88c8](4cf88c8)) * **deps:** update dependency @primevue/nuxt-module to ^4.0.6 ([#841](#841)) ([7384c1e](7384c1e)) * **deps:** update dependency @primevue/nuxt-module to ^4.0.7 ([#854](#854)) ([22c3f4a](22c3f4a)) * **deps:** update dependency @stylistic/eslint-plugin to ^2.8.0 ([#838](#838)) ([1c15410](1c15410)) * **deps:** update dependency @types/qs to ^6.9.16 ([#868](#868)) ([8560a5d](8560a5d)) * **deps:** update dependency @vueuse/core to ^11.1.0 ([#875](#875)) ([b568680](b568680)) * **deps:** update dependency @vueuse/nuxt to ^11.1.0 ([#876](#876)) ([0f358b6](0f358b6)) * **deps:** update dependency circle-progress.vue to ^3.2.2 ([#878](#878)) ([4cd09ac](4cd09ac)) * **deps:** update dependency husky to ^9.1.6 ([#858](#858)) ([03b278b](03b278b)) * **deps:** update dependency msw to ^2.4.3 ([#827](#827)) ([6cd07ef](6cd07ef)) * **deps:** update dependency msw to ^2.4.4 ([#833](#833)) ([44814db](44814db)) * **deps:** update dependency msw to ^2.4.5 ([#850](#850)) ([773674a](773674a)) * **deps:** update dependency msw to ^2.4.6 ([#864](#864)) ([93b4a45](93b4a45)) * **deps:** update dependency msw to ^2.4.7 ([#871](#871)) ([b6cef68](b6cef68)) * **deps:** update dependency msw to ^2.4.8 ([#882](#882)) ([96d9d56](96d9d56)) * **deps:** update dependency node to v22.9.0 ([#886](#886)) ([8f28e99](8f28e99)) * **deps:** update dependency sass to ^1.79.1 ([#887](#887)) ([02e728a](02e728a)) * **deps:** update dependency semantic-release to ^24.1.1 ([#851](#851)) ([9a5d974](9a5d974)) * **deps:** update dependency tailwindcss to ^3.4.11 ([#857](#857)) ([74668ab](74668ab)) * **deps:** update dependency tailwindcss to ^3.4.12 ([#885](#885)) ([b2d182d](b2d182d)) * **deps:** update dependency tsx to ^4.19.1 ([#859](#859)) ([6e771c3](6e771c3)) * **deps:** update dependency type-fest to ^4.26.1 ([#829](#829)) ([7b715fd](7b715fd)) * **deps:** update dependency typescript to ^5.6.2 ([#839](#839)) ([69b99b1](69b99b1)) * **deps:** update dependency vue to ^3.5.4 ([#844](#844)) ([09fd254](09fd254)) * **deps:** update dependency vue to ^3.5.5 ([#865](#865)) ([13ae2b7](13ae2b7)) * **deps:** update dependency vue to ^3.5.6 ([#874](#874)) ([77302a2](77302a2)) * **deps:** update dependency vue-router to ^4.4.4 ([#847](#847)) ([23430aa](23430aa)) * **deps:** update dependency vue-router to ^4.4.5 ([#863](#863)) ([28a6c29](28a6c29)) * **deps:** update nuxtjs monorepo to ^3.13.2 ([#872](#872)) ([28e0e43](28e0e43)) * **deps:** update playwright monorepo to ^1.47.1 ([#866](#866)) ([ae9e014](ae9e014)) * **deps:** update pnpm to v9.10.0 ([#837](#837)) ([05be262](05be262)) * **deps:** update typescript-eslint monorepo to ^8.5.0 ([#840](#840)) ([b230013](b230013)) * **deps:** update typescript-eslint monorepo to ^8.6.0 ([#881](#881)) ([c291635](c291635)) * **deps:** update vitest monorepo to ^2.1.0 ([#862](#862)) ([b25b312](b25b312)) * **deps:** update vitest monorepo to ^2.1.1 ([#867](#867)) ([a1ad2f8](a1ad2f8)) * **screenshots:** missing screenshots for linux ([8bfa635](8bfa635))
|
🎉 This PR is included in version 1.32.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Documentation