latest update my Video Platform is working Great
This commit is contained in:
ghassan committed
1 parent
eb707c1ee1
commit
dcdcafe0ba
9 files changed
+389
-118
No files matched your search
@@ -25,7 +25,7 @@
|
||||
<span>1</span>
|
||||
<i class="bi bi-check-lg"></i>
|
||||
</div>
|
||||
<span class="step-label">Details</span>
|
||||
<span class="step-label">Video</span>
|
||||
</div>
|
||||
<div class="step-line"></div>
|
||||
<div class="upload-step" data-step="2">
|
||||
@@ -33,7 +33,7 @@
|
||||
<span>2</span>
|
||||
<i class="bi bi-check-lg"></i>
|
||||
</div>
|
||||
<span class="step-label">Video</span>
|
||||
<span class="step-label">Details</span>
|
||||
</div>
|
||||
<div class="step-line"></div>
|
||||
<div class="upload-step" data-step="3">
|
||||
@@ -57,36 +57,8 @@
|
||||
<form id="upload-form-modal" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<!-- Step 1: Details -->
|
||||
<!-- Step 1: Video File -->
|
||||
<div class="upload-step-content active" data-step="1">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-card-heading"></i> Title *
|
||||
</label>
|
||||
<input type="text" name="title" required
|
||||
class="form-input"
|
||||
placeholder="Give your video a catchy title">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-text-paragraph"></i> Description
|
||||
</label>
|
||||
<textarea name="description" rows="3"
|
||||
class="form-textarea"
|
||||
placeholder="Tell viewers about your video"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="step-navigation">
|
||||
<div></div>
|
||||
<button type="button" class="btn-next" onclick="nextStep(2)">
|
||||
Next Step <i class="bi bi-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Video File -->
|
||||
<div class="upload-step-content" data-step="2">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-camera-video"></i> Video File *
|
||||
@@ -98,7 +70,7 @@
|
||||
<i class="bi bi-cloud-arrow-up"></i>
|
||||
</div>
|
||||
<p class="dropzone-title">Click to select or drag video here</p>
|
||||
<p class="dropzone-hint">MP4, MOV, AVI, WebM up to 2GB</p>
|
||||
<p class="dropzone-hint">MP4, MOV, AVI, WebM up to 512MB</p>
|
||||
</div>
|
||||
<div id="file-info-modal" class="file-info-modal">
|
||||
<div class="file-preview">
|
||||
@@ -115,11 +87,39 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-navigation">
|
||||
<div></div>
|
||||
<button type="button" class="btn-next" onclick="nextStep(2)" id="btn-step-1" disabled>
|
||||
Next Step <i class="bi bi-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Details -->
|
||||
<div class="upload-step-content" data-step="2">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-card-heading"></i> Title *
|
||||
</label>
|
||||
<input type="text" name="title" id="upload-video-title" required
|
||||
class="form-input"
|
||||
placeholder="Give your video a catchy title">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-text-paragraph"></i> Description
|
||||
</label>
|
||||
<textarea name="description" rows="3"
|
||||
class="form-textarea"
|
||||
placeholder="Tell viewers about your video"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="step-navigation">
|
||||
<button type="button" class="btn-prev" onclick="prevStep(1)">
|
||||
<i class="bi bi-arrow-left"></i> Back
|
||||
</button>
|
||||
<button type="button" class="btn-next" onclick="nextStep(3)" id="btn-step-2" disabled>
|
||||
<button type="button" class="btn-next" onclick="nextStep(3)">
|
||||
Next Step <i class="bi bi-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -891,13 +891,24 @@ function resetUploadForm() {
|
||||
document.getElementById('status-message-modal').className = 'status-message-modal';
|
||||
document.getElementById('submit-btn-modal').disabled = false;
|
||||
document.getElementById('submit-btn-modal').innerHTML = '<i class="bi bi-cloud-arrow-up-fill"></i> Upload Video';
|
||||
document.getElementById('btn-step-1').disabled = true;
|
||||
}
|
||||
|
||||
// Step Navigation
|
||||
function nextStep(step) {
|
||||
// Validate current step before moving
|
||||
if (step === 2) {
|
||||
const title = document.querySelector('input[name="title"]').value.trim();
|
||||
// Step 1 -> Step 2: require video
|
||||
const videoInput = document.getElementById('video-modal');
|
||||
if (!videoInput.files || !videoInput.files[0]) {
|
||||
alert('Please select a video file first');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (step === 3) {
|
||||
// Step 2 -> Step 3: require title
|
||||
const title = document.getElementById('upload-video-title').value.trim();
|
||||
if (!title) {
|
||||
alert('Please enter a title for your video');
|
||||
return;
|
||||
@@ -977,13 +988,43 @@ videoDropzoneModal.addEventListener('drop', (e) => {
|
||||
function handleVideoSelectModal(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
const file = input.files[0];
|
||||
const maxSize = 512 * 1024 * 1024; // 512MB in bytes
|
||||
|
||||
// Validate file type
|
||||
const validTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo', 'video/x-flv', 'video/x-matroska'];
|
||||
const validExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.wmv', '.flv', '.mkv'];
|
||||
|
||||
let isValidType = validTypes.includes(file.type);
|
||||
let fileExtension = '.' + file.name.split('.').pop().toLowerCase();
|
||||
if (!isValidType) {
|
||||
isValidType = validExtensions.includes(fileExtension);
|
||||
}
|
||||
|
||||
if (!isValidType) {
|
||||
alert('Invalid video format. Please select a valid video file (MP4, MOV, AVI, WebM, OGG, WMV, FLV, MKV).');
|
||||
input.value = '';
|
||||
document.getElementById('dropzone-default-modal').style.display = 'block';
|
||||
document.getElementById('file-info-modal').classList.remove('active');
|
||||
document.getElementById('btn-step-1').disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > maxSize) {
|
||||
alert('File size exceeds 512MB limit. Please select a smaller video file.');
|
||||
input.value = ''; // Clear the input
|
||||
document.getElementById('dropzone-default-modal').style.display = 'block';
|
||||
document.getElementById('file-info-modal').classList.remove('active');
|
||||
document.getElementById('btn-step-1').disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('filename-modal').textContent = file.name;
|
||||
document.getElementById('filesize-modal').textContent = (file.size / 1024 / 1024).toFixed(2) + ' MB';
|
||||
document.getElementById('dropzone-default-modal').style.display = 'none';
|
||||
document.getElementById('file-info-modal').classList.add('active');
|
||||
|
||||
// Enable next button
|
||||
document.getElementById('btn-step-2').disabled = false;
|
||||
document.getElementById('btn-step-1').disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -993,7 +1034,7 @@ function removeVideoModal(e) {
|
||||
videoInputModal.value = '';
|
||||
document.getElementById('dropzone-default-modal').style.display = 'block';
|
||||
document.getElementById('file-info-modal').classList.remove('active');
|
||||
document.getElementById('btn-step-2').disabled = true;
|
||||
document.getElementById('btn-step-1').disabled = true;
|
||||
}
|
||||
|
||||
// Thumbnail Dropzone
|
||||
|
||||
Reference in new issue
Block a user