Infrastructure/safetwitch
0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 13:22:58 -05:00
Code Issues Activity

Add types for settings, make new settings format, migration, and export/import #67 #69

Browse source
This commit is contained in:
dragongoose 2023-11-04 19:34:22 -04:00
parent 947cc56ba4
commit 7d361da167
No known key found for this signature in database
GPG key ID: 01397EEC371CDAA5
2 changed files with 139 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/settingsManager.ts
View file

@ -8,9 +8,37 @@ export const setLanguage = (selectedLanguage: string, i18n: any) => {
i18n.locale = locale
}
export function getDefaultSettings() {
export interface SettingsCheckbox {
name: string
selected: boolean,
type: 'checkbox'
}
export interface SettingsOptions {
name: string
options: string[]
selected: string
type: 'option'
}
export interface Settings {
version: string
settings: {
audioOnly: SettingsCheckbox
defaultQuality: SettingsOptions
language: SettingsOptions
chatVisible: SettingsCheckbox
streamTagsVisible: SettingsCheckbox
streamerAboutSectionVisible: SettingsCheckbox
autoplay: SettingsCheckbox
}
}
export function getDefaultSettings(): Settings {
return {
version: import.meta.env.SAFETWITCH_TAG,
settings: {
audioOnly: {
name: 'audioOnly',
selected: false,
@ -49,29 +77,58 @@ export function getDefaultSettings() {
type: 'checkbox'
}
}
}
}
export function syncUserSettings() {
/**
* Syncs older user setting to the latest version
* @param settings Settings of the Settings type
* @returns The synced settings and a boolean stating if the settings were modified
*/
export function syncUserSettings(settings: Settings): {settings: Settings, changed: boolean}{
const defaultSettings = getDefaultSettings()
const userSettings = localStorage.getItem('settings')
if (!userSettings) return
const parsedUserSettings = JSON.parse(userSettings)
let userSettings = settings
if (parsedUserSettings.version === import.meta.env.SAFETWITCH_TAG) {
// converting settings storage from versions older
// than 2.4.1
let oldMigration = false
if (userSettings.version === import.meta.env.SAFETWITCH_TAG) {
console.log('Settings up to date!')
return
return { settings: userSettings, changed: false }
} else {
console.log('Settings outdated... Migrating')
// converts v2.4.1 to 241
let settingsVersion = Number(userSettings.version.slice(1, defaultSettings.version.length).split(".").join(""))
if (settingsVersion < 241) {
oldMigration = true
}
}
if (oldMigration) {
let oldSettings: any = userSettings
delete oldSettings.version
let migrated: Settings = {
version: defaultSettings.version,
settings: {
...oldSettings
}
}
const synced = { ...defaultSettings, ...parsedUserSettings }
userSettings = migrated
}
console.log(userSettings)
const synced = { ...defaultSettings, ...userSettings }
// update avaliable languages
synced.language.options = defaultSettings.language.options
synced.settings.language.options = defaultSettings.settings.language.options
synced.version = import.meta.env.SAFETWITCH_TAG
localStorage.setItem('settings', JSON.stringify(synced))
console.log('Migrated!')
return { settings: synced, changed: true }
}
export function getSetting(key: string): boolean | string {

66
src/views/SettingsView.vue
View file

@ -1,12 +1,11 @@
<script lang="ts">
import { ref } from 'vue'
import { getDefaultSettings, syncUserSettings, setLanguage, themeList } from '@/settingsManager'
import type { Settings } from '@/settingsManager'
export default {
setup() {
let settings
syncUserSettings()
let settings: Settings
let storedSettings = localStorage.getItem('settings')
if (storedSettings === null) {
settings = getDefaultSettings()
@ -14,6 +13,11 @@ export default {
settings = JSON.parse(storedSettings)
}
const syncResp = syncUserSettings(settings)
if (syncResp.changed) {
settings = syncResp.settings
}
let selectedTheme = localStorage.getItem('theme') || "light"
return {
@ -26,7 +30,8 @@ export default {
save() {
const settings = JSON.stringify(this.settings)
localStorage.setItem('settings', settings)
setLanguage(this.settings.language.selected, this.$i18n)
console.log(this.settings)
setLanguage(this.settings.settings.language.selected, this.$i18n)
this.setTheme()
// Reload needed
@ -40,26 +45,30 @@ export default {
return 'border-purple'
}
return "border-none"
},
download() {
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings));
hiddenElement.target = '_blank';
hiddenElement.download = 'safetwitch_prefs.json';
hiddenElement.click();
},
async handleImport(event: any) {
const file = await event.target.files[0].text()
const parsed = JSON.parse(file)
let settings: Settings
if (parsed.version !== getDefaultSettings().version && parsed.version !== undefined) {
const syncResp = syncUserSettings(parsed)
settings = syncResp.settings
} else {
settings = parsed
}
// download() {
// var hiddenElement = document.createElement('a');
// hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings));
// hiddenElement.target = '_blank';
// hiddenElement.download = 'safetwitch_prefs.json';
// hiddenElement.click();
// },
// async handleImport(event: any) {
// const file = await event.target.files[0].text()
// const parsed = JSON.parse(file)
// if (parsed.audioOnly == undefined) {
// return
// }
// this.settings = file
// this.save()
// },
this.settings = settings
this.save()
},
}
}
</script>
@ -69,7 +78,7 @@ export default {
<h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
<hr class="my-2" />
<ul class="w-full space-y-1">
<li v-for="setting in settings" :key="setting.type">
<li v-for="setting in settings.settings" :key="setting.type">
<div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
<label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
<input :name="setting.name" type="checkbox" v-model="setting.selected" />
@ -93,8 +102,10 @@ export default {
<!--
Use theme colors for preview
-->
<li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform" :class="highlight(theme.name)">
<button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md" :style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
<li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform"
:class="highlight(theme.name)">
<button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md"
:style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
<p>{{ theme.name }}</p>
</button>
</li>
@ -102,9 +113,8 @@ export default {
<div class="space-x-2 mt-3">
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
<!-- <button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput"
class="bg-surface0 p-4 py-2 rounded-md"> -->
<button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput" class="bg-surface0 p-4 py-2 rounded-md">
</div>
</div>
</template>