scan media folder
This commit is contained in:
@@ -1,188 +1,217 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.875rem;
|
||||
color: #888;
|
||||
font-size: 0.875rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: #202020;
|
||||
border-right: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
width: 280px;
|
||||
background: #202020;
|
||||
border-right: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #888;
|
||||
.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;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.asset-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.asset-list li:hover {
|
||||
background: #2a2a2a;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.asset-list li.selected {
|
||||
background: #333;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.filename {
|
||||
font-size: 0.875rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.875rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: #f59e0b;
|
||||
color: #000;
|
||||
background: #f59e0b;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.status-badge.ready {
|
||||
background: #10b981;
|
||||
color: #000;
|
||||
background: #10b981;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.status-badge.error {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty,
|
||||
.loading,
|
||||
.error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
height: 120px;
|
||||
background: #252525;
|
||||
border-top: 1px solid #333;
|
||||
height: 120px;
|
||||
background: #252525;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.timeline-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 1rem;
|
||||
background: #202020;
|
||||
border-top: 1px solid #333;
|
||||
padding: 1rem;
|
||||
background: #202020;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.info h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.info dl {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.info dt {
|
||||
color: #888;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.info dd {
|
||||
color: #e0e0e0;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
}, [])
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<h2>Assets</h2>
|
||||
<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;
|
||||
|
||||
@@ -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/");
|
||||
|
||||
Reference in New Issue
Block a user