latest update

resources/views/layouts/app.blade.php

@@ -4,11 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@yield('title', config('app.name'))</title>
-    
+
+    <!-- Open Graph meta tags default - will be overridden by page-specific tags -->
+    @stack('head')
+
     <!-- Favicon -->
     <link rel="icon" type="image/png" href="{{ asset('storage/images/logo.png') }}">
     <link rel="apple-touch-icon" href="{{ asset('storage/images/logo.png') }}">
-    
+
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     <style>
@@ -20,18 +23,18 @@
             --text-primary: #f1f1f1;
             --text-secondary: #aaaaaa;
         }
-        
+
         * { box-sizing: border-box; }
-        
-        body { 
-            background-color: var(--bg-dark); 
-            color: var(--text-primary); 
-            font-family: "Roboto", "Arial", sans-serif; 
+
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
+            font-family: "Roboto", "Arial", sans-serif;
             margin: 0;
             padding: 0;
             overflow-x: hidden;
         }
-        
+
         /* Header */
         .yt-header {
             position: fixed;
@@ -47,13 +50,13 @@
             z-index: 1000;
             border-bottom: 1px solid var(--border-color);
         }
-        
+
         .yt-header-left {
             display: flex;
             align-items: center;
             gap: 16px;
         }
-        
+
         .yt-menu-btn {
             width: 40px;
             height: 40px;
@@ -67,37 +70,38 @@
             border: none;
             color: var(--text-primary);
         }
-        
+
         .yt-menu-btn:hover { background: var(--border-color); }
-        
+
         .yt-logo {
             display: flex;
             align-items: center;
             text-decoration: none;
             gap: 4px;
         }
-        
+
         .yt-logo-text {
             font-size: 1.4rem;
             font-weight: 700;
             color: var(--text-primary);
             letter-spacing: -1px;
         }
-        
+
         /* Search */
         .yt-header-center {
             flex: 1;
             max-width: 640px;
             margin: 0 40px;
             display: flex;
+            align-items: center;
         }
-        
+
         .yt-search {
             flex: 1;
             display: flex;
             height: 40px;
         }
-        
+
         .yt-search-input {
             flex: 1;
             background: #121212;
@@ -108,12 +112,12 @@
             color: var(--text-primary);
             font-size: 16px;
         }
-        
+
         .yt-search-input:focus {
             outline: none;
             border-color: #1c62b9;
         }
-        
+
         .yt-search-btn {
             width: 64px;
             background: #222;
@@ -122,9 +126,9 @@
             color: var(--text-primary);
             cursor: pointer;
         }
