latest update youtube replica

TODO.md

@@ -1,28 +1,9 @@
-# TODO: Convert Video Create to Cute Staged Popup Modal
+# TODO: Convert Edit Video Page to Modal
 
-## Implementation Plan
+## Steps:
-
+- [x] 1. Create edit-video-modal.blade.php partial with cute design
-### 1. Create Upload Modal Partial
+- [x] 2. Modify VideoController's edit() method to support AJAX
-- [x] Create `resources/views/layouts/partials/upload-modal.blade.php`
+- [x] 3. Modify VideoController's update() method for AJAX response
-- [x] Implement cute staged pop-up animation (scale + fade with bounce)
+- [x] 4. Add Edit button and modal include to video show page
-- [x] Create multi-step form (Title → Video → Thumbnail → Privacy → Upload)
+- [x] 5. Test the modal functionality
-- [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
 

app/Http/Controllers/VideoController.php

@@ -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!');
     }
 

app/Mail/VideoUploaded.php

@@ -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)
     {
     }
 

resources/views/emails/video-uploaded.blade.php

@@ -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>

resources/views/layouts/partials/upload-modal.blade.php

@@ -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 {
+        // Check for successful HTTP status
-            const response = JSON.parse(xhr.responseText);
+        if (xhr.status >= 200 && xhr.status < 300) {
-            if (response.success) {
+            try {
-                document.getElementById('progress-percent-modal').textContent = 'Done!';
+                const response = JSON.parse(xhr.responseText);
-                document.getElementById('status-message-modal').innerHTML = '<i class="bi bi-check-circle-fill"></i> Upload successful! Closing...';
+                if (response.success) {
-                document.getElementById('status-message-modal').className = 'status-message-modal 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...';
-                // Close modal and redirect after short delay
+                    document.getElementById('status-message-modal').className = 'status-message-modal success';
-                setTimeout(() => {
+                    
-                    closeUploadModal();
+                    // Close modal and redirect after short delay
-                    window.location.href = response.redirect;
+                    setTimeout(() => {
-                }, 1000);
+                        closeUploadModal();
-            } else {
+                        window.location.href = response.redirect;
-                showErrorModal(response.message || 'Upload failed');
+                    }, 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") }}');

resources/views/videos/edit.blade.php

@@ -3,269 +3,545 @@
 @section('title', 'Edit ' . $video->title . ' | TAKEONE')
 
 @section('extra_styles')
-    <style>
+<style>
-        .edit-container {
+    /* Hide main content wrapper for modal-only view */
-            max-width: 600px;
+    .edit-page-only .yt-header, 
-            margin: 0 auto;
+    .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 {
+        .edit-modal-actions {
-            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;
             flex-direction: column;
-            gap: 12px;
         }
         
-        .visibility-option {
+        .edit-modal-actions .btn-cancel,
-            display: block;
+        .edit-modal-actions .btn-save,
-            cursor: pointer;
+        .edit-modal-actions .btn-delete {
-        }
-        
-        .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;
             width: 100%;
-            background: #7f1d1d;
+            justify-content: center;
-            color: white;
-            border: none;
-            padding: 14px 24px;
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background 0.2s;
         }
-        
+    }
-        .btn-danger:hover {
+</style>
-            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>
 @endsection
 
+@section('body_class', 'edit-page-only')
+
 @section('content')
-    <div class="edit-container">
+    <div class="edit-modal-standalone">
-        <h1 style="font-size: 24px; font-weight: 500; margin-bottom: 24px;">Edit Video</h1>
+        <!-- Header -->
-        
+        <div class="edit-modal-header">
-        <form action="{{ route('videos.update', $video->id) }}" method="POST" enctype="multipart/form-data">
+            <div class="d-flex align-items-center gap-3">
-            @csrf
+                <div class="edit-icon-wrapper">
-            @method('PUT')
+                    <i class="bi bi-pencil-fill"></i>
-            
+                </div>
-            <div class="form-group">
+                <div>
-                <label class="form-label">Title</label>
+                    <h5 class="modal-title">Edit Video</h5>
-                <input type="text" name="title" value="{{ $video->title }}" required class="form-input">
+                    <span class="edit-subtitle">Update your video details</span>
-            </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>
             </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>
         
-        <form action="{{ route('videos.destroy', $video->id) }}" method="POST" onsubmit="return confirm('Delete this video? This cannot be undone.');">
+        <!-- Body -->
-            @csrf
+        <div class="edit-modal-body">
-            @method('DELETE')
+            <form action="{{ route('videos.update', $video->id) }}" method="POST" enctype="multipart/form-data" id="edit-form">
-            <button type="submit" class="btn-danger">Delete Video</button>
+                @csrf
-        </form>
+                @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() {

resources/views/videos/index.blade.php

@@ -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
         });

resources/views/videos/show.blade.php

@@ -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