Store the changed and default settings in different variables

bigbluebutton-html5/imports/ui/services/settings/index.js

@@ -8,8 +8,12 @@ const SETTINGS = [
   'video',
   'cc',
   'dataSaving',
+  'animations',
 ];
 
+const CHANGED_SETTINGS = 'changed_settings';
+const DEFAULT_SETTINGS = 'dafault_settings';
+
 class Settings {
   constructor(defaultValues = {}) {
     SETTINGS.forEach((p) => {
@@ -31,33 +35,65 @@ class Settings {
         },
       });
     });
-
+    this.defaultSettings = {};
     // Sets default locale to browser locale
     defaultValues.application.locale = navigator.languages ? navigator.languages[0] : false
       || navigator.language
       || defaultValues.application.locale;
 
     this.setDefault(defaultValues);
+    this.loadChanged();
   }
 
   setDefault(defaultValues) {
+    Object.keys(defaultValues).forEach((key) => {
+      this[key] = defaultValues[key];
+      this.defaultSettings[`_${key}`] = defaultValues[key];
+    });
+
+    this.save(DEFAULT_SETTINGS);
+  }
+
+  loadChanged() {
     const savedSettings = {};
 
     SETTINGS.forEach((s) => {
-      savedSettings[s] = Storage.getItem(`settings_${s}`);
+      savedSettings[s] = Storage.getItem(`${CHANGED_SETTINGS}_${s}`);
     });
 
-    Object.keys(defaultValues).forEach((key) => {
-      this[key] = _.extend(defaultValues[key], savedSettings[key]);
+    Object.keys(savedSettings).forEach((key) => {
+      const savedItem = savedSettings[key];
+      if (!savedItem) return;
+      this[key] = {
+        ...this[key],
+        ...savedItem,
+      };
     });
-
-    this.save();
   }
 
-  save() {
-    Object.keys(this).forEach((k) => {
-      Storage.setItem(`settings${k}`, this[k].value);
-    });
+  save(settings = CHANGED_SETTINGS) {
+    if (settings === CHANGED_SETTINGS) {
+      Object.keys(this).forEach((k) => {
+        const values = this[k].value;
+        const defaultValues = this.defaultSettings[k];
+
+        if (!values) return;
+        const changedValues = Object.keys(values)
+          .filter(item => values[item] !== defaultValues[item])
+          .reduce((acc, item) => ({
+            ...acc,
+            [item]: values[item],
+          }), {});
+
+        if (_.isEmpty(changedValues)) return;
+        Storage.setItem(`${settings}${k}`, changedValues);
+      });
+    } else {
+      Object.keys(this).forEach((k) => {
+        Storage.setItem(`${settings}${k}`, this[k].value);
+      });
+    }
+
 
     const userSettings = {};