CLAUDE.md

@@ -98,13 +98,6 @@ All managed via `MatchEventController` under authenticated routes.
 
 ## Rules
 
-**Never navigate between videos with a page refresh** — all video-to-video transitions (Up Next recommendations, playlist tracks, prev/next) must use JavaScript SPA transitions. Never use `window.location.href` or `<a>` tags with hard navigation for video card clicks. The established pattern is:
-- **Video player (generic, match types):** `recTransitionTo(url)` / `plTransitionTo(url)` — fetch `/videos/{key}/player-data` JSON, call `window._ytpLoadSource(hlsUrl, mp4Url)`, then `recSwapContent(url)` / `plSwapContent(url)` in the background to update description, comments, and sidebar.
-- **Audio player (music type):** same pattern but swap `audio.src` and `audio.play()` instead of `_ytpLoadSource`.
-- **Sidebar cards** must have `data-rec-url` (Up Next) or `data-pl-id` (playlist) attributes and call `recGoTo(url)` / `plGoTo(url)` onclick — never `window.location.href`.
-- **Autoplay on track end** is wired via `window._plOnVideoEnd` (video) or `window._plOnTrackEnd` (audio) hooks — the player calls these hooks on `ended`; the SPA script sets them.
-- The only fallback to `window.location.href` is inside `catch` blocks when the fetch itself fails.
-
 **Database changes require confirmation** — if any task requires a migration, schema change, or new column, always ask before proceeding.
 
 **Never use `alert()`, `confirm()`, or `prompt()`** — use toast notifications or inline UI feedback instead.

app/Http/Controllers/VideoController.php

@@ -465,35 +465,6 @@ class VideoController extends Controller
             ->withCookie(cookie('_did', $did, 60 * 24 * 365 * 5));
     }
 
