get UI to somewhat work. TODO: get scripts to work

src/common/js/utils.ts

@@ -8,5 +8,11 @@ export async function sleep(timeout) {
  * @returns
  */
 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);
+    return obj;
+  }
 }

src/csui/src/PlayerUIWindow.vue

@@ -87,12 +87,14 @@
           <VideoSettings
             v-if="selectedTab === 'videoSettings'"
             :settings="settings"
+            :siteSettings="siteSettings"
             :eventBus="eventBus"
             :site="site"
           ></VideoSettings>
           <PlayerDetectionPanel
             v-if="selectedTab === 'playerDetection'"
             :settings="settings"
+            :siteSettings="siteSettings"
             :eventBus="eventBus"
             :site="site"
           >
@@ -100,11 +102,13 @@
           <BaseExtensionSettings
             v-if="selectedTab === 'extensionSettings'"
             :settings="settings"
+            :siteSettings="siteSettings"
             :site="site"
           ></BaseExtensionSettings>
           <AutodetectionSettingsPanel
             v-if="selectedTab === 'autodetectionSettings'"
             :settings="settings"
+            :siteSettings="siteSettings"
             :eventBus="eventBus"
             :site="site"
           >

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -131,8 +131,7 @@ export default {
 
   ],
   props: [
-    'settings',
+    'siteSettings',
-    'site',
     'isDefaultConfiguration'
   ],
   components: {
@@ -141,12 +140,12 @@ export default {
   computed: {
     siteDefaultCrop() {
       return JSON.stringify(
-        this.settings?.getDefaultCrop(this.site) ?? {type: this.site === '@global' ? AspectRatioType.Automatic : AspectRatioType.Default}
+        this.siteSettings.data.defaults.crop
       );
     },
     siteDefaultStretch() {
       return JSON.stringify(
-        this.settings?.getDefaultStretch(this.site) ?? {type: this.site === '@global' ? StretchMode.NoStretch : StretchMode.Default}
+        this.siteSettings.data.defaults.stretch
       );
     },
     siteDefaultCropPersistence() {

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -165,10 +165,9 @@ export default {
     CommsMixin
   ],
   props: [
-    'settings',
+    'settings',      // required for buttons and actions, which are global
-    'frame',
+    'siteSettings',
     'eventBus',
-    'site',
     'isEditing'
   ],
   components: {
@@ -176,14 +175,9 @@ export default {
     EditShortcutButton,
   },
   computed: {
-    extensionDefaultCrop() {
-      return JSON.stringify(
-        this.settings?.active.crop?.default ?? {type: AspectRatioType.Automatic}
-      );
-    },
     siteDefaultCrop()  {
       return JSON.stringify(
-        this.settings?.getDefaultCrop(this.site) ?? {type: AspectRatioType.Automatic}
+        this.siteSettings.data.defaults.crop
       );
     },
   },
@@ -215,7 +209,7 @@ export default {
         return false;
       }
 
-      const defaultCrop = this.settings.getDefaultCrop(this.site);
+      const defaultCrop = this.siteSettings.data.defaults.crop;
 
       if (cropCommand.arguments.type === AspectRatioType.Automatic) {
         return this.resizerConfig.crop.type === AspectRatioType.Automatic

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -198,10 +198,9 @@ export default {
     CommsMixin
   ],
   props: [
-    'settings',
+    'settings',      // required for buttons and actions, which are global
-    'frame',
+    'siteSettings',
     'eventBus',
-    'site',
     'isEditing'
   ],
   components: {
@@ -209,14 +208,9 @@ export default {
     EditShortcutButton,
   },
   computed: {
-    extensionDefaultStretch() {
-      return JSON.stringify(
-        this.settings?.active.stretch?.default ?? {type: StretchMode.NoStretch}
-      );
-    },
     siteDefaultStretch() {
       return JSON.stringify(
-        this.settings?.getDefaultStretch(this.site) ?? {type: StretchMode.NoStretch}
+        this.siteSettings.data.defaults.stretch
       );
     },
   },

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue

@@ -100,10 +100,9 @@ export default {
 
   ],
   props: [
-    'settings',
+    'settings',      // required for buttons and actions, which are global
-    'frame',
+    'siteSettings',
     'eventBus',
-    'site',
     'isEditing'
   ],
   methods: {

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -39,10 +39,8 @@
 
         <CropOptionsPanel
           :settings="settings"
-          :frame="frame"
+          :siteSettings="siteSettings"
-          :exec="exec"
           :eventBus="eventBus"
-          :site="site"
           :isEditing="editMode"
         >
         </CropOptionsPanel>
@@ -57,10 +55,8 @@
 
         <StretchOptionsPanel
           :settings="settings"
-          :frame="frame"
+          :siteSettings="siteSettings"
-          :exec="exec"
           :eventBus="eventBus"
-          :site="site"
           :isEditing="editMode"
         ></StretchOptionsPanel>
       </div>
@@ -75,10 +71,9 @@
 
         <ZoomOptionsPanel
           :settings="settings"
-          :frame="frame"
+          :siteSettings="siteSettings"
-          :exec="exec"
           :eventBus="eventBus"
-          :site="site"
+          :isEditing="editMode"
         ></ZoomOptionsPanel>
       </div>
 
@@ -142,7 +137,8 @@ export default {
     CommsMixin,
   ],
   props: [
-    'settings',
+    'settings',      // required for buttons and actions, which are global
+    'siteSettings',
     'frame',
     'eventBus',
     'site'

src/ext/lib/settings/SiteSettings.ts

@@ -48,6 +48,9 @@ export class SiteSettings {
     }
 
 
+    if (!this.data.defaults) {
+      this.data.defaults = _cp(this.defaultSettings.defaults);
+    } else {
       // 'undefined' default here means use default
       this.data.defaults.crop = this.data.defaults.crop ?? _cp(this.defaultSettings.defaults.crop);
 
@@ -65,6 +68,7 @@ export class SiteSettings {
           this.data.defaults.alignment.y = _cp(this.defaultSettings.defaults.alignment.y);
         }
       }
+    }
 
 
     for (const enableSegment of ['enable', 'enableAard', 'enableKeyboard']) {