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 });
+ }
}
}
}