-    public function playerData(Video $video, Request $request)
-    {
-        if (! $video->canView(Auth::user())) {
-            abort(403);
-        }
-
-        $coverUrl = $video->thumbnail
-            ? route('media.thumbnail', $video->thumbnail)
-            : asset('storage/images/logo.png');
-
-        $slides = $video->slides->count() > 1
-            ? $video->slides->map(fn ($s) => route('media.thumbnail', $s->filename))->values()->all()
-            : [];
-
-        return response()->json([
-            'id'         => $video->id,
-            'key'        => $video->getRouteKey(),
-            'type'       => $video->type,
-            'has_hls'    => (bool) $video->has_hls,
-            'hls_url'    => $video->has_hls ? route('videos.hls', ['video' => $video, 'file' => 'master.m3u8']) : null,
-            'stream_url' => route('videos.stream', $video),
-            'cover_url'  => $coverUrl,
-            'slides'     => $slides,
-            'title'      => $video->title,
-            'author'     => $video->user->name ?? '',
-            'duration'   => $video->duration,
-        ]);
-    }
-
     public function matchData(Video $video)
     {
         if (! $video->canView(Auth::user())) {

resources/views/components/video-player.blade.php

@@ -806,38 +806,18 @@ function getShuffledPrevUrl() {
     return vids[order[posPrev]]?.showUrl ?? PREV_URL;
 }
 
-window._ytpHls = null;
-
 function initSource() {
     if (HLS_URL && window.Hls && Hls.isSupported()) {
-        window._ytpHls = new Hls({ startLevel: -1 });
+        const hls = new Hls({ startLevel: -1 });
-        window._ytpHls.loadSource(HLS_URL);
+        hls.loadSource(HLS_URL);
-        window._ytpHls.attachMedia(video);
+        hls.attachMedia(video);
     } else if (HLS_URL && video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = HLS_URL;
+        video.src = HLS_URL; // Safari native HLS
     } else {
         video.src = MP4_URL;
     }
 }
 
-// Reinitialize source after SPA transition — called by playlist overlay scripts
-window._ytpLoadSource = function(hlsUrl, mp4Url) {
-    if (window._ytpHls) { window._ytpHls.destroy(); window._ytpHls = null; }
-    if (hlsUrl && window.Hls && Hls.isSupported()) {
-        window._ytpHls = new Hls({ startLevel: -1 });
-        window._ytpHls.loadSource(hlsUrl);
-        window._ytpHls.attachMedia(video);
-    } else if (hlsUrl && video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = hlsUrl;
-        video.load();
-    } else {
-        video.src = mp4Url;
-        video.load();
-    }
-    video.muted = false;
-    video.play().catch(function(){});
-};
-
 // Load HLS.js from CDN then init
 function loadHlsJs(cb) {
     if (window.Hls) { cb(); return; }
@@ -1189,12 +1169,10 @@ video.addEventListener('playing',  () => spinner.classList.remove('active'));
 video.addEventListener('canplay',  () => spinner.classList.remove('active'));
 function navigateNext() {
     const url = shuffleOn ? getShuffledNextUrl() : NEXT_URL;
-    if (window._ytpNavOverride?.next) { window._ytpNavOverride.next(url); return; }
     if (url) window.location.href = url;
 }
 function navigatePrev() {
     const url = shuffleOn ? getShuffledPrevUrl() : PREV_URL;
-    if (window._ytpNavOverride?.prev) { window._ytpNavOverride.prev(url); return; }
     if (url) window.location.href = url;
 }
 window._ytpNav = { next: navigateNext, prev: navigatePrev };
@@ -1204,9 +1182,7 @@ video.addEventListener('ended', () => {
     largePlay.classList.add('visible');
     clearTimeout(hideTimer);
     releaseWakeLock();
-    if (window._plOnVideoEnd) {
+    if (autoplayOn || isLooping) {
-        window._plOnVideoEnd();
-    } else if (autoplayOn || isLooping) {
         navigateNext();
     }
 });

resources/views/videos/types/generic.blade.php

@@ -253,24 +253,6 @@
             gap: 8px;
             margin-bottom: 8px;
             cursor: pointer;
-            border-radius: 8px;
-            padding: 4px;
-            transition: background .15s;
-        }
-
-        .sidebar-video-card.current-video {
-            background: rgba(239,68,68,.12);
-            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 {
@@ -446,6 +428,15 @@
 
             <x-video-comments :video="$video" />
         </div>
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                setTimeout(function() {
+                    if (typeof enhanceComments === 'function') {
+                        enhanceComments();
+                    }
+                }, 100);
+            });
+        </script>
 
         <!-- Sidebar - Up Next / Recommendations -->
         <div class="yt-sidebar-container" style="display: flex; flex-direction: column; gap: 16px;">
@@ -460,187 +451,52 @@
 
                 {{-- Playlist controls --}}
                 <div class="pl-controls-bar">
-                    <button class="pl-ctrl-btn" id="plPrevBtn" title="Previous" onclick="window.plPrev()">
+                    <button class="pl-ctrl-btn" id="plPrevBtn" title="Previous"
+                        @if(!($previousVideo ?? null)) disabled @endif
+                        onclick="window._ytpNav?.prev()">
                         <i class="bi bi-skip-start-fill"></i>
                     </button>
-                    <button class="pl-ctrl-btn" id="plNextBtn" title="Next" onclick="window.plNext()">
+                    <button class="pl-ctrl-btn" id="plNextBtn" title="Next"
+                        onclick="window._ytpNav?.next()">
                         <i class="bi bi-skip-end-fill"></i>
                     </button>
                     <div class="pl-ctrl-divider"></div>
-                    <button class="pl-ctrl-btn" id="plShuffleBtn" title="Shuffle" onclick="plToggleShuffle()">
+                    <button class="pl-ctrl-btn" id="plShuffleBtn" title="Shuffle"
+                        onclick="document.getElementById('ytpShuffleRow')?.click(); plSyncGeneric()">
                         <i class="bi bi-shuffle"></i>
                     </button>
-                    <button class="pl-ctrl-btn" id="plLoopBtn" title="Loop" onclick="plToggleLoop()">
+                    <button class="pl-ctrl-btn" id="plLoopBtn" title="Loop"
+                        onclick="document.getElementById('ytpLoopRow')?.click(); plSyncGeneric()">
                         <i class="bi bi-repeat"></i>
                     </button>
-                    <button class="pl-ctrl-btn pl-ctrl-autoplay" id="plAutoplayBtn" title="Autoplay" onclick="plToggleAutoplay()">
+                    <button class="pl-ctrl-btn pl-ctrl-autoplay" id="plAutoplayBtn" title="Autoplay"
+                        onclick="document.getElementById('ytpAutoplayRow')?.click(); plSyncGeneric()">
                         <i class="bi bi-play-circle"></i>
                         <span class="pl-autoplay-label">Autoplay</span>
                     </button>
                 </div>
 
                 <script>
-                (function () {
+                function plSyncGeneric(){
-                var PL_ID      = '{{ $playlist->share_token }}';
+                    var sb = document.getElementById('plShuffleBtn');
-                var PL_CURRENT = {{ $video->id }};
+                    var lb = document.getElementById('plLoopBtn');
-                var PL_VIDEOS  = {!! $playlistVideos->map(fn($v) => ['id' => $v->id, 'url' => route('videos.show', $v).'?playlist='.$playlist->share_token])->values()->toJson() !!};
+                    var ab = document.getElementById('plAutoplayBtn');
-
+                    var sr = document.getElementById('ytpShuffleRow');
-                function plGet(k,d){ var v=localStorage.getItem('pl_'+k+'_'+PL_ID); return v!==null?v:d; }
+                    var lr = document.getElementById('ytpLoopRow');
-                function plSet(k,v){ localStorage.setItem('pl_'+k+'_'+PL_ID,v); }
+                    var ar = document.getElementById('ytpAutoplayRow');
-
+                    if(sb && sr) sb.classList.toggle('pl-ctrl-active', sr.classList.contains('is-on'));
-                var plAutoplay   = plGet('autoplay','1');
+                    if(lb && lr) lb.classList.toggle('pl-ctrl-active', lr.classList.contains('is-on'));
-                var plLoop       = plGet('loop','off');
+                    if(ab && ar) ab.classList.toggle('pl-ctrl-active', ar.classList.contains('is-on'));
-                var plShuffle    = plGet('shuffle','0');
-                var plTransiting = false;
-
-                function plShuffleOrder(){ var o=PL_VIDEOS.map(function(_,i){return i;}); for(var i=o.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=o[i];o[i]=o[j];o[j]=t;} localStorage.setItem('pl_shuffleOrder_'+PL_ID,JSON.stringify(o)); return o; }
-                function plGetOrder(){ var r=localStorage.getItem('pl_shuffleOrder_'+PL_ID); if(r){try{return JSON.parse(r);}catch(e){}} return null; }
-
-                function plAdj(curId) {
-                    var idx=PL_VIDEOS.findIndex(function(v){ return v.id===curId; });
-                    if(plShuffle==='1'){
-                        var ord=plGetOrder()||plShuffleOrder();
-                        var pos=ord.indexOf(idx);
-                        var pp=pos>0?pos-1:(plLoop==='all'?ord.length-1:-1);
-                        var np=pos<ord.length-1?pos+1:(plLoop==='all'?0:-1);
-                        return { prev:pp>=0?PL_VIDEOS[ord[pp]].url:'', next:np>=0?PL_VIDEOS[ord[np]].url:'' };
                 }
-                    return {
+                document.addEventListener('DOMContentLoaded', function(){ setTimeout(plSyncGeneric, 100); });
-                        prev: idx>0?PL_VIDEOS[idx-1].url:'',
+                if(document.readyState !== 'loading') setTimeout(plSyncGeneric, 100);
-                        next: idx<PL_VIDEOS.length-1?PL_VIDEOS[idx+1].url:(plLoop==='all'?PL_VIDEOS[0].url:'')
-                    };
-                }
-
-                function plFmt(s){ var m=Math.floor(s/60),ss=Math.floor(s%60); return m+':'+(ss<10?'0':'')+ss; }
-
-                async function plTransitionTo(url, pushHist) {
-                    if(!url||plTransiting) return;
-                    plTransiting=true;
-                    try {
-                        var m=url.match(/\/videos\/([^/?#]+)/);
-                        if(!m){ window.location.href=url; return; }
-                        var qs=url.indexOf('?')!==-1?url.substring(url.indexOf('?')):'';
-                        var resp=await fetch('/videos/'+m[1]+'/player-data'+qs);
-                        if(!resp.ok){ window.location.href=url; return; }
-                        var d=await resp.json();
-
-                        // reload video source (HLS or MP4)
-                        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=plFmt(d.duration);
-
-                        // update page title
-                        var ts=document.querySelector('.video-title span');
-                        if(ts) ts.textContent=d.title;
-                        document.title=d.title+' | {{ config("app.name") }}';
-
-                        // update loop state on video element
-                        var vid=document.getElementById('videoPlayer');
-                        if(vid) vid.loop=(plLoop==='one');
-
-                        PL_CURRENT=d.id;
-                        plRender();
-                        plHighlight(d.id);
-                        if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url);
-
-                        plSwapContent(url);
-                    } catch(e){
-                        console.warn('plTransitionTo',e);
-                        window.location.href=url;
-                    } finally {
-                        plTransiting=false;
-                    }
-                }
-
-                async function plSwapContent(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');
-
-                        var nv=doc.getElementById('vdbWrap'),ov=document.getElementById('vdbWrap');
-                        if(nv&&ov) ov.innerHTML=nv.innerHTML;
-
-                        var nc=doc.querySelector('.channel-row'),oc=document.querySelector('.channel-row');
-                        if(nc&&oc) oc.innerHTML=nc.innerHTML;
-
-                        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);
-                            }
-                        }
-                    } catch(e){ console.warn('plSwapContent',e); }
-                }
-
-                function plHighlight(activeId){
-                    document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){
-                        c.classList.toggle('current-video',parseInt(c.dataset.plId)===activeId);
-                    });
-                    var a=document.querySelector('.sidebar-video-card.current-video');
-                    if(a) a.scrollIntoView({behavior:'smooth',block:'nearest'});
-                }
-
-                function plRender(){
-                    var adj=plAdj(PL_CURRENT);
-                    var sb=document.getElementById('plShuffleBtn'),lb=document.getElementById('plLoopBtn');
-                    var ab=document.getElementById('plAutoplayBtn'),nb=document.getElementById('plNextBtn'),pb=document.getElementById('plPrevBtn');
-                    if(sb){ sb.classList.toggle('pl-ctrl-active',plShuffle==='1'); sb.title='Shuffle: '+(plShuffle==='1'?'On':'Off'); }
-                    if(lb){
-                        lb.classList.remove('pl-ctrl-active');
-                        if(plLoop==='all'){ lb.classList.add('pl-ctrl-active'); lb.innerHTML='<i class="bi bi-repeat"></i>'; lb.title='Loop: All'; }
-                        else if(plLoop==='one'){ lb.classList.add('pl-ctrl-active'); lb.innerHTML='<i class="bi bi-repeat-1"></i>'; lb.title='Loop: One'; }
-                        else { lb.innerHTML='<i class="bi bi-repeat"></i>'; lb.title='Loop: Off'; }
-                    }
-                    if(ab){ ab.classList.toggle('pl-ctrl-active',plAutoplay==='1'); ab.title='Autoplay: '+(plAutoplay==='1'?'On':'Off'); }
-                    if(nb) nb.disabled=!adj.next;
-                    if(pb) pb.disabled=!adj.prev;
-                }
-
-                window.plGoTo       = function(url){ if(url) plTransitionTo(url); };
-                window.plNext       = function(){ var a=plAdj(PL_CURRENT); if(a.next) plTransitionTo(a.next); };
-                window.plPrev       = function(){ var a=plAdj(PL_CURRENT); if(a.prev) plTransitionTo(a.prev); };
-                window.plToggleShuffle  = function(){ plShuffle=plShuffle==='1'?'0':'1'; plSet('shuffle',plShuffle); if(plShuffle==='1') plShuffleOrder(); else localStorage.removeItem('pl_shuffleOrder_'+PL_ID); plRender(); };
-                window.plToggleLoop     = function(){ var s=['off','all','one']; var i=s.indexOf(plLoop); plLoop=s[(i+1)%s.length]; plSet('loop',plLoop); plRender(); var v=document.getElementById('videoPlayer'); if(v) v.loop=(plLoop==='one'); };
-                window.plToggleAutoplay = function(){ plAutoplay=plAutoplay==='1'?'0':'1'; plSet('autoplay',plAutoplay); plRender(); };
-
-                // hook into video player: intercept next/prev and ended
-                window._ytpNavOverride = {
-                    next: function(_url){ window.plNext(); },
-                    prev: function(_url){ window.plPrev(); }
-                };
-                window._plOnVideoEnd = function(){ if(plLoop==='one') return; if(plAutoplay==='1') window.plNext(); };
-
-                window.addEventListener('popstate',function(e){ if(e.state&&e.state.url) plTransitionTo(e.state.url,false); });
-
-                function plInit(){
-                    var v=document.getElementById('videoPlayer');
-                    if(v&&plLoop==='one') v.loop=true;
-                    plRender();
-                    plHighlight(PL_CURRENT);
-                }
-                if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit();
-                })();
                 </script>
 
                 <div class="recommended-videos-list">
                     @foreach ($playlistVideos as $index => $playlistVideo)