-        
+
         .yt-search-btn:hover { background: #303030; }
-        
+
         .yt-search-voice {
             width: 40px;
             height: 40px;
@@ -135,14 +139,14 @@
             margin-left: 8px;
             cursor: pointer;
         }
-        
+
         /* Header Right */
         .yt-header-right {
             display: flex;
             align-items: center;
             gap: 8px;
         }
-        
+
         .yt-icon-btn {
             width: 40px;
             height: 40px;
@@ -156,9 +160,9 @@
             color: var(--text-primary);
             font-size: 1.2rem;
         }
-        
+
         .yt-icon-btn:hover { background: var(--border-color); }
-        
+
         .yt-user-avatar {
             width: 32px;
             height: 32px;
@@ -166,7 +170,7 @@
             background: #555;
             cursor: pointer;
         }
-        
+
         /* Sidebar */
         .yt-sidebar {
             position: fixed;
@@ -180,13 +184,13 @@
             transition: transform 0.3s;
             z-index: 999;
         }
-        
+
         .yt-sidebar-section {
             padding-bottom: 12px;
             border-bottom: 1px solid var(--border-color);
             margin-bottom: 12px;
         }
-        
+
         .yt-sidebar-link {
             display: flex;
             align-items: center;
@@ -199,16 +203,16 @@
             cursor: pointer;
             transition: background 0.2s;
         }
-        
+
         .yt-sidebar-link:hover { background: var(--border-color); }
-        
+
         .yt-sidebar-link.active {
             background: var(--border-color);
             font-weight: 500;
         }
-        
+
         .yt-sidebar-link i { font-size: 1.2rem; }
-        
+
         /* Mobile sidebar overlay */
         .yt-sidebar-overlay {
             position: fixed;
@@ -220,9 +224,9 @@
             z-index: 998;
             display: none;
         }
-        
+
         .yt-sidebar-overlay.show { display: block; }
-        
+
         /* Main Content */
         .yt-main {
             margin-top: 56px;
@@ -231,7 +235,7 @@
             min-height: calc(100vh - 56px);
             transition: margin-left 0.3s;
         }
-        
+
         /* Upload Button */
         .yt-upload-btn {
             background: var(--brand-red);
@@ -246,9 +250,9 @@
             cursor: pointer;
             text-decoration: none;
         }
-        
+
         .yt-upload-btn:hover { background: #cc1a1a; }
-        
+
         /* Mobile circle button */
         @media (max-width: 576px) {
             .yt-upload-btn {
@@ -258,10 +262,10 @@
                 border-radius: 50%;
                 justify-content: center;
             }
-            .yt-upload-btn span { 
-                display: none; 
+            .yt-upload-btn span {
+                display: none;
             }
-            
+
             /* Show text on larger mobile */
             @media (min-width: 400px) {
                 .yt-upload-btn {
@@ -274,39 +278,39 @@
                 }
             }
         }
-        
+
         /* Responsive */
         @media (min-width: 992px) {
             .yt-sidebar.collapsed {
                 transform: translateX(-100%);
             }
-            
+
             .yt-main.collapsed {
                 margin-left: 0;
             }
         }
-        
+
         @media (max-width: 991px) {
             .yt-sidebar {
                 transform: translateX(-100%);
             }
-            
+
             .yt-sidebar.open {
                 transform: translateX(0);
             }
-            
+
             .yt-main {
                 margin-left: 0;
             }
-            
+
             .yt-search-voice { display: none; }
         }
-        
+
         @media (max-width: 768px) {
             .yt-header-center { display: none; }
             .yt-main { padding: 16px; }
         }
-        
+
         /* Mobile Search Toggle Button */
         .yt-mobile-search-toggle {
             width: 40px;
@@ -321,11 +325,11 @@
             color: var(--text-primary);
             font-size: 1.2rem;
         }
-        
+
         .yt-mobile-search-toggle:hover {
             background: var(--border-color);
         }
-        
+
         /* Mobile Search Overlay */
         .mobile-search-overlay {
             display: none;
@@ -340,18 +344,18 @@
             justify-content: center;
             align-items: flex-start;
         }
-        
+
         .mobile-search-overlay.active {
             display: flex;
         }
-        
+
         .mobile-search-form {
             display: flex;
             width: 100%;
             max-width: 600px;
             height: 44px;
         }
-        
+
         .mobile-search-input {
             flex: 1;
             background: #121212;
@@ -362,12 +366,12 @@
             color: var(--text-primary);
             font-size: 16px;
         }
-        
+
         .mobile-search-input:focus {
             outline: none;
             border-color: #1c62b9;
         }
-        
+
         .mobile-search-submit {
             width: 50px;
             background: #222;
@@ -379,26 +383,26 @@
             align-items: center;
             justify-content: center;
         }
-        
+
         .mobile-search-submit:hover {
             background: #303030;
         }
-        
+
         /* Dropdown */
         .dropdown-menu-dark {
             background: var(--bg-secondary);
             border: 1px solid var(--border-color);
         }
-        
+
         .dropdown-item {
             color: var(--text-primary);
         }
-        
+
         .dropdown-item:hover {
             background: var(--border-color);
             color: var(--text-primary);
         }
-        
+
         /* Modal input focus */
         #deleteVideoInput:focus {
             outline: none;
@@ -406,13 +410,13 @@
             box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
         }
     </style>
-    
+
     @yield('extra_styles')
 </head>
 <body class="{{ $bodyClass ?? '' }}">
     <!-- Header -->
     @include('layouts.partials.header')
-    
+
     <!-- Mobile Search Overlay -->
     <div class="mobile-search-overlay" id="mobileSearchOverlay">
         <form action="{{ route('videos.trending') }}" method="GET" class="mobile-search-form">
@@ -422,13 +426,13 @@
             </button>
         </form>
     </div>
-    
+
     <!-- Sidebar Overlay (Mobile) -->
     <div class="yt-sidebar-overlay" onclick="toggleSidebar()"></div>
-    
+
     <!-- Sidebar -->
     @include('layouts.partials.sidebar')
-    
+
     <!-- Main Content -->
     <main class="yt-main @yield('main_class')" id="main">
         @yield('content')
@@ -438,8 +442,13 @@
     @auth
     @include('layouts.partials.upload-modal')
     @include('layouts.partials.edit-video-modal')
-    
+    @endauth
+
+    <!-- Add to Playlist Modal - Available for all users (shows login prompt if not authenticated) -->
+    @include('layouts.partials.add-to-playlist-modal')
+
     <!-- Delete Video Modal -->
+    @auth
     <div class="modal fade" id="deleteVideoModal" tabindex="-1" aria-labelledby="deleteVideoModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content" style="background: #1a1a1a; border: 1px solid #3f3f3f; border-radius: 12px;">
@@ -468,9 +477,9 @@
                         <label for="deleteVideoInput" style="color: #aaa; font-size: 14px; margin-bottom: 8px; display: block;">
                             To confirm deletion, type <strong style="color: #fff;">"<span id="deleteVideoName"></span>"</strong> below:
                         </label>
-                        <input type="text" 
-                               id="deleteVideoInput" 
-                               class="form-control" 
+                        <input type="text"
+                               id="deleteVideoInput"
+                               class="form-control"
                                style="background: #282828; border: 1px solid #3f3f3f; color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 14px;"
                                placeholder="Enter video name">
                     </div>
@@ -518,7 +527,7 @@
         function toggleMobileSearch() {
             const overlay = document.getElementById('mobileSearchOverlay');
             overlay.classList.toggle('active');
-            
+
             // Focus input when overlay opens
             if (overlay.classList.contains('active')) {
                 setTimeout(function() {
@@ -526,7 +535,7 @@
                 }, 100);
             }
         }
-        
+
         // Close mobile search on escape key
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape') {
@@ -536,16 +545,16 @@
                 }
             }
         });
