Spaces:

Hans-Den
/

Nexora-Encoder

Sleeping

File size: 17,035 Bytes

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Encoder Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            dark: {
              900: '#0f172a',
              800: '#1e293b',
              700: '#334155',
              600: '#475569',
              500: '#64748b'
            }
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; background-color: #0f172a; }
    .drag-over { border-color: #6366f1 !important; background-color: rgba(99, 102, 241, 0.1) !important; }
    .upload-progress { transition: width 0.3s ease-in-out; }
    .tab-button {
      padding: 0.5rem 1rem;
      border: 1px solid #475569;
      border-radius: 0.375rem;
      cursor: pointer;
    }
    .tab-button.active {
      background-color: #4f46e5;
      color: white;
    }
  </style>
</head>
<body class="text-gray-100">
  <nav class="bg-dark-800 border-b border-dark-700">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <i class="fas fa-video text-indigo-500 text-2xl mr-2"></i>
          <h1 class="text-xl font-semibold">Media Encoder Dashboard</h1>
        </div>
        <div class="flex items-center space-x-4">
          <a href="/" class="text-indigo-400 hover:text-indigo-300">Home</a>
          <a href="/files" class="text-gray-300 hover:text-gray-100">Files</a>
        </div>
      </div>
    </div>
  </nav>

  <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <!-- Upload Options Tabs -->
    <div class="flex justify-center space-x-4 mb-6">
      <button id="tabLocal" class="tab-button active">Upload from Device</button>
      <button id="tabUrl" class="tab-button">Upload from URL</button>
    </div>

    <!-- Upload Form -->
    <form id="uploadForm" class="bg-dark-800 border border-dark-700 shadow rounded-lg p-6 mb-6 space-y-6">
      <!-- File Upload Section -->
      <div id="localUploadSection">
        <h2 class="text-lg font-medium mb-4">Upload Video from Device</h2>
        <div class="flex items-center justify-center w-full">
          <label id="dropZone" class="flex flex-col w-full h-32 border-2 border-dashed border-dark-600 rounded-lg cursor-pointer hover:border-indigo-500 transition-all duration-300">
            <div class="flex flex-col items-center justify-center pt-7">
              <i class="fas fa-cloud-upload-alt text-3xl text-indigo-500 mb-2"></i>
              <p class="text-sm text-gray-300">Drag and drop or click to select</p>
              <p class="text-xs text-gray-400">Supported formats: MP4, MOV, AVI, MKV, WMV</p>
            </div>
            <input type="file" id="videoFile" name="video" class="hidden" accept=".mp4,.mov,.avi,.mkv,.wmv">
          </label>
        </div>
        <div id="fileInfo" class="hidden space-y-2">
          <p class="text-sm text-gray-300">Selected file: <span id="fileName" class="font-medium text-indigo-400"></span></p>
          <div id="uploadProgress" class="hidden">
            <div class="w-full bg-dark-600 rounded-full h-2">
              <div class="upload-progress bg-indigo-600 h-2 rounded-full" style="width: 0%"></div>
            </div>
            <p class="text-xs text-gray-400 mt-1"><span id="uploadPercent">0</span>% uploaded</p>
          </div>
        </div>
      </div>

      <!-- URL Upload Section -->
      <div id="urlUploadSection" class="hidden">
        <h2 class="text-lg font-medium mb-4">Upload Video from URL</h2>
        <div>
          <label for="videoUrl" class="block text-sm font-medium text-gray-300 mb-2">Video URL</label>
          <input type="text" id="videoUrl" placeholder="Enter video URL" class="w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
        </div>
      </div>

      <!-- Shared Settings Section -->
      <div class="bg-dark-700 p-4 rounded-lg">
        <h3 class="text-sm font-medium mb-4">Output Settings</h3>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">Output Name</label>
            <input type="text" id="outputName" placeholder="Enter output name (without extension)" 
              class="w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
            <p class="text-xs text-gray-400 mt-1">Quality will be appended automatically (e.g., name_480p.mp4)</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-300">480p Settings</label>
              <input type="text" id="480p_bitrate" placeholder="1000k" 
                class="mt-1 block w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-300">720p Settings</label>
              <input type="text" id="720p_bitrate" placeholder="2500k" 
                class="mt-1 block w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-300">1080p Settings</label>
              <input type="text" id="1080p_bitrate" placeholder="5000k" 
                class="mt-1 block w-full px-3 py-2 bg-dark-600 border border-dark-500 rounded-md text-sm text-gray-100 placeholder-gray-400">
            </div>
          </div>
        </div>
      </div>
      <button type="submit" id="uploadButton" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300">
        <i class="fas fa-upload mr-2"></i>
        Upload & Start Encoding
      </button>
    </form>

    <!-- Encoding Jobs Table -->
    <div class="bg-dark-800 border border-dark-700 shadow rounded-lg p-6">
      <h2 class="text-lg font-medium mb-4">Encoding Jobs</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-dark-700">
          <thead class="bg-dark-700">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Job ID</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Output Name</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Progress</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Current Quality</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
            </tr>
          </thead>
          <tbody id="jobsList" class="bg-dark-800 divide-y divide-dark-700">
            <!-- Jobs will be inserted here -->
          </tbody>
        </table>
      </div>
    </div>
  </main>

  <script>
    let uploadMethod = 'local'; // default upload method

    const tabLocal = document.getElementById('tabLocal');
    const tabUrl = document.getElementById('tabUrl');
    const localUploadSection = document.getElementById('localUploadSection');
    const urlUploadSection = document.getElementById('urlUploadSection');

    tabLocal.addEventListener('click', () => {
      uploadMethod = 'local';
      tabLocal.classList.add('active');
      tabUrl.classList.remove('active');
      localUploadSection.classList.remove('hidden');
      urlUploadSection.classList.add('hidden');
    });

    tabUrl.addEventListener('click', () => {
      uploadMethod = 'url';
      tabUrl.classList.add('active');
      tabLocal.classList.remove('active');
      urlUploadSection.classList.remove('hidden');
      localUploadSection.classList.add('hidden');
    });

    // File upload handling elements
    const uploadForm = document.getElementById('uploadForm');
    const videoFile = document.getElementById('videoFile');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const uploadProgress = document.getElementById('uploadProgress');
    const uploadPercent = document.getElementById('uploadPercent');
    const progressBar = document.querySelector('.upload-progress');
    const jobsList = document.getElementById('jobsList');
    const dropZone = document.getElementById('dropZone');
    const outputName = document.getElementById('outputName');

    // Drag and drop handling
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      dropZone.addEventListener(eventName, preventDefaults, false);
      document.body.addEventListener(eventName, preventDefaults, false);
    });

    ['dragenter', 'dragover'].forEach(eventName => {
      dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
      dropZone.addEventListener(eventName, unhighlight, false);
    });

    dropZone.addEventListener('drop', handleDrop, false);

    function preventDefaults(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    function highlight(e) {
      dropZone.classList.add('drag-over');
    }

    function unhighlight(e) {
      dropZone.classList.remove('drag-over');
    }

    function handleDrop(e) {
      const dt = e.dataTransfer;
      const files = dt.files;
      if (files.length > 0) {
        videoFile.files = files;
        updateFileInfo(files[0]);
      }
    }

    videoFile.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        updateFileInfo(file);
        // Set default output name from file name (without extension)
        const defaultName = file.name.replace(/\.[^/.]+$/, "");
        outputName.value = defaultName;
      }
    });

    function updateFileInfo(file) {
      fileName.textContent = file.name;
      fileInfo.classList.remove('hidden');
      uploadProgress.classList.add('hidden');
      progressBar.style.width = '0%';
      uploadPercent.textContent = '0';
    }

    uploadForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      // Shared encoding settings and output name
      const settings = {
        '480p': document.getElementById('480p_bitrate').value || '1000k',
        '720p': document.getElementById('720p_bitrate').value || '2500k',
        '1080p': document.getElementById('1080p_bitrate').value || '5000k'
      };

      if (uploadMethod === 'local') {
        // Local file upload
        if (!videoFile.files[0]) {
          alert('Please select a file to upload.');
          return;
        }
        const formData = new FormData();
        formData.append('video', videoFile.files[0]);
        formData.append('output_name', outputName.value || videoFile.files[0].name.replace(/\.[^/.]+$/, ""));
        formData.append('settings', JSON.stringify(settings));

        try {
          uploadProgress.classList.remove('hidden');
          const xhr = new XMLHttpRequest();
          xhr.upload.addEventListener('progress', (e) => {
            if (e.lengthComputable) {
              const percent = Math.round((e.loaded / e.total) * 100);
              progressBar.style.width = percent + '%';
              uploadPercent.textContent = percent;
            }
          });

          xhr.onload = function() {
            if (xhr.status === 202) {
              uploadForm.reset();
              fileInfo.classList.add('hidden');
              fetchJobs();
            } else {
              alert('Upload failed: ' + xhr.responseText);
            }
          };

          xhr.onerror = function() {
            alert('Upload failed. Please try again.');
          };

          xhr.open('POST', '/api/upload', true);
          xhr.send(formData);
        } catch (error) {
          alert('Error uploading file: ' + error.message);
        }
      } else {
        // URL upload
        const videoUrl = document.getElementById('videoUrl').value.trim();
        if (!videoUrl) {
          alert('Please enter a video URL.');
          return;
        }
        const payload = {
          url: videoUrl,
          output_name: outputName.value || '',
          settings: settings
        };

        try {
          const response = await fetch('/api/upload-url', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          });
          if (response.status === 202) {
            uploadForm.reset();
            fetchJobs();
          } else {
            const resText = await response.text();
            alert('Upload failed: ' + resText);
          }
        } catch (error) {
          alert('Error uploading video from URL: ' + error.message);
        }
      }
    });

    async function fetchJobs() {
      try {
        const response = await fetch('/api/jobs');
        const data = await response.json();
        
        jobsList.innerHTML = '';
        
        Object.entries(data.jobs).forEach(([jobId, job]) => {
          const row = document.createElement('tr');
          row.className = 'hover:bg-dark-700 transition-colors duration-200';
          row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">${jobId}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${job.output_name || '-'}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(job.status)}">
                ${job.status}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="w-full bg-dark-600 rounded-full h-2.5">
                <div class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300" style="width: ${job.progress || 0}%"></div>
              </div>
              <span class="text-xs text-gray-400 mt-1">${Math.round(job.progress || 0)}%</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
              ${job.current_quality || '-'}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
              ${job.status === 'completed' ? getVideoButtons(jobId, job.outputs, job.output_name) : ''}
              ${job.status === 'processing' ? `
                <button onclick="stopJob('${jobId}')" class="text-xs bg-red-900 hover:bg-red-800 text-red-300 px-2 py-1 rounded transition-all duration-300">
                  Stop
                </button>
              ` : ''}
            </td>
          `;
          jobsList.appendChild(row);
        });
      } catch (error) {
        console.error('Error fetching jobs:', error);
      }
    }

    function getStatusClass(status) {
      const classes = {
        'completed': 'bg-green-900 text-green-300',
        'processing': 'bg-yellow-900 text-yellow-300',
        'failed': 'bg-red-900 text-red-300',
        'pending': 'bg-dark-600 text-gray-300',
        'stopped': 'bg-gray-900 text-gray-300'
      };
      return classes[status] || classes.pending;
    }

    function getVideoButtons(jobId, outputs, outputName) {
      if (!outputs) return '';
      
      return `
        <div class="space-x-2">
          ${outputs.map(output => `
            <a href="/api/video/${jobId}/${output.quality}" 
              class="text-xs bg-dark-700 hover:bg-dark-600 px-2 py-1 rounded transition-all duration-300"
              download="${outputName || 'video'}_${output.quality}.mp4">
              ${output.quality}
            </a>
          `).join('')}
        </div>
      `;
    }

    async function stopJob(jobId) {
      try {
        const response = await fetch(`/api/jobs/${jobId}/stop`, {
          method: 'POST'
        });
        if (response.ok) {
          fetchJobs();
        } else {
          alert('Failed to stop job');
        }
      } catch (error) {
        console.error('Error stopping job:', error);
      }
    }

    // Initial jobs fetch and polling
    fetchJobs();
    setInterval(fetchJobs, 2000);
  </script>
</body>
</html>