-                        @php $isCurrentTrack = $playlistVideo->id === $video->id; @endphp
+                        @if ($playlistVideo->id !== $video->id)
-                        <div class="sidebar-video-card{{ $isCurrentTrack ? ' current-video' : '' }}"
+                            <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
-                            data-pl-id="{{ $playlistVideo->id }}"
+                                onclick="window.location.href='{{ route('videos.show', $playlistVideo) }}?playlist={{ $playlist->share_token }}'">
-                            onclick="plGoTo('{{ route('videos.show', $playlistVideo) }}?playlist={{ $playlist->share_token }}')"
-                            style="cursor:pointer;">
                                 <div class="sidebar-thumb" style="position: relative;">
                                     @if ($playlistVideo->thumbnail)
                                         <img src="{{ route('media.thumbnail', $playlistVideo->thumbnail) }}"
@@ -678,6 +534,7 @@
                                     </div>
                                 </div>
                             </div>
+                        @endif
                     @endforeach
                 </div>
                 @if ($playlist->canEdit(Auth::user()))
@@ -686,26 +543,12 @@
                     </a>
                 @endif
             @else
-                {{-- Up Next header + autoplay toggle --}}
+                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
-                <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" id="recList">
+                    <div class="recommended-videos-list">
                         @foreach ($recommendedVideos as $recVideo)
                             <div class="sidebar-video-card"
-                                data-rec-url="{{ route('videos.show', $recVideo) }}"
+                                onclick="window.location.href='{{ 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) }}"
@@ -740,127 +583,8 @@
                         @endforeach
                     </div>
                 @else
-                    <div class="text-secondary" id="recList">No recommendations available yet. Check back later!</div>
+                    <div class="text-secondary">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>
 

resources/views/videos/types/match.blade.php

@@ -2539,180 +2539,48 @@
 
                     {{-- Playlist controls --}}
                     <div class="pl-controls-bar">
-                        <button class="pl-ctrl-btn" id="plPrevBtn" title="Previous" onclick="window.plPrev()">
+                        <button class="pl-ctrl-btn" id="plPrevBtn" title="Previous"
+                            @if(!($previousVideo ?? null)) disabled @endif
+                            onclick="window._ytpNav?.prev()">
                             <i class="bi bi-skip-start-fill"></i>
                         </button>
