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

latest update

Browse Source
This commit is contained in:
ghassan committed 2026-03-11 11:21:33 +03:00
1 parent 9ad842dcd5
commit 062c0e896f
42 files changed
+7052 -2921
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/components/video-card.blade.php
+162 -10
View File
@@ -2,8 +2,8 @@
@php
$videoUrl = $video ? asset('storage/videos/' . $video->filename) : null;
$thumbnailUrl = $video && $video->thumbnail
? asset('storage/thumbnails/' . $video->thumbnail)
$thumbnailUrl = $video && $video->thumbnail
? asset('storage/thumbnails/' . $video->thumbnail)
: ($video ? 'https://picsum.photos/seed/' . $video->id . '/640/360' : 'https://picsum.photos/seed/random/640/360');
$typeIcon = $video ? match($video->type) {
@@ -12,6 +12,9 @@ $typeIcon = $video ? match($video->type) {
default => 'bi-film',
} : 'bi-film';
// Check if video is shorts
$isShorts = $video && $video->isShorts();
// Check if current user is the owner of the video
$isOwner = $video && auth()->check() && auth()->id() == $video->user_id;
@@ -34,6 +37,11 @@ $sizeClasses = match($size) {
@if($video && $video->duration)
<span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
@endif
@if($isShorts)
<span class="yt-shorts-badge">
<i class="bi bi-collection-play-fill"></i> SHORTS
</span>
@endif
</div>
</a>
<div class="yt-video-info">
@@ -139,7 +147,7 @@ $sizeClasses = match($size) {
<form id="edit-video-form-{{ $video->id ?? '' }}" enctype="multipart/form-data">
@csrf
@method('PUT')
<!-- Title -->
<div class="cute-form-group">
<label><i class="bi bi-card-heading"></i> Title</label>
@@ -171,6 +179,16 @@ $sizeClasses = match($size) {
</div>
</div>
<!-- Shorts Toggle -->
<div class="cute-form-group">
<label><i class="bi bi-lightning-charge-fill"></i> Shorts</label>
<label class="cute-shorts-toggle">
<input type="checkbox" name="is_shorts" id="edit-is-shorts-{{ $video->id ?? '' }}" value="1">
<span class="cute-shorts-slider"></span>
<span class="cute-shorts-label">Mark as Short</span>
</label>
</div>
<!-- Thumbnail -->
<div class="cute-form-group">
<label><i class="bi bi-image"></i> Thumbnail</label>
@@ -267,6 +285,27 @@ $sizeClasses = match($size) {
font-weight: 500;
}
.yt-video-card .yt-shorts-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(230, 30, 30, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
gap: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.yt-video-card .yt-shorts-badge i {
font-size: 12px;
}
.yt-video-card .yt-video-info {
display: flex;
margin-top: 12px;
@@ -544,6 +583,56 @@ $sizeClasses = match($size) {
color: #ff6b8a;
}
/* Shorts Toggle in Edit Modal */
.cute-shorts-toggle {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
margin-top: 8px;
}
.cute-shorts-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cute-shorts-slider {
position: relative;
width: 44px;
height: 24px;
background-color: #333;
border-radius: 12px;
transition: 0.3s;
margin-right: 10px;
}
.cute-shorts-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: 0.3s;
}
.cute-shorts-toggle input:checked + .cute-shorts-slider {
background-color: #e63030;
}
.cute-shorts-toggle input:checked + .cute-shorts-slider:before {
transform: translateX(20px);
}
.cute-shorts-label {
color: #aaa;
font-size: 12px;
}
/* Thumbnail Upload */
.cute-thumbnail-upload {
border: 2px dashed #444;
@@ -650,7 +739,7 @@ $sizeClasses = match($size) {
max-width: 320px;
margin: 10px;
}
.cute-type-options, .cute-privacy-options {
flex-direction: column;
}
@@ -658,6 +747,63 @@ $sizeClasses = match($size) {
</style>
<script>
// Global function to save to Watch Later
function saveToWatchLater(videoId) {
fetch(`/videos/${videoId}/watch-later`, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert(data.message || 'Added to Watch Later');
}
})
.catch(error => console.error('Error:', error));
}
// Global function to open playlist modal
function openPlaylistModal(videoId) {
// Set the current video ID for the modal as global variable
window.currentVideoIdForModal = videoId;
// Close any open dropdown menus first
const activeDropdowns = document.querySelectorAll('.dropdown-menu.show');
activeDropdowns.forEach(function(dropdown) {
dropdown.classList.remove('show');
});
// Also close Bootstrap dropdowns by clicking the toggle
const dropdownToggles = document.querySelectorAll('.dropdown-toggle[aria-expanded="true"]');
dropdownToggles.forEach(function(toggle) {
toggle.click();
});
// Try to open the add to playlist modal
if (typeof openAddToPlaylistModal === 'function') {
openAddToPlaylistModal(videoId);
} else {
// Modal might not be loaded, try to find and show it directly
const modal = document.getElementById('addToPlaylistModal');
if (modal) {
modal.style.display = 'flex';
modal.style.opacity = '1';
} else {
// Fallback - redirect to login
window.location.href = '{{ route("login") }}?redirect=' + encodeURIComponent(window.location.href);
}
}
}
// Global function to add to queue
function addToQueue(videoId) {
alert('Queue feature coming soon!');
}
function playVideo(element) {
const video = element.querySelector('video');
if (video) {
@@ -685,7 +831,7 @@ function openEditVideoModal(videoId) {
const modalId = 'editVideoModal' + (videoId || '');
const modal = new bootstrap.Modal(document.getElementById(modalId));
modal.show();
// Fetch video data
fetch(`/videos/${videoId}/edit`, {
headers: {
@@ -700,7 +846,7 @@ function openEditVideoModal(videoId) {
const video = data.video;
document.getElementById('edit-title-' + videoId).value = video.title || '';
document.getElementById('edit-description-' + videoId).value = video.description || '';
// Set type
const typeOptions = document.querySelectorAll('#' + modalId + ' .cute-type-option');
typeOptions.forEach(opt => {
@@ -710,7 +856,7 @@ function openEditVideoModal(videoId) {
opt.querySelector('input').checked = true;
}
});
// Set privacy
const privacyOptions = document.querySelectorAll('#' + modalId + ' .cute-privacy-option');
privacyOptions.forEach(opt => {
@@ -720,7 +866,13 @@ function openEditVideoModal(videoId) {
opt.querySelector('input').checked = true;
}
});
// Set shorts toggle
const shortsCheckbox = document.getElementById('edit-is-shorts-' + videoId);
if (shortsCheckbox) {
shortsCheckbox.checked = video.is_shorts === true || video.is_shorts === 1 || video.is_shorts === '1';
}
// Clear status
const statusEl = document.getElementById('edit-status-' + videoId);
statusEl.className = 'cute-status';
@@ -780,10 +932,10 @@ document.addEventListener('submit', function(e) {
const formData = new FormData(form);
const statusEl = document.getElementById('edit-status-' + videoId);
const submitBtn = form.querySelector('.cute-btn-save');
submitBtn.disabled = true;
submitBtn.textContent = 'Saving...';
fetch(`/videos/${videoId}`, {
method: 'POST',
body: formData,