Add audio sources as first-class entities, add mapped CSS type, simplify target editor for mapped sources
- Audio sources moved to separate tab with dedicated CRUD API, store, and editor modal - New "mapped" color strip source type: assigns different CSS sources to distinct LED sub-ranges (zones) - Mapped stream runtime with per-zone sub-streams, auto-sizing, hot-update support - Target editor auto-collapses segments UI when mapped CSS is selected - Delete protection for CSS sources referenced by mapped zones - Compact header/footer layout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -31,14 +31,14 @@
|
||||
<button class="theme-toggle" onclick="toggleTheme()" data-i18n-title="theme.toggle" title="Toggle theme">
|
||||
<span id="theme-icon">🌙</span>
|
||||
</button>
|
||||
<select id="locale-select" onchange="changeLocale()" data-i18n-title="locale.change" title="Change language" style="margin-left: 10px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-color); color: var(--text-color); font-size: 0.9rem; cursor: pointer;">
|
||||
<select id="locale-select" onchange="changeLocale()" data-i18n-title="locale.change" title="Change language" style="padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-color); color: var(--text-color); font-size: 0.8rem; cursor: pointer;">
|
||||
<option value="en">English</option>
|
||||
<option value="ru">Русский</option>
|
||||
</select>
|
||||
<button id="login-btn" class="btn btn-primary" onclick="showLogin()" style="display: none; padding: 6px 16px; font-size: 0.85rem; margin-left: 10px;">
|
||||
<button id="login-btn" class="btn btn-primary" onclick="showLogin()" style="display: none; padding: 4px 12px; font-size: 0.8rem;">
|
||||
🔑 <span data-i18n="auth.login">Login</span>
|
||||
</button>
|
||||
<button id="logout-btn" class="btn btn-danger" onclick="logout()" style="display: none; padding: 6px 16px; font-size: 0.85rem; margin-left: 10px;">
|
||||
<button id="logout-btn" class="btn btn-danger" onclick="logout()" style="display: none; padding: 4px 12px; font-size: 0.8rem;">
|
||||
🚪
|
||||
</button>
|
||||
</div>
|
||||
@@ -117,6 +117,7 @@
|
||||
{% include 'modals/stream.html' %}
|
||||
{% include 'modals/pp-template.html' %}
|
||||
{% include 'modals/profile-editor.html' %}
|
||||
{% include 'modals/audio-source-editor.html' %}
|
||||
|
||||
{% include 'partials/tutorial-overlay.html' %}
|
||||
{% include 'partials/image-lightbox.html' %}
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
<!-- Audio Source Editor Modal -->
|
||||
<div id="audio-source-modal" class="modal" role="dialog" aria-labelledby="audio-source-modal-title">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="audio-source-modal-title" data-i18n="audio_source.add">Add Audio Source</h2>
|
||||
<button class="modal-close-btn" onclick="closeAudioSourceModal()" aria-label="Close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="audio-source-form" onsubmit="return false;">
|
||||
<input type="hidden" id="audio-source-id">
|
||||
|
||||
<div id="audio-source-error" class="error-message" style="display: none;"></div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="audio-source-name" data-i18n="audio_source.name">Name:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.name.hint">A descriptive name for this audio source</small>
|
||||
<input type="text" id="audio-source-name" data-i18n-placeholder="audio_source.name.placeholder" placeholder="System Audio" required>
|
||||
</div>
|
||||
|
||||
<!-- Type -->
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="audio-source-type" data-i18n="audio_source.type">Type:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.type.hint">Multichannel captures all channels from a physical audio device. Mono extracts a single channel from a multichannel source.</small>
|
||||
<select id="audio-source-type" onchange="onAudioSourceTypeChange()">
|
||||
<option value="multichannel" data-i18n="audio_source.type.multichannel">Multichannel</option>
|
||||
<option value="mono" data-i18n="audio_source.type.mono">Mono</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Multichannel fields -->
|
||||
<div id="audio-source-multichannel-section">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="audio-source-device" data-i18n="audio_source.device">Audio Device:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.device.hint">Audio input source. Loopback devices capture system audio output; input devices capture microphone or line-in.</small>
|
||||
<select id="audio-source-device">
|
||||
<!-- populated dynamically -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mono fields -->
|
||||
<div id="audio-source-mono-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="audio-source-parent" data-i18n="audio_source.parent">Parent Source:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.parent.hint">Multichannel source to extract a channel from</small>
|
||||
<select id="audio-source-parent">
|
||||
<!-- populated dynamically with multichannel sources -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="audio-source-channel" data-i18n="audio_source.channel">Channel:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.channel.hint">Which audio channel to extract from the multichannel source</small>
|
||||
<select id="audio-source-channel">
|
||||
<option value="mono" data-i18n="audio_source.channel.mono">Mono (L+R mix)</option>
|
||||
<option value="left" data-i18n="audio_source.channel.left">Left</option>
|
||||
<option value="right" data-i18n="audio_source.channel.right">Right</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="audio-source-description" data-i18n="audio_source.description">Description (optional):</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="audio_source.description.hint">Optional notes about this audio source</small>
|
||||
<input type="text" id="audio-source-description" data-i18n-placeholder="audio_source.description.placeholder" placeholder="Describe this audio source...">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeAudioSourceModal()" data-i18n="settings.button.cancel">× Cancel</button>
|
||||
<button class="btn btn-primary" onclick="saveAudioSource()" data-i18n="settings.button.save">✓ Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,6 +27,7 @@
|
||||
<option value="color_cycle" data-i18n="color_strip.type.color_cycle">Color Cycle</option>
|
||||
<option value="effect" data-i18n="color_strip.type.effect">Procedural Effect</option>
|
||||
<option value="composite" data-i18n="color_strip.type.composite">Composite</option>
|
||||
<option value="mapped" data-i18n="color_strip.type.mapped">Mapped</option>
|
||||
<option value="audio" data-i18n="color_strip.type.audio">Audio Reactive</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -316,6 +317,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mapped-specific fields -->
|
||||
<div id="css-editor-mapped-section" style="display:none">
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label data-i18n="color_strip.mapped.zones">Zones:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="color_strip.mapped.zones.hint">Each zone maps a color strip source to a specific LED range. Zones are placed side-by-side.</small>
|
||||
<div id="mapped-zones-list"></div>
|
||||
<button type="button" class="btn btn-secondary" onclick="mappedAddZone()" data-i18n="color_strip.mapped.add_zone">+ Add Zone</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio-reactive fields -->
|
||||
<div id="css-editor-audio-section" style="display:none">
|
||||
<div class="form-group">
|
||||
@@ -333,25 +347,12 @@
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-audio-device" data-i18n="color_strip.audio.device">Audio Device:</label>
|
||||
<label for="css-editor-audio-source" data-i18n="color_strip.audio.source">Audio Source:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="color_strip.audio.device.hint">Audio input source. Loopback devices capture system audio output; input devices capture microphone or line-in.</small>
|
||||
<select id="css-editor-audio-device">
|
||||
<!-- populated dynamically from /api/v1/audio-devices -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="label-row">
|
||||
<label for="css-editor-audio-channel" data-i18n="color_strip.audio.channel">Channel:</label>
|
||||
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
|
||||
</div>
|
||||
<small class="input-hint" style="display:none" data-i18n="color_strip.audio.channel.hint">Select which audio channel to visualize. Use Left/Right for stereo setups.</small>
|
||||
<select id="css-editor-audio-channel">
|
||||
<option value="mono" data-i18n="color_strip.audio.channel.mono">Mono (L+R mix)</option>
|
||||
<option value="left" data-i18n="color_strip.audio.channel.left">Left</option>
|
||||
<option value="right" data-i18n="color_strip.audio.channel.right">Right</option>
|
||||
<small class="input-hint" style="display:none" data-i18n="color_strip.audio.source.hint">Mono audio source that provides audio data for this visualization. Create and manage audio sources in the Sources tab.</small>
|
||||
<select id="css-editor-audio-source">
|
||||
<!-- populated dynamically from /api/v1/audio-sources?source_type=mono -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user