Sync user settings with newer versions on changes

src/settingsManager.ts

@@ -1,42 +1,60 @@
 export function getDefaultSettings() {
     return {
-      version: import.meta.env.SAFETWITCH_TAG,
-      audioOnly: {
-        name: 'Audio Only',
-        selected: false,
-        type: 'checkbox'
-      },
-      defaultQuality: {
-        name: 'Default Quality',
-        options: ['160p', '360p', '480p', '720p', '1080p'],
-        selected: '480p',
-        type: 'option'
-      },
-      chatVisible: {
-        name: 'Hide Chat',
-        selected: false,
-        type: 'checkbox'
-      }
+        version: import.meta.env.SAFETWITCH_TAG,
+        audioOnly: {
+            name: 'Audio Only',
+            selected: false,
+            type: 'checkbox'
+        },
+        defaultQuality: {
+            name: 'Default Quality',
+            options: ['160p', '360p', '480p', '720p', '1080p'],
+            selected: '480p',
+            type: 'option'
+        },
+        chatVisible: {
+            name: 'Hide Chat',
+            selected: false,
+            type: 'checkbox'
+        }
     }
-  }
-  
-  export function getSetting(key: string): boolean | string {
+}
+
+export function syncUserSettings() {
+    const defaultSettings = getDefaultSettings()
+    let userSettings = localStorage.getItem('settings')
+    if (!userSettings) return
+    const parsedUserSettings = JSON.parse(userSettings)
+
+    if(parsedUserSettings.version === import.meta.env.SAFETWITCH_TAG) {
+        console.log('Settings up to date!')
+        return
+    } else {
+        console.log('Settings outdated... Migrating')
+    }
+
+
+    const synced = {...defaultSettings, ...parsedUserSettings}
+    localStorage.setItem('settings', JSON.stringify(synced))
+    console.log('Migrated!')
+}
+
+export function getSetting(key: string): boolean | string {
     const storage = localStorage.getItem('settings')
     let parsed
     if (!storage) {
-      parsed = getDefaultSettings()
+        parsed = getDefaultSettings()
     } else {
-      parsed = JSON.parse(storage)
+        parsed = JSON.parse(storage)
     }
-  
+
     return parsed[key].selected
-  }
-  
-  export function chatVisible() {
+}
+
+export function chatVisible() {
     const p = getSetting('chatVisible')
     // Flip becuase on the setting page it's
     // displayed as "Hide Chat", but the value
     // is chatVisible
     return !p
-  }
-  
+}

src/views/SettingsView.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
-import { getDefaultSettings } from '@/settingsManager'
+import { getDefaultSettings, syncUserSettings } from '@/settingsManager'
 
 export default {
   setup() {
     let settings
+    syncUserSettings()
 
     let storedSettings = localStorage.getItem('settings')
     if (storedSettings === null) {