ghassan/takeone-youtube-clone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

latest update my Video Platform is working Great

Browse Source
This commit is contained in:
ghassan committed 2026-02-26 21:29:52 +03:00
1 parent eb707c1ee1
commit dcdcafe0ba
9 files changed
+389 -118
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/layouts/partials/edit-video-modal.blade.php
+23 -23
View File
@@ -196,7 +196,7 @@
background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%);
border: 1px solid #3a3a3a;
border-radius: 24px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.1);
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(230, 30, 30, 0.1);
overflow: hidden;
}
@@ -233,7 +233,7 @@
/* Header */
.edit-modal-header {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
border-bottom: none;
padding: 20px 24px;
position: relative;
@@ -326,10 +326,10 @@
}
.edit-step.active .step-circle {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
border-color: #8b5cf6;
background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
border-color: #e61e1e;
color: white;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
box-shadow: 0 4px 15px rgba(230, 30, 30, 0.4);
}
.edit-step.completed .step-circle {
@@ -353,7 +353,7 @@
}
.edit-step.active .step-label {
color: #8b5cf6;
color: #e61e1e;
}
.step-line {
@@ -366,7 +366,7 @@
}
.step-line.active {
background: linear-gradient(90deg, #8b5cf6, #22c55e);
background: linear-gradient(90deg, #e61e1e, #22c55e);
}
/* Step Content */
@@ -461,7 +461,7 @@
}
.form-label i {
color: #8b5cf6;
color: #e61e1e;
font-size: 16px;
}
@@ -478,8 +478,8 @@
.form-input:focus, .form-textarea:focus {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
border-color: #e61e1e;
box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.15);
}
.form-input::placeholder, .form-textarea::placeholder {
@@ -499,13 +499,13 @@
}
.dropzone-modal:hover {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.05);
border-color: #e61e1e;
background: rgba(230, 30, 30, 0.05);
}
.dropzone-modal.dragover {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.1);
border-color: #e61e1e;
background: rgba(230, 30, 30, 0.1);
transform: scale(1.01);
}
@@ -521,7 +521,7 @@
.dropzone-icon {
font-size: 48px;
color: #8b5cf6;
color: #e61e1e;
margin-bottom: 12px;
animation: float 3s ease-in-out infinite;
}
@@ -562,7 +562,7 @@
.file-preview {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
background: linear-gradient(135deg, #e61e1e 0%, #ff6b6b 100%);
border-radius: 12px;
display: flex;
align-items: center;
@@ -615,7 +615,7 @@
}
.btn-remove-file:hover {
background: #8b5cf6;
background: #e61e1e;
color: white;
}
@@ -651,8 +651,8 @@
}
.visibility-option-modal.active .visibility-content-modal {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.1);
border-color: #e61e1e;
background: rgba(230, 30, 30, 0.1);
}
.visibility-content-modal i {
@@ -664,7 +664,7 @@
}
.visibility-option-modal.active .visibility-content-modal i {
color: #8b5cf6;
color: #e61e1e;
}
.visibility-text {
@@ -719,14 +719,14 @@
}
.btn-next, .btn-save-changes {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
background: linear-gradient(135deg, #e61e1e 0%, #ff4757 100%);
color: white;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
box-shadow: 0 4px 15px rgba(230, 30, 30, 0.3);
}
.btn-next:hover, .btn-save-changes:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
box-shadow: 0 6px 20px rgba(230, 30, 30, 0.4);
}
.btn-next:disabled, .btn-save-changes:disabled {
resources/views/layouts/partials/header.blade.php
+5
View File
@@ -22,6 +22,11 @@
</div>
<div class="yt-header-right">
<!-- Mobile Search Toggle Button -->
<button type="button" class="yt-mobile-search-toggle d-md-none" onclick="toggleMobileSearch()">
<i class="bi bi-search"></i>
</button>
@auth
<button type="button" class="yt-upload-btn" onclick="openUploadModal()">
<i class="bi bi-plus-lg"></i>
resources/views/layouts/partials/upload-modal.blade.php
+77 -36
View File
@@ -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