Initial commit: Media Download Dashboard with SABnzbd, Sonarr, Radarr, and Emby integration
This commit is contained in:
180
client/src/App.jsx
Normal file
180
client/src/App.jsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
const [sessionId, setSessionId] = useState('');
|
||||
const [currentUser, setCurrentUser] = useState(null);
|
||||
const [downloads, setDownloads] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [sessions, setSessions] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessions();
|
||||
}, []);
|
||||
|
||||
const fetchSessions = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/emby/sessions');
|
||||
setSessions(response.data);
|
||||
|
||||
// Auto-select first active session
|
||||
const activeSession = response.data.find(s => s.NowPlayingItem || s.Active);
|
||||
if (activeSession) {
|
||||
setSessionId(activeSession.Id);
|
||||
fetchUserDownloads(activeSession.Id);
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to fetch Emby sessions. Make sure Emby is running and configured.');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUserDownloads = async (sessionId) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await axios.get(`/api/dashboard/user-downloads/${sessionId}`);
|
||||
setCurrentUser(response.data.user);
|
||||
setDownloads(response.data.downloads);
|
||||
} catch (err) {
|
||||
setError('Failed to fetch downloads. Make sure all services are configured.');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSessionChange = (e) => {
|
||||
const newSessionId = e.target.value;
|
||||
setSessionId(newSessionId);
|
||||
if (newSessionId) {
|
||||
fetchUserDownloads(newSessionId);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSize = (bytes) => {
|
||||
if (!bytes) return 'N/A';
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<h1>Media Download Dashboard</h1>
|
||||
{currentUser && (
|
||||
<div className="user-info">
|
||||
<span className="user-label">Current User:</span>
|
||||
<span className="user-name">{currentUser}</span>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="controls">
|
||||
<label htmlFor="session-select">Select Emby Session:</label>
|
||||
<select
|
||||
id="session-select"
|
||||
value={sessionId}
|
||||
onChange={handleSessionChange}
|
||||
className="session-select"
|
||||
>
|
||||
<option value="">-- Select Session --</option>
|
||||
{sessions.map(session => (
|
||||
<option key={session.Id} value={session.Id}>
|
||||
{session.UserName} - {session.Client} {session.NowPlayingItem ? `(Playing: ${session.NowPlayingItem.Name})` : '(Idle)'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={fetchSessions} className="refresh-btn">Refresh Sessions</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="loading">Loading downloads...</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && (
|
||||
<div className="downloads-container">
|
||||
<h2>Your Downloads</h2>
|
||||
{downloads.length === 0 ? (
|
||||
<div className="no-downloads">
|
||||
<p>No downloads found for your user.</p>
|
||||
<p>Make sure your shows and movies are tagged with "user:yourusername" in Sonarr/Radarr.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="downloads-list">
|
||||
{downloads.map((download, index) => (
|
||||
<div key={index} className={`download-card ${download.type}`}>
|
||||
<div className="download-header">
|
||||
<span className={`download-type ${download.type}`}>
|
||||
{download.type === 'series' ? '📺 Series' : '🎬 Movie'}
|
||||
</span>
|
||||
<span className={`download-status ${download.status}`}>
|
||||
{download.status}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="download-title">{download.title}</h3>
|
||||
{download.seriesName && (
|
||||
<p className="download-series">Series: {download.seriesName}</p>
|
||||
)}
|
||||
{download.movieName && (
|
||||
<p className="download-movie">Movie: {download.movieName}</p>
|
||||
)}
|
||||
<div className="download-details">
|
||||
<div className="detail-item">
|
||||
<span className="detail-label">Size:</span>
|
||||
<span className="detail-value">{formatSize(download.size)}</span>
|
||||
</div>
|
||||
{download.progress && (
|
||||
<div className="detail-item">
|
||||
<span className="detail-label">Progress:</span>
|
||||
<span className="detail-value">{download.progress}%</span>
|
||||
</div>
|
||||
)}
|
||||
{download.speed && (
|
||||
<div className="detail-item">
|
||||
<span className="detail-label">Speed:</span>
|
||||
<span className="detail-value">{download.speed}</span>
|
||||
</div>
|
||||
)}
|
||||
{download.eta && (
|
||||
<div className="detail-item">
|
||||
<span className="detail-label">ETA:</span>
|
||||
<span className="detail-value">{download.eta}</span>
|
||||
</div>
|
||||
)}
|
||||
{download.completedAt && (
|
||||
<div className="detail-item">
|
||||
<span className="detail-label">Completed:</span>
|
||||
<span className="detail-value">{formatDate(download.completedAt)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer className="app-footer">
|
||||
<p>Ensure your media is tagged with "user:username" in Sonarr/Radarr to match downloads to users.</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user