Overlay duration and uploader on card thumbnails

Move the duration (bottom-right) and uploader (bottom-left) onto the
thumbnail as dark-transparent pills instead of text rows below it, for
both .video-card and .favorite-card. Wrap the thumbnail in .video-thumb
to anchor the overlays; uploader stays clickable and truncates with
ellipsis. Favorite cards now show duration too (was stored, never shown).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/css/style.css

@@ -789,12 +789,6 @@ body.theme-light .setting-item select option {
     line-height: 1.3;
 }
 
-.favorite-info p {
-    margin: 4px 0 0 0;
-    font-size: 12px;
-    color: var(--text-secondary);
-}
-
 .favorites-empty {
     font-size: 13px;
     color: var(--text-secondary);
@@ -934,6 +928,11 @@ body.theme-light .setting-item select option {
     border-color: var(--border-hover);
 }
 
+.video-thumb {
+    position: relative;
+    display: block;
+}
+
 .video-card img {
     width: 100%;
     aspect-ratio: 16 / 9;
@@ -942,6 +941,47 @@ body.theme-light .setting-item select option {
     background: var(--bg-tertiary);
 }
 
+/* Dark-transparent pills overlaid on the bottom of the thumbnail.
+   Scoped under .video-thumb so they outrank the later .uploader-link rule. */
+.video-thumb .video-uploader,
+.video-thumb .video-duration {
+    position: absolute;
+    bottom: 8px;
+    z-index: 3;
+    padding: 3px 8px;
+    border-radius: 6px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.2;
+    backdrop-filter: blur(2px);
+    pointer-events: none;
+}
+
+.video-thumb .video-duration {
+    right: 8px;
+}
+
+.video-thumb .video-uploader {
+    left: 8px;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border: none;
+    text-align: left;
+    font-family: inherit;
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.video-thumb .video-uploader:hover {
+    background: rgba(0, 0, 0, 0.78);
+    color: #fff;
+    text-decoration: underline;
+}
+
 .video-card h4 {
     font-size: 15px;
     font-weight: 500;
@@ -982,10 +1022,6 @@ body.theme-light .setting-item select option {
     margin: 0;
 }
 
-.video-meta {
-    padding-bottom: 4px;
-}
-
 .video-tags {
     display: flex;
     flex-wrap: nowrap;
@@ -1064,12 +1100,6 @@ body.theme-light .setting-item select option {
     text-decoration: underline;
 }
 
-.video-duration {
-    color: var(--text-primary);
-    opacity: 0.8;
-    font-weight: 500;
-}
-
 .video-menu-btn {
     position: absolute;
     top: 10px;

frontend/js/favorites.js

@@ -114,6 +114,9 @@ App.favorites = App.favorites || {};
             card.className = 'favorite-card';
             card.dataset.favKey = item.key;
             const uploaderText = item.uploader || '';
+            const durationText = (!item.isLive && App.videos && typeof App.videos.formatDuration === 'function')
+                ? App.videos.formatDuration(item.duration)
+                : '';
             const liveBadge = item.isLive ? '<span class="live-badge">● LIVE</span>' : '';
             card.innerHTML = `
                 ${liveBadge}
@@ -123,13 +126,16 @@ App.favorites = App.favorites || {};
                     <button class="video-menu-item" type="button" data-action="info" role="menuitem">Show info</button>
                     <button class="video-menu-item" type="button" data-action="download" role="menuitem">Download</button>
                 </div>
+                <div class="video-thumb">
                     <img src="${item.thumb}" alt="${item.title}" loading="lazy" decoding="async">
                     <div class="video-loading" aria-hidden="true">
                         <div class="video-loading-spinner"></div>
                     </div>
+                    ${uploaderText ? `<button class="video-uploader uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button>` : ''}
+                    ${durationText ? `<span class="video-duration">${durationText}</span>` : ''}
+                </div>
                 <div class="favorite-info">
                     <h4>${item.title}</h4>
-                    ${uploaderText ? `<p><button class="uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button></p>` : ''}
                 </div>
             `;
             const thumb = card.querySelector('img');

frontend/js/videos.js

@@ -322,14 +322,16 @@ App.videos = App.videos || {};
                 <button class="video-menu-item" type="button" data-action="info" role="menuitem">Show info</button>
                 <button class="video-menu-item" type="button" data-action="download" role="menuitem">Download</button>
             </div>
+            <div class="video-thumb">
                 <img src="${v.thumb}" alt="${v.title}" loading="lazy" decoding="async">
                 <div class="video-loading" aria-hidden="true">
                     <div class="video-loading-spinner"></div>
                 </div>
+                ${uploaderText ? `<button class="video-uploader uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button>` : ''}
+                ${durationText ? `<span class="video-duration">${durationText}</span>` : ''}
+            </div>
             <h4 class="video-title"><span class="video-title-text">${v.title}</span></h4>
             ${tagsMarkup}
-            ${uploaderText ? `<p class="video-meta"><button class="uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button></p>` : ''}
-            ${durationText ? `<p class="video-duration">${durationText}</p>` : ''}
         `;
         const thumb = card.querySelector('img');
         App.videos.attachNoReferrerRetry(thumb);