Replace certain labels with clearer values

src/datastores/handlers/base.js

@@ -1,8 +1,34 @@
 import * as db from '../index'
 
+/* Mapping of older settings whose variable names have changed to their newer values */
+const outdatedSettings = {
+  defaultTheatreMode: 'defaultTheaterMode',
+  playNextVideo: 'enableAutoplay',
+  autoplayPlaylists: 'enablePlaylistAutoplay',
+  hideUnsubscribeButton: 'hideSubscribeButton',
+  autoplayVideos: 'startVideosAutomatically'
+}
+
 class Settings {
-  static find() {
-    return db.settings.findAsync({ _id: { $ne: 'bounds' } })
+  static async find() {
+    const settings = await db.settings.findAsync({ _id: { $ne: 'bounds' } })
+    // Apply existing values of outdated setting variables in the DB to their newer equivalents,
+    // then delete those older settings
+    const parseableSettings = {}
+    settings.forEach(({ _id, value }) => { parseableSettings[_id] = value })
+    for (const outdatedSetting of Object.keys(outdatedSettings)) {
+      const outdatedSettingInDB = parseableSettings[outdatedSetting]
+      if (!outdatedSettingInDB) {
+        return
+      }
+
+      const newSettingId = outdatedSettings[outdatedSetting]
+      const outdatedSettingValue = outdatedSettingInDB[1]
+      await this.upsert(newSettingId, outdatedSettingValue)
+      await this.delete(outdatedSetting)
+    }
+
+    return settings
   }
 
   static upsert(_id, value) {
@@ -13,6 +39,10 @@ class Settings {
     return db.settings.compactDatafileAsync()
   }
 
+  static delete(setting) {
+    return db.settings.removeAsync({ _id: setting })
+  }
+
   // ******************** //
   // Unique Electron main process handlers
   static _findAppReadyRelatedSettings() {

src/datastores/handlers/electron.js

@@ -15,6 +15,13 @@ class Settings {
       { action: DBActions.GENERAL.UPSERT, data: { _id, value } }
     )
   }
+
+  static delete(setting) {
+    return ipcRenderer.invoke(
+      IpcChannels.DB_SETTINGS,
+      { action: DBActions.GENERAL.DELETE, data: setting }
+    )
+  }
 }
 
 class History {

src/datastores/handlers/web.js

@@ -18,6 +18,10 @@ class Settings {
   static upsert(_id, value) {
     return baseHandlers.settings.upsert(_id, value)
   }
+
+  static delete(setting) {
+    return baseHandlers.settings.delete(setting)
+  }
 }
 
 class History {

src/main/index.js

@@ -834,7 +834,14 @@ function runApp() {
               // Do nothing for unmatched settings
           }
           return null
-
+        case DBActions.GENERAL.DELETE:
+          await baseHandlers.settings.delete(data)
+          syncOtherWindows(
+            IpcChannels.SYNC_SETTINGS,
+            event,
+            { event: SyncEvents.GENERAL.DELETE, data }
+          )
+          return null
         default:
           // eslint-disable-next-line no-throw-literal
           throw 'invalid settings db action'

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

@@ -137,7 +137,7 @@ export default defineComponent({
   methods: {
     handleHideRecommendedVideos: function (value) {
       if (value) {
-        this.updatePlayNextVideo(false)
+        this.updateEnableAutoplay(false)
       }
 
       this.updateHideRecommendedVideos(value)
@@ -202,8 +202,8 @@ export default defineComponent({
       'updateHidePlaylists',
       'updateHideLiveChat',
       'updateHideActiveSubscriptions',
-      'updatePlayNextVideo',
-      'updateDefaultTheatreMode',
+      'updateEnableAutoplay',
+      'updateDefaultTheaterMode',
       'updateHideVideoDescription',
       'updateHideComments',
       'updateHideCommentPhotos',

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

@@ -108,16 +108,16 @@ export default defineComponent({
       type: Array,
       default: () => ([])
     },
-    theatrePossible: {
+    theaterPossible: {
       type: Boolean,
       default: false
     },
-    useTheatreMode: {
+    useTheaterMode: {
       type: Boolean,
       default: false
     }
   },
-  emits: ['ended', 'error', 'ready', 'store-caption-list', 'timeupdate', 'toggle-theatre-mode'],
+  emits: ['ended', 'error', 'ready', 'store-caption-list', 'timeupdate', 'toggle-theater-mode'],
   data: function () {
     return {
       powerSaveBlocker: null,
@@ -175,7 +175,7 @@ export default defineComponent({
             'descriptionsButton',
             'subsCapsButton',
             'pictureInPictureToggle',
-            'toggleTheatreModeButton',
+            'toggleTheaterModeButton',
             'fullWindowButton',
             'qualitySelector',
             'fullscreenToggle'
@@ -213,8 +213,8 @@ export default defineComponent({
       }
     },
 
-    autoplayVideos: function () {
-      return this.$store.getters.getAutoplayVideos
+    startVideosAutomatically: function () {
+      return this.$store.getters.getStartVideosAutomatically
     },
 
     videoVolumeMouseScroll: function () {
@@ -397,7 +397,7 @@ export default defineComponent({
 
     this.createFullWindowButton()
     this.createLoopButton()
-    this.createToggleTheatreModeButton()
+    this.createToggleTheaterModeButton()
     this.createScreenshotButton()
     this.determineFormatType()
 
@@ -594,7 +594,7 @@ export default defineComponent({
           })
         }
 
-        if (this.autoplayVideos) {
+        if (this.startVideosAutomatically) {
           // Calling play() won't happen right away, so a quick timeout will make it function properly.
           setTimeout(() => {
             // `this.player` can be destroyed before this runs
@@ -1507,49 +1507,49 @@ export default defineComponent({
       videojs.registerComponent('fullWindowButton', fullWindowButton)
     },
 
-    createToggleTheatreModeButton: function () {
-      if (!this.theatrePossible) {
+    createToggleTheaterModeButton: function () {
+      if (!this.theaterPossible) {
         return
       }
 
-      const theatreModeActive = this.useTheatreMode ? ' vjs-icon-theatre-active' : ''
+      const theaterModeActive = this.useTheaterMode ? ' vjs-icon-theatre-active' : ''
 
-      const toggleTheatreMode = this.toggleTheatreMode
+      const toggleTheaterMode = this.toggleTheaterMode
 
       const VjsButton = videojs.getComponent('Button')
-      class toggleTheatreModeButton extends VjsButton {
+      class toggleTheaterModeButton extends VjsButton {
         handleClick() {
-          toggleTheatreMode()
+          toggleTheaterMode()
         }
 
         createControlTextEl(button) {
           button.classList.add('vjs-button-theatre')
-          button.title = 'Toggle Theatre Mode'
+          button.title = 'Toggle Theater Mode'
 
           const div = document.createElement('div')
-          div.id = 'toggleTheatreModeButton'
-          div.className = `vjs-icon-theatre-inactive${theatreModeActive} vjs-button`
+          div.id = 'toggleTheaterModeButton'
+          div.className = `vjs-icon-theatre-inactive${theaterModeActive} vjs-button`
 
           button.appendChild(div)
 
           return button
         }
       }
 
-      videojs.registerComponent('toggleTheatreModeButton', toggleTheatreModeButton)
+      videojs.registerComponent('toggleTheaterModeButton', toggleTheaterModeButton)
     },
 
-    toggleTheatreMode: function () {
+    toggleTheaterMode: function () {
       if (!this.player.isFullscreen_) {
-        const toggleTheatreModeButton = document.getElementById('toggleTheatreModeButton')
-        if (!this.useTheatreMode) {
-          toggleTheatreModeButton.classList.add('vjs-icon-theatre-active')
+        const toggleTheaterModeButton = document.getElementById('toggleTheaterModeButton')
+        if (!this.useTheaterMode) {
+          toggleTheaterModeButton.classList.add('vjs-icon-theatre-active')
         } else {
-          toggleTheatreModeButton.classList.remove('vjs-icon-theatre-active')
+          toggleTheaterModeButton.classList.remove('vjs-icon-theatre-active')
         }
       }
 
-      this.$emit('toggle-theatre-mode')
+      this.$emit('toggle-theater-mode')
     },
 
     createScreenshotButton: function () {
@@ -2283,8 +2283,8 @@ export default defineComponent({
             break
           case 'T':
           case 't':
-            // Toggle Theatre Mode
-            this.toggleTheatreMode()
+            // Toggle Theater Mode
+            this.toggleTheaterMode()
             break
           case 'U':
           case 'u':

src/renderer/components/parental-control-settings/parental-control-settings.js

@@ -13,8 +13,8 @@ export default defineComponent({
     hideSearchBar: function () {
       return this.$store.getters.getHideSearchBar
     },
-    hideUnsubscribeButton: function() {
-      return this.$store.getters.getHideUnsubscribeButton
+    hideSubscribeButton: function() {
+      return this.$store.getters.getHideSubscribeButton
     },
     showFamilyFriendlyOnly: function() {
       return this.$store.getters.getShowFamilyFriendlyOnly
@@ -23,7 +23,7 @@ export default defineComponent({
   methods: {
     ...mapActions([
       'updateHideSearchBar',
-      'updateHideUnsubscribeButton',
+      'updateHideSubscribeButton',
       'updateShowFamilyFriendlyOnly'
     ])
   }

src/renderer/components/parental-control-settings/parental-control-settings.vue

@@ -7,8 +7,8 @@
         <ft-toggle-switch
           :label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
           :compact="true"
-          :default-value="hideUnsubscribeButton"
-          @change="updateHideUnsubscribeButton"
+          :default-value="hideSubscribeButton"
+          @change="updateHideSubscribeButton"
         />
         <ft-toggle-switch
           :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"

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

@@ -65,16 +65,16 @@ export default defineComponent({
       return this.$store.getters.getBackendPreference
     },
 
-    autoplayVideos: function () {
-      return this.$store.getters.getAutoplayVideos
+    startVideosAutomatically: function () {
+      return this.$store.getters.getStartVideosAutomatically
     },
 
-    autoplayPlaylists: function () {
-      return this.$store.getters.getAutoplayPlaylists
+    enablePlaylistAutoplay: function () {
+      return this.$store.getters.getEnablePlaylistAutoplay
     },
 
-    playNextVideo: function () {
-      return this.$store.getters.getPlayNextVideo
+    enableAutoplay: function () {
+      return this.$store.getters.getEnableAutoplay
     },
 
     enableSubtitlesByDefault: function () {
@@ -117,8 +117,8 @@ export default defineComponent({
       return this.$store.getters.getAllowDashAv1Formats
     },
 
-    defaultTheatreMode: function () {
-      return this.$store.getters.getDefaultTheatreMode
+    defaultTheaterMode: function () {
+      return this.$store.getters.getDefaultTheaterMode
     },
 
     hideRecommendedVideos: function () {
@@ -280,13 +280,13 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'updateAutoplayVideos',
-      'updateAutoplayPlaylists',
-      'updatePlayNextVideo',
+      'updateStartVideosAutomatically',
+      'updateEnablePlaylistAutoplay',
+      'updateEnableAutoplay',
       'updateEnableSubtitlesByDefault',
       'updateForceLocalBackendForLegacy',
       'updateProxyVideos',
-      'updateDefaultTheatreMode',
+      'updateDefaultTheaterMode',
       'updateDefaultSkipInterval',
       'updateDefaultInterval',
       'updateDefaultVolume',

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

@@ -28,8 +28,8 @@
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Enable Theatre Mode by Default')"
           :compact="true"
-          :default-value="defaultTheatreMode"
-          @change="updateDefaultTheatreMode"
+          :default-value="defaultTheaterMode"
+          @change="updateDefaultTheaterMode"
         />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Scroll Volume Over Video Player')"
@@ -58,21 +58,22 @@
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Autoplay Videos')"
           :compact="true"
-          :default-value="autoplayVideos"
-          @change="updateAutoplayVideos"
+          :default-value="startVideosAutomatically"
+          @change="updateStartVideosAutomatically"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Autoplay Playlists')"
+          :label="$t('Settings.Player Settings.Play Next Video')"
           :compact="true"
-          :default-value="autoplayPlaylists"
-          @change="updateAutoplayPlaylists"
+          :disabled="hideRecommendedVideos"
+          :default-value="enableAutoplay"
+          @change="updateEnableAutoplay"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Play Next Video')"
+          :label="$t('Settings.Player Settings.Autoplay Playlists')"
           :compact="true"
-          :disabled="hideRecommendedVideos"
-          :default-value="playNextVideo"
-          @change="updatePlayNextVideo"
+          :disabled="enableAutoplay"
+          :default-value="enablePlaylistAutoplay"
+          @change="updateEnablePlaylistAutoplay"
         />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Display Play Button In Video Player')"

src/renderer/components/watch-video-info/watch-video-info.js

@@ -110,8 +110,8 @@ export default defineComponent({
       return this.$store.getters.getHideSharingActions
     },
 
-    hideUnsubscribeButton: function() {
-      return this.$store.getters.getHideUnsubscribeButton
+    hideSubscribeButton: function() {
+      return this.$store.getters.getHideSubscribeButton
     },
 
     currentLocale: function () {

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -222,7 +222,7 @@ export default defineComponent({
 
     if ('mediaSession' in navigator) {
       navigator.mediaSession.setActionHandler('previoustrack', this.playPreviousVideo)
-      navigator.mediaSession.setActionHandler('nexttrack', this.playNextVideo)
+      navigator.mediaSession.setActionHandler('nexttrack', this.enableAutoplay)
     }
   },
   beforeDestroy: function () {
@@ -294,7 +294,7 @@ export default defineComponent({
       }
     },
 
-    playNextVideo: function () {
+    enableAutoplay: function () {
       const playlistInfo = {
         playlistId: this.playlistId,
         playlistType: this.playlistType,