latest update youtube replica

resources/views/layouts/partials/upload-modal.blade.php

@@ -208,7 +208,7 @@
                         <!-- Progress Bar (hidden initially) -->
                         <div id="progress-container-modal" class="progress-container-modal">
                             <div class="progress-info">
-                                <span class="progress-label">Uploading...</span>
+                                <span class="progress-label" id="progress-label-modal">Uploading...</span>
                                 <span class="progress-percent" id="progress-percent-modal">0%</span>
                             </div>
                             <div class="progress-bar-wrapper">
@@ -1065,6 +1065,9 @@ document.getElementById('upload-form-modal').addEventListener('submit', function
     const formData = new FormData(this);
     const xhr = new XMLHttpRequest();
     
+    // Set timeout for large file uploads (30 minutes for large videos)
+    xhr.timeout = 1800000; // 30 minutes
+    
     // Show progress
     document.getElementById('progress-container-modal').classList.add('active');
     document.getElementById('submit-btn-modal').disabled = true;
@@ -1072,40 +1075,73 @@ document.getElementById('upload-form-modal').addEventListener('submit', function
     document.getElementById('btn-back-step-4').style.display = 'none';
     document.getElementById('status-message-modal').className = 'status-message-modal';
     
+    // Track upload start time for timeout handling
+    const uploadStartTime = Date.now();
+    
     xhr.upload.addEventListener('progress', function(e) {
         if (e.lengthComputable) {
             const percent = Math.round((e.loaded / e.total) * 100);
             document.getElementById('progress-bar-modal').style.width = percent + '%';
             document.getElementById('progress-percent-modal').textContent = percent + '%';
+            
+            // Calculate and display upload speed for large files
+            if (percent > 0) {
+                const elapsed = (Date.now() - uploadStartTime) / 1000; // seconds
+                const speed = (e.loaded / elapsed / 1024 / 1024).toFixed(2); // MB/s
+                if (elapsed > 5 && speed > 0) {
+                    document.getElementById('progress-label-modal').textContent = `Uploading... ${speed} MB/s`;
+                }
+            }
         }
     });
     
     xhr.addEventListener('load', function() {
         document.getElementById('progress-bar-modal').style.width = '100%';
-        document.getElementById('progress-label').textContent = 'Processing...';
+        document.getElementById('progress-label-modal').textContent = 'Processing...';
         
-        try {
-            const response = JSON.parse(xhr.responseText);
-            if (response.success) {
-                document.getElementById('progress-percent-modal').textContent = 'Done!';
-                document.getElementById('status-message-modal').innerHTML = '<i class="bi bi-check-circle-fill"></i> Upload successful! Closing...';
-                document.getElementById('status-message-modal').className = 'status-message-modal success';
-                
-                // Close modal and redirect after short delay
-                setTimeout(() => {
-                    closeUploadModal();
-                    window.location.href = response.redirect;
-                }, 1000);
-            } else {
-                showErrorModal(response.message || 'Upload failed');
+        // Check for successful HTTP status
+        if (xhr.status >= 200 && xhr.status < 300) {
+            try {
+                const response = JSON.parse(xhr.responseText);
+                if (response.success) {
+                    document.getElementById('progress-percent-modal').textContent = 'Done!';
+                    document.getElementById('status-message-modal').innerHTML = '<i class="bi bi-check-circle-fill"></i> Upload successful! Closing...';
+                    document.getElementById('status-message-modal').className = 'status-message-modal success';
+                    
+                    // Close modal and redirect after short delay
+                    setTimeout(() => {
+                        closeUploadModal();
+                        window.location.href = response.redirect;
+                    }, 1000);
+                } else {
+                    showErrorModal(response.message || 'Upload failed');
+                }
+            } catch(e) {
+                showErrorModal('Invalid response from server');
+            }
+        } else if (xhr.status === 0) {
+            showErrorModal('Connection lost. Please check your internet connection and try again.');
+        } else {
+            // Try to parse error message from server response
+            try {
+                const response = JSON.parse(xhr.responseText);
+                showErrorModal(response.message || `Server error (${xhr.status}). Please try again.`);
+            } catch(e) {
+                showErrorModal(`Upload failed with status ${xhr.status}. Please try again.`);
             }
-        } catch(e) {
-            showErrorModal('Invalid response from server');
         }
     });
     
     xhr.addEventListener('error', function() {
-        showErrorModal('Upload failed. Please try again.');
+        showErrorModal('Upload failed. Please check your internet connection and try again.');
+    });
+    
+    xhr.addEventListener('timeout', function() {
+        showErrorModal('Upload timed out. The file may be too large or the connection too slow. Please try again.');
+    });
+    
+    xhr.addEventListener('abort', function() {
+        showErrorModal('Upload was cancelled. Please try again.');
     });
     
     xhr.open('POST', '{{ route("videos.store") }}');