From 80a05e26724dc784f6c0485d3cc58bea1000e5e9 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Fri, 15 May 2026 02:56:48 +0200
Subject: [PATCH] speed indicator and bigger speed zone

---
 public/s/js/scroller.js | 13 ++++++++++---
 views/scroller.html     | 10 ++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/public/s/js/scroller.js b/public/s/js/scroller.js
index 60571a5..75cf8d6 100644
--- a/public/s/js/scroller.js
+++ b/public/s/js/scroller.js
@@ -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 });
     }
diff --git a/views/scroller.html b/views/scroller.html
index 345bc61..82b4cf7 100644
--- a/views/scroller.html
+++ b/views/scroller.html
@@ -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">