feat(player): end screen + 5s autoplay countdown
When a video finishes and autoplay is on, instead of switching to the next recommendation silently we show a YouTube-style end screen with the next video's thumbnail, title and a radial countdown. The viewer can Cancel to stay put, Play Now to skip the countdown, or just wait and the existing _plOnVideoEnd / navigateNext handoff fires at zero. End screen is skipped entirely when there's no sidebar card to show or when loop is on (loop keeps the old same-video behavior). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.7 committed
1 parent
4d9bc0f501
commit
7ba272edf6
1 file changed
+170
-4
@@ -205,12 +205,99 @@
|
||||
</div>{{-- /chrome-controls --}}
|
||||
</div>{{-- /chrome-bottom --}}
|
||||
|
||||
{{-- End screen: shown when the video reaches its 'ended' event. Carries
|
||||
a thumbnail + title for the next recommended video and a radial
|
||||
countdown ring; auto-advances when the ring completes, cancelled on
|
||||
any click inside the player. --}}
|
||||
<div class="ytp-end-screen" id="ytpEndScreen" aria-hidden="true">
|
||||
<div class="ytp-end-inner">
|
||||
<div class="ytp-end-label">Up next</div>
|
||||
<a class="ytp-end-card" id="ytpEndCard" href="#">
|
||||
<div class="ytp-end-thumb">
|
||||
<img id="ytpEndThumb" src="" alt="" loading="lazy">
|
||||
<div class="ytp-end-countdown">
|
||||
<svg viewBox="0 0 36 36" aria-hidden="true">
|
||||
<circle class="ytp-end-track" cx="18" cy="18" r="16"></circle>
|
||||
<circle class="ytp-end-fill" cx="18" cy="18" r="16" id="ytpEndRing"></circle>
|
||||
</svg>
|
||||
<span class="ytp-end-timer" id="ytpEndTimer">5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ytp-end-title" id="ytpEndTitle">Loading…</div>
|
||||
</a>
|
||||
<div class="ytp-end-actions">
|
||||
<button type="button" class="ytp-end-btn ytp-end-cancel" id="ytpEndCancel">Cancel</button>
|
||||
<button type="button" class="ytp-end-btn ytp-end-play" id="ytpEndPlay">Play now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>{{-- /ytp --}}
|
||||
</div>{{-- /ytp-wrap --}}
|
||||
|
||||
|
||||
@once
|
||||
<style>
|
||||
/* ── End screen (autoplay countdown) ─────────────────────── */
|
||||
.ytp-end-screen {
|
||||
position: absolute; inset: 0;
|
||||
display: none;
|
||||
align-items: center; justify-content: center;
|
||||
background: rgba(0,0,0,.78);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 20;
|
||||
color: #fff;
|
||||
}
|
||||
.ytp-end-screen.visible { display: flex; }
|
||||
.ytp-end-inner {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
gap: 16px; max-width: 560px; padding: 24px; text-align: center;
|
||||
}
|
||||
.ytp-end-label {
|
||||
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
|
||||
color: #aaa;
|
||||
}
|
||||
.ytp-end-card {
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
text-decoration: none; color: inherit; cursor: pointer;
|
||||
border-radius: 12px; padding: 12px; max-width: 420px;
|
||||
transition: background .15s;
|
||||
}
|
||||
.ytp-end-card:hover { background: rgba(255,255,255,.06); color: #fff; }
|
||||
.ytp-end-thumb {
|
||||
position: relative; width: 100%; aspect-ratio: 16/9;
|
||||
border-radius: 10px; overflow: hidden; background: #1a1a1a;
|
||||
}
|
||||
.ytp-end-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.ytp-end-countdown {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(0,0,0,.4);
|
||||
}
|
||||
.ytp-end-countdown svg { width: 72px; height: 72px; transform: rotate(-90deg); }
|
||||
.ytp-end-track { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; }
|
||||
.ytp-end-fill { fill: none; stroke: #fff; stroke-width: 3;
|
||||
stroke-dasharray: 100.5; stroke-dashoffset: 100.5;
|
||||
transition: stroke-dashoffset .1s linear; }
|
||||
.ytp-end-timer {
|
||||
position: absolute; font-size: 22px; font-weight: 700;
|
||||
color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
|
||||
}
|
||||
.ytp-end-title {
|
||||
font-size: 16px; font-weight: 500;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ytp-end-actions { display: flex; gap: 10px; }
|
||||
.ytp-end-btn {
|
||||
padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600;
|
||||
border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff;
|
||||
cursor: pointer; transition: background .15s;
|
||||
}
|
||||
.ytp-end-btn:hover { background: rgba(255,255,255,.12); }
|
||||
.ytp-end-play { background: #ef4444; border-color: #ef4444; }
|
||||
.ytp-end-play:hover { background: #dc2626; }
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
YTP PLAYER — YouTube-identical custom player
|
||||
══════════════════════════════════════════════════════════ */
|
||||
@@ -1304,17 +1391,96 @@ function navigatePrev() {
|
||||
}
|
||||
window._ytpNav = { next: navigateNext, prev: navigatePrev };
|
||||
|
||||
// ── End screen + autoplay countdown ─────────────────────
|
||||
// Picks the first "Up Next" sidebar card as the next target and shows a
|
||||
// 5-second countdown overlay. If the viewer doesn't cancel, we hand off to
|
||||
// the existing _plOnVideoEnd / navigateNext flow.
|
||||
const endScreen = document.getElementById('ytpEndScreen');
|
||||
const endRing = document.getElementById('ytpEndRing');
|
||||
const endTimer = document.getElementById('ytpEndTimer');
|
||||
const endCard = document.getElementById('ytpEndCard');
|
||||
const endThumb = document.getElementById('ytpEndThumb');
|
||||
const endTitle = document.getElementById('ytpEndTitle');
|
||||
const endCancel = document.getElementById('ytpEndCancel');
|
||||
const endPlay = document.getElementById('ytpEndPlay');
|
||||
let endInterval = null;
|
||||
let endTargetUrl = null;
|
||||
|
||||
function closeEndScreen() {
|
||||
if (endScreen) endScreen.classList.remove('visible');
|
||||
if (endInterval) { clearInterval(endInterval); endInterval = null; }
|
||||
}
|
||||
|
||||
function _findNextRecCard() {
|
||||
// Prefer the first unwatched recommendation; fall back to the first card.
|
||||
const list = document.querySelector('#recList');
|
||||
if (!list) return null;
|
||||
return list.querySelector('.sidebar-video-card[data-rec-url]');
|
||||
}
|
||||
|
||||
function openEndScreen() {
|
||||
if (!endScreen) {
|
||||
// No end-screen markup (e.g. shorts). Fall back to the original behavior.
|
||||
if (window._plOnVideoEnd) window._plOnVideoEnd();
|
||||
else if (autoplayOn || isLooping) navigateNext();
|
||||
return;
|
||||
}
|
||||
const card = _findNextRecCard();
|
||||
if (!card) {
|
||||
// Nothing to count down to — restore the old no-UI behavior.
|
||||
if (window._plOnVideoEnd) window._plOnVideoEnd();
|
||||
else if (autoplayOn || isLooping) navigateNext();
|
||||
return;
|
||||
}
|
||||
endTargetUrl = card.dataset.recUrl;
|
||||
endCard.href = endTargetUrl;
|
||||
const img = card.querySelector('img');
|
||||
const title = card.querySelector('.sidebar-title');
|
||||
if (img && endThumb) endThumb.src = img.src;
|
||||
if (title && endTitle) endTitle.textContent = title.textContent.trim();
|
||||
|
||||
endScreen.classList.add('visible');
|
||||
|
||||
let left = 5;
|
||||
endTimer.textContent = left;
|
||||
endRing.style.strokeDashoffset = '100.5';
|
||||
const start = Date.now();
|
||||
const total = 5000;
|
||||
endInterval = setInterval(() => {
|
||||
const elapsed = Date.now() - start;
|
||||
const remaining = Math.max(0, total - elapsed);
|
||||
left = Math.ceil(remaining / 1000);
|
||||
endTimer.textContent = left;
|
||||
endRing.style.strokeDashoffset = String(100.5 * (remaining / total));
|
||||
if (remaining <= 0) {
|
||||
closeEndScreen();
|
||||
if (window._plOnVideoEnd) window._plOnVideoEnd();
|
||||
else navigateNext();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
endCancel?.addEventListener('click', closeEndScreen);
|
||||
endPlay?.addEventListener('click', () => {
|
||||
closeEndScreen();
|
||||
if (window._plOnVideoEnd) window._plOnVideoEnd();
|
||||
else navigateNext();
|
||||
});
|
||||
|
||||
video.addEventListener('ended', () => {
|
||||
updatePlayIcon();
|
||||
largePlay.classList.add('visible');
|
||||
clearTimeout(hideTimer);
|
||||
releaseWakeLock();
|
||||
if (window._plOnVideoEnd) {
|
||||
window._plOnVideoEnd();
|
||||
} else if (autoplayOn || isLooping) {
|
||||
navigateNext();
|
||||
if (isLooping) { navigateNext(); return; }
|
||||
if (autoplayOn || window._plOnVideoEnd) {
|
||||
openEndScreen();
|
||||
}
|
||||
});
|
||||
// Any interaction inside the player cancels the countdown so the viewer
|
||||
// can scrub back, replay, or just stop.
|
||||
video.addEventListener('play', closeEndScreen);
|
||||
video.addEventListener('seeking', closeEndScreen);
|
||||
video.addEventListener('volumechange', updateVolumeIcon);
|
||||
|
||||
// ── Keyboard shortcuts ────────────────────────────────
|
||||
|
||||
Reference in new issue
Block a user