From d73f877d18783a50e7b71f51508f1f1b053850ed Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Sat, 16 May 2026 13:29:01 +0300
Subject: [PATCH] Add SPA autoplay + no-refresh clicks to Up Next
 recommendations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Autoplay toggle button in the Up Next header (defaults Off, persisted
  in localStorage as ytpAutoplay_solo)
- When autoplay is On and video ends (_plOnVideoEnd hook), automatically
  loads the first recommended video via SPA — no page refresh
- Clicking any recommended video uses recGoTo() → recTransitionTo()
  instead of window.location.href: swaps video source, resets progress
  bar, updates title, then background-swaps description, channel row,
  comments, and the entire sidebar with fresh recommendations from the
  next page
- First card gets a red ▶ indicator while autoplay is On so the user
  can see what will play next
- Browser back/forward work via popstate

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../views/videos/types/generic.blade.php      | 151 +++++++++++++++++-
 1 file changed, 147 insertions(+), 4 deletions(-)

diff --git a/resources/views/videos/types/generic.blade.php b/resources/views/videos/types/generic.blade.php
index 98b4338..3bb792b 100644
--- a/resources/views/videos/types/generic.blade.php
+++ b/resources/views/videos/types/generic.blade.php
@@ -263,6 +263,16 @@
             border-left: 3px solid #ef4444;
         }
 
