38443-vm/Temp/voice_tab.html
2026-03-25 21:57:57 +00:00

107 lines
11 KiB
HTML

<!-- Voice Tab -->
<div class="tab-pane fade" id="settings-voice" role="tabpanel">
<h5 class="mb-4 fw-bold text-uppercase" style="font-size: 0.8em; color: var(--text-muted);">Paramètres de voix</h5>
<div class="row mb-4">
<div class="col-md-6 mb-3">
<label class="form-label text-uppercase fw-bold mb-2" style="font-size: 0.7em; color: var(--text-muted);">Périphérique d'entrée</label>
<select name="voice_input_device" id="voice_input_device" class="form-select bg-dark text-white border-0">
<option value="default">Défaut</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label text-uppercase fw-bold mb-2" style="font-size: 0.7em; color: var(--text-muted);">Périphérique de sortie</label>
<select name="voice_output_device" id="voice_output_device" class="form-select bg-dark text-white border-0">
<option value="default">Défaut</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label class="form-label text-uppercase fw-bold mb-2" style="font-size: 0.7em; color: var(--text-muted);">Volume d'entrée</label>
<input type="range" name="voice_input_volume" id="voice_input_volume" class="form-range" min="0" max="1" step="0.01" value="1.0">
<script>document.getElementById('voice_input_volume').value = localStorage.getItem('voice_input_volume') || 1.0;</script>
</div>
<div class="col-md-6 mb-3">
<label class="form-label text-uppercase fw-bold mb-2" style="font-size: 0.7em; color: var(--text-muted);">Volume de sortie</label>
<input type="range" name="voice_output_volume" id="voice_output_volume" class="form-range" min="0" max="2" step="0.01" value="1.0">
<script>document.getElementById('voice_output_volume').value = localStorage.getItem('voice_output_volume') || 1.0;</script>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" name="voice_echo_cancellation" id="echo-cancellation-switch" value="1" <?php echo ($user['voice_echo_cancellation'] ?? 1) ? 'checked' : ''; ?>>
<label class="form-check-label" for="echo-cancellation-switch">Annulation de l'écho</label>
</div>
<div class="form-text text-muted small mb-3">Réduit l'écho causé par vos haut-parleurs captés par votre micro.</div>
</div>
<div class="col-md-6">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" name="voice_noise_suppression" id="noise-suppression-switch" value="1" <?php echo ($user['voice_noise_suppression'] ?? 1) ? 'checked' : ''; ?>>
<label class="form-check-label" for="noise-suppression-switch">Suppression du bruit</label>
</div>
<div class="form-text text-muted small mb-3">Filtre les bruits de fond comme les ventilateurs ou les clics de clavier.</div>
</div>
<div class="col-md-12">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" name="voice_advanced_filters" id="advanced-filters-switch" value="1" <?php echo ($user['voice_advanced_filters'] ?? 1) ? 'checked' : ''; ?>>
<label class="form-check-label" for="advanced-filters-switch">Filtres avancés (Highpass & AGC)</label>
</div>
<div class="form-text text-muted small mb-3">Active des filtres supplémentaires (passe-haut, gain auto optimisé) pour une qualité vocale supérieure sur Chrome.</div>
</div>
</div>
<div class="p-3 rounded mb-4 settings-section-bg">
<label class="form-label text-uppercase fw-bold mb-3" style="font-size: 0.7em; color: var(--text-muted);">Mode d'entrée</label>
<div class="d-flex gap-3 mb-4">
<div class="form-check custom-radio-card flex-grow-1">
<input class="form-check-input d-none" type="radio" name="voice_mode" id="voice-mode-vox" value="vox" <?php echo ($user['voice_mode'] ?? 'vox') == 'vox' ? 'checked' : ''; ?> onchange="togglePTTParamètres('vox')">
<label class="form-check-label w-100 p-3 rounded border border-secondary text-center cursor-pointer" for="voice-mode-vox" style="cursor: pointer;">
<i class="fa-solid fa-microphone mb-2 d-block"></i>
Activité vocale
</label>
</div>
<div class="form-check custom-radio-card flex-grow-1">
<input class="form-check-input d-none" type="radio" name="voice_mode" id="voice-mode-ptt" value="ptt" <?php echo ($user['voice_mode'] ?? 'vox') == 'ptt' ? 'checked' : ''; ?> onchange="togglePTTParamètres('ptt')">
<label class="form-check-label w-100 p-3 rounded border border-secondary text-center cursor-pointer" for="voice-mode-ptt" style="cursor: pointer;">
<i class="fa-solid fa-keyboard mb-2 d-block"></i>
Appuyer pour parler
</label>
</div>
</div>
<div id="ptt-settings-container" style="<?php echo ($user['voice_mode'] ?? 'vox') == 'ptt' ? '' : 'display: none;'; ?>">
<div class="mb-3">
<label class="form-label small fw-bold">Raccourci clavier</label>
<input type="text" name="voice_ptt_key" id="voice_ptt_key_input" class="form-control bg-dark text-white border-0" value="<?php echo htmlspecialchars($user['voice_ptt_key'] ?? 'v'); ?>" placeholder="Click and press a key..." readonly style="cursor: pointer; caret-color: transparent;">
<div class="form-text text-muted" style="font-size: 0.8em;">Click the box and press any key to set your PTT shortcut.</div>
</div>
</div>
<div id="vox-settings-container" style="<?php echo ($user['voice_mode'] ?? 'vox') == 'vox' ? '' : 'display: none;'; ?>">
<div class="mb-3">
<label class="form-label small fw-bold">Input Sensitivity</label>
<div class="voice-meter-container mb-2" style="height: 8px; background: var(--bg-servers); border-radius: 4px; overflow: hidden; position: relative;">
<div id="voice-meter-bar" style="height: 100%; width: 0%; background: #23a559; transition: width 0.1s;"></div>
<div id="voice-meter-threshold" style="position: absolute; top: 0; bottom: 0; width: 2px; background: #f23f43; z-index: 2;"></div>
</div>
<input type="range" name="voice_vox_threshold" id="vox_threshold_input" class="form-range" min="0" max="1" step="0.01" value="<?php echo $user['voice_vox_threshold'] ?? 0.1; ?>">
<div class="d-flex justify-content-between small text-muted mt-1">
<span>Sensitive</span>
<span>Loud Only</span>
</div>
</div>
</div>
</div>
<div class="p-3 rounded border border-info border-opacity-25" style="background-color: rgba(0, 168, 252, 0.05);">
<div class="d-flex">
<i class="fa-solid fa-circle-info text-info me-3 mt-1"></i>
<div>
<div class="fw-bold text-info small mb-1">Microphone Access</div>
<div class="text-muted small">Voice channels require microphone permission. If you don't hear anything, check your browser's site settings.</div>
</div>
</div>
</div>
</div>