Create frontend/src/App.js

frontend/src/App.js

@@ -0,0 +1,482 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Container,
+  Paper,
+  TextField,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Typography,
+  Box,
+  Grid,
+  Card,
+  CardContent,
+  LinearProgress,
+  Chip,
+  IconButton,
+  Alert,
+  Snackbar,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Tabs,
+  Tab,
+  Switch,
+  FormControlLabel
+} from '@mui/material';
+import {
+  CloudUpload,
+  Cancel,
+  CheckCircle,
+  Error,
+  Refresh,
+  Settings,
+  Visibility,
+  VisibilityOff
+} from '@mui/icons-material';
+import axios from 'axios';
+import io from 'socket.io-client';
+import { v4 as uuidv4 } from 'uuid';
+
+const API_URL = process.env.REACT_APP_API_URL || '';
+const SOCKET_URL = process.env.REACT_APP_SOCKET_URL || '';
+
+function App() {
+  const [vodUrl, setVodUrl] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState('mega');
+  const [selectedFormat, setSelectedFormat] = useState('best');
+  const [providers, setProviders] = useState([]);
+  const [formats, setFormats] = useState([]);
+  const [credentials, setCredentials] = useState({
+    mega: { email: '', password: '' },
+    filen: { email: '', password: '' },
+    drime: { email: '', password: '' }
+  });
+  const [tasks, setTasks] = useState([]);
+  const [activeTab, setActiveTab] = useState(0);
+  const [showPassword, setShowPassword] = useState(false);
+  const [alert, setAlert] = useState({ open: false, message: '', severity: 'info' });
+  const [loading, setLoading] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(true);
+  
+  const socketRef = useRef(null);
+  const userIdRef = useRef(localStorage.getItem('userId') || uuidv4());
+
+  useEffect(() => {
+    // Save user ID
+    localStorage.setItem('userId', userIdRef.current);
+
+    // Load providers
+    loadProviders();
+    
+    // Load tasks
+    loadTasks();
+
+    // Initialize socket connection
+    socketRef.current = io(SOCKET_URL);
+    
+    socketRef.current.on('connect', () => {
+      console.log('Connected to server');
+    });
+
+    socketRef.current.on('task_update', (data) => {
+      updateTask(data.task_id, data);
+    });
+
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+      }
+    };
+  }, []);
+
+  const loadProviders = async () => {
+    try {
+      const response = await axios.get(`${API_URL}/api/providers`);
+      setProviders(response.data.providers);
+    } catch (error) {
+      showAlert('Failed to load providers', 'error');
+    }
+  };
+
+  const loadTasks = async () => {
+    try {
+      const response = await axios.get(`${API_URL}/api/tasks`, {
+        headers: { 'X-User-ID': userIdRef.current }
+      });
+      setTasks(response.data.tasks);
+      
+      // Subscribe to active tasks
+      response.data.tasks.forEach(task => {
+        if (task.status === 'processing' || task.status === 'queued') {
+          socketRef.current.emit('subscribe_task', { task_id: task.id });
+        }
+      });
+    } catch (error) {
+      showAlert('Failed to load tasks', 'error');
+    }
+  };
+
+  const loadFormats = async () => {
+    if (!vodUrl) return;
+    
+    setLoading(true);
+    try {
+      const response = await axios.get(`${API_URL}/api/formats/${encodeURIComponent(vodUrl)}`);
+      setFormats(response.data.formats);
+      showAlert(`Found ${response.data.formats.length} quality options`, 'success');
+    } catch (error) {
+      showAlert('Failed to load formats', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const validateCredentials = async () => {
+    const creds = credentials[selectedProvider];
+    if (!creds.email || !creds.password) {
+      showAlert('Please enter credentials', 'warning');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await axios.post(`${API_URL}/api/validate-credentials`, {
+        provider: selectedProvider,
+        credentials: creds
+      });
+      
+      showAlert(response.data.message, response.data.valid ? 'success' : 'error');
+    } catch (error) {
+      showAlert('Validation failed', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const startArchiving = async () => {
+    const creds = credentials[selectedProvider];
+    if (!vodUrl || !creds.email || !creds.password) {
+      showAlert('Please fill all required fields', 'warning');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await axios.post(`${API_URL}/api/tasks`, {
+        vod_url: vodUrl,
+        provider: selectedProvider,
+        format_id: selectedFormat,
+        credentials: creds
+      }, {
+        headers: { 'X-User-ID': userIdRef.current }
+      });
+
+      const newTask = {
+        id: response.data.task_id,
+        vod_url: vodUrl,
+        provider: selectedProvider,
+        status: 'queued',
+        progress_data: { phase: 'queued', percent: 0 },
+        created_at: new Date().toISOString()
+      };
+
+      setTasks([newTask, ...tasks]);
+      
+      // Subscribe to task updates
+      socketRef.current.emit('subscribe_task', { task_id: response.data.task_id });
+      
+      showAlert('Task started successfully', 'success');
+      
+      // Clear form
+      setVodUrl('');
+      setSelectedFormat('best');
+      
+    } catch (error) {
+      showAlert('Failed to start task', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const cancelTask = async (taskId) => {
+    try {
+      await axios.delete(`${API_URL}/api/tasks/${taskId}`);
+      updateTask(taskId, { status: 'cancelled' });
+      showAlert('Task cancelled', 'info');
+    } catch (error) {
+      showAlert('Failed to cancel task', 'error');
+    }
+  };
+
+  const updateTask = (taskId, updates) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId ? { ...task, ...updates } : task
+      )
+    );
+  };
+
+  const showAlert = (message, severity = 'info') => {
+    setAlert({ open: true, message, severity });
+  };
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'completed': return 'success';
+      case 'failed': return 'error';
+      case 'processing': return 'primary';
+      case 'cancelled': return 'default';
+      default: return 'default';
+    }
+  };
+
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case 'completed': return <CheckCircle />;
+      case 'failed': return <Error />;
+      case 'cancelled': return <Cancel />;
+      default: return null;
+    }
+  };
+
+  return (
+    <Container maxWidth="lg" sx={{ py: 4 }}>
+      <Paper elevation={3} sx={{ p: 4, mb: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom align="center">
+          VOD Archiver Pro
+        </Typography>
+        <Typography variant="subtitle1" align="center" color="text.secondary" gutterBottom>
+          Download and archive Twitch VODs to multiple cloud providers
+        </Typography>
+
+        <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
+          <Tabs value={activeTab} onChange={(e, v) => setActiveTab(v)}>
+            <Tab label="New Task" />
+            <Tab label="Active Tasks" />
+            <Tab label="History" />
+          </Tabs>
+        </Box>
+
+        {activeTab === 0 && (
+          <Box>
+            <Grid container spacing={3}>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  label="Twitch VOD URL"
+                  value={vodUrl}
+                  onChange={(e) => setVodUrl(e.target.value)}
+                  placeholder="https://www.twitch.tv/videos/123456789"
+                  InputProps={{
+                    endAdornment: (
+                      <Button onClick={loadFormats} disabled={!vodUrl || loading}>
+                        Load Formats
+                      </Button>
+                    )
+                  }}
+                />
+              </Grid>
+
+              <Grid item xs={12} md={6}>
+                <FormControl fullWidth>
+                  <InputLabel>Provider</InputLabel>
+                  <Select
+                    value={selectedProvider}
+                    onChange={(e) => setSelectedProvider(e.target.value)}
+                  >
+                    {providers.map(provider => (
+                      <MenuItem key={provider.id} value={provider.id}>
+                        {provider.name} - {provider.maxSize}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} md={6}>
+                <FormControl fullWidth>
+                  <InputLabel>Quality</InputLabel>
+                  <Select
+                    value={selectedFormat}
+                    onChange={(e) => setSelectedFormat(e.target.value)}
+                  >
+                    {formats.length === 0 ? (
+                      <MenuItem value="best">Best Quality (Source)</MenuItem>
+                    ) : (
+                      formats.map(format => (
+                        <MenuItem key={format.format_id} value={format.format_id}>
+                          {format.label}
+                        </MenuItem>
+                      ))
+                    )}
+                  </Select>
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} md={6}>
+                <TextField
+                  fullWidth
+                  label="Email"
+                  type="email"
+                  value={credentials[selectedProvider].email}
+                  onChange={(e) => setCredentials({
+                    ...credentials,
+                    [selectedProvider]: {
+                      ...credentials[selectedProvider],
+                      email: e.target.value
+                    }
+                  })}
+                />
+              </Grid>
+
+              <Grid item xs={12} md={6}>
+                <TextField
+                  fullWidth
+                  label="Password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={credentials[selectedProvider].password}
+                  onChange={(e) => setCredentials({
+                    ...credentials,
+                    [selectedProvider]: {
+                      ...credentials[selectedProvider],
+                      password: e.target.value
+                    }
+                  })}
+                  InputProps={{
+                    endAdornment: (
+                      <IconButton onClick={() => setShowPassword(!showPassword)}>
+                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    )
+                  }}
+                />
+              </Grid>
+
+              <Grid item xs={12}>
+                <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
+                  <Button
+                    variant="contained"
+                    size="large"
+                    onClick={startArchiving}
+                    disabled={loading}
+                    startIcon={<CloudUpload />}
+                  >
+                    Start Archiving
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    size="large"
+                    onClick={validateCredentials}
+                    disabled={loading}
+                  >
+                    Validate Credentials
+                  </Button>
+                </Box>
+              </Grid>
+            </Grid>
+          </Box>
+        )}
+
+        {(activeTab === 1 || activeTab === 2) && (
+          <Box>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+              <FormControlLabel
+                control={<Switch checked={autoScroll} onChange={(e) => setAutoScroll(e.target.checked)} />}
+                label="Auto-scroll logs"
+              />
+              <Button startIcon={<Refresh />} onClick={loadTasks}>
+                Refresh
+              </Button>
+            </Box>
+
+            <List>
+              {tasks
+                .filter(task => activeTab === 1 ? 
+                  ['queued', 'processing'].includes(task.status) : 
+                  ['completed', 'failed', 'cancelled'].includes(task.status)
+                )
+                .map(task => (
+                  <Card key={task.id} sx={{ mb: 2 }}>
+                    <CardContent>
+                      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                        <Typography variant="h6" noWrap sx={{ maxWidth: '60%' }}>
+                          {task.vod_url}
+                        </Typography>
+                        <Chip
+                          label={task.status}
+                          color={getStatusColor(task.status)}
+                          icon={getStatusIcon(task.status)}
+                        />
+                      </Box>
+
+                      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                        <Chip label={task.provider} size="small" />
+                        <Typography variant="caption" color="text.secondary">
+                          {new Date(task.created_at).toLocaleString()}
+                        </Typography>
+                      </Box>
+
+                      {task.status === 'processing' && task.progress_data && (
+                        <Box sx={{ mb: 2 }}>
+                          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                            <Typography variant="body2">
+                              {task.progress_data.phase === 'downloading' ? 'Downloading' : 'Uploading'}
+                            </Typography>
+                            <Typography variant="body2">
+                              {Math.round(task.progress_data.percent)}%
+                            </Typography>
+                          </Box>
+                          <LinearProgress 
+                            variant="determinate" 
+                            value={task.progress_data.percent} 
+                          />
+                        </Box>
+                      )}
+
+                      {task.error && (
+                        <Alert severity="error" sx={{ mt: 2 }}>
+                          {task.error}
+                        </Alert>
+                      )}
+
+                      {task.status === 'processing' && (
+                        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                          <Button
+                            color="error"
+                            onClick={() => cancelTask(task.id)}
+                            startIcon={<Cancel />}
+                          >
+                            Cancel
+                          </Button>
+                        </Box>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))}
+            </List>
+          </Box>
+        )}
+      </Paper>
+
+      <Snackbar
+        open={alert.open}
+        autoHideDuration={6000}
+        onClose={() => setAlert({ ...alert, open: false })}
+      >
+        <Alert severity={alert.severity} onClose={() => setAlert({ ...alert, open: false })}>
+          {alert.message}
+        </Alert>
+      </Snackbar>
+    </Container>
+  );
+}
+
+export default App;