From 7ba272edf6eb16a07a713cdf987e63f54a77d5af Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Wed, 21 Oct 2026 12:31:01 +0300
Subject: [PATCH] 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) <noreply@anthropic.com>
---
 .../views/components/video-player.blade.php   | 174 +++++++++++++++++-
 1 file changed, 170 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/video-player.blade.php b/resources/views/components/video-player.blade.php
index 56f3959..31fc1fd 100644
--- a/resources/views/components/video-player.blade.php
+++ b/resources/views/components/video-player.blade.php
@@ -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 ────────────────────────────────