first commit
This commit is contained in:
ghassan committed
commit
6a2026df4b
87 files changed
+13271
No files matched your search
@@ -0,0 +1,177 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user