-        
+
         // Sidebar toggle function
         function toggleSidebar() {
             const sidebar = document.getElementById('sidebar');
             const overlay = document.querySelector('.yt-sidebar-overlay');
             const main = document.getElementById('main');
-            
+
             // Check if we're on mobile or desktop
             const isMobile = window.innerWidth < 992;
-            
+
             if (isMobile) {
                 // Mobile behavior - use 'open' class
                 sidebar.classList.toggle('open');
@@ -554,19 +563,19 @@
                 // Desktop behavior - use 'collapsed' class
                 sidebar.classList.toggle('collapsed');
                 main.classList.toggle('collapsed');
-                
+
                 // Save state to localStorage
                 const isCollapsed = sidebar.classList.contains('collapsed');
                 localStorage.setItem('sidebarCollapsed', isCollapsed);
             }
         }
-        
+
         // Restore sidebar state from localStorage on page load
         function restoreSidebarState() {
             const sidebar = document.getElementById('sidebar');
             const main = document.getElementById('main');
             const isMobile = window.innerWidth < 992;
-            
+
             // Only restore on desktop
             if (!isMobile) {
                 const savedState = localStorage.getItem('sidebarCollapsed');
@@ -576,15 +585,15 @@
                 }
             }
         }
-        
+
         // Set active sidebar link based on current route
         document.addEventListener('DOMContentLoaded', function() {
             // Restore sidebar state
             restoreSidebarState();
-            
+
             const currentPath = window.location.pathname;
             const sidebarLinks = document.querySelectorAll('.yt-sidebar-link');
-            
+
             sidebarLinks.forEach(link => {
                 const href = link.getAttribute('href');
                 if (href === currentPath || (currentPath.startsWith(href) && href !== '/')) {
@@ -594,13 +603,13 @@
                 }
             });
         });
-        
+
         // Handle window resize to reset state for mobile
         window.addEventListener('resize', function() {
             const sidebar = document.getElementById('sidebar');
             const main = document.getElementById('main');
             const isMobile = window.innerWidth < 992;
-            
+
             if (isMobile) {
                 // On mobile, remove collapsed state
                 sidebar.classList.remove('collapsed');
@@ -610,35 +619,35 @@
                 restoreSidebarState();
             }
         });
-        
+
         // Delete video modal functions
         let currentDeleteVideoId = null;
         let currentDeleteVideoTitle = '';
