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

speed indicator and bigger speed zone

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-15 02:56:48 +02:00
parent 49698f56bf
commit 80a05e2672
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/s/js/scroller.js
View File

@@ -1363,8 +1363,9 @@
const _i = window.f0ckI18n || {};
actions.innerHTML = `
<button class="js-speed-hold-btn" aria-hidden="true" tabindex="-1"
style="width:46px;height:46px;background:none;border:none;padding:0;
cursor:pointer;opacity:0;pointer-events:all;flex-shrink:0;"
style="position:absolute; bottom:100%; left:-10px; right:-10px; height:100vh;
background:none; border:none; padding:0; cursor:pointer; opacity:0;
pointer-events:all; flex-shrink:0;"
title=""></button>
${window.scrollerLoggedIn ? `
<button class="scroll-btn js-fav-btn${item.is_faved ? ' faved' : ''}" title="${_i.favourite || 'Favourite'} (double-tap)">
@@ -1446,6 +1447,8 @@
speedActive = false;
const media = slide.querySelector('video') || slide.querySelector('audio');
if (media) media.playbackRate = 1;
const ind = document.getElementById('speed-indicator');
if (ind) ind.classList.remove('show');
}
};
@@ -1455,7 +1458,11 @@
speedTimer = setTimeout(() => {
speedActive = true;
const media = slide.querySelector('video') || slide.querySelector('audio');
if (media) media.playbackRate = 2;
if (media) {
media.playbackRate = 2;
const ind = document.getElementById('speed-indicator');
if (ind) ind.classList.add('show');
}
}, 150);
}, { passive: true });
}

10
views/scroller.html
View File

@@ -406,6 +406,15 @@
.loader-sub { font-size: .82rem; color: rgba(255,255,255,.4); letter-spacing: .1em; font-weight: 500; }
.loader-spinner { width: 28px; height: 28px; border: 2.5px solid rgba(255,255,255,.1); border-top-color: var(--accent, #fff); border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.speed-indicator {
position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.15); border-radius: 50px;
padding: 8px 16px; font-size: .8rem; font-weight: 800; color: var(--accent);
z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .15s;
display: flex; align-items: center; gap: 8px;
}
.speed-indicator.show { opacity: 1; }
/* ── YT EMBED ────────────────────────────────── */
.yt-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
@@ -1015,6 +1024,7 @@
<div class="loader-sub">{{ t('scroller.doomscroll') }}</div>
<div class="loader-spinner"></div>
</div>
<div id="speed-indicator" class="speed-indicator"><i class="fa-solid fa-forward"></i> 2x speed</div>
<!-- Top bar -->
<div id="scroller-topbar">