Add Setting to disable smooth scrolling

src/main/index.js

@@ -50,6 +50,18 @@ if (!isDev) {
     })
 
     app.on('ready', (event, commandLine, workingDirectory) => {
+      settingsDb.findOne({
+        _id: 'disableSmoothScrolling'
+      }, function (err, doc) {
+        if (err) {
+          app.exit(0)
+          return
+        }
+
+        if (doc !== null && doc.value) {
+          app.commandLine.appendSwitch('disable-smooth-scrolling')
+        }
+
         createWindow()
 
         if (isDev) {
@@ -60,6 +72,7 @@ if (!isDev) {
           mainWindow.webContents.openDevTools()
         }
       })
+    })
   } else {
     app.quit()
   }
@@ -69,6 +82,18 @@ if (!isDev) {
   })
 
   app.on('ready', () => {
+    settingsDb.findOne({
+      _id: 'disableSmoothScrolling'
+    }, function (err, doc) {
+      if (err) {
+        app.exit(0)
+        return
+      }
+
+      if (doc !== null && doc.value) {
+        app.commandLine.appendSwitch('disable-smooth-scrolling')
+      }
+
       createWindow()
 
       if (isDev) {
@@ -79,6 +104,7 @@ if (!isDev) {
         mainWindow.webContents.openDevTools()
       }
     })
+  })
 }
 
 async function installDevTools () {
@@ -206,6 +232,18 @@ function createWindow () {
       mainWindow.webContents.send('ping', process.argv)
     }
   })
