WIP: storage-fix-local-nas work before playlist controls feature

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

resources/views/components/video-card.blade.php

@@ -3,7 +3,7 @@
 @php
 $videoUrl = $video ? asset('storage/videos/' . $video->filename) : null;
 $thumbnailUrl = $video && $video->thumbnail
-    ? asset('storage/thumbnails/' . $video->thumbnail)
+    ? route('media.thumbnail', $video->thumbnail)
     : ($video ? 'https://picsum.photos/seed/' . $video->id . '/640/360' : 'https://picsum.photos/seed/random/640/360');
 
 $typeIcon = $video ? match($video->type) {
@@ -29,7 +29,7 @@ $sizeClasses = match($size) {
     <a href="{{ $video ? route('videos.show', $video) : '#' }}">
         <div class="yt-video-thumb" onmouseenter="playVideo(this)" onmouseleave="stopVideo(this)"
              data-audio="{{ $video && $video->isAudioOnly() ? 'true' : 'false' }}">
-            <img src="{{ $thumbnailUrl }}" alt="{{ $video->title ?? 'Video' }}">
+            <img src="{{ $thumbnailUrl }}" alt="{{ $video->title ?? 'Video' }}" loading="lazy" decoding="async" onload="this.classList.add('loaded');this.closest('.yt-video-thumb').classList.add('loaded')">
             @if($videoUrl)
             <video preload="none">
                 <source src="{{ $videoUrl }}" type="{{ $video->mime_type ?? 'video/mp4' }}">
@@ -64,7 +64,7 @@ $sizeClasses = match($size) {
         <a href="{{ $video && $video->user ? route('channel', $video->user->channel) : '#' }}"
            class="yt-channel-icon" onclick="event.stopPropagation();">
             @if($video && $video->user && $video->user->avatar_url)
-                <img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
+                <img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" loading="lazy" decoding="async" onload="this.classList.add('loaded')" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity 0.25s ease;">
             @endif
         </a>
         <div class="yt-video-details">
@@ -275,6 +275,28 @@ $sizeClasses = match($size) {
     background: #1a1a1a;
 }
 
+/* Skeleton shimmer while thumbnail loads */
+.yt-video-card .yt-video-thumb::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
+    background-size: 200% 100%;
+    animation: thumb-shimmer 1.4s ease infinite;
+    z-index: 0;
+    border-radius: inherit;
+}
+
+@keyframes thumb-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+.yt-video-card .yt-video-thumb.loaded::before {
+    animation: none;
+    opacity: 0;
+}
+
 .yt-video-card .yt-video-thumb img {
     width: 100%;
     height: 100%;
@@ -282,9 +304,16 @@ $sizeClasses = match($size) {
     position: absolute;
     top: 0;
     left: 0;
-    transition: transform 0.2s ease;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.2s ease;
+    z-index: 1;
 }
-.yt-video-card:hover .yt-video-thumb img {
+
+.yt-video-card .yt-video-thumb img.loaded {
+    opacity: 1;
+}
+
+.yt-video-card:hover .yt-video-thumb img.loaded {
     transform: scale(1.03);
 }
 
@@ -298,6 +327,7 @@ $sizeClasses = match($size) {
     opacity: 0;
     transition: opacity 0.3s ease;
     background: #000;
+    z-index: 2;
 }
 
 .yt-video-card .yt-video-thumb video.active {
@@ -315,6 +345,7 @@ $sizeClasses = match($size) {
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
+    z-index: 3;
 }
 
 .yt-video-thumb.audio-playing .audio-preview-overlay {
@@ -360,6 +391,7 @@ $sizeClasses = match($size) {
     border-radius: 4px;
     font-size: 12px;
     font-weight: 500;
+    z-index: 3;
 }
 
 .yt-video-card .yt-shorts-badge {
@@ -377,6 +409,7 @@ $sizeClasses = match($size) {
     gap: 4px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    z-index: 3;
 }
 
 .yt-video-card .yt-shorts-badge i {
@@ -395,6 +428,7 @@ $sizeClasses = match($size) {
     align-items: center;
     gap: 4px;
     pointer-events: none;
+    z-index: 3;
 }
 
 .yt-video-card .yt-visibility-private {
@@ -423,6 +457,10 @@ $sizeClasses = match($size) {
     overflow: hidden;
 }
 
+.yt-video-card .yt-channel-icon img.loaded {
+    opacity: 1 !important;
+}
+
 .yt-video-card .yt-video-details {
     flex: 1;
     min-width: 0;