-        
+
         function showDeleteModal(videoId, videoTitle) {
             currentDeleteVideoId = videoId;
             currentDeleteVideoTitle = videoTitle;
-            
+
             document.getElementById('deleteVideoName').textContent = videoTitle;
             document.getElementById('deleteVideoInput').value = '';
-            
+
             const deleteBtn = document.getElementById('confirmDeleteBtn');
             deleteBtn.disabled = true;
             deleteBtn.style.opacity = '0.5';
             deleteBtn.style.cursor = 'not-allowed';
-            
+
             // Close the dropdown first
             const dropdown = document.querySelector('.dropdown-menu.show');
             if (dropdown) {
                 dropdown.classList.remove('show');
             }
-            
+
             // Show the modal
             const modalElement = document.getElementById('deleteVideoModal');
             const modal = new bootstrap.Modal(modalElement);
             modal.show();
         }
-        
+
         document.getElementById('deleteVideoInput').addEventListener('input', function(e) {
             const deleteBtn = document.getElementById('confirmDeleteBtn');
             if (e.target.value === currentDeleteVideoTitle) {
@@ -651,16 +660,16 @@
                 deleteBtn.style.cursor = 'not-allowed';
             }
         });
-        
+
         function confirmDeleteVideo() {
             if (!currentDeleteVideoId || !currentDeleteVideoTitle) return;
-            
+
             const inputValue = document.getElementById('deleteVideoInput').value;
             if (inputValue !== currentDeleteVideoTitle) {
                 alert('Video name does not match. Please try again.');
                 return;
             }
-            
+
             fetch(`/videos/${currentDeleteVideoId}`, {
                 method: 'DELETE',
                 headers: {
@@ -669,7 +678,7 @@
                 }
             })
             .then(response => {
-                // Check for successful response 
+                // Check for successful response
                 if (response.status === 200 || response.status === 302 || response.redirected) {
                     // Close modal first
                     const modalElement = document.getElementById('deleteVideoModal');
@@ -697,7 +706,7 @@
             });
         }
     </script>
-    
+
     @yield('scripts')
 </body>
 </html>
@@ -711,17 +720,17 @@
                 min-width: 44px;
                 min-height: 44px;
             }
-            
+
             /* Reduce padding on main content */
             .yt-main {
                 padding: 12px 8px !important;
             }
-            
+
             /* Smaller video title */
             .yt-video-title, .video-title {
                 font-size: 14px !important;
             }
-            
+
             /* Channel info compact */
             .channel-info {
                 gap: 8px !important;
@@ -736,12 +745,12 @@
             .channel-subs {
                 font-size: 12px !important;
             }
-            
+
             /* Video meta smaller */
             .yt-channel-name, .yt-video-meta {
                 font-size: 12px !important;
             }
-            
+
             /* Action buttons horizontal scroll on mobile */
             .video-actions {
                 overflow-x: auto;
@@ -749,13 +758,13 @@
                 padding-bottom: 8px;
                 width: 100%;
             }
-            
+
             .yt-action-btn {
                 flex-shrink: 0;
                 padding: 8px 12px;
                 font-size: 13px;
             }
-            
+
             /* Comment improvements */
             .comment-item {
                 flex-direction: column;
@@ -764,36 +773,36 @@
                 width: 32px !important;
                 height: 32px !important;
             }
-            
+
             /* Search input mobile */
             .yt-search-input {
                 font-size: 14px;
                 padding: 0 12px;
             }
-            
+
             /* Header spacing */
             .yt-header {
                 padding: 0 8px;
             }
-            
+
             /* User dropdown full width on mobile */
             .dropdown-menu {
                 width: 100%;
                 min-width: 200px;
             }
         }
-        
+
         /* Very small screens */
         @media (max-width: 360px) {
             .yt-main {
                 padding: 8px 4px !important;
             }
-            
+
             .yt-header-right .yt-icon-btn:not(:first-child) {
                 display: none;
             }
         }
-        
+
         /* Landscape mobile */
         @media (max-height: 500px) and (orientation: landscape) {
             .yt-sidebar {
@@ -803,22 +812,23 @@
                 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             }
         }
-        
+
         /* Prevent horizontal scroll */
         body {
             overflow-x: hidden;
             max-width: 100vw;
         }
-        
+
         /* Better video player on mobile */
         @media (max-width: 768px) {
             .video-container {
                 border-radius: 0 !important;
-                margin: 0 -16px !important;
-                max-width: calc(100% + 32px) !important;
+                margin: 0 !important;
+                max-width: 100% !important;
+                width: 100% !important;
             }
         }
-        
+
         /* Sidebar link padding for touch */
         @media (hover: none) {
             .yt-sidebar-link {