-                        <button class="pl-ctrl-btn" id="plNextBtn" title="Next" onclick="window.plNext()">
+                        <button class="pl-ctrl-btn" id="plNextBtn" title="Next"
+                            onclick="window._ytpNav?.next()">
                             <i class="bi bi-skip-end-fill"></i>
                         </button>
                         <div class="pl-ctrl-divider"></div>
-                        <button class="pl-ctrl-btn" id="plShuffleBtn" title="Shuffle" onclick="plToggleShuffle()">
+                        <button class="pl-ctrl-btn" id="plShuffleBtn" title="Shuffle"
+                            onclick="document.getElementById('ytpShuffleRow')?.click(); plSyncGeneric()">
                             <i class="bi bi-shuffle"></i>
                         </button>
-                        <button class="pl-ctrl-btn" id="plLoopBtn" title="Loop" onclick="plToggleLoop()">
+                        <button class="pl-ctrl-btn" id="plLoopBtn" title="Loop"
+                            onclick="document.getElementById('ytpLoopRow')?.click(); plSyncGeneric()">
                             <i class="bi bi-repeat"></i>
                         </button>
-                        <button class="pl-ctrl-btn pl-ctrl-autoplay" id="plAutoplayBtn" title="Autoplay" onclick="plToggleAutoplay()">
+                        <button class="pl-ctrl-btn pl-ctrl-autoplay" id="plAutoplayBtn" title="Autoplay"
+                            onclick="document.getElementById('ytpAutoplayRow')?.click(); plSyncGeneric()">
                             <i class="bi bi-play-circle"></i>
                             <span class="pl-autoplay-label">Autoplay</span>
                         </button>
                     </div>
 
                     <script>
-                    (function () {
+                    function plSyncGeneric(){
-                    var PL_ID      = '{{ $playlist->share_token }}';
+                        var sb=document.getElementById('plShuffleBtn'), lb=document.getElementById('plLoopBtn'), ab=document.getElementById('plAutoplayBtn');
-                    var PL_CURRENT = {{ $video->id }};
+                        var sr=document.getElementById('ytpShuffleRow'), lr=document.getElementById('ytpLoopRow'), ar=document.getElementById('ytpAutoplayRow');
-                    var PL_VIDEOS  = {!! $playlistVideos->map(fn($v) => ['id' => $v->id, 'url' => route('videos.show', $v).'?playlist='.$playlist->share_token])->values()->toJson() !!};
+                        if(sb&&sr) sb.classList.toggle('pl-ctrl-active',sr.classList.contains('is-on'));
-
+                        if(lb&&lr) lb.classList.toggle('pl-ctrl-active',lr.classList.contains('is-on'));
-                    function plGet(k,d){ var v=localStorage.getItem('pl_'+k+'_'+PL_ID); return v!==null?v:d; }
+                        if(ab&&ar) ab.classList.toggle('pl-ctrl-active',ar.classList.contains('is-on'));
-                    function plSet(k,v){ localStorage.setItem('pl_'+k+'_'+PL_ID,v); }
-
-                    var plAutoplay   = plGet('autoplay','1');
-                    var plLoop       = plGet('loop','off');
-                    var plShuffle    = plGet('shuffle','0');
-                    var plTransiting = false;
-
-                    function plShuffleOrder(){ var o=PL_VIDEOS.map(function(_,i){return i;}); for(var i=o.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=o[i];o[i]=o[j];o[j]=t;} localStorage.setItem('pl_shuffleOrder_'+PL_ID,JSON.stringify(o)); return o; }
-                    function plGetOrder(){ var r=localStorage.getItem('pl_shuffleOrder_'+PL_ID); if(r){try{return JSON.parse(r);}catch(e){}} return null; }
-
-                    function plAdj(curId) {
-                        var idx=PL_VIDEOS.findIndex(function(v){ return v.id===curId; });
-                        if(plShuffle==='1'){
-                            var ord=plGetOrder()||plShuffleOrder();
-                            var pos=ord.indexOf(idx);
-                            var pp=pos>0?pos-1:(plLoop==='all'?ord.length-1:-1);
-                            var np=pos<ord.length-1?pos+1:(plLoop==='all'?0:-1);
-                            return { prev:pp>=0?PL_VIDEOS[ord[pp]].url:'', next:np>=0?PL_VIDEOS[ord[np]].url:'' };
                     }
-                        return {
+                    document.addEventListener('DOMContentLoaded',function(){ setTimeout(plSyncGeneric,100); });
-                            prev: idx>0?PL_VIDEOS[idx-1].url:'',
+                    if(document.readyState!=='loading') setTimeout(plSyncGeneric,100);
-                            next: idx<PL_VIDEOS.length-1?PL_VIDEOS[idx+1].url:(plLoop==='all'?PL_VIDEOS[0].url:'')
-                        };
-                    }
-
-                    function plFmt(s){ var m=Math.floor(s/60),ss=Math.floor(s%60); return m+':'+(ss<10?'0':'')+ss; }
-
-                    async function plTransitionTo(url, pushHist) {
-                        if(!url||plTransiting) return;
-                        plTransiting=true;
-                        try {
-                            var m=url.match(/\/videos\/([^/?#]+)/);
-                            if(!m){ window.location.href=url; return; }
-                            var qs=url.indexOf('?')!==-1?url.substring(url.indexOf('?')):'';
-                            var resp=await fetch('/videos/'+m[1]+'/player-data'+qs);
-                            if(!resp.ok){ window.location.href=url; return; }
-                            var d=await resp.json();
-
-                            if(window._ytpLoadSource) window._ytpLoadSource(d.hls_url, d.stream_url);
-
-                            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=plFmt(d.duration);
-
-                            var ts=document.querySelector('.video-title span');
-                            if(ts) ts.textContent=d.title;
-                            document.title=d.title+' | {{ config("app.name") }}';
-
-                            var vid=document.getElementById('videoPlayer');
-                            if(vid) vid.loop=(plLoop==='one');
-
-                            PL_CURRENT=d.id;
-                            plRender();
-                            plHighlight(d.id);
-                            if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url);
-
-                            plSwapContent(url);
-                        } catch(e){
-                            console.warn('plTransitionTo',e);
-                            window.location.href=url;
-                        } finally {
-                            plTransiting=false;
-                        }
-                    }
-
-                    async function plSwapContent(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');
-
-                            var nv=doc.getElementById('vdbWrap'),ov=document.getElementById('vdbWrap');
-                            if(nv&&ov) ov.innerHTML=nv.innerHTML;
-
-                            var nc=doc.querySelector('.channel-row'),oc=document.querySelector('.channel-row');
-                            if(nc&&oc) oc.innerHTML=nc.innerHTML;
-
-                            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);
-                                }
-                            }
-                        } catch(e){ console.warn('plSwapContent',e); }
-                    }
-
-                    function plHighlight(activeId){
-                        document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){
-                            c.classList.toggle('current-video',parseInt(c.dataset.plId)===activeId);
-                        });
-                        var a=document.querySelector('.sidebar-video-card.current-video');
-                        if(a) a.scrollIntoView({behavior:'smooth',block:'nearest'});
-                    }
-
-                    function plRender(){
-                        var adj=plAdj(PL_CURRENT);
-                        var sb=document.getElementById('plShuffleBtn'),lb=document.getElementById('plLoopBtn');
-                        var ab=document.getElementById('plAutoplayBtn'),nb=document.getElementById('plNextBtn'),pb=document.getElementById('plPrevBtn');
-                        if(sb){ sb.classList.toggle('pl-ctrl-active',plShuffle==='1'); sb.title='Shuffle: '+(plShuffle==='1'?'On':'Off'); }
-                        if(lb){
-                            lb.classList.remove('pl-ctrl-active');
-                            if(plLoop==='all'){ lb.classList.add('pl-ctrl-active'); lb.innerHTML='<i class="bi bi-repeat"></i>'; lb.title='Loop: All'; }
-                            else if(plLoop==='one'){ lb.classList.add('pl-ctrl-active'); lb.innerHTML='<i class="bi bi-repeat-1"></i>'; lb.title='Loop: One'; }
-                            else { lb.innerHTML='<i class="bi bi-repeat"></i>'; lb.title='Loop: Off'; }
-                        }
-                        if(ab){ ab.classList.toggle('pl-ctrl-active',plAutoplay==='1'); ab.title='Autoplay: '+(plAutoplay==='1'?'On':'Off'); }
-                        if(nb) nb.disabled=!adj.next;
-                        if(pb) pb.disabled=!adj.prev;
-                    }
-
-                    window.plGoTo       = function(url){ if(url) plTransitionTo(url); };
-                    window.plNext       = function(){ var a=plAdj(PL_CURRENT); if(a.next) plTransitionTo(a.next); };
-                    window.plPrev       = function(){ var a=plAdj(PL_CURRENT); if(a.prev) plTransitionTo(a.prev); };
-                    window.plToggleShuffle  = function(){ plShuffle=plShuffle==='1'?'0':'1'; plSet('shuffle',plShuffle); if(plShuffle==='1') plShuffleOrder(); else localStorage.removeItem('pl_shuffleOrder_'+PL_ID); plRender(); };
-                    window.plToggleLoop     = function(){ var s=['off','all','one']; var i=s.indexOf(plLoop); plLoop=s[(i+1)%s.length]; plSet('loop',plLoop); plRender(); var v=document.getElementById('videoPlayer'); if(v) v.loop=(plLoop==='one'); };
-                    window.plToggleAutoplay = function(){ plAutoplay=plAutoplay==='1'?'0':'1'; plSet('autoplay',plAutoplay); plRender(); };
-
-                    window._ytpNavOverride = {
-                        next: function(_url){ window.plNext(); },
-                        prev: function(_url){ window.plPrev(); }
-                    };
-                    window._plOnVideoEnd = function(){ if(plLoop==='one') return; if(plAutoplay==='1') window.plNext(); };
-
-                    window.addEventListener('popstate',function(e){ if(e.state&&e.state.url) plTransitionTo(e.state.url,false); });
-
-                    function plInit(){
-                        var v=document.getElementById('videoPlayer');
-                        if(v&&plLoop==='one') v.loop=true;
-                        plRender();
-                        plHighlight(PL_CURRENT);
-                    }
-                    if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit();
-                    })();
                     </script>
 
                     <div class="recommended-videos-list">
                         @foreach ($playlistVideos as $index => $playlistVideo)
