ledgrab/server/src/wled_controller/templates/modals/stream.html

<!-- Source Modal -->
<div id="stream-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="stream-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="stream-modal-title" data-i18n="streams.add">Add Source</h2>
            <button class="modal-close-btn" onclick="closeStreamModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <!-- Loading overlay shown while dropdowns are being populated -->
            <div id="stream-modal-loading" class="modal-body-loading" style="display:none">
                <div class="loading-spinner"></div>
                <div class="modal-body-loading-text" data-i18n="streams.modal.loading">Loading...</div>
            </div>
            <input type="hidden" id="stream-id">
            <form id="stream-form">
                <div class="form-group">
                    <label for="stream-name" data-i18n="streams.name">Source Name:</label>
                    <input type="text" id="stream-name" data-i18n-placeholder="streams.name.placeholder" placeholder="My Source" required>
                </div>

                <input type="hidden" id="stream-type" value="raw">

                <!-- Raw source fields -->
                <div id="stream-raw-fields">
                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="streams.display">Display:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.display.hint">Which screen to capture</small>
                        <input type="hidden" id="stream-display-index" value="">
                        <button type="button" class="btn btn-display-picker" id="stream-display-picker-btn" onclick="openDisplayPicker(onStreamDisplaySelected, document.getElementById('stream-display-index').value, document.getElementById('stream-capture-template').selectedOptions[0]?.dataset?.hasOwnDisplays === '1' ? document.getElementById('stream-capture-template').selectedOptions[0].dataset.engineType : null)">
                            <span id="stream-display-picker-label" data-i18n="displays.picker.select">Select display...</span>
                        </button>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-capture-template" data-i18n="streams.capture_template">Capture Template:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.capture_template.hint">Engine template defining how the screen is captured</small>
                        <select id="stream-capture-template"></select>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-target-fps" data-i18n="streams.target_fps">Target FPS:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.target_fps.hint">Target frames per second for capture (1-90)</small>
                        <div class="slider-row">
                            <input type="range" id="stream-target-fps" min="1" max="90" value="30" oninput="document.getElementById('stream-target-fps-value').textContent = this.value">
                            <span id="stream-target-fps-value" class="slider-value">30</span>
                        </div>
                    </div>
                </div>

                <!-- Processed source fields -->
                <div id="stream-processed-fields" style="display: none;">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-source" data-i18n="streams.source">Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.source.hint">The source to apply processing filters to</small>
                        <select id="stream-source"></select>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-pp-template" data-i18n="streams.pp_template">Processing Template:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.pp_template.hint">Filter template to apply to the source</small>
                        <select id="stream-pp-template"></select>
                    </div>
                </div>

                <!-- Static image fields -->
                <div id="stream-static-image-fields" style="display: none;">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="stream-image-source" data-i18n="streams.image_source">Image Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="streams.image_source.hint">Enter a URL (http/https) or local file path to an image</small>
                        <input type="text" id="stream-image-source" data-i18n-placeholder="streams.image_source.placeholder" placeholder="https://example.com/image.jpg or C:\path\to\image.png">
                    </div>
                    <div id="stream-image-preview-container" class="image-preview-container" style="display: none;">
                        <img id="stream-image-preview" class="stream-image-preview" src="" alt="Preview">
                        <div id="stream-image-info" class="stream-image-info"></div>
                    </div>
                    <div id="stream-image-validation-status" class="validation-status" style="display: none;"></div>
                </div>

                <div class="form-group">
                    <label for="stream-description" data-i18n="streams.description_label">Description (optional):</label>
                    <input type="text" id="stream-description" data-i18n-placeholder="streams.description_placeholder" placeholder="Describe this source...">
                </div>

                <div id="stream-error" class="error-message" style="display: none;"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeStreamModal()" title="Cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveStream()" title="Save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>