add custom integer playback speed to live view video player

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
     }

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()
 

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
   },