Fix Locale issues and add Privacy Settings card to settings page

src/renderer/components/ft-prompt/ft-prompt.css

@@ -0,0 +1,19 @@
+.prompt {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 10;
+  padding: 15px;
+}
+
+.promptCard {
+  width: 95%;
+  margin-top: 40%;
+}
+
+.center {
+  text-align: center;
+}

src/renderer/components/ft-prompt/ft-prompt.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+import FtButton from '../../components/ft-button/ft-button.vue'
+
+export default Vue.extend({
+  name: 'FtPrompt',
+  components: {
+    'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
+    'ft-button': FtButton
+  },
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    optionNames: {
+      type: Array,
+      default: () => { return [] }
+    },
+    optionValues: {
+      type: Array,
+      default: () => { return [] }
+    }
+  },
+  methods: {
+    handleHide: function (event) {
+      if (event.target.className === 'prompt') {
+        this.$emit('click', null)
+      }
+    }
+  }
+})

src/renderer/components/ft-prompt/ft-prompt.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="prompt"
+    @click="handleHide"
+  >
+    <ft-card class="promptCard">
+      <slot>
+        <h2 class="center">{{ label }}</h2>
+        <ft-flex-box>
+          <ft-button
+            v-for="(option, index) in optionNames"
+            :key="index"
+            :label="option"
+            @click="$emit('click', optionValues[index])"
+          />
+        </ft-flex-box>
+      </slot>
+    </ft-card>
+  </div>
+</template>
+
+<script src="./ft-prompt.js" />
+<style scoped src="./ft-prompt.css" />

src/renderer/components/ft-search-filters/ft-search-filters.css

@@ -2,7 +2,7 @@
   background-color: var(--card-bg-color);
   padding: 20px;
   padding-bottom: 70px;
-  max-height: 400px;
+  max-height: 410px;
   overflow-y: auto;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }

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