+
+  ipcMain.on('disableSmoothScrolling', () => {
+    app.commandLine.appendSwitch('disable-smooth-scrolling')
+    mainWindow.close()
+    createWindow()
+  })
+
+  ipcMain.on('enableSmoothScrolling', () => {
+    app.commandLine.appendSwitch('enable-smooth-scrolling')
+    mainWindow.close()
+    createWindow()
+  })
 }
 
 app.on('window-all-closed', () => {

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

@@ -5,6 +5,7 @@ import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../ft-prompt/ft-prompt.vue'
 
 export default Vue.extend({
   name: 'ThemeSettings',
@@ -13,7 +14,8 @@ export default Vue.extend({
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-slider': FtSlider,
-    'ft-flex-box': FtFlexBox
+    'ft-flex-box': FtFlexBox,
+    'ft-prompt': FtPrompt
   },
   data: function () {
     return {
@@ -24,6 +26,12 @@ export default Vue.extend({
       minUiScale: 50,
       maxUiScale: 300,
       uiScaleStep: 5,
+      disableSmoothScrollingToggleValue: false,
+      showRestartPrompt: false,
+      restartPromptValues: [
+        'yes',
+        'no'
+      ],
       baseThemeValues: [
         'light',
         'dark',
@@ -62,6 +70,21 @@ export default Vue.extend({
       return this.$store.getters.getUiScale
     },
 
+    disableSmoothScrolling: function () {
+      return this.$store.getters.getDisableSmoothScrolling
+    },
+
+    restartPromptMessage: function () {
+      return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]')
+    },
+
+    restartPromptNames: function () {
+      return [
+        this.$t('Yes'),
+        this.$t('No')
+      ]
+    },
+
     baseThemeNames: function () {
       return [
         this.$t('Settings.Theme Settings.Base Theme.Light'),
@@ -96,6 +119,7 @@ export default Vue.extend({
     this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
     this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
     this.expandSideBar = localStorage.getItem('expandSideBar') === 'true'
+    this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
   },
   methods: {
     updateBaseTheme: function (theme) {
@@ -128,6 +152,30 @@ export default Vue.extend({
       this.updateUiScale(parseInt(value))
     },
 
+    handleRestartPrompt: function (value) {
+      this.disableSmoothScrollingToggleValue = value
+      this.showRestartPrompt = true
+    },
+
+    handleSmoothScrolling: function (value) {
+      this.showRestartPrompt = false
+
+      if (value === null || value === 'no') {
+        this.disableSmoothScrollingToggleValue = !this.disableSmoothScrollingToggleValue
+        return
+      }
+
+      this.updateDisableSmoothScrolling(this.disableSmoothScrollingToggleValue)
+
+      const electron = require('electron')
+
+      if (this.disableSmoothScrollingToggleValue) {
+        electron.ipcRenderer.send('disableSmoothScrolling')
+      } else {
+        electron.ipcRenderer.send('enableSmoothScrolling')
+      }
+    },
+
     updateMainColor: function (color) {
       const mainColor = `main${color}`
       const secColor = `sec${this.currentSecColor}`
@@ -158,7 +206,8 @@ export default Vue.extend({
 
     ...mapActions([
       'updateBarColor',
-      'updateUiScale'
+      'updateUiScale',
+      'updateDisableSmoothScrolling'
     ])
   }
 })

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

@@ -16,6 +16,11 @@
         :default-value="expandSideBar"
         @change="handleExpandSideBar"
       />
+      <ft-toggle-switch
+        :label="$t('Settings.Theme Settings.Disable Smooth Scrolling')"
+        :default-value="disableSmoothScrollingToggleValue"
+        @change="handleRestartPrompt"
+      />
     </ft-flex-box>
     <ft-flex-box>
       <ft-slider
@@ -52,6 +57,13 @@
         @change="updateSecColor"
       />
     </ft-flex-box>
+    <ft-prompt
+      v-if="showRestartPrompt"
+      :label="restartPromptMessage"
+      :option-names="restartPromptNames"
+      :option-values="restartPromptValues"
+      @click="handleSmoothScrolling"
+    />
   </ft-card>
 </template>
 

src/renderer/store/modules/settings.js

@@ -60,7 +60,7 @@ const state = {
   useTor: false,
   proxy: 'SOCKS5://127.0.0.1:9050',
   debugMode: false,
-  disctractionFreeMode: false,
+  disableSmoothScrolling: false,
   hideWatchedSubs: false,
   useRssFeeds: false,
   usingElectron: true,
@@ -191,6 +191,10 @@ const getters = {
     return state.usingElectron
   },
 
+  getDisableSmoothScrolling: () => {
+    return state.disableSmoothScrolling
+  },
+
   getHideVideoViews: () => {
     return state.hideVideoViews
   },
@@ -274,6 +278,9 @@ const actions = {
               webframe.setZoomFactor(parseInt(result.value) / 100)
               commit('setUiScale', result.value)
               break
+            case 'disableSmoothScrolling':
+              commit('setDisableSmoothScrolling', result.value)
+              break
             case 'hideWatchedSubs':
               commit('setHideWatchedSubs', result.value)
               break
@@ -584,6 +591,14 @@ const actions = {
     })
   },
 
+  updateDisableSmoothScrolling ({ commit }, disableSmoothScrolling) {
+    settingsDb.update({ _id: 'disableSmoothScrolling' }, { _id: 'disableSmoothScrolling', value: disableSmoothScrolling }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDisableSmoothScrolling', disableSmoothScrolling)
+      }
+    })
+  },
+
   updateHideVideoViews ({ commit }, hideVideoViews) {
     settingsDb.update({ _id: 'hideVideoViews' }, { _id: 'hideVideoViews', value: hideVideoViews }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -740,9 +755,6 @@ const mutations = {
   setDebugMode (state, debugMode) {
     state.debugMode = debugMode
   },
-  setDistractionFreeMode (state, disctractionFreeMode) {
-    state.disctractionFreeMode = disctractionFreeMode
-  },
   setHideWatchedSubs (state, hideWatchedSubs) {
     state.hideWatchedSubs = hideWatchedSubs
   },
@@ -752,6 +764,9 @@ const mutations = {
   setUsingElectron (state, usingElectron) {
     state.usingElectron = usingElectron
   },
+  setDisableSmoothScrolling (state, disableSmoothScrolling) {
+    state.disableSmoothScrolling = disableSmoothScrolling
+  },
   setVideoView (state, videoView) {
     state.videoView = videoView
   },

static/locales/en-US.yaml

@@ -90,6 +90,7 @@ History:
 Settings:
   # On Settings Page
   Settings: Settings
+  The app needs to restart for changes to take effect. Restart and apply change?: The app needs to restart for changes to take effect. Restart and apply change?
   General Settings:
     General Settings: General Settings
     Check for Updates: Check for Updates
@@ -121,6 +122,7 @@ Settings:
     Theme Settings: Theme Settings
     Match Top Bar with Main Color: Match Top Bar with Main Color
     Expand Side Bar by Default: Expand Side Bar by Default
+    Disable Smooth Scrolling: Disable Smooth Scrolling
     UI Scale: UI Scale
     Base Theme:
       Base Theme: Base Theme