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

src/settingsManager.ts

@@ -8,70 +8,127 @@ 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,
-        audioOnly: {
-            name: 'audioOnly',
-            selected: false,
-            type: 'checkbox'
-        },
-        defaultQuality: {
-            name: 'defaultQuality',
-            options: ['160p', '360p', '480p', '720p', '1080p'],
-            selected: '480p',
-            type: 'option'
-        },
-        language: {
-            name: 'language',
-            options: languages,
-            selected: 'English',
-            type: 'option'
-        },
-        chatVisible: {
-            name: 'chatVisible',
-            selected: false,
-            type: 'checkbox'
-        },
-        streamTagsVisible: {
-            name: 'streamTagsVisible',
-            selected: true,
-            type: 'checkbox'
-        },
-        streamerAboutSectionVisible: {
-            name: 'streamerAboutSectionVisible',
-            selected: true,
-            type: 'checkbox'
-        },
-        autoplay: {
-            name: 'autoplay',
-            selected: false,
-            type: 'checkbox'
+        settings: {
+            audioOnly: {
+                name: 'audioOnly',
+                selected: false,
+                type: 'checkbox'
+            },
+            defaultQuality: {
+                name: 'defaultQuality',
+                options: ['160p', '360p', '480p', '720p', '1080p'],
+                selected: '480p',
+                type: 'option'
+            },
+            language: {
+                name: 'language',
+                options: languages,
+                selected: 'English',
+                type: 'option'
+            },
+            chatVisible: {
+                name: 'chatVisible',
+                selected: false,
+                type: 'checkbox'
+            },
+            streamTagsVisible: {
+                name: 'streamTagsVisible',
+                selected: true,
+                type: 'checkbox'
+            },
+            streamerAboutSectionVisible: {
+                name: 'streamerAboutSectionVisible',
+                selected: true,
+                type: 'checkbox'
+            },
+            autoplay: {
+                name: 'autoplay',
+                selected: false,
+                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 {

src/views/SettingsView.vue

@@ -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');
+    },
+    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)
+      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.audioOnly == undefined) {
-    //             return
-    //         }
+      if (parsed.version !== getDefaultSettings().version && parsed.version !== undefined) {
+        const syncResp = syncUserSettings(parsed)
+        settings = syncResp.settings
+      } else {
+        settings = parsed
+      }
 
-    //         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>