jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-09-02 09:34:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve volume control

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-27 18:12:32 +01:00
parent bf6c443ebd
commit 2ad1fe0ea9
4 changed files with 90 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Controls.tsx
View File

@@ -31,6 +31,8 @@ export interface AppSettings {
customMaxFret?: number;
autoPlaySightReading?: boolean;
autoPlayVolume?: number;
virtualGuitarVolume?: number;
virtualGuitarMute?: boolean;
disableAnimation?: boolean;
}

70
src/components/SettingsModal.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { X, Volume2 } from 'lucide-react';
import { X, Volume2, VolumeX } from 'lucide-react';
import type { AppSettings } from './Controls';
interface SettingsModalProps {
@@ -39,6 +39,36 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, s
<hr style={{ borderColor: 'rgba(255,255,255,0.1)', margin: '24px 0' }} />
<div className="control-group" style={{ marginBottom: '24px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
<label className="control-label" style={{ marginBottom: 0, fontSize: '16px' }}>
<span>Virtual Guitar Sound</span>
</label>
<button
className={`switch-button ${!settings.virtualGuitarMute ? 'active' : ''}`}
onClick={() => onUpdateSettings({ ...settings, virtualGuitarMute: !settings.virtualGuitarMute })}
title={settings.virtualGuitarMute ? "Unmute" : "Mute"}
>
<div className="switch-thumb" />
</button>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', opacity: settings.virtualGuitarMute ? 0.5 : 1, transition: 'opacity 0.2s' }}>
{settings.virtualGuitarMute ? <VolumeX size={20} style={{ opacity: 0.7 }} /> : <Volume2 size={20} style={{ opacity: 0.7 }} />}
<input
type="range"
min="0"
max="1"
step="0.05"
value={settings.virtualGuitarVolume ?? 0.5}
onChange={(e) => onUpdateSettings({ ...settings, virtualGuitarVolume: parseFloat(e.target.value) })}
style={{ flex: 1 }}
disabled={settings.virtualGuitarMute}
/>
</div>
</div>
<hr style={{ borderColor: 'rgba(255,255,255,0.1)', margin: '24px 0' }} />
{/* Auto Play Settings */}
<div className="control-group">
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
@@ -63,28 +93,26 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, s
</button>
</div>
{(settings.gameMode === 'ear_training' || settings.autoPlaySightReading) && (
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<Volume2 size={20} style={{ opacity: 0.7 }} />
<input
type="range"
min="0"
max="1"
step="0.05"
value={settings.autoPlayVolume ?? 0.5}
onChange={(e) => onUpdateSettings({ ...settings, autoPlayVolume: parseFloat(e.target.value) })}
style={{ flex: 1 }}
/>
</div>
)}
<p style={{ fontSize: '12px', opacity: 0.7, margin: '8px 0 0 0' }}>
{settings.gameMode === 'ear_training'
? "Automatically plays the note audio (Required for Ear Training)."
: "Automatically plays the note audio when a new note appears."}
</p>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<Volume2 size={20} style={{ opacity: 0.7 }} />
<input
type="range"
min="0"
max="1"
step="0.05"
value={settings.autoPlayVolume ?? 0.5}
onChange={(e) => onUpdateSettings({ ...settings, autoPlayVolume: parseFloat(e.target.value) })}
style={{ flex: 1 }}
/>
</div>
</div>
<p style={{ fontSize: '12px', opacity: 0.7, margin: '8px 0 0 0' }}>
{settings.gameMode === 'ear_training'
? "Automatically plays the note audio (Required for Ear Training)."
: "Automatically plays the note audio when a new note appears."}
</p>
</div>
</div>
);
};