josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make channel names clickable in related, up-next, and mini-bar

Browse Source
This commit is contained in:
Jonathan Sykes
2026-06-21 21:13:44 +08:00
parent 68d4921149
commit fea26fd435
2 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/app.js
View File

@@ -675,7 +675,9 @@ function updateProgress() {
function showMiniBar() { function showMiniBar() {
if (!current || !current.meta) return; if (!current || !current.meta) return;
$('miniTitle').textContent = current.meta.title; $('miniTitle').textContent = current.meta.title;
$('miniChannel').textContent = current.meta.channel || ''; const miniCh = $('miniChannel');
miniCh.textContent = current.meta.channel || '';
miniCh.classList.toggle('link', !!channelKeyOf(current.meta));
$('miniBar').classList.remove('hidden'); $('miniBar').classList.remove('hidden');
updateMiniBar(); updateMiniBar();
} }
@@ -774,9 +776,17 @@ function renderUpNext() {
item.innerHTML = ` item.innerHTML = `
<img src="${v.thumbnail || ''}" alt="" loading="lazy" /> <img src="${v.thumbnail || ''}" alt="" loading="lazy" />
<div class="upnext-info"> <div class="upnext-info">
<div class="upnext-title">${v.title}</div> <div class="upnext-title"></div>
<div class="upnext-channel">${v.channel || ''}</div> <div class="upnext-channel"></div>
</div>`; </div>`;
item.querySelector('.upnext-title').textContent = v.title;
const upChEl = item.querySelector('.upnext-channel');
upChEl.textContent = v.channel || '';
if (channelKeyOf(v)) {
upChEl.classList.add('link');
upChEl.title = 'View channel';
upChEl.addEventListener('click', (e) => { e.stopPropagation(); openChannel(channelKeyOf(v), v.channel); });
}
item.addEventListener('click', () => { item.addEventListener('click', () => {
const idx = queue.findIndex((x) => x.id === v.id); const idx = queue.findIndex((x) => x.id === v.id);
if (idx >= 0) { queueIndex = idx - 1; playNext(); } if (idx >= 0) { queueIndex = idx - 1; playNext(); }
@@ -2008,6 +2018,11 @@ document.querySelectorAll('.chip').forEach((c) => {
openChannel(channelKeyOf(current.meta), current.meta.channel); openChannel(channelKeyOf(current.meta), current.meta.channel);
} }
}); });
$('miniChannel').addEventListener('click', () => {
if (current && current.meta && channelKeyOf(current.meta)) {
openChannel(channelKeyOf(current.meta), current.meta.channel);
}
});
// Controls // Controls
els.playBtn.addEventListener('click', () => Player.toggle()); els.playBtn.addEventListener('click', () => Player.toggle());
@@ -2220,8 +2235,17 @@ function renderRelated() {
item.className = 'related-item'; item.className = 'related-item';
item.innerHTML = `<img src="${v.thumbnail || ''}" alt="" loading="lazy" /><div class="ri-info"><div class="ri-title"></div><div class="ri-channel"></div></div>`; item.innerHTML = `<img src="${v.thumbnail || ''}" alt="" loading="lazy" /><div class="ri-info"><div class="ri-title"></div><div class="ri-channel"></div></div>`;
item.querySelector('.ri-title').textContent = v.title; item.querySelector('.ri-title').textContent = v.title;
item.querySelector('.ri-channel').textContent = v.channel || ''; const riChEl = item.querySelector('.ri-channel');
item.addEventListener('click', () => { queue = [v]; queueIndex = 0; Player.loadVideo(v); renderUpNext(); }); riChEl.textContent = v.channel || '';
if (channelKeyOf(v)) {
riChEl.classList.add('link');
riChEl.title = 'View channel';
riChEl.addEventListener('click', (e) => { e.stopPropagation(); openChannel(channelKeyOf(v), v.channel); });
}
item.addEventListener('click', (e) => {
if (e.target.closest('.ri-channel.link')) return;
queue = [v]; queueIndex = 0; Player.loadVideo(v); renderUpNext();
});
list.appendChild(item); list.appendChild(item);
}); });
} }

6
frontend/styles.css
View File

@@ -1195,6 +1195,12 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
.card-channel.link:hover { color: var(--accent); text-decoration: underline; } .card-channel.link:hover { color: var(--accent); text-decoration: underline; }
.np-channel { cursor: pointer; } .np-channel { cursor: pointer; }
.np-channel:hover { color: var(--text-2); } .np-channel:hover { color: var(--text-2); }
.upnext-channel.link { cursor: pointer; }
.upnext-channel.link:hover { color: var(--accent); text-decoration: underline; }
.ri-channel.link { cursor: pointer; }
.ri-channel.link:hover { color: var(--accent); text-decoration: underline; }
.mini-channel.link { cursor: pointer; }
.mini-channel.link:hover { color: var(--accent); text-decoration: underline; }
/* ============================================================================ /* ============================================================================
* Per-card delete button (playlist / queue / saved) * Per-card delete button (playlist / queue / saved)