display uploader

frontend/css/style.css

@@ -737,7 +737,7 @@ body.theme-light .setting-item select option {
 /* Grid Container */
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 16px;
     padding: 24px;
     max-width: var(--grid-max);
@@ -894,6 +894,21 @@ body.theme-light .setting-item select option {
     padding-bottom: 4px;
 }
 
+.uploader-link {
+    background: transparent;
+    border: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
+    text-align: left;
+}
+
+.uploader-link:hover {
+    color: var(--text-primary);
+    text-decoration: underline;
+}
+
 .video-duration {
     color: var(--text-primary);
     opacity: 0.8;

frontend/js/favorites.js

@@ -34,6 +34,7 @@ App.favorites = App.favorites || {};
             title: video.title || '',
             thumb: video.thumb || '',
             channel: video.channel || '',
+            uploader: video.uploader || video.channel || '',
             duration: video.duration || 0
         };
     };
@@ -98,12 +99,13 @@ App.favorites = App.favorites || {};
             const card = document.createElement('div');
             card.className = 'favorite-card';
             card.dataset.favKey = item.key;
+            const uploaderText = item.uploader || item.channel || '';
             card.innerHTML = `
                 <button class="favorite-btn is-favorite" type="button" aria-pressed="true" aria-label="Remove from favorites" data-fav-key="${item.key}">♥</button>
                 <img src="${item.thumb}" alt="${item.title}">
                 <div class="favorite-info">
                     <h4>${item.title}</h4>
-                    <p>${item.channel}</p>
+                    ${uploaderText ? `<p><button class="uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button></p>` : ''}
                 </div>
             `;
             card.onclick = () => App.player.open(item.url);
@@ -114,6 +116,14 @@ App.favorites = App.favorites || {};
                     App.favorites.toggle(item);
                 };
             }
+            const uploaderBtn = card.querySelector('.uploader-link');
+            if (uploaderBtn) {
+                uploaderBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    const uploader = uploaderBtn.dataset.uploader || uploaderBtn.textContent || '';
+                    App.videos.handleSearch(uploader);
+                };
+            }
             list.appendChild(card);
         });
 

frontend/js/videos.js

@@ -95,11 +95,12 @@ App.videos = App.videos || {};
             card.className = 'video-card';
             const durationText = App.videos.formatDuration(v.duration);
             const favoriteKey = App.favorites.getKey(v);
+            const uploaderText = v.uploader || v.channel || '';
             card.innerHTML = `
                 <button class="favorite-btn" type="button" aria-pressed="false" aria-label="Add to favorites" data-fav-key="${favoriteKey || ''}">♡</button>
                 <img src="${v.thumb}" alt="${v.title}">
                 <h4>${v.title}</h4>
-                <p class="video-meta">${v.channel}</p>
+                ${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 favoriteBtn = card.querySelector('.favorite-btn');
@@ -110,6 +111,14 @@ App.videos = App.videos || {};
                     App.favorites.toggle(v);
                 };
             }
+            const uploaderBtn = card.querySelector('.uploader-link');
+            if (uploaderBtn) {
+                uploaderBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    const uploader = uploaderBtn.dataset.uploader || uploaderBtn.textContent || '';
+                    App.videos.handleSearch(uploader);
+                };
+            }
             card.onclick = () => App.player.open(v.url);
             grid.appendChild(card);
             state.renderedVideoIds.add(v.id);
@@ -119,6 +128,12 @@ App.videos = App.videos || {};
     };
 
     App.videos.handleSearch = function(value) {
+        if (typeof value === 'string') {
+            const searchInput = document.getElementById('search-input');
+            if (searchInput && searchInput.value !== value) {
+                searchInput.value = value;
+            }
+        }
         state.currentPage = 1;
         state.hasNextPage = true;
         state.renderedVideoIds.clear();