feat: update neko base to v1.5.0, fix scroll defaults and Vue 2 reactivity

- Bump neko base image to 3.0.8-v1.5.0 (XI2.1 smooth scrolling support)
- Default scroll_invert to false (works with --disable-features=ScrollLatching)
- Add useDefineForClassFields: false to tsconfig for Vue 2 compatibility
- Use document-level wheel listener with capture: true for reliable interception
- Send scroll deltas directly without rAF batching or accumulation
- Extract magic numbers into named constants (SCROLL_SENSITIVITY_BASE, INT16_MAX)

Made-with: Cursor

Author: hiroTamada

images/chromium-headful/Dockerfile

@@ -146,8 +146,7 @@ RUN --mount=type=cache,target=/tmp/cache/ffmpeg,sharing=locked,id=$CACHEIDPREFIX
     rm -rf /tmp/ffmpeg*
 EOT
 
-FROM ghcr.io/kernel/neko/base:3.0.8-v1.4.0 AS neko
-# TODO: update to xi2-scroll tag once kernel/neko#12 is merged and tagged
+FROM ghcr.io/kernel/neko/base:3.0.8-v1.5.0 AS neko
 FROM node:22-bullseye-slim AS node-22
 FROM docker.io/ubuntu:22.04
 

images/chromium-headful/client/src/components/video.vue

@@ -230,6 +230,8 @@
   import GuacamoleKeyboard from '~/utils/guacamole-keyboard.ts'
 
   const WHEEL_LINE_HEIGHT = 19
+  const SCROLL_SENSITIVITY_BASE = 10
+  const INT16_MAX = 32767
 
   @Component({
     name: 'neko-video',
@@ -534,7 +536,7 @@
         if (this.locked) return
         this.onWheel(e)
       }
-      this._overlay.addEventListener('wheel', this._wheelHandler, { passive: false })
+      document.addEventListener('wheel', this._wheelHandler, { passive: false, capture: true })
 
       /* Initialize Guacamole Keyboard */
       this.keyboard.onkeydown = (key: number) => {
@@ -562,13 +564,9 @@
 
     beforeDestroy() {
       if (this._wheelHandler) {
-        this._overlay.removeEventListener('wheel', this._wheelHandler)
+        document.removeEventListener('wheel', this._wheelHandler, { capture: true })
         this._wheelHandler = null
       }
-      if (this._scrollRaf !== null) {
-        cancelAnimationFrame(this._scrollRaf)
-        this._scrollRaf = null
-      }
       this.observer.disconnect()
       this.$accessor.video.setPlayable(false)
       /* Guacamole Keyboard does not provide destroy functions */
@@ -725,11 +723,6 @@
       })
     }
 
-    private _scrollAccX = 0
-    private _scrollAccY = 0
-    private _scrollCtrl = false
-    private _scrollRaf: number | null = null
-
     onWheel(e: WheelEvent) {
       this.sendMousePos(e)
 
@@ -746,24 +739,12 @@
         y *= -1
       }
 
-      const sensitivity = this.scroll / 10
-      this._scrollAccX += x * sensitivity
-      this._scrollAccY += y * sensitivity
-      this._scrollCtrl = e.ctrlKey || e.metaKey
-
-      if (this._scrollRaf === null) {
-        this._scrollRaf = requestAnimationFrame(() => {
-          this._scrollRaf = null
-          const dx = Math.max(-32767, Math.min(32767, Math.round(this._scrollAccX)))
-          const dy = Math.max(-32767, Math.min(32767, Math.round(this._scrollAccY)))
-          const ctrl = this._scrollCtrl
-          this._scrollAccX -= dx
-          this._scrollAccY -= dy
-          this._scrollCtrl = false
-          if (dx !== 0 || dy !== 0) {
-            this.$client.sendData('wheel', { x: dx, y: dy, controlKey: ctrl })
-          }
-        })
+      const sensitivity = this.scroll / SCROLL_SENSITIVITY_BASE
+      const dx = Math.max(-INT16_MAX, Math.min(INT16_MAX, Math.round(x * sensitivity)))
+      const dy = Math.max(-INT16_MAX, Math.min(INT16_MAX, Math.round(y * sensitivity)))
+
+      if (dx !== 0 || dy !== 0) {
+        this.$client.sendData('wheel', { x: dx, y: dy, controlKey: e.ctrlKey || e.metaKey })
       }
     }
 

images/chromium-headful/client/src/store/settings.ts

@@ -12,7 +12,7 @@ interface KeyboardLayouts {
 export const state = () => {
   return {
     scroll: get<number>('scroll', 10),
-    scroll_invert: get<boolean>('scroll_invert', true),
+    scroll_invert: get<boolean>('scroll_invert', false),
     autoplay: get<boolean>('autoplay', true),
     ignore_emotes: get<boolean>('ignore_emotes', false),
     chat_sound: get<boolean>('chat_sound', true),

images/chromium-headful/client/tsconfig.json

@@ -7,6 +7,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,