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

latest update youtube replica

Browse Source
This commit is contained in:
ghassan 2026-02-25 00:47:59 +00:00
parent 5253f89b63
commit b38f1a93bb
9 changed files with 1699 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
TODO.md
View File

@ -1,28 +1,9 @@
# TODO: Convert Video Create to Cute Staged Popup Modal
# TODO: Convert Edit Video Page to Modal
## Implementation Plan
### 1. Create Upload Modal Partial
- [x] Create `resources/views/layouts/partials/upload-modal.blade.php`
- [x] Implement cute staged pop-up animation (scale + fade with bounce)
- [x] Create multi-step form (Title → Video → Thumbnail → Privacy → Upload)
- [x] Add progress indicator for current step
- [x] Style with dark theme + cute accents
### 2. Update Header
- [x] Modify `resources/views/layouts/partials/header.blade.php`
- [x] Change Upload button from link to trigger modal via JavaScript
### 3. Include Modal in Views
- [x] Update `resources/views/videos/index.blade.php` to include upload modal
- [x] Update `resources/views/layouts/app.blade.php` to include modal globally for auth users
### 4. Keep Fallback Route
- [x] Keep existing `/videos/create` route for direct access (no changes needed)
## Implementation Notes
- Uses Bootstrap modal as base
- Custom CSS for cute staged animation effects
- JavaScript for step navigation and form handling
- Matches existing dark theme styling
## Steps:
- [x] 1. Create edit-video-modal.blade.php partial with cute design
- [x] 2. Modify VideoController's edit() method to support AJAX
- [x] 3. Modify VideoController's update() method for AJAX response
- [x] 4. Add Edit button and modal include to video show page
- [x] 5. Test the modal functionality

46
app/Http/Controllers/VideoController.php
View File

