Add SPA autoplay + no-refresh clicks to Up Next recommendations
- 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>
This commit is contained in:
ghassan
parent
77e7b950be
commit
d73f877d18
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user