From 0685c59e444706573a4da7c1e65b42d0eaa0823e Mon Sep 17 00:00:00 2001
From: ehfeng <279398+ehfeng@users.noreply.github.com>
Date: Tue, 19 May 2026 20:17:46 +0000
Subject: [PATCH] add custom integer playback speed to live view video player

Adds a numeric input control to the video controls bar that lets users
set the player's playbackRate to any integer >= 1, removing the prior
implicit 2x cap from the native browser controls.
---
 .../client/src/components/controls.vue        | 56 +++++++++++++++++++
 .../client/src/components/video.vue           | 12 ++++
 .../client/src/store/video.ts                 |  7 +++
 3 files changed, 75 insertions(+)

diff --git a/images/chromium-headful/client/src/components/controls.vue b/images/chromium-headful/client/src/components/controls.vue
index 90111b1e..2694671e 100644
--- a/images/chromium-headful/client/src/components/controls.vue
+++ b/images/chromium-headful/client/src/components/controls.vue
@@ -53,6 +53,23 @@
         @click.stop.prevent="toggleMedia"
       />
     </li>
+    <li class="playback-speed">
+      <input
+        type="number"
+        min="1"
+        step="1"
+        v-model.number="playbackRate"
+        @keydown.stop
+        v-tooltip="{
+          content: 'Playback speed (integer)',
+          placement: 'top',
+          offset: 5,
+          boundariesElement: 'body',
+          delay: { show: 300, hide: 100 },
+        }"
+      />
+      <span class="x">x</span>
+    </li>
     <!--KERNEL
     <li>
       <div class="volume">
@@ -187,6 +204,36 @@
         }
       }
 
+      &.playback-speed {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        margin: 0 5px;
+        color: rgba($color: $text-normal, $alpha: 0.8);
+
+        input[type='number'] {
+          width: 40px;
+          padding: 2px 4px;
+          border: 1px solid rgba($color: #fff, $alpha: 0.2);
+          border-radius: 4px;
+          background: rgba($color: #000, $alpha: 0.3);
+          color: $text-normal;
+          font-size: 14px;
+          text-align: right;
+          -moz-appearance: textfield;
+
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+        }
+
+        .x {
+          margin-left: 2px;
+        }
+      }
+
       .switch {
         margin: 0 5px;
         display: block;
@@ -288,6 +335,15 @@
       return this.$accessor.video.muted || this.volume === 0
     }
 
+    get playbackRate() {
+      return this.$accessor.video.playbackRate
+    }
+
+    set playbackRate(rate: number) {
+      const int = Math.floor(Number(rate))
+      this.$accessor.video.setPlaybackRate(Number.isFinite(int) && int >= 1 ? int : 1)
+    }
+
     get playing() {
       return this.$accessor.video.playing
     }
diff --git a/images/chromium-headful/client/src/components/video.vue b/images/chromium-headful/client/src/components/video.vue
index e040891e..702a36a7 100644
--- a/images/chromium-headful/client/src/components/video.vue
+++ b/images/chromium-headful/client/src/components/video.vue
@@ -298,6 +298,10 @@
       return this.$accessor.video.muted
     }
 
+    get playbackRate() {
+      return this.$accessor.video.playbackRate
+    }
+
     get stream() {
       return this.$accessor.video.stream
     }
@@ -409,6 +413,13 @@
       }
     }
 
+    @Watch('playbackRate')
+    onPlaybackRateChanged(rate: number) {
+      if (this._video && this._video.playbackRate !== rate) {
+        this._video.playbackRate = rate
+      }
+    }
+
     @Watch('muted')
     onMutedChanged(muted: boolean) {
       if (this._video && this._video.muted != muted) {
@@ -485,6 +496,7 @@
       this._container.addEventListener('resize', this.onResize)
       this.onVolumeChanged(this.volume)
       this.onMutedChanged(this.muted)
+      this.onPlaybackRateChanged(this.playbackRate)
       this.onStreamChanged(this.stream)
       this.onResize()
 
diff --git a/images/chromium-headful/client/src/store/video.ts b/images/chromium-headful/client/src/store/video.ts
index 9959500e..6c1847e1 100644
--- a/images/chromium-headful/client/src/store/video.ts
+++ b/images/chromium-headful/client/src/store/video.ts
@@ -18,6 +18,7 @@ export const state = () => ({
   vertical: 9,
   volume: get<number>('volume', 100),
   muted: get<boolean>('muted', false),
+  playbackRate: 1,
   playing: false,
   playable: false,
 })
@@ -137,6 +138,11 @@ export const mutations = mutationTree(state, {
     set('volume', volume)
   },
 
+  setPlaybackRate(state, rate: number) {
+    const int = Math.floor(rate)
+    state.playbackRate = int >= 1 ? int : 1
+  },
+
   setStream(state, index: number) {
     state.index = index
   },
@@ -161,6 +167,7 @@ export const mutations = mutationTree(state, {
     state.rate = 30
     state.horizontal = 16
     state.vertical = 9
+    state.playbackRate = 1
     state.playing = false
     state.playable = false
   },