kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

add flash fullscreen button

Browse Source
This commit is contained in:
Kibi Kelburton
2026-06-12 01:58:28 +02:00
parent 7b599e3afa
commit 83f3980300
2 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/s/css/f0ckm.css
View File

@@ -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);

38
public/s/js/f0ckm.js
View File

@@ -1840,8 +1840,32 @@ window.cancelAnimFrame = (function () {
<button class="ruffle-danmaku-toggle${dmOn ? ' active' : ''}" title="Toggle Danmaku">
<i class="fa-solid fa-bars-staggered"></i>
</button>
<button class="ruffle-fullscreen-toggle" title="Toggle Fullscreen">
<i class="fa-solid fa-expand"></i>
</button>
`);
// 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 = '<i class="fa-solid fa-compress"></i>';
} else {
fsBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
}
});
}
// 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 });
}
}
}
}