From cc0ae60c8354e0ec603c79785d9d668c2ed9f5ff Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 15 Jan 2023 22:11:47 +0100
Subject: [PATCH] Update settings object, finalize-ish site settings panel

---
 src/common/interfaces/SettingsInterface.ts    |   7 +-
 src/common/js/utils.ts                        |   4 +-
 .../PlayerUiPanels/BaseExtensionSettings.vue  |  58 +--
 .../SiteExtensionSettings.vue                 | 410 ++++++++++++++----
 .../VideoSettings/StretchOptionsPanel.vue     |  18 -
 src/ext/conf/ExtConfPatches.ts                |  10 +
 src/ext/conf/ExtensionConf.ts                 |  12 +-
 src/ext/lib/settings/SiteSettings.ts          |  53 ++-
 src/manifest.json                             |   2 +-
 9 files changed, 392 insertions(+), 182 deletions(-)

diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts
index 804cd94..3e8946f 100644
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/src/common/interfaces/SettingsInterface.ts
@@ -357,11 +357,8 @@ export interface SiteSettingsInterface {
 
   type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled';
 
-  persistOption?: {  // must be defined in @global and @empty
-    crop?: CropModePersistence,
-    stretch?: CropModePersistence,
-    alignment?: CropModePersistence
-  },
+  // must be defined in @global and @empty
+  persistCSA?: CropModePersistence,  // CSA - crop, stretch, alignment
 
   defaults?: {       // must be defined in @global and @empty
     crop?: {type: AspectRatioType, [x: string]: any},
diff --git a/src/common/js/utils.ts b/src/common/js/utils.ts
index 0631ba4..5a7a223 100644
--- a/src/common/js/utils.ts
+++ b/src/common/js/utils.ts
@@ -11,8 +11,8 @@ export function _cp(obj) {
   try {
     return JSON.parse(JSON.stringify(obj));
   } catch (e) {
-    console.error('Failed to parse json. This probably means that the data we received was not an object. Will return data as-is');
-    console.error('data in:', obj, 'error:', e);
+    // console.error('Failed to parse json. This probably means that the data we received was not an object. Will return data as-is');
+    // console.error('data in:', obj, 'error:', e);
     return obj;
   }
 }
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index 97c0824..7780268 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -1,57 +1,13 @@
 <template>
   <div class="flex flex-column w-100">
 
-    <h2>Settings for {{site}}</h2>
     <SiteExtensionSettings
+      v-if="settings"
       :settings="settings"
-      :site="site"
+      :siteSettings="globalSettings"
+      :isDefaultConfiguration="true"
     ></SiteExtensionSettings>
 
-
-    <h2>Default settings</h2>
-    <div class="field">
-      <div class="label">Default crop:</div>
-      <div class="select">
-        <select>
-          <!-- todo: load crop options -->
-        </select>
-      </div>
-      <div class="hint">'Auto' option will enable autodetection. 'Reset' will disable extension until manually activated.</div>
-    </div>
-    <div class="field">
-      <div class="label">Default stretch:</div>
-      <div class="select">
-        <select>
-          <!-- todo: load stretch options -->
-        </select>
-      </div>
-    </div>
-    <div class="field">
-      <div class="label">Persist crop mode between videos</div>
-      <div class="select">
-        <select>
-          <!-- todo: load crop mode persistence -->
-        </select>
-      </div>
-    </div>
-
-    <div class="field">
-      <div class="label">Only enable extension in full screen</div>
-      <div class="select">
-        <select>
-
-        </select>
-      </div>
-    </div>
-    <div class="field">
-      <div class="label">Only enable autodetection in full screen</div>
-      <div class="select">
-        <select>
-
-        </select>
-      </div>
-    </div>
-
     <!-- <SiteSettingsBasicTable
       :settings="settings"
     ></SiteSettingsBasicTable> -->
@@ -65,7 +21,8 @@ import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExten
 
 export default {
   data() {
-
+    return {
+    }
   },
   mixins: [
 
@@ -78,6 +35,11 @@ export default {
     SiteExtensionSettings,
     SiteSettingsBasicTable
   },
+  computed: {
+    globalSettings() {
+      return this.settings?.getSiteSettings('@global') ?? null;
+    }
+  }
 
 }
 </script>
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
index 7b7f9de..48c83ab 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
@@ -1,41 +1,144 @@
 <template>
   <div>
-    <h3>Extension settings</h3>
+    <!-- Enable extension -->
     <div class="field">
       <div class="label">
         Enable extension under the following conditions:
       </div>
-      <ul>
-        <li>while in full screen</li>
-        <li>while in theater mode</li>
-        <li>during normal playback</li>
-      </ul>
+      <div class="select">
+        <select
+          v-model="simpleExtensionSettings.enable"
+          @click="setExtensionMode('enable', $event)"
+        >
+          <option
+            v-if="simpleExtensionSettings.enable === 'complex'"
+            value="complex"
+          >
+            (Site uses advanced settings)
+          </option>
+          <template v-if="isDefaultConfiguration">
+            <option value="disabled">
+              Disabled (unless enabled for specific site)
+            </option>
+          </template>
+          <template v-else>
+            <option value="default">
+              Use default ()
+            </option>
+            <option value="disabled">
+              Never
+            </option>
+          </template>
+          <option value="fs">
+            Fullscreen only
+          </option>
+          <option value="theater">
+            Fullscreen and theater mode
+          </option>
+          <option value="enabled">
+            Always
+          </option>
+        </select>
+      </div>
     </div>
 
+    <!-- Enable AARD -->
     <div class="field">
       <div class="label">
         Enable automatic aspect ratio detection under the following conditions:
       </div>
-      <ul>
-        <li>while in full screen</li>
-        <li>while in theater mode</li>
-        <li>during normal playback</li>
-      </ul>
-      <div class=""></div>
+      <div class="select">
+        <select
+          v-model="simpleExtensionSettings.enableAard"
+          @click="setExtensionMode('enableAard', $event)"
+        >
+          <option
+            v-if="simpleExtensionSettings.enable === 'complex'"
+            value="complex"
+          >
+            (Site uses advanced settings)
+          </option>
+          <template v-if="isDefaultConfiguration">
+            <option value="disabled">
+              Disabled (unless enabled for specific site)
+            </option>
+          </template>
+          <template v-else>
+            <option value="default">
+              Use default ()
+            </option>
+            <option value="disabled">
+              Never
+            </option>
+          </template>
+          <option value="fs">
+            Fullscreen only
+          </option>
+          <option value="theater">
+            Fullscreen and theater mode
+          </option>
+          <option value="enabled">
+            Always
+          </option>
+        </select>
+      </div>
     </div>
 
+    <!-- Enable keyboard -->
+    <div class="field">
+      <div class="label">
+        Enable keyboard shortcuts under the following conditions
+      </div>
+      <div class="select">
+        <select
+          v-model="simpleExtensionSettings.enableKeyboard"
+          @click="setExtensionMode('enableKeyboard', $event)"
+        >
+          <option
+            v-if="simpleExtensionSettings.enable === 'complex'"
+            value="complex"
+          >
+            (Site uses advanced settings)
+          </option>
+          <template v-if="isDefaultConfiguration">
+            <option value="disabled">
+              Disabled (unless enabled for specific site)
+            </option>
+          </template>
+          <template v-else>
+            <option value="default">
+              Use default ()
+            </option>
+            <option value="disabled">
+              Never
+            </option>
+          </template>
+          <option value="fs">
+            Fullscreen only
+          </option>
+          <option value="theater">
+            Fullscreen and theater mode
+          </option>
+          <option value="enabled">
+            Always
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Default crop -->
     <div class="field">
       <div class="label">Default crop:</div>
       <div class="select">
         <select
           v-model="siteDefaultCrop"
-          @click="setOption('defaultCrop', $event)"
+          @click="setOption('defaults.crop', $event)"
         >
           <option
-            v-if="site !== '@global'"
+            v-if="!isDefaultConfiguration"
             :value="undefined"
           >
-            Use default ({{defaultCrop}})
+            Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
           </option>
           <option
             v-for="(command, index) of settings?.active.commands.crop"
@@ -49,18 +152,19 @@
       <div class="hint">This is how extension will crop video if/when autodetection is disabled. Pick 'Reset' option to keep aspect ratio as-is by default.</div>
     </div>
 
+    <!-- Default stretch -->
     <div class="field">
       <div class="label">Default stretch:</div>
       <div class="select">
         <select
-          v-model="siteDefaultStretchMode"
-          @click="setOption('defaultStretch', $event)"
+          v-model="siteDefaultStretch"
+          @click="setOption('defaults.stretch', $event)"
         >
           <option
-            v-if="site !== '@global'"
+            v-if="!isDefaultConfiguration"
             :value="undefined"
           >
-            Use default ({{defaultStretch}})
+            Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
           </option>
           <option
             v-for="(command, index) of settings?.active.commands.stretch"
@@ -73,18 +177,44 @@
       </div>
     </div>
 
+    <!-- Default alignment -->
     <div class="field">
-      <div class="label">Persist crop mode between videos</div>
+      <div class="label">Default alignment:</div>
       <div class="select">
         <select
-          v-model="siteDefaultCropModePersistence"
-          @click="setOption('cropModePersistence')"
+          v-model="siteDefaultAlignment"
+          @click="setOption('defaults.alignment', $event)"
         >
           <option
-            v-if="site !== '@global'"
+            v-if="!isDefaultConfiguration"
+            :value="undefined"
+          >
+            Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
+          </option>
+          <option
+            v-for="(command, index) of alignmentOptions"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Crop, et. al. Persistence -->
+    <div class="field">
+      <div class="label">Persist crop, stretch, and alignment between videos</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultCropPersistence"
+          @click="setOption('persistCSA', $event)"
+        >
+          <option
+            v-if="!isDefaultConfiguration"
             :value="CropModePersistence.Default"
           >
-            Use default ({{defaultCropPersistence}})
+            Use default ({{defaultPersistanceLabel()}})
           </option>
           <option :value="CropModePersistence.Disabled">Disabled</option>
           <option :value="CropModePersistence.UntilPageReload">Until page reload</option>
@@ -93,44 +223,36 @@
         </select>
       </div>
     </div>
-
-    <div class="field">
-      <div class="label">Persist stretch mode between videos (TODO — this is not yet implemented)</div>
-      <div class="select">
-        <select
-          v-model="siteDefaultCropModePersistence"
-          @click="setOption('cropModePersistence')"
-        >
-          <option
-            v-if="site !== '@global'"
-            :value="CropModePersistence.Default"
-          >
-            Use default ({{defaultCropPersistence}})
-          </option>
-          <option :value="CropModePersistence.Disabled">Disabled</option>
-          <option :value="CropModePersistence.UntilPageReload">Until page reload</option>
-          <option :value="CropModePersistence.CurrentSession">Current session</option>
-          <option :value="CropModePersistence.Forever">Always persist</option>
-        </select>
-      </div>
-    </div>
-
   </div>
 </template>
 
 <script>
+import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
+import VideoAlignmentType from '../../../../../common/enums/VideoAlignmentType.enum';
 import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
 
 export default {
   data() {
     return {
       CropModePersistence: CropModePersistence,
+      alignmentOptions: [
+        {label: 'Top left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Top}},
+        {label: 'Top center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Top}},
+        {label: 'Top right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Top}},
+        {label: 'Left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Center}},
+        {label: 'Center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center}},
+        {label: 'Right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Center}},
+        {label: 'Bottom left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Bottom}},
+        {label: 'Bottom center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Bottom}},
+        {label: 'Bottom right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Bottom}}
+      ]
     }
   },
   mixins: [
 
   ],
   props: [
+    'settings',
     'siteSettings',
     'isDefaultConfiguration'
   ],
@@ -138,45 +260,136 @@ export default {
 
   },
   computed: {
+    simpleExtensionSettings() {
+      return {
+        enable: this.compileSimpleSettings('enable'),
+        enableAard: this.compileSimpleSettings('enableAard'),
+        enableKeyboard: this.compileSimpleSettings('enableKeyboard'),
+      }
+    },
     siteDefaultCrop() {
-      return JSON.stringify(
-        this.siteSettings.data.defaults.crop
-      );
+      return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : undefined;
     },
     siteDefaultStretch() {
-      return JSON.stringify(
-        this.siteSettings.data.defaults.stretch
-      );
+      return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : undefined;
+    },
+    siteDefaultAlignment() {
+      return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : undefined;
     },
     siteDefaultCropPersistence() {
-      return CropModePersistence.Default;
-      // this.settings?.getDefaultCropPersistence(this.site) ?? {type: this.site === '@global' ? CropModePersistence.Disabled : CropModePersistence.Default}
+      return this.siteSettings.raw?.persistCSA ?? undefined;
     },
-    siteDefaultFullScreenOnly() {
-      return undefined;
-      // return this.settings.getDefaultRestriction(this.site, 'onlyAllowInFullscreen');
-    },
-    siteDefaultAardFullScreenOnly() {
-      return undefined;
-      // return this.settings.getDefaultRestriction(this.site, 'onlyAllowAutodetectionInFullscreen')
-    },
-    defaultCrop() {
-      return 'parse me';
-    },
-    defaultStretch() {
-      return 'parse me';
-    },
-    defaultCropPersistence() {
-      return 'parse me';
-    },
-    defaultFullScreenOnly() {
-      return 'parse me';
-    },
-    defaultAardFullScreenOnly() {
-      return 'parse me';
+    defaultPersistanceLabel() {
+      switch (this.siteSettings.defaultSettings.persistCSA) {
+        case CropModePersistence.CurrentSession:
+          return 'current session';
+        case CropModePersistence.Disabled:
+          return 'disabled';
+        case CropModePersistence.UntilPageReload:
+          return 'until page reload';
+        case CropModePersistence.Forever:
+          return 'Always persist';
+      }
+
+      return '??';
     }
   },
   methods: {
+    /**
+     * Compiles our extension settings into more user-friendly options
+     */
+    compileSimpleSettings(component) {
+      try {
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Disabled
+        ) {
+          return 'disabled';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Default
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Default
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Default
+        ) {
+          return 'default';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+        ) {
+          return 'fs';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+        ) {
+          return 'theater';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Enabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+        ) {
+          return 'enabled';
+        }
+
+        return 'complex';
+      } catch (e) {
+        return 'loading';
+      }
+    },
+
+    getCommandValue(availableCommands, command) {
+      console.log('command:', command, 'from available commands', availableCommands);
+
+      for (const cmd of availableCommands) {
+        console.log('——— processing command:', cmd)
+        console.log('comparing', JSON.stringify(command), 'to', JSON.stringify(cmd.arguments));
+        if (JSON.stringify(cmd.arguments) === JSON.stringify(command)) {
+          return cmd.label;
+        }
+      }
+
+      return 'Unknown command';
+    },
+
+    getAlignmentLabel(alignment) {
+      console.log('alignment for site. ----------------------------', alignment);
+
+      // in case default settings don't have this set
+      if (!alignment) {
+        return 'Center'
+      }
+
+      let x, y;
+      if (alignment.x === VideoAlignmentType.Center) {
+        x = 'center';
+      } else if (alignment.x === VideoAlignmentType.Left) {
+        x = 'left';
+      } else if (alignment.x === VideoAlignmentType.Right) {
+        x = 'right';
+      } else {
+        x = '??'
+      }
+
+      if (alignment.y === VideoAlignmentType.Center) {
+        y = 'center';
+      } else if (alignment.y === VideoAlignmentType.Bottom) {
+        y = 'bottom';
+      } else if (alignment.y === VideoAlignmentType.Top) {
+        y = 'top';
+      } else {
+        y = '???'
+      };
+
+      if (x === y) {
+        return x;
+      }
+      return `${y} ${x}`;
+    },
     getOption(option) {
 
     },
@@ -191,6 +404,51 @@ export default {
       }
 
       this.siteSettings.set(option, commandArguments);
+    },
+    setExtensionMode(component, event) {
+      const option = event.target.value;
+
+      console.log('setting option', component, 'to', event.target.value);
+
+      if (option === 'complex') {
+        return;
+      }
+
+      if (option === 'default') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Default,
+          theater: ExtensionMode.Default,
+          fullscreen: ExtensionMode.Default
+        });
+      }
+      if (option === 'disabled') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Disabled,
+          theater: ExtensionMode.Disabled,
+          fullscreen: ExtensionMode.Disabled
+        });
+      }
+      if (option === 'enabled') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Enabled,
+          theater: ExtensionMode.Enabled,
+          fullscreen: ExtensionMode.Enabled
+        });
+      }
+      if (option === 'theater') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Disabled,
+          theater: ExtensionMode.Enabled,
+          fullscreen: ExtensionMode.Enabled
+        });
+      }
+      if (option === 'fs') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Disabled,
+          theater: ExtensionMode.Disabled,
+          fullscreen: ExtensionMode.Enabled
+        });
+      }
     }
   }
 
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
index 315dede..f2191f0 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
@@ -147,24 +147,6 @@
         </div>
       </div>
     </div>
