tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Locale issues and add Privacy Settings card to settings page

This commit is contained in:
Preston 2020-08-22 16:51:04 -04:00
parent 6a2e301d37
commit 602a140361
18 changed files with 263 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/renderer/components/ft-prompt/ft-prompt.css Normal file
View File

@ -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;
}

34
src/renderer/components/ft-prompt/ft-prompt.js Normal file
View File

@ -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)
}
}
}
})

23
src/renderer/components/ft-prompt/ft-prompt.vue Normal file
View File

@ -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" />

2
src/renderer/components/ft-search-filters/ft-search-filters.css
View File

@ -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);
}

1
src/renderer/components/general-settings/general-settings.js
View File

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

2
src/renderer/components/general-settings/general-settings.vue
View File

@ -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"

5
src/renderer/components/player-settings/player-settings.js
View File

@ -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',

6
src/renderer/components/player-settings/player-settings.vue
View File

@ -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"

73
src/renderer/components/privacy-settings/privacy-settings.js Normal file
View File

@ -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'
])
}
})

1
src/renderer/components/privacy-settings/privacy-settings.sass Normal file
View File

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

59
src/renderer/components/privacy-settings/privacy-settings.vue Normal file
View File

@ -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" />

8
src/renderer/store/modules/history.js
View File

@ -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) {

19
src/renderer/store/modules/settings.js
View File

@ -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
},

4
src/renderer/store/modules/utils.js
View File

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

2
src/renderer/views/Settings/Settings.js
View File

@ -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 () {

1
src/renderer/views/Settings/Settings.vue
View File

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

6
src/renderer/views/Watch/Watch.js
View File

@ -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 = {

13
static/locales/en-US.yaml
View File

@ -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