-                            @php $isCurrentTrack = $playlistVideo->id === $video->id; @endphp
+                            @if ($playlistVideo->id !== $video->id)
-                            <div class="sidebar-video-card{{ $isCurrentTrack ? ' current-video' : '' }}"
+                                <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
-                                data-pl-id="{{ $playlistVideo->id }}"
+                                    onclick="window.location.href='{{ route('videos.show', $playlistVideo) }}?playlist={{ $playlist->share_token }}'">
-                                onclick="plGoTo('{{ route('videos.show', $playlistVideo) }}?playlist={{ $playlist->share_token }}')"
-                                style="cursor:pointer;">
                                     <div class="sidebar-thumb" style="position: relative;">
                                         @if ($playlistVideo->thumbnail)
                                             <img src="{{ route('media.thumbnail', $playlistVideo->thumbnail) }}"
@@ -2750,6 +2618,7 @@
                                         </div>
                                     </div>
                                 </div>
+                            @endif
                         @endforeach
                     </div>
                     @if ($playlist->canEdit(Auth::user()))
@@ -2758,27 +2627,12 @@
                         </a>
                     @endif
                 @else
-                    {{-- Up Next header + autoplay toggle --}}
+                    <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
-                    <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" id="recList">
+                        <div class="recommended-videos-list">
                             @foreach ($recommendedVideos as $recVideo)
                                 <div class="sidebar-video-card"
-                                    data-rec-url="{{ route('videos.show', $recVideo) }}"
+                                    onclick="window.location.href='{{ route('videos.show', $recVideo) }}'">
-                                    onclick="recGoTo('{{ route('videos.show', $recVideo) }}')"
-                                    style="cursor:pointer;">
                                     <div class="sidebar-thumb" style="position: relative;">
                                         @if ($recVideo->thumbnail)
                                             <img src="{{ route('media.thumbnail', $recVideo->thumbnail) }}"
@@ -2814,113 +2668,8 @@
                             @endforeach
                         </div>
                     @else
-                        <div class="text-secondary" id="recList">No recommendations available yet. Check back later!</div>
+                        <div class="text-secondary">No recommendations available yet. Check back later!</div>
                     @endif
