Add buttons to trigger audio assets from Admin UI

tari-project · Feb 25, 2025 · e8d1ae9 · e8d1ae9
1 parent c06cfd7
commit e8d1ae9
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/components/AdminUI/AdminUI.tsx b/src/components/AdminUI/AdminUI.tsx
@@ -2,7 +2,6 @@
 import { MenuWrapper, MenuContent, ToggleButton } from './styles';
 import { useFloating, offset, shift, flip, useClick, useInteractions, useDismiss } from '@floating-ui/react';
 import { memo, useState } from 'react';
-import { ThemeGroup } from './groups/ThemeGroup';
 import { DialogsGroup } from './groups/DialogsGroup';
 import { GreenModalsGroup } from './groups/GreenModalsGroup';
 import { ToastsGroup } from './groups/ToastsGroup';
@@ -36,7 +35,6 @@ const AdminUI = memo(function AdminUI() {
                             animate={{ opacity: 1, y: 0 }}
                             exit={{ opacity: 0, y: 10 }}
                         >
-                            <ThemeGroup />
                             <DialogsGroup />
                             <GreenModalsGroup />
                             <ToastsGroup />

diff --git a/src/components/AdminUI/groups/OtherUIGroup.tsx b/src/components/AdminUI/groups/OtherUIGroup.tsx
@@ -3,6 +3,7 @@ import { useUIStore } from '@app/store/useUIStore';
 import { useShellOfSecretsStore } from '../../../store/useShellOfSecretsStore';
 import { Button, ButtonGroup, CategoryLabel } from '../styles';
 import { useAirdropStore } from '@app/store/useAirdropStore.ts';
+import { playBlockWinAudio, playNotificationAudio } from '@app/store/useBlockchainVisualisationStore';
 
 export function OtherUIGroup() {
     const setAdminShow = useUIStore((s) => s.setAdminShow); // prevent messing up the actual setup progress value
@@ -33,6 +34,13 @@ export function OtherUIGroup() {
                 <Button onClick={() => setFlare('GoalComplete')}>GoalComplete</Button>
                 <Button onClick={() => setFlare('BonusGems')}>BonusGems</Button>
             </ButtonGroup>
+            <CategoryLabel>Audio assets</CategoryLabel>
+            <ButtonGroup>
+                <Button onClick={() => playNotificationAudio()}>Notification</Button>
+                <Button onClick={() => playBlockWinAudio(1)}>Tier 1</Button>
+                <Button onClick={() => playBlockWinAudio(2)}>Tier 2</Button>
+                <Button onClick={() => playBlockWinAudio(3)}>Tier 3</Button>
+            </ButtonGroup>
         </>
     );
 }
diff --git a/src/containers/floating/Settings/sections/general/GeneralSettings.tsx b/src/containers/floating/Settings/sections/general/GeneralSettings.tsx
@@ -23,6 +23,7 @@ export const GeneralSettings = () => {
             <LanguageSettings />
             <ThemeSettings />
             <VisualMode />
+            {isAudioFeatureEnabled ? <AudioSettings /> : null}
             <LogsSettings />
             <SettingsGroupWrapper $advanced>
                 <AppDataSettings />

diff --git a/src/store/useBlockchainVisualisationStore.ts b/src/store/useBlockchainVisualisationStore.ts
@@ -83,11 +83,11 @@ function getAudioElementId(tier: number) {
     }
 }
 
-async function playNotificationAudio() {
+export async function playNotificationAudio() {
     playAudio('notification-player', 'assets/Notification.wav');
 }
 
-async function playBlockWinAudio(successTier: number) {
+export async function playBlockWinAudio(successTier: number) {
     const asset = selectAudioAssetOnSuccessTier(successTier);
     const player = getAudioElementId(successTier);
     playAudio(player, asset);