{ this._loading = false; }); }, // Keluar dari fullscreen (native maupun fallback CSS) pada player // selain `keep`. _exitOtherFullscreens(keep) { const keepPlayer = keep ? (keep._player ? keep._player.player : keep._hlsPlayer) : null; const keepTarget = keepPlayer && keepPlayer.fullscreen ? keepPlayer.fullscreen.target : null; ['anime-player-container', 'hls-player-container'].forEach((id) => { const oc = document.getElementById(id); if (!oc || oc === keep) return; const op = oc._player ? oc._player.player : oc._hlsPlayer; try { if (!op || !op.fullscreen || !op.fullscreen.active) return; // Target fullscreen sama (`.player-fs-shell` dipakai bersama // kedua player) -> JANGAN di-exit; itu justru menutup // fullscreen yang sedang aktif. if (keepTarget && op.fullscreen.target === keepTarget) return; op.fullscreen.exit(); } catch (e) {} }); }, _reenterFullscreen(container, attempts) { if (!container) return; attempts = attempts || 0; if (attempts > 60) return; const retry = (delay) => setTimeout(() => this._reenterFullscreen(container, attempts + 1), delay || 200); const pe = container.querySelector('.plyr'); const p = container._player ? (container._player.player || null) : (container._hlsPlayer || null); if (!p || !p.fullscreen) { retry(); return; } // Sudah fullscreen di player ini (native atau fallback CSS)? if (p.fullscreen.active) { const nf = document.fullscreenElement; if (!nf || !pe || nf === pe || pe.contains(nf) || nf.contains(pe)) return; } // Player yang baru ditinggalkan harus keluar dulu -- baik native // (document.fullscreenElement) maupun fallback CSS (class), karena // di mode fallback document.fullscreenElement selalu null. this._exitOtherFullscreens(container); // Native: tunggu sampai browser benar-benar melepas fullscreen. if (document.fullscreenElement) { retry(); return; } // Frame tujuan harus sudah ter-render (Alpine x-show), kalau tidak // fullscreen ke elemen yang belum tampil akan kosong. const frame = container.closest('.watch-player-frame'); if (frame && window.getComputedStyle(frame).display === 'none') { retry(); return; } if (!pe) { retry(); return; } // Plyr's fullscreen.enter() TIDAK mengembalikan promise -> jangan pakai // .catch() (dulu melempar TypeError dan bikin re-enter tak pernah jalan). // requestFullscreen juga bisa ditolak (butuh user gesture), jadi hasilnya // dipantau lewat retry, bukan dianggap sukses begitu saja. try { if (!p.fullscreen.active) p.fullscreen.enter(); } catch (e) { retry(300); return; } retry(300); }, loadPage(page) { if (this._loadingGrid) return; this._loadingGrid = true; const params = new URLSearchParams({ page: page || 1, ep: this.currentEpisodeId, sort: this.epSort, search: this.epSearch }); fetch('/anime/tokyo-ghoulre/episodes/grid?' + params.toString()) .then(r => r.json()) .then(d => { if (this.$refs.sidebarEpList) this.$refs.sidebarEpList.innerHTML = d.sidebar_episodes; if (this.$refs.sidebarPag) this.$refs.sidebarPag.innerHTML = d.pagination; this._loadingGrid = false; }) .catch(() => { this._loadingGrid = false; }); }, applyEpSearch() { this.loadPage(1); } }" class="">