From 50948ca72ae80d78117d92d4f5a96fa95fa8cb07 Mon Sep 17 00:00:00 2001
From: Shimon Doodkin <helpmepro1@gmail.com>
Date: Sat, 21 Mar 2026 15:28:14 +0200
Subject: [PATCH 1/2] feat(media-library): add MIME types for mkv, avi, m4a,
 and svg formats

Extend supported media types to include video/matroska, video/x-msvideo,
audio/x-m4a, audio/mp4, and image/svg+xml. Improve MIME detection to
prefer extension-based lookup when browser-reported type is generic.
---
 .../media-library/utils/validation.ts         | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/features/media-library/utils/validation.ts b/src/features/media-library/utils/validation.ts
index a623453d2..64123897f 100644
--- a/src/features/media-library/utils/validation.ts
+++ b/src/features/media-library/utils/validation.ts
@@ -10,6 +10,8 @@ const SUPPORTED_VIDEO_TYPES = [
   'video/webm',
   'video/quicktime', // .mov files
   'video/x-matroska', // .mkv files
+  'video/matroska', // .mkv files (alternate browser MIME)
+  'video/x-msvideo', // .avi files
 ];
 
 const SUPPORTED_AUDIO_TYPES = [
@@ -17,6 +19,8 @@ const SUPPORTED_AUDIO_TYPES = [
   'audio/mpeg', // MP3 also uses audio/mpeg
   'audio/wav',
   'audio/aac',
+  'audio/x-m4a', // .m4a files
+  'audio/mp4', // .m4a also reported as audio/mp4
   'audio/ogg', // Opus codec in Ogg container
 ];
 
@@ -26,6 +30,7 @@ const SUPPORTED_IMAGE_TYPES = [
   'image/png',
   'image/gif',
   'image/webp',
+  'image/svg+xml', // .svg files
 ];
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024 * 1024; // 5GB
@@ -37,10 +42,12 @@ const EXTENSION_TO_MIME: Record<string, string> = {
   '.webm': 'video/webm',
   '.mov': 'video/quicktime',
   '.mkv': 'video/x-matroska',
+  '.avi': 'video/x-msvideo',
   // Audio
   '.mp3': 'audio/mpeg',
   '.wav': 'audio/wav',
   '.aac': 'audio/aac',
+  '.m4a': 'audio/x-m4a',
   '.ogg': 'audio/ogg',
   '.opus': 'audio/ogg',
   // Image
@@ -49,18 +56,21 @@ const EXTENSION_TO_MIME: Record<string, string> = {
   '.png': 'image/png',
   '.gif': 'image/gif',
   '.webp': 'image/webp',
+  '.svg': 'image/svg+xml',
 };
 
 /**
  * Get MIME type from file, falling back to extension-based detection
  */
 export function getMimeType(file: File): string {
-  if (file.type) {
-    return file.type;
-  }
-  // Fallback to extension-based detection
+  // Prefer extension-based detection for known extensions —
+  // browsers sometimes report non-standard MIME types (e.g. "video/matroska"
+  // instead of "video/x-matroska" for .mkv files).
   const ext = file.name.toLowerCase().match(/\.[^.]+$/)?.[0];
-  return ext ? EXTENSION_TO_MIME[ext] || '' : '';
+  if (ext && EXTENSION_TO_MIME[ext]) {
+    return EXTENSION_TO_MIME[ext];
+  }
+  return file.type || '';
 }
 
 interface ValidationResult {
@@ -98,7 +108,7 @@ export function validateMediaFile(file: File): ValidationResult {
   if (!allSupportedTypes.includes(mimeType)) {
     return {
       valid: false,
-      error: `Unsupported file type: ${mimeType || file.name.split('.').pop()}. Supported types: video (mp4, webm, mov, mkv), audio (mp3, wav, aac, ogg/opus), image (jpg, png, gif, webp)`,
+      error: `Unsupported file type: ${mimeType || file.name.split('.').pop()}. Supported types: video (mp4, webm, mov, mkv, avi), audio (mp3, wav, aac, m4a, ogg/opus), image (jpg, png, gif, webp, svg)`,
     };
   }
 

From d33d4fcfecf8404e3fc5c038e39ae5dfd081b2f0 Mon Sep 17 00:00:00 2001
From: Shimon Doodkin <helpmepro1@gmail.com>
Date: Sat, 21 Mar 2026 15:28:29 +0200
Subject: [PATCH 2/2] feat(media-library): add auto-import from watched
 directory

Add directory watching via File System Access API that polls for new
media files and automatically imports them to the library and timeline.
Includes stability detection to wait for files still being written.
---
 .../components/media-library.tsx              |  26 ++
 .../media-library/deps/timeline-actions.ts    |   1 +
 .../media-library/deps/timeline-utils.ts      |   5 +
 .../media-library/stores/auto-import-store.ts | 272 ++++++++++++++++++
 .../timeline/contracts/media-library.ts       |   7 +
 5 files changed, 311 insertions(+)
 create mode 100644 src/features/media-library/stores/auto-import-store.ts

diff --git a/src/features/media-library/components/media-library.tsx b/src/features/media-library/components/media-library.tsx
index fe5a74423..ac39e174e 100644
--- a/src/features/media-library/components/media-library.tsx
+++ b/src/features/media-library/components/media-library.tsx
@@ -35,6 +35,7 @@ import { MissingMediaDialog } from './missing-media-dialog';
 import { OrphanedClipsDialog } from './orphaned-clips-dialog';
 import { UnsupportedAudioCodecDialog } from './unsupported-audio-codec-dialog';
 import { useMediaLibraryStore } from '../stores/media-library-store';
+import { useAutoImportStore } from '../stores/auto-import-store';
 import {
   useTimelineStore,
   useCompositionNavigationStore,
@@ -111,6 +112,12 @@ export const MediaLibrary = memo(function MediaLibrary({ onMediaSelect }: MediaL
   const proxyStatus = useMediaLibraryStore((s) => s.proxyStatus);
   const proxyProgress = useMediaLibraryStore((s) => s.proxyProgress);
 
+  // Auto-import state
+  const autoImportActive = useAutoImportStore((s) => s.active);
+  const autoImportFolderName = useAutoImportStore((s) => s.folderName);
+  const enableAutoImport = useAutoImportStore((s) => s.enable);
+  const disableAutoImport = useAutoImportStore((s) => s.disable);
+
   // Composition navigation — show banner when inside a sub-comp
   const activeCompositionId = useCompositionNavigationStore((s) => s.activeCompositionId);
   const breadcrumbs = useCompositionNavigationStore((s) => s.breadcrumbs);
@@ -394,6 +401,25 @@ export const MediaLibrary = memo(function MediaLibrary({ onMediaSelect }: MediaL
       {/* Header toolbar */}
       <div className="px-3 py-2 border-b border-border flex-shrink-0">
         <div className="flex items-center gap-2 text-xs">
+          {/* Auto-import toggle */}
+          <button
+            onClick={autoImportActive ? disableAutoImport : enableAutoImport}
+            disabled={!currentProjectId}
+            className={`flex items-center gap-1.5 h-7 px-2.5 rounded-md
+              transition-colors duration-150
+              disabled:opacity-40 disabled:cursor-not-allowed
+              ${autoImportActive
+                ? 'bg-green-600 text-white hover:bg-red-600'
+                : 'bg-secondary text-foreground hover:bg-secondary/80 border border-border'
+              }`}
+            title={autoImportActive
+              ? `Watching "${autoImportFolderName}" — click to disable`
+              : 'Watch a folder for new files and auto-add to timeline'}
+          >
+            <Upload className="w-3.5 h-3.5" />
+            <span>{autoImportActive ? 'Disable Auto' : 'Auto Import'}</span>
+          </button>
+
           {/* Import action */}
           <button
             onClick={handleImport}
diff --git a/src/features/media-library/deps/timeline-actions.ts b/src/features/media-library/deps/timeline-actions.ts
index 1adb225d0..d1ee2f322 100644
--- a/src/features/media-library/deps/timeline-actions.ts
+++ b/src/features/media-library/deps/timeline-actions.ts
@@ -2,4 +2,5 @@ export {
   removeItems,
   updateItem,
   removeItemsFromItemsActions,
+  addItem,
 } from './timeline-contract';
diff --git a/src/features/media-library/deps/timeline-utils.ts b/src/features/media-library/deps/timeline-utils.ts
index 0589fcf18..c331e3885 100644
--- a/src/features/media-library/deps/timeline-utils.ts
+++ b/src/features/media-library/deps/timeline-utils.ts
@@ -1 +1,6 @@
 export { autoMatchOrphanedClips } from './timeline-contract';
+export {
+  buildDroppedMediaTimelineItem,
+  type DroppableMediaType,
+  getDroppedMediaDurationInFrames,
+} from './timeline-contract';
diff --git a/src/features/media-library/stores/auto-import-store.ts b/src/features/media-library/stores/auto-import-store.ts
new file mode 100644
index 000000000..6539381d1
--- /dev/null
+++ b/src/features/media-library/stores/auto-import-store.ts
@@ -0,0 +1,272 @@
+import { create } from 'zustand';
+import { useMediaLibraryStore } from './media-library-store';
+import { useItemsStore } from '@/features/media-library/deps/timeline-stores';
+import { useTimelineSettingsStore } from '@/features/media-library/deps/timeline-stores';
+import { useProjectStore } from '@/features/media-library/deps/projects';
+import {
+  buildDroppedMediaTimelineItem,
+  type DroppableMediaType,
+  getDroppedMediaDurationInFrames,
+} from '@/features/media-library/deps/timeline-utils';
+import { addItem } from '@/features/media-library/deps/timeline-actions';
+import { resolveMediaUrl } from '@/features/media-library/utils/media-resolver';
+import { mediaLibraryService } from '@/features/media-library/services/media-library-service';
+import { getMediaType } from '@/features/media-library/utils/validation';
+import { createLogger } from '@/shared/logging/logger';
+
+const logger = createLogger('AutoImport');
+
+const POLL_INTERVAL_MS = 3000;
+
+const VIDEO_EXTENSIONS = new Set(['.mp4', '.webm', '.mov', '.avi', '.mkv']);
+const AUDIO_EXTENSIONS = new Set(['.mp3', '.wav', '.ogg', '.m4a', '.aac']);
+const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg']);
+
+function isSupportedMediaFile(name: string): boolean {
+  const ext = name.toLowerCase().match(/\.[^.]+$/)?.[0];
+  if (!ext) return false;
+  return VIDEO_EXTENSIONS.has(ext) || AUDIO_EXTENSIONS.has(ext) || IMAGE_EXTENSIONS.has(ext);
+}
+
+/**
+ * Tracks files that were detected but may still be written to (e.g. OBS recordings).
+ * Maps filename -> last observed file size. A file is considered stable when its
+ * size is >0 and unchanged between two consecutive polls.
+ */
+const pendingFiles = new Map<string, number>();
+
+interface AutoImportState {
+  active: boolean;
+  directoryHandle: FileSystemDirectoryHandle | null;
+  folderName: string | null;
+  knownFiles: Set<string>;
+  timerId: ReturnType<typeof setInterval> | null;
+}
+
+interface AutoImportActions {
+  enable: () => Promise<void>;
+  disable: () => void;
+}
+
+export const useAutoImportStore = create<AutoImportState & AutoImportActions>()(
+  (set, get) => ({
+    active: false,
+    directoryHandle: null,
+    folderName: null,
+    knownFiles: new Set(),
+    timerId: null,
+
+    enable: async () => {
+      if (get().active) return;
+
+      if (!('showDirectoryPicker' in window)) {
+        useMediaLibraryStore.getState().showNotification({
+          type: 'error',
+          message: 'Directory picker not supported. Please use Google Chrome.',
+        });
+        return;
+      }
+
+      try {
+        const dirHandle = await window.showDirectoryPicker({ mode: 'read' });
+
+        // Snapshot existing files so we only import new ones
+        const knownFiles = new Set<string>();
+        for await (const entry of dirHandle.values()) {
+          if (entry.kind === 'file' && isSupportedMediaFile(entry.name)) {
+            knownFiles.add(entry.name);
+          }
+        }
+
+        const timerId = setInterval(() => pollForNewFiles(), POLL_INTERVAL_MS);
+
+        set({
+          active: true,
+          directoryHandle: dirHandle,
+          folderName: dirHandle.name,
+          knownFiles,
+          timerId,
+        });
+
+        useMediaLibraryStore.getState().showNotification({
+          type: 'success',
+          message: `Auto-import watching "${dirHandle.name}" for new files`,
+        });
+
+        logger.info(`Auto-import enabled for "${dirHandle.name}", ${knownFiles.size} existing files`);
+      } catch (error) {
+        if (error instanceof Error && error.name !== 'AbortError') {
+          logger.error('Failed to enable auto-import:', error);
+          useMediaLibraryStore.getState().showNotification({
+            type: 'error',
+            message: `Auto-import failed: ${error.message}`,
+          });
+        }
+      }
+    },
+
+    disable: () => {
+      const { timerId } = get();
+      if (timerId) {
+        clearInterval(timerId);
+      }
+      pendingFiles.clear();
+      set({
+        active: false,
+        directoryHandle: null,
+        folderName: null,
+        knownFiles: new Set(),
+        timerId: null,
+      });
+      logger.info('Auto-import disabled');
+    },
+  })
+);
+
+async function pollForNewFiles(): Promise<void> {
+  const state = useAutoImportStore.getState();
+  if (!state.active || !state.directoryHandle) return;
+
+  const { currentProjectId } = useMediaLibraryStore.getState();
+  if (!currentProjectId) return;
+
+  try {
+    // Verify permission is still granted
+    const permissionStatus = await state.directoryHandle.queryPermission({ mode: 'read' });
+    if (permissionStatus !== 'granted') {
+      logger.warn('Auto-import: directory permission lost, disabling');
+      useAutoImportStore.getState().disable();
+      useMediaLibraryStore.getState().showNotification({
+        type: 'warning',
+        message: 'Auto-import disabled: directory permission lost',
+      });
+      return;
+    }
+
+    // Scan directory for new files
+    for await (const entry of state.directoryHandle.values()) {
+      if (entry.kind === 'file' && isSupportedMediaFile(entry.name)) {
+        if (!state.knownFiles.has(entry.name) && !pendingFiles.has(entry.name)) {
+          // New file detected — add to pending with current size
+          const fileHandle = entry as FileSystemFileHandle;
+          const file = await fileHandle.getFile();
+          pendingFiles.set(entry.name, file.size);
+          logger.info(`Auto-import: detected new file "${entry.name}" (${file.size} bytes), waiting for write to finish...`);
+        }
+      }
+    }
+
+    if (pendingFiles.size === 0) return;
+
+    // Check which pending files are now stable (size > 0 and unchanged since last poll)
+    const stableHandles: FileSystemFileHandle[] = [];
+    const currentKnown = new Set(state.knownFiles);
+
+    for (const [fileName, lastSize] of pendingFiles) {
+      try {
+        const handle = await state.directoryHandle.getFileHandle(fileName);
+        const file = await handle.getFile();
+        const currentSize = file.size;
+
+        if (currentSize === 0) {
+          // Still empty, keep waiting
+          continue;
+        }
+
+        if (currentSize === lastSize) {
+          // Size unchanged and > 0 — file is done being written
+          stableHandles.push(handle);
+          currentKnown.add(fileName);
+          pendingFiles.delete(fileName);
+          logger.info(`Auto-import: "${fileName}" stable at ${currentSize} bytes, importing`);
+        } else {
+          // Still growing, update the tracked size for next poll
+          pendingFiles.set(fileName, currentSize);
+          logger.info(`Auto-import: "${fileName}" still writing (${lastSize} -> ${currentSize} bytes)`);
+        }
+      } catch {
+        // File may have been deleted before we could read it
+        pendingFiles.delete(fileName);
+      }
+    }
+
+    if (stableHandles.length === 0) return;
+
+    // Update known files immediately to avoid re-processing
+    useAutoImportStore.setState({ knownFiles: currentKnown });
+
+    logger.info(`Auto-import: importing ${stableHandles.length} stable file(s)`);
+
+    // Import into media library
+    const importedMedia = await useMediaLibraryStore.getState().importHandles(stableHandles);
+
+    if (importedMedia.length === 0) return;
+
+    // Append each imported item to end of timeline on track 1
+    const fps = useTimelineSettingsStore.getState().fps;
+    const tracks = useItemsStore.getState().tracks;
+    const project = useProjectStore.getState().currentProject;
+    const canvasWidth = project?.metadata.width ?? 1920;
+    const canvasHeight = project?.metadata.height ?? 1080;
+
+    // Find first visible, unlocked, non-group track
+    const targetTrack = tracks.find(
+      (t: { visible?: boolean; locked?: boolean; isGroup?: boolean }) =>
+        t.visible !== false && !t.locked && !t.isGroup
+    );
+    if (!targetTrack) {
+      logger.warn('Auto-import: no available track for timeline placement');
+      return;
+    }
+
+    for (const media of importedMedia) {
+      const rawMediaType = getMediaType(media.mimeType);
+      if (rawMediaType === 'unknown') continue;
+      const mediaType: DroppableMediaType = rawMediaType;
+
+      const durationInFrames = getDroppedMediaDurationInFrames(media, mediaType, fps);
+
+      // Find end of all items on the target track
+      const trackItems = useItemsStore.getState().items.filter(
+        (i: { trackId: string }) => i.trackId === targetTrack.id
+      );
+      const endFrame = trackItems.reduce(
+        (max: number, item: { from: number; durationInFrames: number }) =>
+          Math.max(max, item.from + item.durationInFrames),
+        0
+      );
+
+      const blobUrl = await resolveMediaUrl(media.id);
+      if (!blobUrl) continue;
+
+      const thumbnailUrl = await mediaLibraryService.getThumbnailBlobUrl(media.id);
+
+      const timelineItem = buildDroppedMediaTimelineItem({
+        media,
+        mediaId: media.id,
+        mediaType,
+        label: media.fileName,
+        timelineFps: fps,
+        blobUrl,
+        thumbnailUrl,
+        canvasWidth,
+        canvasHeight,
+        placement: {
+          trackId: targetTrack.id,
+          from: endFrame,
+          durationInFrames,
+        },
+      });
+
+      addItem(timelineItem);
+      logger.info(`Auto-import: added "${media.fileName}" to timeline at frame ${endFrame}`);
+    }
+
+    useMediaLibraryStore.getState().showNotification({
+      type: 'success',
+      message: `Auto-imported ${importedMedia.length} file(s) to timeline`,
+    });
+  } catch (error) {
+    logger.error('Auto-import poll error:', error);
+  }
+}
diff --git a/src/features/timeline/contracts/media-library.ts b/src/features/timeline/contracts/media-library.ts
index c136cda53..e6f354969 100644
--- a/src/features/timeline/contracts/media-library.ts
+++ b/src/features/timeline/contracts/media-library.ts
@@ -20,3 +20,10 @@ export {
 
 export { autoMatchOrphanedClips } from '../utils/media-validation';
 export { gifFrameCache } from '../services/gif-frame-cache';
+
+export { addItem } from '../stores/actions/item-actions';
+export {
+  buildDroppedMediaTimelineItem,
+  type DroppableMediaType,
+  getDroppedMediaDurationInFrames,
+} from '../utils/dropped-media';