-
-                    <script>
-                    (function () {
-                    var recTransiting = false;
-                    var recAutoplay   = localStorage.getItem('ytpAutoplay_solo') !== '0';
-
-                    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');
-                        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();
-
-                            if (window._ytpLoadSource) window._ytpLoadSource(d.hls_url, d.stream_url);
-
-                            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);
-
-                            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);
-
-                            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');
-
-                            var nv=doc.getElementById('vdbWrap'),ov=document.getElementById('vdbWrap');
-                            if(nv&&ov) ov.innerHTML=nv.innerHTML;
-
-                            var nc=doc.querySelector('.channel-row'),oc=document.querySelector('.channel-row');
-                            if(nc&&oc) oc.innerHTML=nc.innerHTML;
-
-                            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);
-                                }
-                            }
-
-                            var nSide=doc.querySelector('.yt-sidebar-container');
-                            var oSide=document.querySelector('.yt-sidebar-container');
-                            if(nSide&&oSide){
-                                oSide.innerHTML=nSide.innerHTML;
-                                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); };
-
-                    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>
 

resources/views/videos/types/music.blade.php

@@ -299,14 +299,6 @@
             gap: 8px;
             margin-bottom: 8px;
             cursor: pointer;
-            border-radius: 8px;
-            padding: 4px;
-            transition: background .15s;
-        }
-
-        .sidebar-video-card.current-video {
-            background: rgba(239,68,68,.12);
-            border-left: 3px solid #ef4444;
         }
 
         .sidebar-thumb {
@@ -487,10 +479,12 @@
 
                 {{-- Playlist controls --}}
                 <div class="pl-controls-bar">
-                    <button class="pl-ctrl-btn" id="plPrevBtn" title="Previous" onclick="window.plPrev()">
+                    <button class="pl-ctrl-btn" id="plPrevBtn" title="Previous"
+                        @if(!($previousVideo ?? null)) disabled @endif
+                        onclick="plGoTo('{{ ($previousVideo ?? null) ? route('videos.show', $previousVideo).'?playlist='.$playlist->share_token : '' }}')">
                         <i class="bi bi-skip-start-fill"></i>
                     </button>
-                    <button class="pl-ctrl-btn" id="plNextBtn" title="Next" onclick="window.plNext()">
+                    <button class="pl-ctrl-btn" id="plNextBtn" title="Next" onclick="plNext()">
                         <i class="bi bi-skip-end-fill"></i>
                     </button>
                     <div class="pl-ctrl-divider"></div>
@@ -510,6 +504,9 @@
                 (function () {
                 var PL_ID       = '{{ $playlist->share_token }}';
                 var PL_CURRENT  = {{ $video->id }};
+                var PL_NEXT_URL = '{{ ($nextVideo ?? null) ? route("videos.show", $nextVideo)."?playlist=".$playlist->share_token : "" }}';
+                var PL_PREV_URL = '{{ ($previousVideo ?? null) ? route("videos.show", $previousVideo)."?playlist=".$playlist->share_token : "" }}';
+                var PL_FIRST_URL= '{{ $playlistVideos->count() ? route("videos.show", $playlistVideos->first())."?playlist=".$playlist->share_token : "" }}';
                 var PL_VIDEOS   = {!! $playlistVideos->map(fn($v) => ['id' => $v->id, 'url' => route('videos.show', $v).'?playlist='.$playlist->share_token])->values()->toJson() !!};
 
                 function plGet(k,d){ var v=localStorage.getItem('pl_'+k+'_'+PL_ID); return v!==null?v:d; }
@@ -518,132 +515,36 @@
                 var plAutoplay = plGet('autoplay','1');
                 var plLoop     = plGet('loop','off');
                 var plShuffle  = plGet('shuffle','0');
-                var plTransiting   = false;
 
-                // ── shuffle helpers ──────────────────────────────────────
                 function plShuffleOrder(){ var o=PL_VIDEOS.map(function(_,i){return i;}); for(var i=o.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=o[i];o[i]=o[j];o[j]=t;} localStorage.setItem('pl_shuffleOrder_'+PL_ID,JSON.stringify(o)); return o; }
                 function plGetOrder(){ var r=localStorage.getItem('pl_shuffleOrder_'+PL_ID); if(r){try{return JSON.parse(r);}catch(e){}} return null; }
 
-                // ── compute adjacent URLs from current state ──────────────
+                window.plGoTo = function(url){ if(url) window.location.href=url; };
-                function plAdj(curId) {
+                window.plNext = function(){
-                    var idx = PL_VIDEOS.findIndex(function(v){ return v.id===curId; });
                     if(plShuffle==='1'){
-                        var ord=plGetOrder()||plShuffleOrder();
+                        var order=plGetOrder()||plShuffleOrder();
-                        var pos=ord.indexOf(idx);
+                        var curIdx=PL_VIDEOS.findIndex(function(v){return v.id===PL_CURRENT;});
-                        var prevPos=pos>0?pos-1:(plLoop==='all'?ord.length-1:-1);
+                        var pos=order.indexOf(curIdx);
-                        var nextPos=pos<ord.length-1?pos+1:(plLoop==='all'?0:-1);
+                        var nxt=(pos+1)%order.length;
-                        return { prev: prevPos>=0?PL_VIDEOS[ord[prevPos]].url:'', next: nextPos>=0?PL_VIDEOS[ord[nextPos]].url:'' };
+                        if(pos===order.length-1&&plLoop!=='all') return;
+                        window.location.href=PL_VIDEOS[order[nxt]].url;
+                    } else {
+                        if(PL_NEXT_URL) window.location.href=PL_NEXT_URL;
+                        else if(plLoop==='all'&&PL_FIRST_URL) window.location.href=PL_FIRST_URL;
                     }
-                    return {
-                        prev: idx>0?PL_VIDEOS[idx-1].url:'',
-                        next: idx<PL_VIDEOS.length-1?PL_VIDEOS[idx+1].url:(plLoop==='all'?PL_VIDEOS[0].url:'')
                 };
-                }
 
-                // ── time formatter ───────────────────────────────────────
+                window._plOnTrackEnd = function(){
-                function plFmt(s){ var m=Math.floor(s/60),ss=Math.floor(s%60); return m+':'+(ss<10?'0':'')+ss; }
+                    if(plLoop==='one') return; // native loop handles it
+                    if(plAutoplay==='1') window.plNext();
+                };
 
-                // ── SPA transition — swap audio src + update UI ───────────
-                async function plTransitionTo(url, pushHist) {
-                    if (!url || plTransiting) return;
-                    plTransiting = true;
-                    try {
-                        var m = url.match(/\/videos\/([^/?#]+)/);
-                        if (!m) { window.location.href=url; return; }
-                        var qs = url.indexOf('?')!==-1 ? url.substring(url.indexOf('?')) : '';
-                        var resp = await fetch('/videos/'+m[1]+'/player-data'+qs);
-                        if (!resp.ok) { window.location.href=url; return; }
-                        var d = await resp.json();
-
-                        // swap audio src (keeps browser autoplay permission)
-                        var audio = document.getElementById('audioEl');
-                        if (audio) { audio.src=d.stream_url; audio.load(); }
-
-                        // update cover / slideshow
-                        var ci = document.getElementById('audioCoverImg');
-                        if (ci) ci.src = d.cover_url;
-                        var sa = document.getElementById('slideA');
-                        if (sa) sa.src = d.cover_url;
-
-                        // reset progress
-                        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=plFmt(d.duration);
-
-                        // update visible title
-                        var ts=document.querySelector('.video-title span');
-                        if(ts) ts.textContent=d.title;
-                        document.title=d.title+' | {{ config("app.name") }}';
-
-                        // update state
-                        PL_CURRENT = d.id;
-                        if(audio&&plLoop==='one') audio.loop=true; else if(audio) audio.loop=false;
-                        plRender();
-                        plHighlight(d.id);
-
-                        // history
-                        if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url);
-
-                        // play (user already interacted — browser allows this)
-                        if(audio) audio.play().catch(function(){});
-
-                        // async: swap description + comments from fetched page
-                        plSwapContent(url);
-                    } catch(e) {
-                        console.warn('plTransitionTo',e);
-                        window.location.href=url;
-                    } finally {
-                        plTransiting=false;
-                    }
-                }
-
-                // ── background page swap: description + comments ──────────
-                async function plSwapContent(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');
-
-                        // swap description box
-                        var nv=doc.getElementById('vdbWrap'), ov=document.getElementById('vdbWrap');
-                        if(nv&&ov) ov.innerHTML=nv.innerHTML;
-
-                        // swap channel row
-                        var nc=doc.querySelector('.channel-row'), oc=document.querySelector('.channel-row');
-                        if(nc&&oc) oc.innerHTML=nc.innerHTML;
-
-                        // swap comments (HTML + re-run its init script)
-                        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);
-                            }
-                        }
-                    } catch(e){ console.warn('plSwapContent',e); }
-                }
-
-                // ── sidebar highlight ────────────────────────────────────
-                function plHighlight(activeId) {
-                    document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){
-                        c.classList.toggle('current-video', parseInt(c.dataset.plId)===activeId);
-                    });
-                    var active=document.querySelector('.sidebar-video-card.current-video');
-                    if(active) active.scrollIntoView({behavior:'smooth',block:'nearest'});
-                }
-
-                // ── render control button states ─────────────────────────
                 function plRender(){
-                    var adj=plAdj(PL_CURRENT);
+                    var sb=document.getElementById('plShuffleBtn');
-                    var sb=document.getElementById('plShuffleBtn'),lb=document.getElementById('plLoopBtn');
+                    var lb=document.getElementById('plLoopBtn');
-                    var ab=document.getElementById('plAutoplayBtn'),nb=document.getElementById('plNextBtn'),pb=document.getElementById('plPrevBtn');
+                    var ab=document.getElementById('plAutoplayBtn');
+                    var nb=document.getElementById('plNextBtn');
+                    var pb=document.getElementById('plPrevBtn');
                     if(sb){ sb.classList.toggle('pl-ctrl-active',plShuffle==='1'); sb.title='Shuffle: '+(plShuffle==='1'?'On':'Off'); }
                     if(lb){
                         lb.classList.remove('pl-ctrl-active');
@@ -652,41 +553,29 @@
                         else { lb.innerHTML='<i class="bi bi-repeat"></i>'; lb.title='Loop: Off'; }
                     }
                     if(ab){ ab.classList.toggle('pl-ctrl-active',plAutoplay==='1'); ab.title='Autoplay: '+(plAutoplay==='1'?'On':'Off'); }
-                    if(nb) nb.disabled=!adj.next;
+                    if(nb) nb.disabled=!PL_NEXT_URL&&plLoop!=='all'&&plShuffle!=='1';
-                    if(pb) pb.disabled=!adj.prev;
+                    if(pb) pb.disabled=!PL_PREV_URL;
                 }
 