-
-    <div class="field">
-      <div class="label">Extension default:</div>
-      <div class="select">
-        <select
-          v-model="extensionDefaultStretchMode"
-          @click="setDefaultStretchingMode($event, 'global')"
-        >
-          <option
-            v-for="(command, index) of settings?.active.commands.stretch"
-            :key="index"
-            :value="JSON.stringify(command.arguments)"
-          >
-            {{command.label}}
-          </option>
-        </select>
-      </div>
-    </div>
   </div>
 </template>
 
diff --git a/src/ext/conf/ExtConfPatches.ts b/src/ext/conf/ExtConfPatches.ts
index 8f39d1c..1d35496 100644
--- a/src/ext/conf/ExtConfPatches.ts
+++ b/src/ext/conf/ExtConfPatches.ts
@@ -6,6 +6,7 @@ import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
 import BrowserDetect from './BrowserDetect';
 import SettingsInterface from '../../common/interfaces/SettingsInterface';
 import { _cp } from '../../common/js/utils';
+import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 
 const ExtensionConfPatch = [
   {
@@ -201,6 +202,15 @@ const ExtensionConfPatch = [
         }
       }
     }
+  }, {
+    forVersion: '6.0.0-alpha3',
+    updateFn: (userOptions: SettingsInterface, defaultOptions) => {
+      delete (userOptions as any).sites['@global'].persistOption;
+      delete (userOptions as any).sites['@empty'].persistOption;
+
+      userOptions.sites['@global'].persistCSA = CropModePersistence.Disabled;
+      userOptions.sites['@empty'].persistCSA = CropModePersistence.Disabled;
+    }
   }
 ];
 
diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts
index 21b36b2..17ee934 100644
--- a/src/ext/conf/ExtensionConf.ts
+++ b/src/ext/conf/ExtensionConf.ts
@@ -1410,11 +1410,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Disabled
       },
 
-      persistOption: {
-        crop: CropModePersistence.Disabled,
-        stretch: CropModePersistence.Disabled,
-        alignment: CropModePersistence.Disabled,
-      },
+      persistCSA: CropModePersistence.Disabled,
 
       defaults: {
         crop: {type: AspectRatioType.Reset},  // does NOT override Aard
@@ -1439,11 +1435,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'user-defined',
-      persistOption: {
-        crop: CropModePersistence.Default,
-        stretch: CropModePersistence.Default,
-        alignment: CropModePersistence.Default,
-      },
+      persistCSA: CropModePersistence.Default,
       defaults: {
         crop: null,
         stretch: StretchType.Default,
diff --git a/src/ext/lib/settings/SiteSettings.ts b/src/ext/lib/settings/SiteSettings.ts
index acc50e8..f472df8 100644
--- a/src/ext/lib/settings/SiteSettings.ts
+++ b/src/ext/lib/settings/SiteSettings.ts
@@ -7,19 +7,28 @@ import { browser } from 'webextension-polyfill-ts';
 import StretchType from '../../../common/enums/StretchType.enum';
 import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
 
+/**
+ * Contains settings that are currently in effect for a given site. If a certain option
+ * doesn't have a value — or if it has 'default' option, SiteSettings.data will contain
+ * the value that "default" should stand for.
+ *
+ * SiteSettings.raw also contains settings object as it actually exist in the config.
+ */
 export class SiteSettings {
   private settings: Settings;
   private site: string;
 
-  data: SiteSettingsInterface;
+  raw: SiteSettingsInterface;       // actual settings
+  data: SiteSettingsInterface;      // effective settings
   temporaryData: SiteSettingsInterface;
   sessionData: SiteSettingsInterface;
-  private defaultSettings: SiteSettingsInterface;
+  readonly defaultSettings: SiteSettingsInterface;
 
   //#region lifecycle
   constructor(settings: Settings, site: string) {
     this.settings = settings;
     this.data = settings.active.sites[site];
+    this.site = site;
     this.defaultSettings = settings.default.sites['@global'];
 
     this.compileSettingsObject();
@@ -42,12 +51,13 @@ export class SiteSettings {
    * Alan pls ensure default settings object follows the correct structure
    */
   private compileSettingsObject() {
+    this.raw = _cp(this.settings.active.sites[this.site] ?? {})
+
     if (!this.data) {
       this.data = _cp(this.defaultSettings);
       return;
     }
 
-
     if (!this.data.defaults) {
       this.data.defaults = _cp(this.defaultSettings.defaults);
     } else {
@@ -82,16 +92,9 @@ export class SiteSettings {
       }
     }
 
-    // ensure data.persistOption exists:
-    if (!this.data.persistOption) {
-      this.data.persistOption = {} as any;  // this will get populated correctly soon
+    if (!this.data.persistCSA || this.data.persistCSA === CropModePersistence.Default) {
+      this.data.persistCSA = this.defaultSettings.persistCSA ?? CropModePersistence.Disabled;
     }
-    for (const persistOption of ['crop', 'stretch', 'alignment']) {
-      if ( (this.data.persistOption[persistOption] ?? CropModePersistence.Default) === CropModePersistence.Default ) {
-        this.data.persistOption[persistOption] = this.defaultSettings.persistOption[persistOption];
-      }
-    }
-
 
     if (this.data.activeDOMConfig && this.data.DOMConfig) {
       this.data.currentDOMConfig = this.data.DOMConfig[this.data.activeDOMConfig];
@@ -113,7 +116,9 @@ export class SiteSettings {
 
     const parsedSettings = JSON.parse(changes.uwSettings.newValue);
     this.data = parsedSettings.active.sites[this.site];
-    this.defaultSettings = parsedSettings.active.sites['@global'];
+
+    // we ignore 'readonly' property this once
+    (this as any).defaultSettings = parsedSettings.active.sites['@global'];
 
     this.compileSettingsObject();
   }
@@ -142,7 +147,7 @@ export class SiteSettings {
    * Gets default crop mode for extension, while taking persistence settings into account
    */
   getDefaultOption(option: 'crop' | 'stretch' | 'alignment') {
-    const persistenceLevel = this.data.persistOption[option];
+    const persistenceLevel = this.data.persistCSA;
 
     switch (persistenceLevel) {
       case CropModePersistence.UntilPageReload:
@@ -217,15 +222,19 @@ export class SiteSettings {
 
     const pathParts = optionPath.split('.');
 
-    let iterator = this.settings.active.sites[this.site];
-    let i;
-    for (i = 0; i < pathParts.length - 1; i++) {
-      if (!iterator[pathParts[i]]) { // some optional paths may still be undefined, even after cloning empty object
-        iterator[pathParts[i]] = {};
+    if (pathParts.length === 1) {
+      this.settings.active.sites[this.site][optionPath] = optionValue;
+    } else {
+      let iterator = this.settings.active.sites[this.site];
+      let i;
+      for (i = 0; i < pathParts.length - 1; i++) {
+        if (!iterator[pathParts[i]]) { // some optional paths may still be undefined, even after cloning empty object
+          iterator[pathParts[i]] = {};
+        }
+        iterator = iterator[pathParts[i]];
       }
-      iterator = iterator[pathParts[i]];
+      iterator[pathParts[i]] = optionValue;
     }
-    iterator[pathParts[i]] = optionValue;
 
     if (reload) {
       this.settings.save();
@@ -275,7 +284,7 @@ export class SiteSettings {
    * @returns
    */
   async updatePersistentOption(option: 'crop' | 'stretch' | 'alignment', value) {
-    const persistenceLevel = this.data.persistOption[option];
+    const persistenceLevel = this.data.persistCSA;
     switch (persistenceLevel) {
       case CropModePersistence.Disabled:
         return;
diff --git a/src/manifest.json b/src/manifest.json
index 709a235..6b464e7 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "6.0.0-alpha1",
+  "version": "6.0.0-alpha3",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"