Add configurable allowed file types

web/templates/settings.html

@@ -36,6 +36,48 @@
         <span class="form-hint">The new-only mode skips files already copied to this disk, even if they were later removed.</span>
       </div>
 
+      <div class="form-group">
+        <label class="form-label" for="allowedFilesMode">Allowed file types</label>
+        <select class="form-select" id="allowedFilesMode" style="width:auto;max-width:420px" onchange="updateAllowedFilesModeUI()">
+          <option value="media_types">Audio, video, photo</option>
+          <option value="extensions">Custom extensions list</option>
+        </select>
+      </div>
+
+      <div class="form-group" id="mediaTypesGroup">
+        <label class="form-label">Built-in media types</label>
+        <div style="display:grid;gap:8px">
+          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
+            <input type="checkbox" id="mediaTypeAudio" style="width:15px;height:15px;accent-color:var(--accent)">
+            <span>
+              <strong>Audio</strong>
+              <span class="form-hint" id="mediaTypeAudioHint" style="display:block"></span>
+            </span>
+          </label>
+          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
+            <input type="checkbox" id="mediaTypeVideo" style="width:15px;height:15px;accent-color:var(--accent)">
+            <span>
+              <strong>Video</strong>
+              <span class="form-hint" id="mediaTypeVideoHint" style="display:block"></span>
+            </span>
+          </label>
+          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
+            <input type="checkbox" id="mediaTypePhoto" style="width:15px;height:15px;accent-color:var(--accent)">
+            <span>
+              <strong>Photo</strong>
+              <span class="form-hint" id="mediaTypePhotoHint" style="display:block"></span>
+            </span>
+          </label>
+        </div>
+        <span class="form-hint">Built into the app by default: audio, video, and photo. New installations start with only audio and video enabled.</span>
+      </div>
+
+      <div class="form-group" id="extensionsGroup" style="display:none">
+        <label class="form-label" for="allowedExtensions">Allowed extensions</label>
+        <textarea class="form-input" id="allowedExtensions" rows="5" placeholder=".mp3, .flac, .mp4"></textarea>
+        <span class="form-hint">One extension per line or separated by commas. You can write <code>mp3</code> or <code>.mp3</code>.</span>
+      </div>
+
       <div class="form-group">
         <label class="form-label" for="destFolder">Destination folder on disk</label>
         <input class="form-input" type="text" id="destFolder" placeholder="media" style="width:200px">
@@ -78,6 +120,11 @@
 const sourceTree = new Map();
 const expandedNodes = new Set();
 const loadingNodes = new Set();
+const builtInMediaTypes = {
+  audio: ['.aac', '.aif', '.aiff', '.alac', '.ape', '.flac', '.m4a', '.mp2', '.mp3', '.ogg', '.opus', '.wav', '.wma'],
+  video: ['.3gp', '.avi', '.m2ts', '.m4v', '.mkv', '.mov', '.mp4', '.mpeg', '.mpg', '.mts', '.ts', '.webm', '.wmv'],
+  photo: ['.bmp', '.gif', '.heic', '.heif', '.jpeg', '.jpg', '.png', '.tif', '.tiff', '.webp'],
+};
 let sourceRoots = [];
 let sourceConfig = {};
 
@@ -328,6 +375,52 @@ function deriveRootsFromSources(sources) {
     .filter((path, index, all) => !all.some((other, otherIndex) => otherIndex !== index && isPathWithin(other, path) && !isSamePath(other, path)));
 }
 