-                // ── public API ────────────────────────────────────────────
-                window.plGoTo = function(url){ if(url) plTransitionTo(url); };
-                window.plNext = function(){ var a=plAdj(PL_CURRENT); if(a.next) plTransitionTo(a.next); };
-                window.plPrev = function(){ var a=plAdj(PL_CURRENT); if(a.prev) plTransitionTo(a.prev); };
-                window._plOnTrackEnd = function(){ if(plLoop==='one') return; if(plAutoplay==='1') window.plNext(); };
-
                 window.plToggleShuffle = function(){ plShuffle=plShuffle==='1'?'0':'1'; plSet('shuffle',plShuffle); if(plShuffle==='1') plShuffleOrder(); else localStorage.removeItem('pl_shuffleOrder_'+PL_ID); plRender(); };
                 window.plToggleLoop    = function(){ var s=['off','all','one']; var i=s.indexOf(plLoop); plLoop=s[(i+1)%s.length]; plSet('loop',plLoop); plRender(); var a=document.getElementById('audioEl'); if(a) a.loop=(plLoop==='one'); };
                 window.plToggleAutoplay= function(){ plAutoplay=plAutoplay==='1'?'0':'1'; plSet('autoplay',plAutoplay); plRender(); };
 
-                // ── browser back/forward ──────────────────────────────────
+                // Apply state after audio player is ready
-                window.addEventListener('popstate', function(e){ if(e.state&&e.state.url) plTransitionTo(e.state.url, false); });
+                document.addEventListener('DOMContentLoaded', function(){
-
-                // ── init ──────────────────────────────────────────────────
-                function plInit(){
                     var a=document.getElementById('audioEl');
                     if(a&&plLoop==='one') a.loop=true;
                     plRender();
-                    plHighlight(PL_CURRENT);
+                });
-                }
+                if(document.readyState!=='loading'){ var a=document.getElementById('audioEl'); if(a&&plLoop==='one') a.loop=true; plRender(); }
-                if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit();
                 })();
                 </script>
 
                 <div class="recommended-videos-list">
                     @foreach ($playlistVideos as $index => $playlistVideo)