+        .sidebar-video-card.rec-next-up {
+            border-left: 3px solid var(--brand-red);
+        }
+
+        .sidebar-video-card.rec-next-up .sidebar-title::before {
+            content: '▶ ';
+            color: var(--brand-red);
+            font-size: 10px;
+        }
+
         .sidebar-thumb {
             width: 168px;
             aspect-ratio: 16/9;
@@ -676,12 +686,26 @@
                     </a>
                 @endif
             @else
-                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
+                {{-- Up Next header + autoplay toggle --}}
+                <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
+                    <h3 style="font-size:16px; font-weight:500; margin:0;">
+                        <i class="bi bi-collection-play" style="margin-right:6px;"></i>Up Next
+                    </h3>
+                    <div class="pl-controls-bar" style="margin-bottom:0; flex-shrink:0;">
+                        <button class="pl-ctrl-btn pl-ctrl-autoplay" id="recAutoplayBtn"
+                            title="Autoplay" onclick="recToggleAutoplay()">
+                            <i class="bi bi-play-circle"></i>
+                            <span class="pl-autoplay-label">Autoplay</span>
+                        </button>
+                    </div>
+                </div>
+
                 @if ($recommendedVideos && $recommendedVideos->count() > 0)
-                    <div class="recommended-videos-list">
+                    <div class="recommended-videos-list" id="recList">
                         @foreach ($recommendedVideos as $recVideo)
                             <div class="sidebar-video-card"
-                                onclick="window.location.href='{{ route('videos.show', $recVideo) }}'">
+                                data-rec-url="{{ route('videos.show', $recVideo) }}"
+                                onclick="recGoTo('{{ route('videos.show', $recVideo) }}')">
                                 <div class="sidebar-thumb" style="position: relative;">
                                     @if ($recVideo->thumbnail)
                                         <img src="{{ route('media.thumbnail', $recVideo->thumbnail) }}"
@@ -716,8 +740,127 @@
                         @endforeach
                     </div>
                 @else
-                    <div class="text-secondary">No recommendations available yet. Check back later!</div>
+                    <div class="text-secondary" id="recList">No recommendations available yet. Check back later!</div>
                 @endif
+
+                <script>
+                (function () {
+                var recTransiting = false;
+                var recAutoplay   = localStorage.getItem('ytpAutoplay_solo') === '1';
+
+                function recFmt(s){ var m=Math.floor(s/60),ss=Math.floor(s%60); return m+':'+(ss<10?'0':'')+ss; }
+
+                function recRender() {
+                    var btn = document.getElementById('recAutoplayBtn');
+                    if (!btn) return;
+                    btn.classList.toggle('pl-ctrl-active', recAutoplay);
+                    btn.title = 'Autoplay: ' + (recAutoplay ? 'On' : 'Off');
+                    // highlight the next-up card
+                    var cards = document.querySelectorAll('#recList .sidebar-video-card');
+                    cards.forEach(function(c,i){ c.style.opacity = recAutoplay && i===0 ? '1' : ''; });
+                    var first = cards[0];
+                    if(first) first.classList.toggle('rec-next-up', recAutoplay);
+                }
+
+                window.recToggleAutoplay = function() {
+                    recAutoplay = !recAutoplay;
+                    localStorage.setItem('ytpAutoplay_solo', recAutoplay ? '1' : '0');
+                    recRender();
+                };
+
+                async function recTransitionTo(url, pushHist) {
+                    if (!url || recTransiting) return;
+                    recTransiting = true;
+                    try {
+                        var m = url.match(/\/videos\/([^/?#]+)/);
+                        if (!m) { window.location.href = url; return; }
+                        var resp = await fetch('/videos/' + m[1] + '/player-data');
+                        if (!resp.ok) { window.location.href = url; return; }
+                        var d = await resp.json();
+
+                        // load new video source
+                        if (window._ytpLoadSource) window._ytpLoadSource(d.hls_url, d.stream_url);
+
+                        // reset progress bar
+                        var pl=document.getElementById('ytpPlayed'),sc=document.getElementById('ytpScrubber');
+                        var cu=document.getElementById('ytpCurrent'),dr=document.getElementById('ytpDuration');
+                        if(pl) pl.style.width='0%'; if(sc) sc.style.left='0%';
+                        if(cu) cu.textContent='0:00'; if(dr&&d.duration) dr.textContent=recFmt(d.duration);
+
+                        // update title
+                        var ts = document.querySelector('.video-title span');
+                        if (ts) ts.textContent = d.title;
+                        document.title = d.title + ' | {{ config("app.name") }}';
+
+                        if (pushHist !== false) history.pushState({recUrl: url}, '', url);
+
+                        // async: swap description + comments + sidebar
+                        recSwapContent(url);
+                    } catch(e) {
+                        console.warn('recTransitionTo', e);
+                        window.location.href = url;
+                    } finally {
+                        recTransiting = false;
+                    }
+                }
+
+                async function recSwapContent(url) {
+                    try {
+                        var resp = await fetch(url, {headers:{'Accept':'text/html','X-Requested-With':'XMLHttpRequest'}});
+                        var html = await resp.text();
+                        var doc  = new DOMParser().parseFromString(html, 'text/html');
+
+                        // description
+                        var nv=doc.getElementById('vdbWrap'),ov=document.getElementById('vdbWrap');
+                        if(nv&&ov) ov.innerHTML=nv.innerHTML;
+
+                        // channel row
+                        var nc=doc.querySelector('.channel-row'),oc=document.querySelector('.channel-row');
+                        if(nc&&oc) oc.innerHTML=nc.innerHTML;
+
+                        // comments
+                        var ny=doc.getElementById('ytcSection'),oy=document.getElementById('ytcSection');
+                        if(ny&&oy){
+                            oy.innerHTML=ny.innerHTML;
+                            var ytcScript=Array.from(doc.querySelectorAll('script')).find(function(s){return s.textContent.includes('const YTC =');});
+                            if(ytcScript){
+                                var ns=document.createElement('script');
+                                ns.textContent=ytcScript.textContent;
+                                document.body.appendChild(ns);
+                                document.body.removeChild(ns);
+                            }
+                        }
+
+                        // sidebar: swap inner content and re-run init scripts
+                        var nSide=doc.querySelector('.yt-sidebar-container');
+                        var oSide=document.querySelector('.yt-sidebar-container');
+                        if(nSide&&oSide){
+                            oSide.innerHTML=nSide.innerHTML;
+                            // re-execute any inline scripts (rec init, playlist init, etc.)
+                            Array.from(oSide.querySelectorAll('script')).forEach(function(s){
+                                var ns=document.createElement('script');
+                                ns.textContent=s.textContent;
+                                document.body.appendChild(ns);
+                                document.body.removeChild(ns);
+                            });
+                        }
+                    } catch(e){ console.warn('recSwapContent', e); }
+                }
+
+                window.recGoTo = function(url) { if(url) recTransitionTo(url); };
+
+                // autoplay: when video ends, play the first rec card
+                window._plOnVideoEnd = function() {
+                    if (!recAutoplay) return;
+                    var first = document.querySelector('#recList .sidebar-video-card[data-rec-url]');
+                    if (first) recTransitionTo(first.dataset.recUrl);
+                };
+
+                window.addEventListener('popstate', function(e){ if(e.state&&e.state.recUrl) recTransitionTo(e.state.recUrl,false); });
+
+                if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',recRender); else recRender();
+                })();
+                </script>
             @endif
         </div>