Search: server-known videos first with YouTube results appended as they arrive; On server badge on cards the server holds a copy of

This commit is contained in:
Jonathan Sykes
2026-10-15 19:46:16 +08:00
parent 1383e89a25
commit 450dc80488
4 changed files with 49 additions and 10 deletions

View File

@@ -8014,15 +8014,24 @@ function wireUI() {
scrollListIntoViewPortrait();
const metaBtn = $('searchUpdateBtn');
if (metaBtn) { metaBtn.disabled = true; metaBtn.textContent = 'Updating…'; }
let networkDone = false, paintedLocal = false;
let networkDone = false, paintedLocal = false, localHits = [];
// The server's own matches stay at the top; YouTube's answer is appended
// below them (no duplicates), so the list grows instead of being swapped.
const merged = (yt) => {
if (!localHits.length) return yt;
const seen = new Set(localHits.map((v) => v.id));
return [...localHits, ...yt.filter((v) => !seen.has(v.id))];
};
if (!instant && !refresh) {
// Known videos from the server's metadata store, painted until YouTube answers.
// Known videos from the server's metadata store, shown while YouTube searches.
API.searchLocal(q).then((lr) => {
if (networkDone || mySeq !== searchSeq || !lr || !lr.ok || !(lr.results || []).length) return;
paintedLocal = true;
localHits = lr.results;
searchResults = lr.results;
searchAttempted = true;
renderList();
if (els.status) { els.status.classList.remove('hidden'); els.status.textContent = 'Searching YouTube for more…'; }
}).catch(() => {});
}
try {
@@ -8030,7 +8039,8 @@ function wireUI() {
networkDone = true;
if (mySeq !== searchSeq) return; // superseded by a newer search
if (!res || !res.ok) throw new Error(res?.error || 'Search failed');
const results = res.results || [];
const results = merged(res.results || []);
if (els.status && paintedLocal) els.status.classList.add('hidden');
searchResults = results;
searchAttempted = true;
renderList();
@@ -8047,17 +8057,18 @@ function wireUI() {
if (mySeq !== searchSeq || view.type !== 'search') return;
try {
const more = await API.search(q);
if (mySeq !== searchSeq || !more?.ok || (more.results || []).length <= results.length) return;
searchResults = more.results;
const full = merged(more?.results || []);
if (mySeq !== searchSeq || !more?.ok || full.length <= results.length) return;
searchResults = full;
renderList();
RecentSearches.cacheResults(q, more.results, Date.now());
RecentSearches.cacheResults(q, full, Date.now());
showSearchMeta(q, Date.now());
} catch { /* keep the first page */ }
}, 10000);
} catch (err) {
networkDone = true;
if (mySeq !== searchSeq) return;
if (paintedLocal) return; // keep the server's known videos
if (paintedLocal) { if (els.status) els.status.classList.add('hidden'); toast('YouTube search failed — showing videos this server knows'); return; } // keep the server's known videos
if (instant) { showSearchMeta(q, instant.ts); if (refresh) toast('Could not update: ' + err.message); return; } // keep the saved copy
els.cards.innerHTML = '';
els.status.classList.remove('hidden');

View File

@@ -1039,6 +1039,13 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
backdrop-filter: blur(2px);
}
/* Search/list cards: the server already holds a copy (fast start, no YouTube). */
.thumb .server-badge {
position: absolute; left: 5px; top: 5px; display: inline-flex; align-items: center; gap: 3px;
padding: 2px 6px 2px 4px; border-radius: 5px; background: rgba(0,0,0,0.82); color: #fff;
font: 600 10px/1.2 var(--ui, system-ui), sans-serif; letter-spacing: 0; pointer-events: none;
}
.thumb .server-badge svg { width: 11px; height: 11px; fill: none; stroke: var(--ok, #4ade80); stroke-width: 2.2; stroke-linecap: round; }
.card-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.card-title {
font-size: 13.5px; font-weight: 600; line-height: 1.32;

View File

@@ -1564,6 +1564,8 @@ function renderCard(v, index, list) {
const card = document.createElement('div');
const isCached = cachedIds.has(v.id);
const isDownloading = downloading.has(v.id);
if (v.onServer) knownServerCachedIds.add(v.id);
const onServer = !isCached && (v.onServer || knownServerCachedIds.has(v.id));
card.className = 'card' + (isCached ? ' cached' : '') + (isDownloading ? ' downloading' : '') + (selectedIds.has(v.id) ? ' selected' : '');
card.dataset.id = v.id;
card._video = v; // read by f7-layout.js swipe actions
@@ -1572,6 +1574,7 @@ function renderCard(v, index, list) {
<div class="thumb">
<img loading="lazy" decoding="async" src="${escapeHtml(v.thumbnail || '')}" alt="" />
${v.duration ? `<span class="dur">${fmtTime(v.duration)}</span>` : ''}
${onServer ? '<span class="server-badge" title="A copy is on the server: starts fast and plays even when YouTube is slow"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="6" rx="1.5"/><rect x="4" y="14" width="16" height="6" rx="1.5"/><path d="M8 7h.01M8 17h.01"/></svg>On server</span>' : ''}
<span class="saved-badge" title="${isDownloading ? 'Downloading…' : 'Saved offline'}">${MediaIcons.svg('offline', 'badge-offline')}${MediaIcons.svg('progress', 'badge-progress')}</span>
${isDownloading ? '<div class="dl-progress"><div class="dl-bar"></div></div>' : ''}
</div>