simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overlay duration and uploader on card thumbnails

Browse Source 
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>
This commit is contained in:
Simon
2026-06-30 08:38:54 +00:00
parent 138c3224de
commit 1d0b435e87
3 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/css/style.css
View File

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

14
frontend/js/favorites.js
View File

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

12
frontend/js/videos.js
View File

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