@ -158,7 +158,7 @@ class VideoController extends Controller
// Send email notification
try {
Mail::to(Auth::user()->email)->send(new VideoUploaded($video));
Mail::to(Auth::user()->email)->send(new VideoUploaded($video, Auth::user()->name));
} catch (\Exception $e) {
// Log the error but don't fail the upload
\Log::error('Email notification failed: ' . $e->getMessage());
@ -199,13 +199,39 @@ class VideoController extends Controller
return view('videos.show', compact('video'));
}
public function edit(Video $video)
public function edit(Video $video, Request $request)
{
return view('videos.edit', compact('video'));
// Check if user owns the video
if (Auth::id() !== $video->user_id) {
abort(403, 'You do not have permission to edit this video.');
}
// If not AJAX request, redirect to show page with edit parameter
if (!$request->expectsJson() && !$request->ajax()) {
return redirect()->route('videos.show', $video->id)->with('openEditModal', true);
}
// For AJAX request, return JSON
return response()->json([
'success' => true,
'video' => [
'id' => $video->id,
'title' => $video->title,
'description' => $video->description,
'thumbnail' => $video->thumbnail,
'thumbnail_url' => $video->thumbnail ? asset('storage/thumbnails/' . $video->thumbnail) : null,
'visibility' => $video->visibility ?? 'public',
]
]);
}
public function update(Request $request, Video $video)
{
// Check if user owns the video
if (Auth::id() !== $video->user_id) {
abort(403, 'You do not have permission to edit this video.');
}
$request->validate([
'title' => 'required|string|max:255',
'description' => 'nullable|string',
@ -231,6 +257,20 @@ class VideoController extends Controller
$video->update($data);
// Return JSON for AJAX requests
if ($request->expectsJson() || $request->ajax()) {
return response()->json([
'success' => true,
'message' => 'Video updated successfully!',
'video' => [
'id' => $video->id,
'title' => $video->title,
'description' => $video->description,
'visibility' => $video->visibility,
]
]);
}
return redirect()->route('videos.show', $video)->with('success', 'Video updated!');
}

2
app/Mail/VideoUploaded.php
View File

@ -13,7 +13,7 @@ class VideoUploaded extends Mailable
{
use Queueable, SerializesModels;
public function __construct(public Video $video)
public function __construct(public Video $video, public string $userName)
{
}

2
resources/views/emails/video-uploaded.blade.php
View File

@ -16,7 +16,7 @@
</div>
<div class="content">
<h2>Video Uploaded Successfully! 🎉</h2>
<p>Hi {{ $video->user->name }},</p>
<p>Hi {{ $userName }},</p>
<p>Your video <strong>"{{ $video->title }}"</strong> has been uploaded successfully!</p>
<p>Your video is now being processed and will be available shortly.</p>
<p>Video Details:</p>

1051
resources/views/layouts/partials/edit-video-modal.blade.php Normal file
View File

File diff suppressed because it is too large Load Diff

74
resources/views/layouts/partials/upload-modal.blade.php
View File

@ -208,7 +208,7 @@
<!-- Progress Bar (hidden initially) -->
<div id="progress-container-modal" class="progress-container-modal">
<div class="progress-info">
<span class="progress-label">Uploading...</span>
<span class="progress-label" id="progress-label-modal">Uploading...</span>
<span class="progress-percent" id="progress-percent-modal">0%</span>
</div>
<div class="progress-bar-wrapper">
@ -1065,6 +1065,9 @@ document.getElementById('upload-form-modal').addEventListener('submit', function
const formData = new FormData(this);
const xhr = new XMLHttpRequest();
// Set timeout for large file uploads (30 minutes for large videos)
xhr.timeout = 1800000; // 30 minutes
// Show progress
document.getElementById('progress-container-modal').classList.add('active');
document.getElementById('submit-btn-modal').disabled = true;
@ -1072,40 +1075,73 @@ document.getElementById('upload-form-modal').addEventListener('submit', function
document.getElementById('btn-back-step-4').style.display = 'none';
document.getElementById('status-message-modal').className = 'status-message-modal';
// Track upload start time for timeout handling
const uploadStartTime = Date.now();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
document.getElementById('progress-bar-modal').style.width = percent + '%';
document.getElementById('progress-percent-modal').textContent = percent + '%';
// Calculate and display upload speed for large files
if (percent > 0) {
const elapsed = (Date.now() - uploadStartTime) / 1000; // seconds
const speed = (e.loaded / elapsed / 1024 / 1024).toFixed(2); // MB/s
if (elapsed > 5 && speed > 0) {
document.getElementById('progress-label-modal').textContent = `Uploading... ${speed} MB/s`;
}
}
}
});
xhr.addEventListener('load', function() {
document.getElementById('progress-bar-modal').style.width = '100%';
document.getElementById('progress-label').textContent = 'Processing...';
document.getElementById('progress-label-modal').textContent = 'Processing...';
try {
const response = JSON.parse(xhr.responseText);
if (response.success) {
document.getElementById('progress-percent-modal').textContent = 'Done!';
document.getElementById('status-message-modal').innerHTML = '<i class="bi bi-check-circle-fill"></i> Upload successful! Closing...';
document.getElementById('status-message-modal').className = 'status-message-modal success';
// Close modal and redirect after short delay
setTimeout(() => {
closeUploadModal();
window.location.href = response.redirect;
}, 1000);
} else {
showErrorModal(response.message || 'Upload failed');
// Check for successful HTTP status
if (xhr.status >= 200 && xhr.status < 300) {
try {
const response = JSON.parse(xhr.responseText);
if (response.success) {
document.getElementById('progress-percent-modal').textContent = 'Done!';
document.getElementById('status-message-modal').innerHTML = '<i class="bi bi-check-circle-fill"></i> Upload successful! Closing...';
document.getElementById('status-message-modal').className = 'status-message-modal success';
// Close modal and redirect after short delay
setTimeout(() => {
closeUploadModal();
window.location.href = response.redirect;
}, 1000);
} else {
showErrorModal(response.message || 'Upload failed');
}
} catch(e) {
showErrorModal('Invalid response from server');
}
} else if (xhr.status === 0) {
showErrorModal('Connection lost. Please check your internet connection and try again.');
} else {
// Try to parse error message from server response
try {
const response = JSON.parse(xhr.responseText);
showErrorModal(response.message || `Server error (${xhr.status}). Please try again.`);
} catch(e) {
showErrorModal(`Upload failed with status ${xhr.status}. Please try again.`);
}
} catch(e) {
showErrorModal('Invalid response from server');
}
});
xhr.addEventListener('error', function() {
showErrorModal('Upload failed. Please try again.');
showErrorModal('Upload failed. Please check your internet connection and try again.');
});
xhr.addEventListener('timeout', function() {
showErrorModal('Upload timed out. The file may be too large or the connection too slow. Please try again.');
});
xhr.addEventListener('abort', function() {
showErrorModal('Upload was cancelled. Please try again.');
});
xhr.open('POST', '{{ route("videos.store") }}');

764
resources/views/videos/edit.blade.php
View File

@ -3,269 +3,545 @@
@section('title', 'Edit ' . $video->title . ' | TAKEONE')
@section('extra_styles')
<style>
.edit-container {
max-width: 600px;
margin: 0 auto;
<style>
/* Hide main content wrapper for modal-only view */
.edit-page-only .yt-header,
.edit-page-only .yt-sidebar,
.edit-page-only .yt-main {
display: none !important;
}
.edit-page-only {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
}
/* Modal Base Styles */
.edit-modal-standalone {
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);
overflow: hidden;
width: 100%;
max-width: 520px;
animation: modalPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalPopIn {
0% {
transform: scale(0.8) translateY(20px);
opacity: 0;
}
60% {
transform: scale(1.02) translateY(-5px);
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
/* Header */
.edit-modal-header {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
border-bottom: none;
padding: 20px 24px;
position: relative;
overflow: hidden;
}
.edit-modal-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
pointer-events: none;
}
.edit-icon-wrapper {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
backdrop-filter: blur(10px);
}
.edit-modal-header .modal-title {
font-size: 20px;
font-weight: 600;
color: white;
margin: 0;
}
.edit-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
}
/* Body */
.edit-modal-body {
padding: 24px;
background: #1a1a1a;
}
/* Current Thumbnail */
.current-thumbnail-section {
margin-bottom: 20px;
}
.current-thumbnail-wrapper {
width: 100%;
height: 140px;
border-radius: 12px;
overflow: hidden;
background: #151515;
border: 2px dashed #333;
position: relative;
}
.current-thumbnail-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #555;
}
.thumbnail-placeholder i {
font-size: 32px;
margin-bottom: 8px;
}
.thumbnail-placeholder span {
font-size: 13px;
}
.current-thumbnail-wrapper.has-thumbnail .thumbnail-placeholder {
display: none;
}
.current-thumbnail-wrapper.has-thumbnail .current-thumbnail-img {
display: block;
}
.current-thumbnail-wrapper:not(.has-thumbnail) .current-thumbnail-img {
display: none;
}
/* Form Elements */
.edit-modal-body .form-group {
margin-bottom: 20px;
}
.edit-modal-body .form-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-weight: 500;
font-size: 14px;
color: #e5e5e5;
}
.edit-modal-body .form-label i {
color: #8b5cf6;
font-size: 16px;
}
.edit-modal-body .form-input,
.edit-modal-body .form-textarea {
width: 100%;
background: #121212;
border: 1px solid #333;
border-radius: 12px;
padding: 14px 16px;
color: #f1f1f1;
font-size: 14px;
transition: all 0.2s;
}
.edit-modal-body .form-input:focus,
.edit-modal-body .form-textarea:focus {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.edit-modal-body .form-input::placeholder,
.edit-modal-body .form-textarea::placeholder {
color: #666;
}
/* Dropzone */
.edit-modal-body .dropzone-modal {
border: 2px dashed #404040;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
background: #151515;
}
.edit-modal-body .dropzone-modal:hover {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.05);
}
.edit-modal-body .dropzone-modal.dragover {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.1);
}
.edit-modal-body .dropzone-modal input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.edit-modal-body .dropzone-icon {
font-size: 36px;
color: #8b5cf6;
margin-bottom: 8px;
}
.edit-modal-body .dropzone-title {
color: #e5e5e5;
font-size: 14px;
font-weight: 500;
margin: 6px 0;
}
.edit-modal-body .dropzone-hint {
color: #666;
font-size: 12px;
margin: 0;
}
/* Visibility Options */
.edit-modal-body .visibility-options-modal {
display: flex;
flex-direction: column;
gap: 10px;
}
.edit-modal-body .visibility-option-modal {
cursor: pointer;
}
.edit-modal-body .visibility-option-modal input {
display: none;
}
.edit-modal-body .visibility-content-modal {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: #1a1a1a;
border: 2px solid #333;
border-radius: 12px;
transition: all 0.2s;
}
.edit-modal-body .visibility-option-modal:hover .visibility-content-modal {
border-color: #555;
background: #1f1f1f;
}
.edit-modal-body .visibility-option-modal.active .visibility-content-modal {
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.1);
}
.edit-modal-body .visibility-content-modal i {
font-size: 20px;
color: #666;
width: 28px;
text-align: center;
}
.edit-modal-body .visibility-option-modal.active .visibility-content-modal i {
color: #8b5cf6;
}
.edit-modal-body .visibility-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.edit-modal-body .visibility-title {
font-weight: 500;
font-size: 14px;
color: #e5e5e5;
}
.edit-modal-body .visibility-desc {
color: #777;
font-size: 12px;
}
/* Actions */
.edit-modal-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #2a2a2a;
}
.edit-modal-actions .btn-cancel,
.edit-modal-actions .btn-save,
.edit-modal-actions .btn-delete {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.edit-modal-actions .btn-cancel {
background: transparent;
border: 1px solid #404040;
color: #aaa;
text-decoration: none;
}
.edit-modal-actions .btn-cancel:hover {
border-color: #666;
color: #fff;
}
.edit-modal-actions .btn-save {
background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
color: white;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
.edit-modal-actions .btn-save:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.edit-modal-actions .btn-delete {
background: #7f1d1d;
color: white;
}
.edit-modal-actions .btn-delete:hover {
background: #991b1b;
}
/* Delete Section */
.delete-section {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #2a2a2a;
}
.delete-label {
font-size: 14px;
color: #888;
margin-bottom: 12px;
}
/* Responsive */
@media (max-width: 576px) {
.edit-modal-body {
padding: 20px 16px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-input, .form-select, .form-textarea {
width: 100%;
background: #121212;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px 16px;
color: var(--text-primary);
font-size: 14px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--brand-red);
}
.form-textarea {
resize: vertical;
min-height: 100px;
}
/* Visibility Options */
.visibility-options {
display: flex;
.edit-modal-actions {
flex-direction: column;
gap: 12px;
}
.visibility-option {
display: block;
cursor: pointer;
}
.visibility-option input {
display: none;
}
.visibility-content {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #1a1a1a;
border: 2px solid var(--border-color);
border-radius: 12px;
transition: all 0.2s;
}
.visibility-option:hover .visibility-content {
border-color: var(--text-secondary);
}
.visibility-option.active .visibility-content {
border-color: var(--brand-red);
background: rgba(230, 30, 30, 0.1);
}
.visibility-content i {
font-size: 24px;
color: var(--text-secondary);
}
.visibility-option.active .visibility-content i {
color: var(--brand-red);
}
.visibility-title {
display: block;
font-weight: 500;
font-size: 16px;
}
.visibility-desc {
display: block;
color: var(--text-secondary);
font-size: 14px;
}
/* Thumbnail Preview */
.thumbnail-preview {
width: 160px;
height: 90px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
}
/* Buttons */
.btn-group {
display: flex;
gap: 12px;
margin-top: 24px;
}
.btn-primary {
flex: 1;
background: var(--brand-red);
color: white;
border: none;
padding: 14px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
text-align: center;
}
.btn-primary:hover {
background: #cc1a1a;
}
.btn-secondary {
padding: 14px 24px;
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.btn-secondary:hover {
background: var(--border-color);
}
.btn-danger {
margin-top: 16px;
.edit-modal-actions .btn-cancel,
.edit-modal-actions .btn-save,
.edit-modal-actions .btn-delete {
width: 100%;
background: #7f1d1d;
color: white;
border: none;
padding: 14px 24px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
justify-content: center;
}
.btn-danger:hover {
background: #991b1b;
}
/* Edit Page Layout */
.edit-page .yt-main {
display: block;
margin-left: 0;
}
@media (min-width: 992px) {
.edit-page .yt-main {
margin-left: 240px;
}
}
@media (max-width: 576px) {
.btn-group {
flex-direction: column;
}
}
</style>
}
</style>
@endsection
@section('body_class', 'edit-page-only')
@section('content')
<div class="edit-container">
<h1 style="font-size: 24px; font-weight: 500; margin-bottom: 24px;">Edit Video</h1>
<form action="{{ route('videos.update', $video->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="form-group">
<label class="form-label">Title</label>
<input type="text" name="title" value="{{ $video->title }}" required class="form-input">
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea name="description" rows="3" class="form-textarea">{{ $video->description }}</textarea>
</div>
<div class="form-group">
<label class="form-label">Privacy</label>
<div class="visibility-options">
<label class="visibility-option {{ ($video->visibility ?? 'public') == 'public' ? 'active' : '' }}">
<input type="radio" name="visibility" value="public" {{ ($video->visibility ?? 'public') == 'public' ? 'checked' : '' }}>
<div class="visibility-content">
<i class="bi bi-globe"></i>
<div>
<span class="visibility-title">Public</span>
<span class="visibility-desc">Everyone can see this video</span>
</div>
</div>
</label>
<label class="visibility-option {{ $video->visibility == 'unlisted' ? 'active' : '' }}">
<input type="radio" name="visibility" value="unlisted" {{ $video->visibility == 'unlisted' ? 'checked' : '' }}>
<div class="visibility-content">
<i class="bi bi-link-45deg"></i>
<div>
<span class="visibility-title">Unlisted</span>
<span class="visibility-desc">Only people with the link can see</span>
</div>
</div>
</label>
<label class="visibility-option {{ $video->visibility == 'private' ? 'active' : '' }}">
<input type="radio" name="visibility" value="private" {{ $video->visibility == 'private' ? 'checked' : '' }}>
<div class="visibility-content">
<i class="bi bi-lock"></i>
<div>
<span class="visibility-title">Private</span>
<span class="visibility-desc">Only you can see this video</span>
</div>
</div>
</label>
<div class="edit-modal-standalone">
<!-- Header -->
<div class="edit-modal-header">
<div class="d-flex align-items-center gap-3">
<div class="edit-icon-wrapper">
<i class="bi bi-pencil-fill"></i>
</div>
<div>
<h5 class="modal-title">Edit Video</h5>
<span class="edit-subtitle">Update your video details</span>
</div>
</div>
<div class="form-group">
<label class="form-label">Thumbnail</label>
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" class="thumbnail-preview" alt="Thumbnail">
@endif
<input type="file" name="thumbnail" accept="image/*" class="form-input">
</div>
<div class="btn-group">
<button type="submit" class="btn-primary">Save Changes</button>
<a href="{{ route('videos.show', $video->id) }}" class="btn-secondary">Cancel</a>
</div>
</form>
</div>
<form action="{{ route('videos.destroy', $video->id) }}" method="POST" onsubmit="return confirm('Delete this video? This cannot be undone.');">
@csrf
@method('DELETE')
<button type="submit" class="btn-danger">Delete Video</button>
</form>
<!-- Body -->
<div class="edit-modal-body">
<form action="{{ route('videos.update', $video->id) }}" method="POST" enctype="multipart/form-data" id="edit-form">
@csrf
@method('PUT')
<!-- Current Thumbnail -->
<div class="current-thumbnail-section">
<label class="form-label">
<i class="bi bi-image"></i> Current Thumbnail
</label>
<div class="current-thumbnail-wrapper {{ $video->thumbnail ? 'has-thumbnail' : '' }}">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" class="current-thumbnail-img" alt="Current thumbnail">
@endif
<div class="thumbnail-placeholder">
<i class="bi bi-card-image"></i>
<span>No thumbnail</span>
</div>
</div>
</div>
<!-- Title -->
<div class="form-group">
<label class="form-label">
<i class="bi bi-card-heading"></i> Title *
</label>
<input type="text" name="title" value="{{ $video->title }}" required class="form-input" placeholder="Video title">
</div>
<!-- Description -->
<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">{{ $video->description }}</textarea>
</div>
<!-- New Thumbnail -->
<div class="form-group">
<label class="form-label">
<i class="bi bi-camera"></i> Change Thumbnail
</label>
<div class="dropzone-modal">
<input type="file" name="thumbnail" accept="image/*">
<div>
<div class="dropzone-icon">
<i class="bi bi-card-image"></i>
</div>
<p class="dropzone-title">Click to select new thumbnail</p>
<p class="dropzone-hint">JPG, PNG, WebP up to 5MB</p>
</div>
</div>
</div>
<!-- Privacy -->
<div class="form-group">
<label class="form-label">
<i class="bi bi-shield-lock"></i> Privacy Setting
</label>
<div class="visibility-options-modal">
<label class="visibility-option-modal {{ ($video->visibility ?? 'public') == 'public' ? 'active' : '' }}">
<input type="radio" name="visibility" value="public" {{ ($video->visibility ?? 'public') == 'public' ? 'checked' : '' }}>
<div class="visibility-content-modal">
<i class="bi bi-globe"></i>
<div class="visibility-text">
<span class="visibility-title">Public</span>
<span class="visibility-desc">Everyone can see this video</span>
</div>
</div>
</label>
<label class="visibility-option-modal {{ $video->visibility == 'unlisted' ? 'active' : '' }}">
<input type="radio" name="visibility" value="unlisted" {{ $video->visibility == 'unlisted' ? 'checked' : '' }}>
<div class="visibility-content-modal">
<i class="bi bi-link-45deg"></i>
<div class="visibility-text">
<span class="visibility-title">Unlisted</span>
<span class="visibility-desc">Only people with the link</span>
</div>
</div>
</label>
<label class="visibility-option-modal {{ $video->visibility == 'private' ? 'active' : '' }}">
<input type="radio" name="visibility" value="private" {{ $video->visibility == 'private' ? 'checked' : '' }}>
<div class="visibility-content-modal">
<i class="bi bi-lock"></i>
<div class="visibility-text">
<span class="visibility-title">Private</span>
<span class="visibility-desc">Only you can see</span>
</div>
</div>
</label>
</div>
</div>
<!-- Actions -->
<div class="edit-modal-actions">
<a href="{{ route('videos.show', $video->id) }}" class="btn-cancel">
Cancel
</a>
<button type="submit" class="btn-save">
<i class="bi bi-check-lg"></i> Save Changes
</button>
</div>
</form>
<!-- Delete Section -->
<div class="delete-section">
<p class="delete-label">Danger Zone</p>
<form action="{{ route('videos.destroy', $video->id) }}" method="POST" onsubmit="return confirm('Delete this video? This cannot be undone.');">
@csrf
@method('DELETE')
<button type="submit" class="btn-delete">
<i class="bi bi-trash"></i> Delete Video
</button>
</form>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
// Visibility option handling
const visibilityOptions = document.querySelectorAll('.visibility-option');
const visibilityOptions = document.querySelectorAll('.visibility-option-modal');
visibilityOptions.forEach(option => {
const radio = option.querySelector('input[type="radio"]');
radio.addEventListener('change', function() {

2
resources/views/videos/index.blade.php
View File

@ -296,7 +296,6 @@
@endif
@include('layouts.partials.share-modal')
@include('layouts.partials.upload-modal')
@endsection
@section('scripts')
@ -305,6 +304,7 @@ function playVideo(card) {
const video = card.querySelector('video');
if (video) {
video.currentTime = 0;
video.volume = 0.25; // Set volume to 25%
video.play().catch(function(e) {
// Auto-play may be blocked, ignore error
});

20
resources/views/videos/show.blade.php
View File

@ -209,6 +209,7 @@
</div>
<div class="video-actions">
@auth
<!-- Like Button -->
<form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
@csrf
<button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
@ -216,6 +217,13 @@
{{ $video->like_count > 0 ? $video->like_count : 'Like' }}
</button>
</form>
<!-- Edit Button - Only for video owner -->
@if(Auth::id() === $video->user_id)
<button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
<i class="bi bi-pencil"></i> Edit
</button>
@endif
@else
<a href="{{ route('login') }}" class="yt-action-btn">
<i class="bi bi-hand-thumbs-up"></i> Like
@ -259,5 +267,17 @@
</div>
@include('layouts.partials.share-modal')
@include('layouts.partials.edit-video-modal')
@if(Session::has('openEditModal') && Session::get('openEditModal'))
@auth
<script>
document.addEventListener('DOMContentLoaded', function() {
// Auto-open edit modal when redirected from /videos/{id}/edit
openEditVideoModal({{ $video->id }});
});
</script>
@endauth
@endif
@endsection