Replace certain labels with clearer values

src/datastores/handlers/base.js

@@ -13,6 +13,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

@@ -805,7 +805,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

@@ -134,7 +134,7 @@ export default defineComponent({
   methods: {
     handleHideRecommendedVideos: function (value) {
       if (value) {
-        this.updatePlayNextVideo(false)
+        this.updateEnableAutoplay(false)
       }
 
       this.updateHideRecommendedVideos(value)
@@ -196,8 +196,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,11 +108,11 @@ export default defineComponent({
       type: Array,
       default: () => ([])
     },
-    theatrePossible: {
+    theaterPossible: {
       type: Boolean,
       default: false
     },
-    useTheatreMode: {
+    useTheaterMode: {
       type: Boolean,
       default: false
     }
@@ -174,7 +174,7 @@ export default defineComponent({
             'descriptionsButton',
             'subsCapsButton',
             'pictureInPictureToggle',
-            'toggleTheatreModeButton',
+            'toggleTheaterModeButton',
             'fullWindowButton',
             'qualitySelector',
             'fullscreenToggle'
@@ -212,8 +212,8 @@ export default defineComponent({
       }
     },
 
-    autoplayVideos: function () {
-      return this.$store.getters.getAutoplayVideos
+    startVideosAutomatically: function () {
+      return this.$store.getters.getStartVideosAutomatically
     },
 
     videoVolumeMouseScroll: function () {
@@ -392,7 +392,7 @@ export default defineComponent({
 
     this.createFullWindowButton()
     this.createLoopButton()
-    this.createToggleTheatreModeButton()
+    this.createToggleTheaterModeButton()
     this.createScreenshotButton()
     this.determineFormatType()
 
@@ -589,7 +589,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
@@ -1494,49 +1494,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 () {
@@ -2231,8 +2231,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

@@ -68,16 +68,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
     },
 
     enableSubtitles: function () {
@@ -120,8 +120,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 () {
@@ -292,13 +292,13 @@ export default defineComponent({
     },
 
     ...mapActions([
-      'updateAutoplayVideos',
-      'updateAutoplayPlaylists',
-      'updatePlayNextVideo',
+      'updateStartVideosAutomatically',
+      'updateEnablePlaylistAutoplay',
+      'updateEnableAutoplay',
       'updateEnableSubtitles',
       'updateForceLocalBackendForLegacy',
       'updateProxyVideos',
-      'updateDefaultTheatreMode',
+      'updateDefaultTheaterMode',
       'updateDefaultSkipInterval',
       'updateDefaultInterval',
       'updateDefaultVolume',

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

@@ -29,8 +29,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')"
@@ -59,21 +59,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

@@ -109,8 +109,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-info/watch-video-info.vue

@@ -31,7 +31,7 @@
               {{ channelName }}
             </router-link>
             <ft-subscribe-button
-              v-if="!hideUnsubscribeButton"
+              v-if="!hideSubscribeButton"
               :channel-id="channelId"
               :channel-name="channelName"
               :channel-thumbnail="channelThumbnail"

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

@@ -157,7 +157,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 () {
@@ -209,7 +209,7 @@ export default defineComponent({
       }
     },
 
-    playNextVideo: function () {
+    enableAutoplay: function () {
       const playlistInfo = {
         playlistId: this.playlistId
       }

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

@@ -91,9 +91,9 @@
           :title="$t('Video.Play Next Video')"
           role="button"
           tabindex="0"
-          @click="playNextVideo"
-          @keydown.enter.prevent="playNextVideo"
-          @keydown.space.prevent="playNextVideo"
+          @click="enableAutoplay"
+          @keydown.enter.prevent="enableAutoplay"
+          @keydown.space.prevent="enableAutoplay"
         />
         <font-awesome-icon
           class="playlistIcon"

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

@@ -22,16 +22,16 @@ export default defineComponent({
     }
   },
   computed: {
-    playNextVideo: function () {
-      return this.$store.getters.getPlayNextVideo
+    enableAutoplay: function () {
+      return this.$store.getters.getEnableAutoplay
     },
     hideRecommendedVideos: function () {
       return this.$store.getters.getHideRecommendedVideos
     }
   },
   methods: {
     ...mapActions([
-      'updatePlayNextVideo'
+      'updateEnableAutoplay'
     ])
   }
 })