fix(ui): ADR-001 compliance in SpectralRibbon, remove unused AlsaUtilsHelpModal
Rename t variable to interpWeight in SpectralRibbon to avoid shadowing the i18n store. Delete unused AlsaUtilsHelpModal component. cc
This commit is contained in:
vicrodh committed
1 parent
2508ea9e55
commit
e375826fa3
2 files changed
+2
-272
No files matched your search
@@ -1,270 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Modal from './Modal.svelte';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { Check, AlertTriangle, Copy, Terminal } from 'lucide-svelte';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface LinuxDistroInfo {
|
||||
distro_id: string;
|
||||
distro_name: string;
|
||||
install_command: string;
|
||||
}
|
||||
|
||||
let { isOpen, onClose }: Props = $props();
|
||||
|
||||
let isInstalled = $state<boolean | null>(null);
|
||||
let distroInfo = $state<LinuxDistroInfo | null>(null);
|
||||
let copied = $state(false);
|
||||
let isLoading = $state(true);
|
||||
|
||||
async function checkStatus() {
|
||||
isLoading = true;
|
||||
try {
|
||||
const [installed, distro] = await Promise.all([
|
||||
invoke<boolean>('v2_check_alsa_utils_installed'),
|
||||
invoke<LinuxDistroInfo>('v2_get_linux_distro')
|
||||
]);
|
||||
isInstalled = installed;
|
||||
distroInfo = distro;
|
||||
} catch (e) {
|
||||
console.error('Failed to check alsa-utils status:', e);
|
||||
isInstalled = false;
|
||||
distroInfo = null;
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function copyCommand() {
|
||||
if (!distroInfo?.install_command) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(distroInfo.install_command);
|
||||
copied = true;
|
||||
setTimeout(() => copied = false, 2000);
|
||||
} catch (e) {
|
||||
console.error('Failed to copy:', e);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (isOpen) {
|
||||
checkStatus();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal {isOpen} {onClose} title="Bit-perfect Device Detection" maxWidth="480px">
|
||||
{#snippet children()}
|
||||
<div class="help-content">
|
||||
{#if isLoading}
|
||||
<div class="loading">Checking system...</div>
|
||||
{:else}
|
||||
<div class="status-section">
|
||||
<div class="status-row" class:installed={isInstalled} class:missing={!isInstalled}>
|
||||
{#if isInstalled}
|
||||
<Check size={18} />
|
||||
<span>alsa-utils is installed</span>
|
||||
{:else}
|
||||
<AlertTriangle size={18} />
|
||||
<span>alsa-utils is not installed</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<p>
|
||||
The <strong>alsa-utils</strong> package provides hardware enumeration tools
|
||||
that QBZ uses to detect bit-perfect capable devices (<code>hw:X,Y</code>).
|
||||
</p>
|
||||
<p>
|
||||
Without it, only generic ALSA devices are shown, and you won't see the
|
||||
<span class="badge">BP</span> badge for true bit-perfect outputs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if !isInstalled && distroInfo}
|
||||
<div class="install-section">
|
||||
<div class="install-header">
|
||||
<Terminal size={14} />
|
||||
<span>Install command{distroInfo.distro_name ? ` for ${distroInfo.distro_name}` : ''}</span>
|
||||
</div>
|
||||
<div class="command-box">
|
||||
<code>{distroInfo.install_command}</code>
|
||||
<button class="copy-btn" onclick={copyCommand} title="Copy to clipboard">
|
||||
{#if copied}
|
||||
<Check size={14} />
|
||||
{:else}
|
||||
<Copy size={14} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<p class="install-note">
|
||||
After installing, restart QBZ to detect bit-perfect devices.
|
||||
</p>
|
||||
</div>
|
||||
{:else if isInstalled}
|
||||
<div class="all-good">
|
||||
<p>Your system is properly configured for bit-perfect device detection.</p>
|
||||
<p>If you don't see your device listed as bit-perfect, ensure it's connected and recognized by your system.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.help-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-row.installed {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.status-row.missing {
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
color: #eab308;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.explanation p {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.explanation p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.explanation code {
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.explanation strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #3b82f6;
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.install-section {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.install-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.command-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.command-box code {
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--bg-tertiary);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.install-note {
|
||||
margin: 8px 0 0 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.all-good {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.all-good p {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.all-good p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -223,9 +223,9 @@
|
||||
}
|
||||
|
||||
function drawInterpolatedColumnAtX(columnX: number, t01: number) {
|
||||
const t = Math.max(0, Math.min(1, t01));
|
||||
const interpWeight = Math.max(0, Math.min(1, t01));
|
||||
for (let bandIdx = 0; bandIdx < NUM_BANDS; bandIdx++) {
|
||||
interpBands[bandIdx] = prevBands[bandIdx] + (latestBands[bandIdx] - prevBands[bandIdx]) * t;
|
||||
interpBands[bandIdx] = prevBands[bandIdx] + (latestBands[bandIdx] - prevBands[bandIdx]) * interpWeight;
|
||||
}
|
||||
drawColumnFromBands(columnX, interpBands);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user