-                        @php $isCurrentTrack = $playlistVideo->id === $video->id; @endphp
+                        @if ($playlistVideo->id !== $video->id)
-                        <div class="sidebar-video-card{{ $isCurrentTrack ? ' current-video' : '' }}"
+                            <div class="sidebar-video-card{{ $playlistVideo->id === $video->id ? ' current-video' : '' }}"
-                            data-pl-id="{{ $playlistVideo->id }}"
+                                onclick="window.location.href='{{ route('videos.show', $playlistVideo) }}?playlist={{ $playlist->share_token }}'">
-                            onclick="plGoTo('{{ route('videos.show', $playlistVideo) }}?playlist={{ $playlist->share_token }}')"
-                            style="cursor:pointer;">
                                 <div class="sidebar-thumb" style="position: relative;">
                                     @if ($playlistVideo->thumbnail)
                                         <img src="{{ route('media.thumbnail', $playlistVideo->thumbnail) }}"
@@ -724,6 +613,7 @@
                                     </div>
                                 </div>
                             </div>
+                        @endif
                     @endforeach
                 </div>
                 @if ($playlist->canEdit(Auth::user()))
@@ -732,120 +622,12 @@
                     </a>
                 @endif
             @else
-                <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
+                <h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
-                    <h3 style="font-size:16px; font-weight:500; margin:0;">Up Next</h3>
-                    <button id="recAutoplayBtn" class="pl-ctrl-btn pl-ctrl-autoplay" title="Autoplay" onclick="recToggleAutoplay()" style="margin-left:auto;">
-                        <i class="bi bi-play-circle"></i>
-                        <span class="pl-autoplay-label">Autoplay</span>
-                    </button>
-                </div>
-
-                <script>
-                (function () {
-                var recTransiting = false;
-                var recAutoplay   = localStorage.getItem('ytpAutoplay_solo') !== '0';
-
-                function recRender() {
-                    var btn = document.getElementById('recAutoplayBtn');
-                    if (!btn) return;
-                    btn.classList.toggle('pl-ctrl-active', recAutoplay);
-                    btn.title = 'Autoplay: ' + (recAutoplay ? 'On' : 'Off');
-                }
-
-                async function recTransitionTo(url, pushHist) {
-                    if (recTransiting) return;
-                    recTransiting = true;
-                    try {
-                        var dataUrl = url.split('?')[0] + '/player-data';
-                        var resp = await fetch(dataUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
-                        if (!resp.ok) { window.location.href = url; return; }
-                        var d = await resp.json();
-
-                        var audio = document.getElementById('audioEl');
-                        if (audio) {
-                            audio.src = d.stream_url;
-                            audio.load();
-                            audio.play().catch(function(){});
-                        }
-
-                        var coverImg = document.querySelector('.audio-cover-img');
-                        if (coverImg) coverImg.src = d.cover_url || '';
-
-                        var titleEl = document.querySelector('.audio-title');
-                        if (titleEl) titleEl.textContent = d.title || '';
-
-                        if (pushHist !== false) history.pushState({ url: url }, '', url);
-
-                        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: { 'X-Requested-With': 'XMLHttpRequest' } });
-                        if (!resp.ok) return;
-                        var html = await resp.text();
-                        var parser = new DOMParser();
-                        var doc = parser.parseFromString(html, 'text/html');
-
-                        var newVdb = doc.getElementById('vdbWrap');
-                        var oldVdb = document.getElementById('vdbWrap');
-                        if (newVdb && oldVdb) oldVdb.innerHTML = newVdb.innerHTML;
-
-                        var newCh = doc.querySelector('.channel-row');
-                        var oldCh = document.querySelector('.channel-row');
-                        if (newCh && oldCh) oldCh.outerHTML = newCh.outerHTML;
-
-                        var newYtc = doc.getElementById('ytcSection');
-                        var oldYtc = document.getElementById('ytcSection');
-                        if (newYtc && oldYtc) {
-                            oldYtc.innerHTML = newYtc.innerHTML;
-                            var s = oldYtc.querySelector('script');
-                            if (s) { var ns = document.createElement('script'); ns.textContent = s.textContent; s.replaceWith(ns); }
-                        }
-
-                        var newSidebar = doc.querySelector('.yt-sidebar-container');
-                        var oldSidebar = document.querySelector('.yt-sidebar-container');
-                        if (newSidebar && oldSidebar) {
-                            oldSidebar.innerHTML = newSidebar.innerHTML;
-                            oldSidebar.querySelectorAll('script').forEach(function(s){
-                                var ns = document.createElement('script'); ns.textContent = s.textContent; s.replaceWith(ns);
-                            });
-                        }
-                    } catch(e) { console.warn('recSwapContent', e); }
-                }
-
-                window.recGoTo = function(url) { if (url) recTransitionTo(url); };
-                window.recToggleAutoplay = function() {
-                    recAutoplay = !recAutoplay;
-                    localStorage.setItem('ytpAutoplay_solo', recAutoplay ? '1' : '0');
-                    recRender();
-                };
-
-                window._plOnTrackEnd = 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.url) recTransitionTo(e.state.url, false); });
-
-                if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', recRender); else recRender();
-                })();
-                </script>
-
                 @if ($recommendedVideos && $recommendedVideos->count() > 0)
-                    <div class="recommended-videos-list" id="recList">
+                    <div class="recommended-videos-list">
                         @foreach ($recommendedVideos as $recVideo)
                             <div class="sidebar-video-card"
-                                data-rec-url="{{ route('videos.show', $recVideo) }}"
+                                onclick="window.location.href='{{ route('videos.show', $recVideo) }}'">
-                                onclick="recGoTo('{{ route('videos.show', $recVideo) }}')"
-                                style="cursor:pointer;">
                                 <div class="sidebar-thumb" style="position: relative;">
                                     @if ($recVideo->thumbnail)
                                         <img src="{{ route('media.thumbnail', $recVideo->thumbnail) }}"

routes/web.php

@@ -45,7 +45,6 @@ Route::get('/videos/{video}/download-mp3', [VideoController::class, 'downloadMp3
 Route::post('/videos/{video}/slideshow/generate', [VideoController::class, 'slideshowGenerate'])->name('videos.slideshow.generate');
 Route::get('/videos/{video}/slideshow/progress', [VideoController::class, 'slideshowProgress'])->name('videos.slideshow.progress');
 Route::get('/videos/{video}/recommendations', [VideoController::class, 'recommendations'])->name('videos.recommendations');
-Route::get('/videos/{video}/player-data', [VideoController::class, 'playerData'])->name('videos.playerData');
 Route::post('/videos/{video}/share', [VideoController::class, 'recordShare'])->name('videos.recordShare');
 Route::get('/videos/{video}/og-image', [VideoController::class, 'ogImage'])->name('videos.ogImage');
 Route::get('/s/{token}', [VideoController::class, 'accessShare'])->name('share.access');