mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2024-11-26 03:39:24 +01:00
Migrate ExperimentalSettings and ParentalControlSettings to the composition API (#6088)
This commit is contained in:
absidue
GitHub
parent
2168f881b3
commit
b41d3a1cb4
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<FtSettingsSection
|
||||
:title="$t('Settings.Experimental Settings.Experimental Settings')"
|
||||
>
|
||||
<p class="experimental-warning">
|
||||
{{ $t('Settings.Experimental Settings.Warning') }}
|
||||
</p>
|
||||
<FtFlexBox>
|
||||
<FtToggleSwitch
|
||||
tooltip-position="top"
|
||||
:label="$t('Settings.Experimental Settings.Replace HTTP Cache')"
|
||||
compact
|
||||
:default-value="replaceHttpCache"
|
||||
:disabled="replaceHttpCacheLoading"
|
||||
:tooltip="$t('Tooltips.Experimental Settings.Replace HTTP Cache')"
|
||||
@change="handleRestartPrompt"
|
||||
/>
|
||||
</FtFlexBox>
|
||||
<FtPrompt
|
||||
v-if="showRestartPrompt"
|
||||
:label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
|
||||
:option-names="[$t('Yes, Restart'), $t('Cancel')]"
|
||||
:option-values="['restart', 'cancel']"
|
||||
@click="handleReplaceHttpCache"
|
||||
/>
|
||||
</FtSettingsSection>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
|
||||
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
||||
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
||||
import FtPrompt from '../ft-prompt/ft-prompt.vue'
|
||||
|
||||
import { IpcChannels } from '../../../constants'
|
||||
|
||||
const replaceHttpCacheLoading = ref(true)
|
||||
const replaceHttpCache = ref(false)
|
||||
const showRestartPrompt = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
if (process.env.IS_ELECTRON) {
|
||||
const { ipcRenderer } = require('electron')
|
||||
replaceHttpCache.value = await ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
|
||||
}
|
||||
|
||||
replaceHttpCacheLoading.value = false
|
||||
})
|
||||
|
||||
/**
|
||||
* @param {boolean} value
|
||||
*/
|
||||
function handleRestartPrompt(value) {
|
||||
replaceHttpCache.value = value
|
||||
showRestartPrompt.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {'restart' | 'cancel' | null} value
|
||||
*/
|
||||
function handleReplaceHttpCache(value) {
|
||||
showRestartPrompt.value = false
|
||||
|
||||
if (value === null || value === 'cancel') {
|
||||
replaceHttpCache.value = !replaceHttpCache.value
|
||||
return
|
||||
}
|
||||
|
||||
if (process.env.IS_ELECTRON) {
|
||||
const { ipcRenderer } = require('electron')
|
||||
ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped src="./ExperimentalSettings.css" />
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<FtSettingsSection
|
||||
:title="$t('Settings.Parental Control Settings.Parental Control Settings')"
|
||||
>
|
||||
<div class="switchColumnGrid">
|
||||
<div class="switchColumn">
|
||||
<FtToggleSwitch
|
||||
:label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
|
||||
compact
|
||||
:default-value="hideUnsubscribeButton"
|
||||
@change="updateHideUnsubscribeButton"
|
||||
/>
|
||||
<FtToggleSwitch
|
||||
:label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
|
||||
compact
|
||||
:default-value="showFamilyFriendlyOnly"
|
||||
@change="updateShowFamilyFriendlyOnly"
|
||||
/>
|
||||
</div>
|
||||
<div class="switchColumn">
|
||||
<FtToggleSwitch
|
||||
:label="$t('Settings.Parental Control Settings.Hide Search Bar')"
|
||||
compact
|
||||
:default-value="hideSearchBar"
|
||||
@change="updateHideSearchBar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FtSettingsSection>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
|
||||
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
||||
|
||||
import store from '../../store/index'
|
||||
|
||||
const hideSearchBar = computed(() => {
|
||||
return store.getters.getHideSearchBar
|
||||
})
|
||||
|
||||
const hideUnsubscribeButton = computed(() => {
|
||||
return store.getters.getHideUnsubscribeButton
|
||||
})
|
||||
|
||||
const showFamilyFriendlyOnly = computed(() => {
|
||||
return store.getters.getShowFamilyFriendlyOnly
|
||||
})
|
||||
|
||||
/**
|
||||
* @param {boolean} value
|
||||
*/
|
||||
function updateHideSearchBar(value) {
|
||||
store.dispatch('updateHideSearchBar', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} value
|
||||
*/
|
||||
function updateHideUnsubscribeButton(value) {
|
||||
store.dispatch('updateHideUnsubscribeButton', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} value
|
||||
*/
|
||||
function updateShowFamilyFriendlyOnly(value) {
|
||||
store.dispatch('updateShowFamilyFriendlyOnly', value)
|
||||
}
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
|
||||
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
||||
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
||||
import FtPrompt from '../ft-prompt/ft-prompt.vue'
|
||||
import { IpcChannels } from '../../../constants'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ExperimentalSettings',
|
||||
components: {
|
||||
'ft-settings-section': FtSettingsSection,
|
||||
'ft-flex-box': FtFlexBox,
|
||||
'ft-toggle-switch': FtToggleSwitch,
|
||||
'ft-prompt': FtPrompt
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
replaceHttpCacheLoading: true,
|
||||
replaceHttpCache: false,
|
||||
showRestartPrompt: false
|
||||
}
|
||||
},
|
||||
mounted: async function () {
|
||||
if (process.env.IS_ELECTRON) {
|
||||
const { ipcRenderer } = require('electron')
|
||||
this.replaceHttpCache = await ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
|
||||
}
|
||||
|
||||
this.replaceHttpCacheLoading = false
|
||||
},
|
||||
methods: {
|
||||
handleRestartPrompt: function (value) {
|
||||
this.replaceHttpCache = value
|
||||
this.showRestartPrompt = true
|
||||
},
|
||||
|
||||
handleReplaceHttpCache: function (value) {
|
||||
this.showRestartPrompt = false
|
||||
|
||||
if (value === null || value === 'cancel') {
|
||||
this.replaceHttpCache = !this.replaceHttpCache
|
||||
return
|
||||
}
|
||||
|
||||
if (process.env.IS_ELECTRON) {
|
||||
const { ipcRenderer } = require('electron')
|
||||
ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<ft-settings-section
|
||||
:title="$t('Settings.Experimental Settings.Experimental Settings')"
|
||||
>
|
||||
<p class="experimental-warning">
|
||||
{{ $t('Settings.Experimental Settings.Warning') }}
|
||||
</p>
|
||||
<ft-flex-box>
|
||||
<ft-toggle-switch
|
||||
tooltip-position="top"
|
||||
:label="$t('Settings.Experimental Settings.Replace HTTP Cache')"
|
||||
:compact="true"
|
||||
:default-value="replaceHttpCache"
|
||||
:disabled="replaceHttpCacheLoading"
|
||||
:tooltip="$t('Tooltips.Experimental Settings.Replace HTTP Cache')"
|
||||
@change="handleRestartPrompt"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<ft-prompt
|
||||
v-if="showRestartPrompt"
|
||||
:label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
|
||||
:option-names="[$t('Yes, Restart'), $t('Cancel')]"
|
||||
:option-values="['restart', 'cancel']"
|
||||
@click="handleReplaceHttpCache"
|
||||
/>
|
||||
</ft-settings-section>
|
||||
</template>
|
||||
|
||||
<script src="./experimental-settings.js" />
|
||||
<style scoped src="./experimental-settings.css" />
|
||||
@ -1,30 +0,0 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { mapActions } from 'vuex'
|
||||
import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
|
||||
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ParentalControlSettings',
|
||||
components: {
|
||||
'ft-settings-section': FtSettingsSection,
|
||||
'ft-toggle-switch': FtToggleSwitch
|
||||
},
|
||||
computed: {
|
||||
hideSearchBar: function () {
|
||||
return this.$store.getters.getHideSearchBar
|
||||
},
|
||||
hideUnsubscribeButton: function() {
|
||||
return this.$store.getters.getHideUnsubscribeButton
|
||||
},
|
||||
showFamilyFriendlyOnly: function() {
|
||||
return this.$store.getters.getShowFamilyFriendlyOnly
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
'updateHideSearchBar',
|
||||
'updateHideUnsubscribeButton',
|
||||
'updateShowFamilyFriendlyOnly'
|
||||
])
|
||||
}
|
||||
})
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<ft-settings-section
|
||||
:title="$t('Settings.Parental Control Settings.Parental Control Settings')"
|
||||
>
|
||||
<div class="switchColumnGrid">
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
|
||||
:compact="true"
|
||||
:default-value="hideUnsubscribeButton"
|
||||
@change="updateHideUnsubscribeButton"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
|
||||
:compact="true"
|
||||
:default-value="showFamilyFriendlyOnly"
|
||||
@change="updateShowFamilyFriendlyOnly"
|
||||
/>
|
||||
</div>
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Parental Control Settings.Hide Search Bar')"
|
||||
:compact="true"
|
||||
:default-value="hideSearchBar"
|
||||
@change="updateHideSearchBar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ft-settings-section>
|
||||
</template>
|
||||
|
||||
<script src="./parental-control-settings.js" />
|
||||
@ -11,8 +11,8 @@ import DataSettings from '../../components/data-settings/data-settings.vue'
|
||||
import DistractionSettings from '../../components/distraction-settings/distraction-settings.vue'
|
||||
import ProxySettings from '../../components/proxy-settings/proxy-settings.vue'
|
||||
import SponsorBlockSettings from '../../components/sponsor-block-settings/sponsor-block-settings.vue'
|
||||
import ParentControlSettings from '../../components/parental-control-settings/parental-control-settings.vue'
|
||||
import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
|
||||
import ParentalControlSettings from '../../components/ParentalControlSettings/ParentalControlSettings.vue'
|
||||
import ExperimentalSettings from '../../components/ExperimentalSettings/ExperimentalSettings.vue'
|
||||
import PasswordSettings from '../../components/PasswordSettings/PasswordSettings.vue'
|
||||
import PasswordDialog from '../../components/PasswordDialog/PasswordDialog.vue'
|
||||
import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
|
||||
@ -32,7 +32,7 @@ export default defineComponent({
|
||||
'data-settings': DataSettings,
|
||||
'distraction-settings': DistractionSettings,
|
||||
'sponsor-block-settings': SponsorBlockSettings,
|
||||
'parental-control-settings': ParentControlSettings,
|
||||
'parental-control-settings': ParentalControlSettings,
|
||||
'password-settings': PasswordSettings,
|
||||
'password-dialog': PasswordDialog,
|
||||
'ft-toggle-switch': FtToggleSwitch,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user