feat(iridium): add settings manager (#3946)

* feat(iridium): add settings manager

* refactor(iridium): instantiate managers in constructor

* feat(iridium): add settings to iridium manager

* feat(settings): use iridium settings manager

* feat(theme): use iridium theme settings

* chore(store): remove old theme types/definitions

* feat(iridium): add init method for profile/group managers

* feat(theme): generate rgb color values for selection

* feat(settings): move flip local video setting to iridium

* chore(build): add deepmerge package

* feat(merge): add deepmerge utility function

* feat(settings): deep merge initial state

* feat(settings/audio): add notification sounds to settings

* feat(iridium): add keybinds to settings

* feat(settings): connect keybinds to iridium

* style(settings): use record for object types

* feat(iridium): add privacy to settings

* feat(settings): connect privacy to iridium

* refactor(settings): iterate over enum to generate initial state

* fix(build): bump @nuxtjs/eslint-config-typescript version

* style: organise imports

* fix(settings): only set in iridium if the value was changed

* fix(settings/audio): default values keys

assets/styles/framework/colors.less

@@ -14,7 +14,7 @@
 
 @satellite-color: #2761fd;
 @satellite-color-secondary: #286cfe;
-@satellite-color-rgb: 'rgb(39, 97, 253)';
+@satellite-color-rgb: 39, 97, 253;
 @flair-color: var(--flair-color);
 @flair-color-secondary: var(--flair-color-secondary);
 @flair-color-rgb: var(--flair-color-rgb);

assets/styles/themes/moonless_night.less

@@ -1,4 +1,4 @@
-.moonless_night {
+.theme-moonlessNight {
   //------------- Colors -------------
   @white: #fff;
 

components/ui/HorizontalRule/HorizontalRule.vue

@@ -16,7 +16,7 @@ export default Vue.extend({})
 .horizontal-container {
   padding: @normal-spacing 0;
 }
-.moonless-night {
+.theme-moonlessNight {
   .horizontal-rule {
     background: @lighter-splash-radial;
   }

components/views/media/user/User.vue

@@ -14,6 +14,7 @@ import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
 import { Call, CallPeerStreams } from '~/libraries/WebRTC/Call'
 import { PeerMutedState } from '~/store/webrtc/types'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 async function loadVideos() {
   const videos = document.querySelectorAll(
@@ -56,12 +57,16 @@ export default Vue.extend({
       default: false,
     },
   },
+  data() {
+    return {
+      videoSettings: iridium.settings.state.video,
+    }
+  },
   computed: {
     ...mapState({
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
       webrtc: (state) => (state as RootState).webrtc,
-      flipVideo: (state) => (state as RootState).textile.userThread.flipVideo,
     }),
     call() {
       return (

components/views/settings/pages/audio/Audio.html

@@ -168,7 +168,6 @@
       </span>
     </SettingsUnit>
     <SettingsUnit
-      v-if="getInitialized"
       :title="$t('pages.settings.video.flipVideo.title')"
       :text="$t('pages.settings.video.flipVideo.subtitle')"
     >
@@ -177,7 +176,6 @@
         :isLocked="loading.includes('flipVideo')"
       />
     </SettingsUnit>
-    <UiLoadersGenericContent class="column unit" :count="1" v-else />
   </SettingsSection>
 
   <!-- Screen Share -->

components/views/settings/pages/audio/index.vue

@@ -11,6 +11,7 @@ import {
 import { UserPermissions } from '~/components/mixins/UserPermissions'
 import { CaptureMouseTypes } from '~/store/settings/types'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -53,6 +54,7 @@ export default Vue.extend({
           text: this.$i18n.t('pages.settings.never'),
         },
       ],
+      iridiumSettings: iridium.settings.state,
     }
   },
   computed: {
@@ -134,15 +136,13 @@ export default Vue.extend({
       },
     },
     flipVideo: {
-      async set(flipVideo: boolean) {
+      async set(value: boolean) {
         this.loading.push('flipVideo')
-        await this.$store.dispatch('textile/updateUserThreadData', {
-          flipVideo,
-        })
+        await iridium.settings.set('/video/flipLocalStream', value)
         this.loading.splice(this.loading.indexOf('flipVideo'), 1)
       },
       get(): boolean {
-        return this.userThread.flipVideo
+        return this.iridiumSettings.video.flipLocalStream
       },
     },
   },

components/views/settings/pages/audio/sounds/Sounds.html

@@ -4,32 +4,32 @@
     :text="$t('pages.settings.notifications.sounds.title')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.NEW_MESSAGE)"
+    :value="sounds[Sounds.NEW_MESSAGE]"
     @toggle="toggleSound(Sounds.NEW_MESSAGE, $event)"
     :title="$t('pages.settings.notifications.sounds.message')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.CALL)"
+    :value="sounds[Sounds.CALL]"
     @toggle="toggleSound(Sounds.CALL, $event)"
     :title="$t('pages.settings.notifications.sounds.call')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.MUTE)"
+    :value="sounds[Sounds.MUTE]"
     @toggle="toggleSounds([Sounds.MUTE, Sounds.UNMUTE], $event)"
     :title="$t('pages.settings.notifications.sounds.mute')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.DEAFEN)"
+    :value="sounds[Sounds.DEAFEN]"
     @toggle="toggleSounds([Sounds.DEAFEN, Sounds.UNDEAFEN], $event)"
     :title="$t('pages.settings.notifications.sounds.deafen')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.UPLOAD)"
+    :value="sounds[Sounds.UPLOAD]"
     @toggle="toggleSound(Sounds.UPLOAD, $event)"
     :title="$t('pages.settings.notifications.sounds.upload')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.CONNECTED)"
+    :value="sounds[Sounds.CONNECTED]"
     @toggle="toggleSound(Sounds.CONNECTED, $event)"
     :title="$t('pages.settings.notifications.sounds.connected')"
   />

components/views/settings/pages/audio/sounds/Sounds.vue

@@ -2,31 +2,30 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
 import { Sounds } from '~/libraries/SoundManager/SoundManager'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   name: 'NotificationsSettingsSounds',
   layout: 'sounds',
   data() {
     return {
       Sounds,
+      audioSettings: iridium.settings.state.audio,
     }
   },
   computed: {
-    ...mapState(['sounds']),
+    sounds() {
+      return this.audioSettings.sounds
+    },
   },
-  mounted() {},
   methods: {
-    sound(key: Sounds) {
-      return this.sounds[key]
-    },
-    toggleSound(key: Sounds, value: boolean) {
-      this.$store.commit('sounds/set', { key, value })
+    toggleSound(key: Sounds, isEnabled: boolean) {
+      this.audioSettings.sounds[key] = isEnabled
     },
-    toggleSounds(keys: Sounds[], value: boolean) {
+    toggleSounds(keys: Sounds[], isEnabled: boolean) {
       for (const key of keys) {
-        this.$store.commit('sounds/set', { key, value })
+        this.audioSettings.sounds[key] = isEnabled
       }
     },
   },

components/views/settings/pages/keybinds/Keybinds.html

@@ -52,15 +52,15 @@
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.toggleMute"
+        :placeholder="keybinds.toggleMute"
       />
     </SettingsUnit>
     <SettingsUnit @click="editKeybind('openSettings')">
       <TypographyLabel :text="$t('pages.settings.keybinds.settings')" />
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.openSettings"
+        :placeholder="keybinds.openSettings"
       />
     </SettingsUnit>
   </SettingsSection>
@@ -71,15 +71,15 @@
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.toggleDeafen"
+        :placeholder="keybinds.toggleDeafen"
       />
     </SettingsUnit>
     <SettingsUnit @click="editKeybind('callActiveChat')">
       <TypographyLabel :text="$t('pages.settings.keybinds.call')" />
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.callActiveChat"
+        :placeholder="keybinds.callActiveChat"
       />
     </SettingsUnit>
   </SettingsSection>