178 lines
8.3 KiB
PHP
178 lines
8.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Upload Video - TAKEONE</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { background-color: #0f0f0f; color: #fff; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<header class="bg-[#0f0f0f] border-b border-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 py-3">
|
|
<a href="/videos" class="text-2xl font-bold text-red-600">TAKEONE</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-3xl mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold mb-8">Upload Video</h1>
|
|
|
|
<form id="upload-form" enctype="multipart/form-data" class="space-y-6">
|
|
@csrf
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Title *</label>
|
|
<input type="text" name="title" required
|
|
class="w-full bg-[#272727] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-red-600"
|
|
placeholder="Enter video title">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Description</label>
|
|
<textarea name="description" rows="4"
|
|
class="w-full bg-[#272727] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-red-600"
|
|
placeholder="Tell viewers about your video"></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Video File *</label>
|
|
<div id="dropzone" class="border-2 border-dashed border-gray-700 rounded-lg p-8 text-center cursor-pointer hover:border-red-500 transition-colors">
|
|
<input type="file" name="video" id="video" accept="video/*" required class="hidden" onchange="handleFileSelect(this)">
|
|
<div id="dropzone-content">
|
|
<svg class="h-12 w-12 mx-auto text-gray-500 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
</svg>
|
|
<p class="text-gray-400 mb-2">Click to select or drag video here</p>
|
|
<p class="text-gray-500 text-sm">MP4, MOV, AVI, WebM up to 500MB</p>
|
|
</div>
|
|
<div id="file-info" class="hidden">
|
|
<p id="filename" class="text-green-500 font-medium"></p>
|
|
<p id="filesize" class="text-gray-400 text-sm"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Orientation</label>
|
|
<select name="orientation" class="w-full bg-[#272727] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-red-600">
|
|
<option value="landscape">Landscape (16:9)</option>
|
|
<option value="portrait">Portrait (9:16)</option>
|
|
<option value="square">Square (1:1)</option>
|
|
<option value="ultrawide">Ultrawide (21:9)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-2">Thumbnail (optional)</label>
|
|
<input type="file" name="thumbnail" accept="image/*" class="w-full bg-[#272727] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-red-600">
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div id="progress-container" class="hidden">
|
|
<div class="bg-gray-700 rounded-full h-4 overflow-hidden">
|
|
<div id="progress-bar" class="bg-red-600 h-full transition-all duration-300" style="width: 0%"></div>
|
|
</div>
|
|
<p id="progress-text" class="text-center text-gray-400 text-sm mt-2">Uploading... 0%</p>
|
|
</div>
|
|
|
|
<!-- Status Message -->
|
|
<div id="status-message" class="hidden p-4 rounded-lg"></div>
|
|
|
|
<button type="submit" id="submit-btn" class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 rounded-lg transition-colors">
|
|
Upload Video
|
|
</button>
|
|
</form>
|
|
</main>
|
|
|
|
<script>
|
|
const dropzone = document.getElementById('dropzone');
|
|
const fileInput = document.getElementById('video');
|
|
|
|
dropzone.addEventListener('click', () => fileInput.click());
|
|
|
|
dropzone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropzone.classList.add('border-red-500');
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', () => {
|
|
dropzone.classList.remove('border-red-500');
|
|
});
|
|
|
|
dropzone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropzone.classList.remove('border-red-500');
|
|
if (e.dataTransfer.files.length) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
handleFileSelect(fileInput);
|
|
}
|
|
});
|
|
|
|
function handleFileSelect(input) {
|
|
if (input.files && input.files[0]) {
|
|
const file = input.files[0];
|
|
document.getElementById('filename').textContent = file.name;
|
|
document.getElementById('filesize').textContent = (file.size / 1024 / 1024).toFixed(2) + ' MB';
|
|
document.getElementById('dropzone-content').classList.add('hidden');
|
|
document.getElementById('file-info').classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
document.getElementById('upload-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
document.getElementById('progress-container').classList.remove('hidden');
|
|
document.getElementById('submit-btn').disabled = true;
|
|
document.getElementById('submit-btn').textContent = 'Uploading...';
|
|
|
|
xhr.upload.addEventListener('progress', function(e) {
|
|
if (e.lengthComputable) {
|
|
const percent = Math.round((e.loaded / e.total) * 100);
|
|
document.getElementById('progress-bar').style.width = percent + '%';
|
|
document.getElementById('progress-text').textContent = 'Uploading... ' + percent + '%';
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('load', function() {
|
|
document.getElementById('progress-bar').style.width = '100%';
|
|
document.getElementById('progress-text').textContent = 'Processing...';
|
|
|
|
try {
|
|
const response = JSON.parse(xhr.responseText);
|
|
if (response.success) {
|
|
document.getElementById('progress-text').textContent = 'Done! Redirecting...';
|
|
window.location.href = response.redirect;
|
|
} else {
|
|
showError(response.message || 'Upload failed');
|
|
}
|
|
} catch(e) {
|
|
showError('Invalid response from server');
|
|
}
|
|
});
|
|
|
|
xhr.addEventListener('error', function() {
|
|
showError('Upload failed. Please try again.');
|
|
});
|
|
|
|
xhr.open('POST', '{{ route("videos.store") }}');
|
|
xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
|
|
xhr.send(formData);
|
|
});
|
|
|
|
function showError(message) {
|
|
const status = document.getElementById('status-message');
|
|
status.className = 'p-4 rounded-lg bg-red-600 text-white';
|
|
status.textContent = message;
|
|
status.classList.remove('hidden');
|
|
document.getElementById('submit-btn').disabled = false;
|
|
document.getElementById('submit-btn').textContent = 'Upload Video';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|