Customize max playback rate and playback rate interval

src/renderer/components/ft-video-player/ft-video-player.js

@@ -126,21 +126,7 @@ export default Vue.extend({
             'qualitySelector',
             'fullscreenToggle'
           ]
-        },
-        playbackRates: [
-          0.25,
-          0.5,
-          0.75,
-          1,
-          1.25,
-          1.5,
-          1.75,
-          2,
-          2.25,
-          2.5,
-          2.75,
-          3
-        ]
+        }
       }
     }
   },
@@ -200,6 +186,27 @@ export default Vue.extend({
 
     displayVideoPlayButton: function() {
       return this.$store.getters.getDisplayVideoPlayButton
+    },
+
+    maxVideoPlaybackRate: function () {
+      return parseInt(this.$store.getters.getMaxVideoPlaybackRate)
+    },
+
+    videoPlaybackRateInterval: function () {
+      return parseFloat(this.$store.getters.getVideoPlaybackRateInterval)
+    },
+
+    playbackRates: function () {
+      const playbackRates = []
+      let i = this.videoPlaybackRateInterval
+
+      while (i <= this.maxVideoPlaybackRate) {
+        playbackRates.push(i)
+        i = i + this.videoPlaybackRateInterval
+        i = parseFloat(i.toFixed(2))
+      }
+
+      return playbackRates
     }
   },
   watch: {
@@ -216,6 +223,8 @@ export default Vue.extend({
       this.volume = volume
     }
 
+    this.dataSetup.playbackRates = this.playbackRates
+
     this.createFullWindowButton()
     this.createLoopButton()
     this.createToggleTheatreModeButton()
@@ -983,7 +992,7 @@ export default Vue.extend({
     changePlayBackRate: function (rate) {
       const newPlaybackRate = (this.player.playbackRate() + rate).toFixed(2)
 
-      if (newPlaybackRate >= 0.25 && newPlaybackRate <= 8) {
+      if (newPlaybackRate >= this.videoPlaybackRateInterval && newPlaybackRate <= this.maxVideoPlaybackRate) {
         this.player.playbackRate(newPlaybackRate)
       }
     },
@@ -1515,13 +1524,13 @@ export default Vue.extend({
             // O Key
             // Decrease playback rate by 0.25x
             event.preventDefault()
-            this.changePlayBackRate(-0.25)
+            this.changePlayBackRate(-this.videoPlaybackRateInterval)
             break
           case 80:
             // P Key
             // Increase playback rate by 0.25x
             event.preventDefault()
-            this.changePlayBackRate(0.25)
+            this.changePlayBackRate(this.videoPlaybackRateInterval)
             break
           case 70:
             // F Key

src/renderer/components/player-settings/player-settings.js

@@ -30,6 +30,12 @@ export default Vue.extend({
         480,
         720,
         1080
+      ],
+      playbackRateIntervalValues: [
+        0.1,
+        0.25,
+        0.5,
+        1
       ]
     }
   },
@@ -106,6 +112,14 @@ export default Vue.extend({
       return this.$store.getters.getDisplayVideoPlayButton
     },
 
+    maxVideoPlaybackRate: function () {
+      return parseInt(this.$store.getters.getMaxVideoPlaybackRate)
+    },
+
+    videoPlaybackRateInterval: function () {
+      return this.$store.getters.getVideoPlaybackRateInterval
+    },
+
     formatNames: function () {
       return [
         this.$t('Settings.Player Settings.Default Video Format.Dash Formats'),
@@ -143,7 +157,9 @@ export default Vue.extend({
       'updateDefaultQuality',
       'updateVideoVolumeMouseScroll',
       'updateVideoPlaybackRateMouseScroll',
-      'updateDisplayVideoPlayButton'
+      'updateDisplayVideoPlayButton',
+      'updateMaxVideoPlaybackRate',
+      'updateVideoPlaybackRateInterval'
     ])
   }
 })

src/renderer/components/player-settings/player-settings.vue

@@ -115,6 +115,22 @@
         value-extension="×"
         @change="updateDefaultPlayback"
       />
+      <ft-slider
+        :label="$t('Settings.Player Settings.Max Video Playback Rate')"
+        :default-value="maxVideoPlaybackRate"
+        :min-value="2"
+        :max-value="10"
+        :step="1"
+        value-extension="x"
+        @change="updateMaxVideoPlaybackRate"
+      />
+      <ft-select
+        :placeholder="$t('Settings.Player Settings.Video Playback Rate Interval')"
+        :value="videoPlaybackRateInterval"
+        :select-names="playbackRateIntervalValues"
+        :select-values="playbackRateIntervalValues"
+        @change="updateVideoPlaybackRateInterval"
+      />
     </ft-flex-box>
     <ft-flex-box>
       <ft-select

src/renderer/store/modules/settings.js

@@ -203,6 +203,7 @@ const state = {
   hideLabelsSideBar: false,
   landingPage: 'subscriptions',
   listType: 'grid',
+  maxVideoPlaybackRate: 3,
   playNextVideo: false,
   proxyHostname: '127.0.0.1',
   proxyPort: '9050',
@@ -220,6 +221,7 @@ const state = {
   useSponsorBlock: false,
   videoVolumeMouseScroll: false,
   videoPlaybackRateMouseScroll: false,
+  videoPlaybackRateInterval: 0.25,
   downloadFolderPath: ''
 }
 

static/locales/en-US.yaml

@@ -212,6 +212,8 @@ Settings:
     Fast-Forward / Rewind Interval: Fast-Forward / Rewind Interval
     Default Volume: Default Volume
     Default Playback Rate: Default Playback Rate
+    Max Video Playback Rate: Max Video Playback Rate
+    Video Playback Rate Interval: Video Playback Rate Interval
     Default Video Format:
       Default Video Format: Default Video Format
       Dash Formats: DASH Formats