+function defaultAllowedExtensions() {
+  return [...builtInMediaTypes.audio, ...builtInMediaTypes.video];
+}
+
+function parseExtensionsInput(value) {
+  const items = String(value || '')
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+  const result = [];
+  const seen = new Set();
+  items.forEach((item) => {
+    let value = item.toLowerCase().replace(/^\*/, '');
+    if (!value.startsWith('.')) value = '.' + value;
+    if (!/^\.[a-z0-9]+$/.test(value)) return;
+    if (seen.has(value)) return;
+    seen.add(value);
+    result.push(value);
+  });
+  return result;
+}
+
+function formatExtensionsInput(items) {
+  return (items || []).join('\n');
+}
+
+function selectedMediaTypes() {
+  return ['audio', 'video', 'photo'].filter((name) => {
+    const id = 'mediaType' + name.charAt(0).toUpperCase() + name.slice(1);
+    return document.getElementById(id).checked;
+  });
+}
+
+function updateAllowedFilesModeUI() {
+  const mode = document.getElementById('allowedFilesMode').value || 'media_types';
+  document.getElementById('mediaTypesGroup').style.display = mode === 'media_types' ? '' : 'none';
+  document.getElementById('extensionsGroup').style.display = mode === 'extensions' ? '' : 'none';
+}
+
+function renderMediaTypeHints() {
+  document.getElementById('mediaTypeAudioHint').textContent = builtInMediaTypes.audio.join(', ');
+  document.getElementById('mediaTypeVideoHint').textContent = builtInMediaTypes.video.join(', ');
+  document.getElementById('mediaTypePhotoHint').textContent = builtInMediaTypes.photo.join(', ');
+}
+
 async function loadSettings() {
   try {
     const r = await fetch('/api/config');
@@ -336,8 +429,14 @@ async function loadSettings() {
     document.getElementById('reserveGB').value      = cfg.reserve_free_gb ?? 2;
     document.getElementById('destFolder').value     = cfg.dest_folder || 'media';
     document.getElementById('fileSelectMode').value = cfg.file_select_mode || 'new';
+    document.getElementById('allowedFilesMode').value = cfg.allowed_files_mode || 'media_types';
     document.getElementById('overwriteMode').value  = cfg.overwrite_mode || 'skip';
     document.getElementById('autoCopy').checked     = !!cfg.auto_copy;
+    document.getElementById('mediaTypeAudio').checked = (cfg.enabled_media_types || ['audio', 'video']).includes('audio');
+    document.getElementById('mediaTypeVideo').checked = (cfg.enabled_media_types || ['audio', 'video']).includes('video');
+    document.getElementById('mediaTypePhoto').checked = (cfg.enabled_media_types || []).includes('photo');
+    document.getElementById('allowedExtensions').value = formatExtensionsInput((cfg.allowed_extensions || []).length ? cfg.allowed_extensions : defaultAllowedExtensions());
+    updateAllowedFilesModeUI();
 
     sourceConfig = {};
     (cfg.sources || []).forEach((source) => {
@@ -354,12 +453,15 @@ async function saveSettings(event) {
   event.preventDefault();
 
   const body = {
-    reserve_free_gb:  parseFloat(document.getElementById('reserveGB').value) || 2,
-    dest_folder:      document.getElementById('destFolder').value.trim() || 'media',
-    file_select_mode: document.getElementById('fileSelectMode').value,
-    overwrite_mode:   document.getElementById('overwriteMode').value,
-    auto_copy:        document.getElementById('autoCopy').checked,
-    sources:          collectSourcesForSave(),
+    reserve_free_gb:   parseFloat(document.getElementById('reserveGB').value) || 2,
+    dest_folder:       document.getElementById('destFolder').value.trim() || 'media',
+    file_select_mode:  document.getElementById('fileSelectMode').value,
+    allowed_files_mode: document.getElementById('allowedFilesMode').value,
+    enabled_media_types: selectedMediaTypes(),
+    allowed_extensions: parseExtensionsInput(document.getElementById('allowedExtensions').value),
+    overwrite_mode:    document.getElementById('overwriteMode').value,
+    auto_copy:         document.getElementById('autoCopy').checked,
+    sources:           collectSourcesForSave(),
   };
 
   try {
@@ -405,6 +507,7 @@ document.getElementById('sourceTree').addEventListener('change', (event) => {
   toggleSource(checkbox.dataset.path, checkbox.checked);
 });
 
+renderMediaTypeHints();
 loadSettings();
 </script>
 {{end}}