@@ -635,6 +635,7 @@ export default Vue.extend({
 
     updateLocale: function (locale) {
       this.$i18n.locale = locale
+      this.currentLocale = locale
       localStorage.setItem('locale', locale)
     },
 

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

@@ -64,7 +64,7 @@
         @change="updateThumbnailPreference"
       />
       <ft-select
-        placeholder="Change Locale"
+        :placeholder="$t('Settings.General Settings.Locale Preference')"
         :value="currentLocale"
         :select-names="localeOptions"
         :select-values="localeOptions"

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

@@ -37,10 +37,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    rememberHistory: function () {
-      return this.$store.getters.getRememberHistory
-    },
-
     autoplayVideos: function () {
       return this.$store.getters.getAutoplayVideos
     },
@@ -114,7 +110,6 @@ export default Vue.extend({
     },
 
     ...mapActions([
-      'updateRememberHistory',
       'updateAutoplayVideos',
       'updateAutoplayPlaylists',
       'updatePlayNextVideo',

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

@@ -9,12 +9,6 @@
     </h3>
     <div class="switchColumnGrid">
       <div class="switchColumn">
-        <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Remember History')"
-          :compact="true"
-          :default-value="rememberHistory"
-          @change="updateRememberHistory"
-        />
         <ft-toggle-switch
           v-if="false"
           label="Enable Subtitles by Default"

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

@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import { mapActions } from 'vuex'
+import FtCard from '../ft-card/ft-card.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../ft-prompt/ft-prompt.vue'
+
+export default Vue.extend({
+  name: 'PrivacySettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-button': FtButton,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-flex-box': FtFlexBox,
+    'ft-prompt': FtPrompt
+  },
+  data: function () {
+    return {
+      showSearchCachePrompt: false,
+      showRemoveHistoryPrompt: false,
+      promptValues: [
+        'yes',
+        'no'
+      ]
+    }
+  },
+  computed: {
+    rememberHistory: function () {
+      return this.$store.getters.getRememberHistory
+    },
+    saveWatchedProgress: function () {
+      return this.$store.getters.getSaveWatchedProgress
+    },
+    promptNames: function () {
+      return [
+        this.$t('Yes'),
+        this.$t('No')
+      ]
+    }
+  },
+  methods: {
+    handleSearchCache: function (option) {
+      this.showSearchCachePrompt = false
+
+      if (option === 'yes') {
+        this.clearSessionSearchHistory()
+        this.showToast({
+          message: this.$t('Settings.Privacy Settings.Search cache has been cleared')
+        })
+      }
+    },
+
+    handleRemoveHistory: function (option) {
+      this.showRemoveHistoryPrompt = false
+
+      if (option === 'yes') {
+        this.removeAllHistory()
+        this.showToast({
+          message: this.$t('Settings.Privacy Settings.Watch history has been cleared')
+        })
+      }
+    },
+
+    ...mapActions([
+      'updateRememberHistory',
+      'removeAllHistory',
+      'updateSaveWatchedProgress',
+      'clearSessionSearchHistory',
+      'showToast'
+    ])
+  }
+})

src/renderer/components/privacy-settings/privacy-settings.sass

@@ -0,0 +1 @@
+@use "../../sass-partials/settings"

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

@@ -0,0 +1,59 @@
+<template>
+  <ft-card
+    class="relative card"
+  >
+    <h3>
+      {{ $t("Settings.Privacy Settings.Privacy Settings") }}
+    </h3>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Privacy Settings.Remember History')"
+          :compact="true"
+          :default-value="rememberHistory"
+          @change="updateRememberHistory"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Privacy Settings.Save Watched Progress')"
+          :compact="true"
+          :default-value="saveWatchedProgress"
+          @change="updateSaveWatchedProgress"
+        />
+      </div>
+    </div>
+    <br>
+    <ft-flex-box>
+      <ft-button
+        :label="$t('Settings.Privacy Settings.Clear Search Cache')"
+        text-color="var(--text-with-main-color)"
+        background-color="var(--primary-color)"
+        @click="showSearchCachePrompt = true"
+      />
+      <ft-button
+        :label="$t('Settings.Privacy Settings.Remove Watch History')"
+        text-color="var(--text-with-main-color)"
+        background-color="var(--primary-color)"
+        @click="showRemoveHistoryPrompt = true"
+      />
+    </ft-flex-box>
+    <ft-prompt
+      v-if="showSearchCachePrompt"
+      :label="$t('Settings.Privacy Settings.Are you sure you want to clear out your search cache?')"
+      :option-names="promptNames"
+      :option-values="promptValues"
+      @click="handleSearchCache"
+    />
+    <ft-prompt
+      v-if="showRemoveHistoryPrompt"
+      :label="$t('Settings.Privacy Settings.Are you sure you want to remove your entire watch history?')"
+      :option-names="promptNames"
+      :option-values="promptValues"
+      @click="handleRemoveHistory"
+    />
+  </ft-card>
+</template>
+
+<script src="./privacy-settings.js" />
+<style scoped lang="sass" src="./privacy-settings.sass" />

src/renderer/store/modules/history.js

@@ -63,6 +63,14 @@ const actions = {
     })
   },
 
+  removeAllHistory ({ dispatch }) {
+    historyDb.remove({}, { multi: true }, (err, numReplaced) => {
+      if (!err) {
+        dispatch('grabHistory')
+      }
+    })
+  },
+
   updateWatchProgress ({ dispatch }, videoData) {
     historyDb.update({ videoId: videoData.videoId }, { $set: { watchProgress: videoData.watchProgress } }, { upsert: true }, (err, numReplaced) => {
       if (!err) {

src/renderer/store/modules/settings.js

@@ -39,6 +39,7 @@ const state = {
   barColor: false,
   enableSearchSuggestions: true,
   rememberHistory: true,
+  saveWatchedProgress: true,
   autoplayVideos: true,
   autoplayPlaylists: true,
   playNextVideo: false,
@@ -105,6 +106,10 @@ const getters = {
     return state.rememberHistory
   },
 
+  getSaveWatchedProgress: () => {
+    return state.saveWatchedProgress
+  },
+
   getAutoplayVideos: () => {
     return state.autoplayVideos
   },
@@ -198,6 +203,9 @@ const actions = {
             case 'rememberHistory':
               commit('setRememberHistory', result.value)
               break
+            case 'saveWatchedProgress':
+              commit('setSaveWatchedProgress', result.value)
+              break
             case 'autoplayVideos':
               commit('setAutoplayVideos', result.value)
               break
@@ -327,6 +335,14 @@ const actions = {
     })
   },
 
+  updateSaveWatchedProgress ({ commit }, saveWatchedProgress) {
+    settingsDb.update({ _id: 'saveWatchedProgress' }, { _id: 'saveWatchedProgress', value: saveWatchedProgress }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setSaveWatchedProgress', saveWatchedProgress)
+      }
+    })
+  },
+
   updateAutoplayVideos ({ commit }, autoplayVideos) {
     settingsDb.update({ _id: 'autoplayVideos' }, { _id: 'autoplayVideos', value: autoplayVideos }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -462,6 +478,9 @@ const mutations = {
   setRememberHistory (state, rememberHistory) {
     state.rememberHistory = rememberHistory
   },
+  setSaveWatchedProgress (state, saveWatchedProgress) {
+    state.saveWatchedProgress = saveWatchedProgress
+  },
   setAutoplayVideos (state, autoplayVideos) {
     state.autoplayVideos = autoplayVideos
   },

src/renderer/store/modules/utils.js

@@ -230,6 +230,10 @@ const actions = {
     return publicationString
   },
 
+  clearSessionSearchHistory ({ commit }) {
+    commit('setSessionSearchHistory', [])
+  },
+
   showToast (_, payload) {
     FtToastEvents.$emit('toast.open', payload.message, payload.action, payload.time)
   }

src/renderer/views/Settings/Settings.js

@@ -4,6 +4,7 @@ import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
 import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
+import PrivacySettings from '../../components/privacy-settings/privacy-settings.vue'
 import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue'
 
 export default Vue.extend({
@@ -14,6 +15,7 @@ export default Vue.extend({
     'general-settings': GeneralSettings,
     'theme-settings': ThemeSettings,
     'player-settings': PlayerSettings,
+    'privacy-settings': PrivacySettings,
     'subscription-settings': SubscriptionSettings
   },
   mounted: function () {

src/renderer/views/Settings/Settings.vue

@@ -3,6 +3,7 @@
     <general-settings />
     <theme-settings />
     <player-settings />
+    <privacy-settings />
   </div>
 </template>
 

src/renderer/views/Watch/Watch.js

@@ -81,6 +81,10 @@ export default Vue.extend({
       return this.$store.getters.getRememberHistory
     },
 
+    saveWatchedProgress: function () {
+      return this.$store.getters.getSaveWatchedProgress
+    },
+
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
@@ -696,7 +700,7 @@ export default Vue.extend({
     if (this.rememberHistory && !this.isLoading && !this.isLive) {
       const player = this.$refs.videoPlayer.player
 
-      if (typeof player !== 'undefined') {
+      if (typeof player !== 'undefined' && this.saveWatchedProgress) {
         const currentTime = this.$refs.videoPlayer.player.currentTime()
         console.log(currentTime)
         const payload = {

static/locales/en-US.yaml

@@ -1,3 +1,5 @@
+# Put the name of your locale in the same language
+Locale Name: English
 FreeTube: FreeTube
 # Currently on Subscriptions, Playlists, and History
 'This part of the app is not ready yet. Come back later when progress has been made.': >-
@@ -138,7 +140,6 @@ Settings:
   Player Settings:
     Player Settings: Player Settings
     Force Local Backend for Legacy Formats: Force Local Backend for Legacy Formats
-    Remember History: Remember History
     Play Next Video: Play Next Video
     Turn on Subtitles by Default: Turn on Subtitles by Default
     Autoplay Videos: Autoplay Videos
@@ -164,6 +165,16 @@ Settings:
       1440p: 1440p
       4k: 4k
       8k: 8k
+  Privacy Settings:
+    Privacy Settings: Privacy Settings
+    Remember History: Remember History
+    Save Watched Progress: Save Watched Progress
+    Clear Search Cache: Clear Search Cache
+    Are you sure you want to clear out your search cache?: Are you sure you want to clear out your search cache?
+    Search cache has been cleared: Search cache has been cleared
+    Remove Watch History: Remove Watch History
+    Are you sure you want to remove your entire watch history?: Are you sure you want to remove your entire watch history?
+    Watch history has been cleared: Watch history has been cleared
   Subscription Settings:
     Subscription Settings: Subscription Settings
     Hide Videos on Watch: Hide Videos on Watch