scan media folder

api/routes/assets.py

@@ -30,10 +30,19 @@ def create_asset(data: AssetCreate):
     if not path.exists():
         raise HTTPException(status_code=400, detail="File not found")
 
+    # Store path relative to media root
+    import os
+
+    media_root = Path(os.environ.get("MEDIA_ROOT", "/app/media"))
+    try:
+        rel_path = str(path.relative_to(media_root))
+    except ValueError:
+        rel_path = path.name
+
     # Create asset
     asset = MediaAsset.objects.create(
         filename=data.filename or path.name,
-        file_path=str(path.absolute()),
+        file_path=rel_path,
         file_size=path.stat().st_size,
     )
 
@@ -88,3 +97,68 @@ def update_asset(asset_id: UUID, data: AssetUpdate, asset=Depends(get_asset)):
 def delete_asset(asset_id: UUID, asset=Depends(get_asset)):
     """Delete an asset."""
     asset.delete()
+
+
+@router.post("/scan", response_model=dict)
+def scan_media_folder():
+    """
+    Scan the media folder for new video/audio files and register them as assets.
+
+    Returns a summary of files found and registered.
+    """
+    import os
+    from pathlib import Path
+
+    from mpr.media_assets.models import MediaAsset
+
+    # Get media root from environment
+    media_root = os.environ.get("MEDIA_ROOT", "/app/media")
+    media_path = Path(media_root)
+
+    if not media_path.exists():
+        raise HTTPException(
+            status_code=500, detail=f"Media folder not found: {media_root}"
+        )
+
+    # Supported video/audio extensions
+    video_exts = {".mp4", ".mkv", ".avi", ".mov", ".webm", ".flv", ".wmv", ".m4v"}
+    audio_exts = {".mp3", ".wav", ".flac", ".aac", ".ogg", ".m4a"}
+    supported_exts = video_exts | audio_exts
+
+    # Get existing filenames to avoid duplicates
+    existing_filenames = set(MediaAsset.objects.values_list("filename", flat=True))
+
+    # Scan for media files
+    found_files = []
+    registered_files = []
+    skipped_files = []
+
+    for file_path in media_path.rglob("*"):
+        if file_path.is_file() and file_path.suffix.lower() in supported_exts:
+            found_files.append(str(file_path))
+
+            # Skip if already registered
+            if file_path.name in existing_filenames:
+                skipped_files.append(file_path.name)
+                continue
+
+            # Register new asset with path relative to media root
+            rel_path = str(file_path.relative_to(media_path))
+            try:
+                asset = MediaAsset.objects.create(
+                    filename=file_path.name,
+                    file_path=rel_path,
+                    file_size=file_path.stat().st_size,
+                )
+                registered_files.append(file_path.name)
+
+                # TODO: Queue probe task to extract metadata
+            except Exception as e:
+                print(f"Error registering {file_path.name}: {e}")
+
+    return {
+        "found": len(found_files),
+        "registered": len(registered_files),
+        "skipped": len(skipped_files),
+        "files": registered_files,
+    }

ui/timeline/src/App.css

@@ -5,7 +5,8 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     background: #1a1a1a;
     color: #e0e0e0;
 }
@@ -48,14 +49,42 @@ body {
     overflow-y: auto;
 }
 
