feat: Kino-Feature mit TMDb-Proxy, Favoriten, Admin-Token-Einstellung
This commit is contained in:
@@ -2586,6 +2586,41 @@ const Field = ({ label, type='text', value, onChange, placeholder='', autoCapita
|
||||
);
|
||||
|
||||
// ── Admin: Upload-Freigabe Berechtigungen ─────────────────────────────────────
|
||||
function TmdbSettings({ toast }) {
|
||||
const [token, setToken] = useState('');
|
||||
const [configured, setConfigured] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
api('/tools/media/settings').then(d => setConfigured(d.configured)).catch(()=>{});
|
||||
}, []);
|
||||
|
||||
const save = async () => {
|
||||
if (!token.trim()) { toast('Token eingeben', 'error'); return; }
|
||||
setBusy(true);
|
||||
try {
|
||||
await api('/tools/media/settings', { method:'PUT', body:{ tmdb_token: token.trim() } });
|
||||
toast('TMDb Token gespeichert ✓');
|
||||
setConfigured(true); setToken('');
|
||||
} catch(e) { toast(e.message, 'error'); } finally { setBusy(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ fontSize:12, color:'rgba(255,255,255,0.45)', fontFamily:'monospace', marginBottom:10, lineHeight:1.6 }}>
|
||||
API Read Access Token von <a href="https://www.themoviedb.org/settings/api" target="_blank"
|
||||
rel="noopener noreferrer" style={{ color:'#4ecdc4' }}>themoviedb.org</a> eintragen.
|
||||
{configured && <span style={{ color:'#4ecdc4', marginLeft:6 }}>✓ Konfiguriert</span>}
|
||||
</div>
|
||||
<Field label="BEARER TOKEN (API READ ACCESS TOKEN)" value={token} onChange={e=>setToken(e.target.value)}
|
||||
type="password" placeholder={configured ? '••• Token ersetzen •••' : 'eyJhbGciOi…'} />
|
||||
<button onClick={save} disabled={busy} style={{ ...S.btn('#4ecdc4'), width:'100%', textAlign:'center', padding:'11px 0' }}>
|
||||
{busy ? '…' : '✓ Token speichern'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UploadShareAdminPanel({ toast }) {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [logs, setLogs] = useState([]);
|
||||
@@ -2805,6 +2840,9 @@ function AdminPanel({ toast, mobile, user, nav }) {
|
||||
<Sec title="UPLOAD-FREIGABE">
|
||||
<UploadShareAdminPanel toast={toast}/>
|
||||
</Sec>
|
||||
<Sec title="TMDB API (KINO-FEATURE)">
|
||||
<TmdbSettings toast={toast}/>
|
||||
</Sec>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import { useState } from 'react';
|
||||
import { S } from '../lib.js';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { api, S } from '../lib.js';
|
||||
|
||||
const POSTER = 'https://image.tmdb.org/t/p/w342';
|
||||
const TABS = [
|
||||
{ id: 'kino', label: '🎬 Kino' },
|
||||
{ id: 'kino', label: '🎬 Kino' },
|
||||
{ id: 'demnächst', label: '🗓 Demnächst' },
|
||||
{ id: 'favoriten', label: '❤ Favoriten' },
|
||||
];
|
||||
|
||||
export default function Media() {
|
||||
@@ -10,50 +13,224 @@ export default function Media() {
|
||||
|
||||
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',
|
||||
}}
|
||||
>
|
||||
<button key={t.id} onClick={() => setTab(t.id)} style={{
|
||||
padding: '7px 16px', borderRadius: 8, cursor: 'pointer',
|
||||
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)',
|
||||
fontFamily: "'Space Mono',monospace", fontSize: 13,
|
||||
fontWeight: tab === t.id ? 700 : 400, transition: 'all 0.15s',
|
||||
}}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'kino' && <KinoTab />}
|
||||
{tab === 'kino' && <MovieGrid endpoint="/tools/media/now-playing" emptyText="Keine aktuellen Kinofilme" />}
|
||||
{tab === 'demnächst' && <MovieGrid endpoint="/tools/media/upcoming" emptyText="Keine kommenden Filme" />}
|
||||
{tab === 'favoriten' && <FavoritenTab />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KinoTab() {
|
||||
// ── Gemeinsame Film-Karte ─────────────────────────────────────────────────────
|
||||
function MovieCard({ movie, favIds, onToggleFav }) {
|
||||
const isFav = favIds.has(movie.id);
|
||||
const releaseDE = movie.release_date
|
||||
? new Date(movie.release_date).toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' })
|
||||
: '';
|
||||
|
||||
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,
|
||||
background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column',
|
||||
transition: 'border-color 0.15s',
|
||||
}}>
|
||||
<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>
|
||||
{/* Poster */}
|
||||
<div style={{ position: 'relative', aspectRatio: '2/3', background: '#111', overflow: 'hidden' }}>
|
||||
{movie.poster_path
|
||||
? <img src={POSTER + movie.poster_path} alt={movie.title}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
|
||||
: <div style={{ width:'100%',height:'100%',display:'flex',alignItems:'center',
|
||||
justifyContent:'center',fontSize:40,color:'rgba(255,255,255,0.15)' }}>🎬</div>
|
||||
}
|
||||
{/* Rating Badge */}
|
||||
{movie.vote_average > 0 && (
|
||||
<div style={{
|
||||
position:'absolute', top:8, left:8,
|
||||
background:'rgba(0,0,0,0.75)', borderRadius:6,
|
||||
padding:'2px 7px', fontSize:11, color:'#ffe66d', fontWeight:700,
|
||||
fontFamily:"'Space Mono',monospace",
|
||||
}}>
|
||||
★ {movie.vote_average.toFixed(1)}
|
||||
</div>
|
||||
)}
|
||||
{/* Fav Button */}
|
||||
<button onClick={() => onToggleFav(movie, isFav)} style={{
|
||||
position:'absolute', top:6, right:6, background:'rgba(0,0,0,0.6)',
|
||||
border:'none', borderRadius:'50%', width:32, height:32, cursor:'pointer',
|
||||
fontSize:16, display:'flex', alignItems:'center', justifyContent:'center',
|
||||
transition:'transform 0.1s',
|
||||
}}>
|
||||
{isFav ? '❤' : '🤍'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div style={{ padding: '10px 12px', flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
<div style={{ fontSize:13, fontWeight:700, color:'#fff', lineHeight:1.3,
|
||||
fontFamily:"'Space Mono',monospace", overflow:'hidden',
|
||||
display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical' }}>
|
||||
{movie.title}
|
||||
</div>
|
||||
{releaseDE && (
|
||||
<div style={{ fontSize:11, color:'rgba(255,255,255,0.4)', fontFamily:"'Space Mono',monospace" }}>
|
||||
{releaseDE}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Grid-Wrapper (now-playing / upcoming) ─────────────────────────────────────
|
||||
function MovieGrid({ endpoint, emptyText }) {
|
||||
const [movies, setMovies] = useState([]);
|
||||
const [favIds, setFavIds] = useState(new Set());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const loadFavs = useCallback(async () => {
|
||||
try {
|
||||
const data = await api('/tools/media/favorites');
|
||||
setFavIds(new Set(data.map(f => f.tmdb_id)));
|
||||
} catch (_) {}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true); setError('');
|
||||
Promise.all([
|
||||
api(endpoint).then(setMovies).catch(e => setError(e.message)),
|
||||
loadFavs(),
|
||||
]).finally(() => setLoading(false));
|
||||
}, [endpoint]);
|
||||
|
||||
const toggleFav = async (movie, isFav) => {
|
||||
try {
|
||||
if (isFav) {
|
||||
await api(`/tools/media/favorites/${movie.id}`, { method: 'DELETE' });
|
||||
setFavIds(prev => { const s = new Set(prev); s.delete(movie.id); return s; });
|
||||
} else {
|
||||
await api('/tools/media/favorites', { body: {
|
||||
tmdb_id: movie.id,
|
||||
title: movie.title,
|
||||
poster_path: movie.poster_path || '',
|
||||
release_date_de: movie.release_date
|
||||
? new Date(movie.release_date).toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' })
|
||||
: '',
|
||||
}});
|
||||
setFavIds(prev => new Set([...prev, movie.id]));
|
||||
}
|
||||
} catch (e) { alert(e.message); }
|
||||
};
|
||||
|
||||
if (loading) return <StatusBox>⏳ Lädt…</StatusBox>;
|
||||
if (error) return <StatusBox color="#ff6b9d">⚠ {error}</StatusBox>;
|
||||
if (!movies.length) return <StatusBox>{emptyText}</StatusBox>;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
||||
gap: 14,
|
||||
}}>
|
||||
{movies.map(m => (
|
||||
<MovieCard key={m.id} movie={m} favIds={favIds} onToggleFav={toggleFav} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Favoriten-Tab ─────────────────────────────────────────────────────────────
|
||||
function FavoritenTab() {
|
||||
const [favs, setFavs] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true); setError('');
|
||||
try {
|
||||
const data = await api('/tools/media/favorites');
|
||||
setFavs(data);
|
||||
} catch (e) { setError(e.message); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const removeFav = async (tmdbId) => {
|
||||
try {
|
||||
await api(`/tools/media/favorites/${tmdbId}`, { method: 'DELETE' });
|
||||
setFavs(prev => prev.filter(f => f.tmdb_id !== tmdbId));
|
||||
} catch (e) { alert(e.message); }
|
||||
};
|
||||
|
||||
if (loading) return <StatusBox>⏳ Lädt…</StatusBox>;
|
||||
if (error) return <StatusBox color="#ff6b9d">⚠ {error}</StatusBox>;
|
||||
if (!favs.length) return <StatusBox>Noch keine Favoriten – markiere Filme mit ❤</StatusBox>;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
||||
gap: 14,
|
||||
}}>
|
||||
{favs.map(f => (
|
||||
<div key={f.tmdb_id} style={{
|
||||
background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)',
|
||||
borderRadius:12, overflow:'hidden', display:'flex', flexDirection:'column',
|
||||
}}>
|
||||
<div style={{ position:'relative', aspectRatio:'2/3', background:'#111', overflow:'hidden' }}>
|
||||
{f.poster_path
|
||||
? <img src={POSTER + f.poster_path} alt={f.title}
|
||||
style={{ width:'100%',height:'100%',objectFit:'cover',display:'block' }} />
|
||||
: <div style={{ width:'100%',height:'100%',display:'flex',alignItems:'center',
|
||||
justifyContent:'center',fontSize:40,color:'rgba(255,255,255,0.15)' }}>🎬</div>
|
||||
}
|
||||
<button onClick={() => removeFav(f.tmdb_id)} style={{
|
||||
position:'absolute',top:6,right:6,background:'rgba(0,0,0,0.6)',
|
||||
border:'none',borderRadius:'50%',width:32,height:32,cursor:'pointer',
|
||||
fontSize:16,display:'flex',alignItems:'center',justifyContent:'center',
|
||||
}}>❤</button>
|
||||
</div>
|
||||
<div style={{ padding:'10px 12px', flex:1, display:'flex', flexDirection:'column', gap:4 }}>
|
||||
<div style={{ fontSize:13,fontWeight:700,color:'#fff',lineHeight:1.3,
|
||||
fontFamily:"'Space Mono',monospace",overflow:'hidden',
|
||||
display:'-webkit-box',WebkitLineClamp:2,WebkitBoxOrient:'vertical' }}>
|
||||
{f.title}
|
||||
</div>
|
||||
{f.release_date_de && (
|
||||
<div style={{ fontSize:11,color:'rgba(255,255,255,0.4)',fontFamily:"'Space Mono',monospace" }}>
|
||||
🇩🇪 {f.release_date_de}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBox({ children, color }) {
|
||||
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: color || 'rgba(255,255,255,0.35)', fontFamily:"'Space Mono',monospace", fontSize:14,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user