feat: drag&drop upload, default 1h links, Media-Tool mit Kino-Stub

This commit is contained in:
2026-06-06 15:35:35 +02:00
parent 2189a5c652
commit 83b6dad9e3
5 changed files with 117 additions and 7 deletions

View File

@@ -166,7 +166,7 @@ function UploadShareManager({ toast }) {
const [logs, setLogs] = useState([]);
const [showCreate, setShowCreate] = useState(false);
const [showLogs, setShowLogs] = useState(false);
const [form, setForm] = useState({ password:'', expires_hours:24, max_size_mb:10 });
const [form, setForm] = useState({ password:'', expires_hours:1, max_size_mb:10 });
const [busy, setBusy] = useState(false);
const [copied, setCopied] = useState(null);
const [sharePws, setSharePws] = useState({}); // {shareId: password} für Passwort-Kopieren
@@ -185,7 +185,7 @@ function UploadShareManager({ toast }) {
try {
const r = await api('/upload-shares', { body: form });
setSharePws(p=>({...p, [r.id]: form.password}));
toast('Upload-Link erstellt ✓'); setShowCreate(false); setForm({password:'',expires_hours:24,max_size_mb:10}); load();
toast('Upload-Link erstellt ✓'); setShowCreate(false); setForm({password:'',expires_hours:1,max_size_mb:10}); load();
} catch(e) { toast(e.message,'error'); }
setBusy(false);
};

View File

@@ -0,0 +1,60 @@
import { useState } from 'react';
import { useS } from '../lib.js';
const TABS = [
{ id: 'kino', label: '🎬 Kino' },
];
export default function Media() {
const S = useS();
const [tab, setTab] = useState('kino');
return (
<div style={{ padding: '0 0 40px' }}>
{/* Tab-Bar */}
<div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
{TABS.map(t => (
<button
key={t.id}
onClick={() => setTab(t.id)}
style={{
padding: '7px 16px',
borderRadius: 8,
border: tab === t.id ? '1px solid #4ecdc4' : '1px solid rgba(255,255,255,0.12)',
background: tab === t.id ? 'rgba(78,205,196,0.15)' : 'rgba(255,255,255,0.04)',
color: tab === t.id ? '#4ecdc4' : 'rgba(255,255,255,0.6)',
cursor: 'pointer',
fontFamily: "'Courier New', monospace",
fontSize: 13,
fontWeight: tab === t.id ? 700 : 400,
transition: 'all 0.15s',
}}
>
{t.label}
</button>
))}
</div>
{tab === 'kino' && <KinoTab S={S} />}
</div>
);
}
function KinoTab({ S }) {
return (
<div style={{
background: 'rgba(255,255,255,0.03)',
border: '1px solid rgba(255,255,255,0.08)',
borderRadius: 12,
padding: '32px 24px',
textAlign: 'center',
color: 'rgba(255,255,255,0.35)',
fontFamily: "'Courier New', monospace",
fontSize: 14,
}}>
<div style={{ fontSize: 40, marginBottom: 12 }}>🎬</div>
<div style={{ fontSize: 15, color: 'rgba(255,255,255,0.5)', marginBottom: 8 }}>Kino-Feature</div>
<div style={{ fontSize: 12 }}>Wird implementiert TMDb API-Key erforderlich</div>
</div>
);
}