-.sidebar h2 {
+.sidebar-header {
     padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.sidebar-header h2 {
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #888;
 }
 
+.scan-button {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.scan-button:hover:not(:disabled) {
+    background: #2563eb;
+}
+
+.scan-button:disabled {
+    background: #4b5563;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
 .asset-list {
     list-style: none;
 }

ui/timeline/src/App.tsx

@@ -1,14 +1,15 @@
-import { useState, useEffect } from 'react'
-import { getAssets, getSystemStatus } from './api'
-import type { MediaAsset, SystemStatus } from './types'
-import './App.css'
+import { useState, useEffect } from "react";
+import { getAssets, getSystemStatus, scanMediaFolder } from "./api";
+import type { MediaAsset, SystemStatus } from "./types";
+import "./App.css";
 
 function App() {
-  const [assets, setAssets] = useState<MediaAsset[]>([])
-  const [status, setStatus] = useState<SystemStatus | null>(null)
-  const [selectedAsset, setSelectedAsset] = useState<MediaAsset | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [assets, setAssets] = useState<MediaAsset[]>([]);
+  const [status, setStatus] = useState<SystemStatus | null>(null);
+  const [selectedAsset, setSelectedAsset] = useState<MediaAsset | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [scanning, setScanning] = useState(false);
 
   useEffect(() => {
     async function load() {
@@ -16,24 +17,47 @@ function App() {
         const [assetsData, statusData] = await Promise.all([
           getAssets(),
           getSystemStatus(),
-        ])
-        setAssets(assetsData)
-        setStatus(statusData)
+        ]);
+        setAssets(
+          assetsData.sort((a, b) => a.filename.localeCompare(b.filename)),
+        );
+        setStatus(statusData);
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Failed to load')
+        setError(e instanceof Error ? e.message : "Failed to load");
       } finally {
-        setLoading(false)
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  async function handleScan() {
+    setScanning(true);
+    setError(null);
+    try {
+      const result = await scanMediaFolder();
+      alert(
+        `Scan complete!\nFound: ${result.found}\nRegistered: ${result.registered}\nSkipped: ${result.skipped}`,
+      );
+
+      // Reload assets
+      const assetsData = await getAssets();
+      setAssets(
+        assetsData.sort((a, b) => a.filename.localeCompare(b.filename)),
+      );
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Scan failed");
+    } finally {
+      setScanning(false);
     }
   }
-    load()
-  }, [])
 
   if (loading) {
-    return <div className="loading">Loading...</div>
+    return <div className="loading">Loading...</div>;
   }
 
   if (error) {
-    return <div className="error">Error: {error}</div>
+    return <div className="error">Error: {error}</div>;
   }
 
   return (
@@ -49,18 +73,25 @@ function App() {
 
       <div className="layout">
         <aside className="sidebar">
+          <div className="sidebar-header">
             <h2>Assets</h2>
+            <button
+              onClick={handleScan}
+              disabled={scanning}
+              className="scan-button"
+            >
+              {scanning ? "Scanning..." : "Scan Folder"}
+            </button>
+          </div>
           <ul className="asset-list">
             {assets.map((asset) => (
               <li
                 key={asset.id}
-                className={selectedAsset?.id === asset.id ? 'selected' : ''}
+                className={selectedAsset?.id === asset.id ? "selected" : ""}
                 onClick={() => setSelectedAsset(asset)}
+                title={asset.filename}
               >
                 <span className="filename">{asset.filename}</span>
-                <span className={`status-badge ${asset.status}`}>
-                  {asset.status}
-                </span>
               </li>
             ))}
           </ul>
@@ -70,10 +101,7 @@ function App() {
           {selectedAsset ? (
             <div className="editor">
               <div className="video-container">
-                <video
-                  controls
-                  src={`/media/${selectedAsset.file_path}`}
-                />
+                <video controls src={`/media/${selectedAsset.file_path}`} />
               </div>
               <div className="timeline-container">
                 {/* Timeline component will go here */}
@@ -87,7 +115,9 @@ function App() {
                   <dt>Duration</dt>
                   <dd>{selectedAsset.duration?.toFixed(2)}s</dd>
                   <dt>Resolution</dt>
-                  <dd>{selectedAsset.width}x{selectedAsset.height}</dd>
+                  <dd>
+                    {selectedAsset.width}x{selectedAsset.height}
+                  </dd>
                   <dt>Video</dt>
                   <dd>{selectedAsset.video_codec}</dd>
                   <dt>Audio</dt>
@@ -101,7 +131,7 @@ function App() {
         </main>
       </div>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

ui/timeline/src/api.ts

@@ -38,6 +38,17 @@ export async function getAsset(id: string): Promise<MediaAsset> {
   return request(`/assets/${id}`);
 }
 
+export async function scanMediaFolder(): Promise<{
+  found: number;
+  registered: number;
+  skipped: number;
+  files: string[];
+}> {
+  return request("/assets/scan", {
+    method: "POST",
+  });
+}
+
 // Presets
 export async function getPresets(): Promise<TranscodePreset[]> {
   return request("/presets/");