diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index cdbb404..1bcd45f 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -4938,10 +4938,9 @@ body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before { } /* Danmaku toggle button on Ruffle embeds — appears on hover */ -.ruffle-danmaku-toggle { +.ruffle-danmaku-toggle, .ruffle-fullscreen-toggle { position: absolute; bottom: 10px; - left: 10px; z-index: 20; display: flex; align-items: center; @@ -4961,13 +4960,23 @@ body.layout-legacy.sidebar-right-hidden .embed-responsive-16by9::before { transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } +.ruffle-danmaku-toggle { + left: 10px; +} + +.ruffle-fullscreen-toggle { + right: 10px; +} + .embed-responsive:hover .ruffle-danmaku-toggle, -#ruffle-container:hover .ruffle-danmaku-toggle { +#ruffle-container:hover .ruffle-danmaku-toggle, +.embed-responsive:hover .ruffle-fullscreen-toggle, +#ruffle-container:hover .ruffle-fullscreen-toggle { opacity: 1; pointer-events: auto; } -.ruffle-danmaku-toggle:hover { +.ruffle-danmaku-toggle:hover, .ruffle-fullscreen-toggle:hover { background: rgba(0, 0, 0, 0.75); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index f85b22f..fcdd53f 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -1840,8 +1840,32 @@ window.cancelAnimFrame = (function () { + `); + // Wire up fullscreen toggle + const fsBtn = container.querySelector('.ruffle-fullscreen-toggle'); + if (fsBtn) { + fsBtn.addEventListener('click', (e) => { + e.stopPropagation(); + if (!document.fullscreenElement) { + container.requestFullscreen().catch(err => console.error(err)); + } else { + document.exitFullscreen(); + } + }); + + document.addEventListener('fullscreenchange', () => { + if (document.fullscreenElement === container) { + fsBtn.innerHTML = ''; + } else { + fsBtn.innerHTML = ''; + } + }); + } + // Wire up danmaku toggle const dmBtn = container.querySelector('.ruffle-danmaku-toggle'); if (dmBtn) { @@ -1868,10 +1892,18 @@ window.cancelAnimFrame = (function () { const showDmBtn = () => { dmBtn.style.opacity = '1'; dmBtn.style.pointerEvents = 'auto'; + if (fsBtn) { + fsBtn.style.opacity = '1'; + fsBtn.style.pointerEvents = 'auto'; + } clearTimeout(dmHideTimer); dmHideTimer = setTimeout(() => { dmBtn.style.opacity = ''; dmBtn.style.pointerEvents = ''; + if (fsBtn) { + fsBtn.style.opacity = ''; + fsBtn.style.pointerEvents = ''; + } }, 3000); }; container.addEventListener('touchstart', showDmBtn, { passive: true }); @@ -1880,6 +1912,12 @@ window.cancelAnimFrame = (function () { e.stopPropagation(); showDmBtn(); }, { passive: true }); + if (fsBtn) { + fsBtn.addEventListener('touchstart', (e) => { + e.stopPropagation(); + showDmBtn(); + }, { passive: true }); + } } } }