Finished modal
This commit is contained in:
+80
-8
@@ -256,12 +256,13 @@
|
||||
</div>
|
||||
|
||||
<!-- Edit Config Modal -->
|
||||
<div id="edit-config-modal" class="fixed inset-0 z-50 hidden items-center justify-center">
|
||||
<div id="edit-config-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black bg-opacity-40 backdrop-blur-sm transition-all"></div>
|
||||
<div class="relative bg-gray-900 rounded-2xl p-8 shadow-2xl max-w-lg w-full mx-auto border border-gray-700">
|
||||
<div class="relative bg-gray-900 rounded-2xl p-8 shadow-2xl max-w-lg w-full mx-auto border border-gray-700 flex flex-col justify-center">
|
||||
<h2 class="text-2xl font-bold mb-4 text-white">Edit Configuration</h2>
|
||||
<form id="edit-config-form">
|
||||
<input type="hidden" name="id" id="edit-config-id">
|
||||
<input type="hidden" name="encoder_type" id="edit-encoder-type">
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs text-gray-400 mb-1">Watch Folder</label>
|
||||
<div id="edit-folder-picker" class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white cursor-pointer select-none hover:bg-gray-600 transition-all" style="min-height:2.5rem;">
|
||||
@@ -278,9 +279,47 @@
|
||||
<input type="hidden" name="temp_dir" id="edit-temp-input" value="/temp">
|
||||
<div id="edit-temp-list" class="bg-gray-800 border border-gray-700 rounded-lg mt-1 p-2 text-white text-sm hidden z-50" style="position:absolute;"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs text-gray-400 mb-1">FFmpeg Flags</label>
|
||||
<input type="text" name="ffmpeg_flags" id="edit-ffmpeg-flags" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent" placeholder="e.g. -crf 24 -preset slow">
|
||||
<div class="mb-4" id="edit-ffmpeg-flags-video" style="display:none;">
|
||||
<label class="block text-xs text-gray-400 mb-1">FFmpeg Flags (Video)</label>
|
||||
<div class="flex space-x-2">
|
||||
<div class="flex flex-col">
|
||||
<label for="edit-crf" class="text-xs text-gray-400 mb-1">CRF (Quality)</label>
|
||||
<select name="crf" id="edit-crf" class="bg-gray-700 border border-gray-600 rounded-lg px-2 py-1 text-white">
|
||||
<option value="18">18</option>
|
||||
<option value="20">20</option>
|
||||
<option value="22">22</option>
|
||||
<option value="24">24</option>
|
||||
<option value="26">26</option>
|
||||
<option value="28">28</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="edit-preset" class="text-xs text-gray-400 mb-1">Preset</label>
|
||||
<select name="preset" id="edit-preset" class="bg-gray-700 border border-gray-600 rounded-lg px-2 py-1 text-white">
|
||||
<option value="ultrafast">ultrafast</option>
|
||||
<option value="superfast">superfast</option>
|
||||
<option value="veryfast">veryfast</option>
|
||||
<option value="faster">faster</option>
|
||||
<option value="fast">fast</option>
|
||||
<option value="medium">medium</option>
|
||||
<option value="slow">slow</option>
|
||||
<option value="slower">slower</option>
|
||||
<option value="veryslow">veryslow</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4" id="edit-ffmpeg-flags-audio" style="display:none;">
|
||||
<label class="block text-xs text-gray-400 mb-1">FFmpeg Flags (Audio)</label>
|
||||
<div class="flex flex-col">
|
||||
<label for="edit-audio-bitrate" class="text-xs text-gray-400 mb-1">Bitrate</label>
|
||||
<select name="audio_bitrate" id="edit-audio-bitrate" class="bg-gray-700 border border-gray-600 rounded-lg px-2 py-1 text-white">
|
||||
<option value="128k">128k</option>
|
||||
<option value="192k">192k</option>
|
||||
<option value="256k">256k</option>
|
||||
<option value="320k">320k</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2 mt-6">
|
||||
<button type="button" onclick="closeEditModal()" class="px-4 py-2 rounded-full bg-gray-700 hover:bg-gray-600 text-white font-semibold transition-all">Cancel</button>
|
||||
@@ -370,11 +409,36 @@ function removeConfig(configId) {
|
||||
function openEditModal(config) {
|
||||
document.getElementById('edit-config-modal').classList.remove('hidden');
|
||||
document.getElementById('edit-config-id').value = config.id;
|
||||
document.getElementById('edit-encoder-type').value = config.encoder_type;
|
||||
document.getElementById('edit-folder-path').textContent = config.watch_folder;
|
||||
document.getElementById('edit-folder-input').value = config.watch_folder;
|
||||
document.getElementById('edit-temp-path').textContent = config.temp_dir || '/temp';
|
||||
document.getElementById('edit-temp-input').value = config.temp_dir || '/temp';
|
||||
document.getElementById('edit-ffmpeg-flags').value = config.ffmpeg_flags || '';
|
||||
// Show/hide flag dropdowns
|
||||
if (config.encoder_type === 'video') {
|
||||
document.getElementById('edit-ffmpeg-flags-video').style.display = '';
|
||||
document.getElementById('edit-ffmpeg-flags-audio').style.display = 'none';
|
||||
// Parse ffmpeg_flags for crf and preset
|
||||
let crf = '24', preset = 'medium';
|
||||
if (config.ffmpeg_flags) {
|
||||
const crfMatch = config.ffmpeg_flags.match(/-crf\s+(\d+)/);
|
||||
if (crfMatch) crf = crfMatch[1];
|
||||
const presetMatch = config.ffmpeg_flags.match(/-preset\s+(\w+)/);
|
||||
if (presetMatch) preset = presetMatch[1];
|
||||
}
|
||||
document.getElementById('edit-crf').value = crf;
|
||||
document.getElementById('edit-preset').value = preset;
|
||||
} else {
|
||||
document.getElementById('edit-ffmpeg-flags-video').style.display = 'none';
|
||||
document.getElementById('edit-ffmpeg-flags-audio').style.display = '';
|
||||
// Parse ffmpeg_flags for audio bitrate
|
||||
let bitrate = '320k';
|
||||
if (config.ffmpeg_flags) {
|
||||
const bitrateMatch = config.ffmpeg_flags.match(/-b:a\s+(\d+k)/);
|
||||
if (bitrateMatch) bitrate = bitrateMatch[1];
|
||||
}
|
||||
document.getElementById('edit-audio-bitrate').value = bitrate;
|
||||
}
|
||||
}
|
||||
function closeEditModal() {
|
||||
document.getElementById('edit-config-modal').classList.add('hidden');
|
||||
@@ -393,10 +457,17 @@ if (editForm) {
|
||||
editForm.onsubmit = function(e) {
|
||||
e.preventDefault();
|
||||
const id = document.getElementById('edit-config-id').value;
|
||||
const encoderType = document.getElementById('edit-encoder-type').value;
|
||||
let ffmpeg_flags = '';
|
||||
if (encoderType === 'video') {
|
||||
ffmpeg_flags = `-crf ${document.getElementById('edit-crf').value} -preset ${document.getElementById('edit-preset').value}`;
|
||||
} else {
|
||||
ffmpeg_flags = `-b:a ${document.getElementById('edit-audio-bitrate').value}`;
|
||||
}
|
||||
const data = {
|
||||
watch_folder: document.getElementById('edit-folder-input').value,
|
||||
temp_dir: document.getElementById('edit-temp-input').value,
|
||||
ffmpeg_flags: document.getElementById('edit-ffmpeg-flags').value
|
||||
ffmpeg_flags: ffmpeg_flags
|
||||
};
|
||||
fetch(`/edit_config/${id}`, {
|
||||
method: 'POST',
|
||||
@@ -422,7 +493,8 @@ window.allConfigs = [
|
||||
id: {{ config.id }},
|
||||
watch_folder: {{ config.watch_folder|tojson }},
|
||||
temp_dir: {{ config.temp_dir|tojson }},
|
||||
ffmpeg_flags: {{ config.ffmpeg_flags|tojson }}
|
||||
ffmpeg_flags: {{ config.ffmpeg_flags|tojson }},
|
||||
encoder_type: {{ config.encoder_type|tojson }}
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user