Settings page is now on some baseline of "works", but needs some minor touch-ups

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

@@ -78,6 +78,7 @@
           :settings="settings"
           :siteSettings="selectedSiteSettings"
           :isDefaultConfiguration="selectedSite === '@global'"
+          :visibleSegments="{advancedPlayerSettings: role === 'settings'}"
         ></SiteExtensionSettings>
       </div>
     </template>
@@ -98,6 +99,7 @@ export default {
   },
   props: [
     'settings',
+    'role',
   ],
   components: {
     SiteExtensionSettings,

src/ui/components/SettingsWindowContent.vue

@@ -115,8 +115,8 @@
 
           <OtherSiteSettings
             v-if="selectedTab === 'website-extension-settings'"
+            :role="role"
             :settings="settings"
-            :enableSettingsEditor="true"
           ></OtherSiteSettings>
 
           <PlayerElementSettings
@@ -230,8 +230,6 @@ const AVAILABLE_TABS = {
         { id: 'website-extension-settings', label: 'Website exceptions', },
       ]
    },
-  'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
-  'settings.player-element-settings': { id: 'settings.player-element-settings', label: 'Advanced video player options', icon: 'play-box-edit-outline' },
   'window.player-element-settings': { id: 'window.player-element-settings', label: 'Advanced video player options', icon: 'play-box-edit-outline' },
   'autodetectionSettings': {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
   'ui-settings': {id: 'ui-settings', label: 'UI settings', icon: 'movie-cog-outline' },
@@ -275,6 +273,12 @@ const TAB_LOADOUT = {
   ],
 }
 
+const DEFAULT_TABS = {
+  settings: 'default-extension-settings',
+  updated: 'updated',
+  popup: 'video-settings',
+}
+
 export default defineComponent({
   components: {
     VideoSettings,
@@ -304,7 +308,7 @@ export default defineComponent({
       tabs: [
 
       ],
-      selectedTab: 'extensionSettings',
+      selectedTab: undefined,
       BrowserDetect: BrowserDetect,
       preventClose: false,
       siteSettings: null,
@@ -408,6 +412,7 @@ export default defineComponent({
         }
       }
       this.tabs = tabs;
+      this.selectedTab = this.selectedTab ?? DEFAULT_TABS[this.role];
     },
     setInitialPath(path: string[] = this.initialPath) {
       console.log('setting initial path:', this.initialPath)

src/ui/components/segments/ExtensionSettings/BaseExtensionSettings.vue

@@ -50,6 +50,7 @@
       <template v-if="tab === 'otherSites'">
         <OtherSiteSettings
           v-if="settings"
+          :role="role"
           :settings="settings"
         >
         </OtherSiteSettings>
@@ -174,6 +175,7 @@ export default {
   },
   mixins: [],
   props: [
+    'role',
     'settings',
     'site',
     'enableSettingsEditor',

src/ui/components/segments/ExtensionSettings/Panels/OtherSiteSettings.vue

@@ -43,6 +43,7 @@
           :settings="settings"
           :siteSettings="selectedSiteSettings"
           :isDefaultConfiguration="selectedSite === '@global'"
+          :visibleSegments="{advancedPlayerSettings: role === 'settings'}"
         ></SiteExtensionSettings>
       </div>
     </div>
@@ -63,6 +64,7 @@ export default {
     }
   },
   props: [
+    'role',
     'settings',
     'isCompact',
   ],

src/ui/components/segments/ExtensionSettings/Panels/SiteExtensionSettings.vue

@@ -317,10 +317,9 @@
       </div>
     </div>
 
-    <div class="mt-4">
+    <div v-if="visibleSegments?.advancedPlayerSettings" class="mt-4">
       <h4 class="mt-4 text-primary-400 text-[1.125em] font-bold mb-2">Other options</h4>
       <button @click="playerDetectionOptionsDialog.visible = true">Advanced video player options</button>
-      <p>{{playerDetectionOptionsDialog.visible}}</p>
     </div>
   </div>
 
@@ -328,13 +327,13 @@
   <Popup
     v-if="playerDetectionOptionsDialog.visible"
     title="Player detection options"
-    confirmButtonText="Save"
+    :clientSideButtons="true"
-    cancelButtonText="Cancel"
-    @onCancel="playerDetectionOptionsDialog.visible = false"
   >
     <PlayerSelectorAdvancedForm
+      role="popup"
       :settings="settings"
       :siteSettings="siteSettings"
+      @close="playerDetectionOptionsDialog.visible = false"
     ></PlayerSelectorAdvancedForm>
   </Popup>
 </template>
@@ -361,6 +360,7 @@ export default defineComponent({
     'siteSettings',
     'isDefaultConfiguration',
     'showPlayerSettings',
+    'visibleSegments', // object of {[segment: string]: true}
   ],
   data() {
     return {

src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorAdvancedForm.vue

@@ -148,7 +148,7 @@
   <div class="w-full flex flex-row gap-2 justify-end">
     <button @click="openSaveAsDialog()">Save as</button>
     <button :disabled="!siteSettings.raw.DOMConfig?.[DOMConfigName] || DOMConfigName?.startsWith('@')">Save</button>
-    <button @click="closeForm()">Close</button>
+    <button v-if="role === 'popup'" @click="closeForm()">Close</button>
   </div>
 
   <!-- PRESET SELECT DIALOG -->
@@ -317,6 +317,7 @@ export default({
     ConfirmButton,
   },
   props: [
+    'role',
     'settings',
     'siteSettings'
   ],
@@ -352,16 +353,16 @@ export default({
         this.DOMConfigName = configKey;
 
         if (!DOMConfigData.elements) {
-          DOMConfigData.elements =  _cp(siteSettings.blankSettings.DOMConfig.empty);
+          DOMConfigData.elements =  _cp(siteSettings.blankSettings.DOMConfig['@empty']);
         }
         if (!DOMConfigData.elements.player) {
-          DOMConfigData.elements.player = _cp(siteSettings.blankSettings.DOMConfig.empty.elements.player);
+          DOMConfigData.elements.player = _cp(siteSettings.blankSettings.DOMConfig['@empty'].elements.player);
         }
         if (!DOMConfigData.elements.video) {
-          DOMConfigData.elements.video = _cp(siteSettings.blankSettings.DOMConfig.empty.elements.video);
+          DOMConfigData.elements.video = _cp(siteSettings.blankSettings.DOMConfig['@empty'].elements.video);
         }
       } else {
-        DOMConfigData = _cp(siteSettings.blankSettings.DOMConfig.empty)
+        DOMConfigData = _cp(siteSettings.blankSettings.DOMConfig['@empty'])
       }
       this.DOMConfigData = DOMConfigData;
 
@@ -369,7 +370,6 @@ export default({
     },
 
 
-
     openSelectSnapshotDialog() {
       this.selectSnapshotDialog = {
         visible: true
@@ -478,6 +478,10 @@ export default({
       this.siteSettings.raw.activeDOMConfig = this.DOMConfigName;
       this.saveAsDialog = {visible: false};
       await this.settings.save();
+    },
+
+    closeForm() {
+      this.$emit('close');
     }
   }
 });

src/ui/components/segments/UISettings/UISettings.vue

@@ -1,19 +1,13 @@
 <template>
   <div class="flex flex-col relative w-full">
-
     <h2 class="text-[1.75em]">Player UI options</h2>
 
     <!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
-    <div class="flex flex-col" style="width: 100%">
+    <div v-if="settings" class="flex flex-col" style="width: 100%">
 
       <div class="flex flex-col compact-form">
-        <div v-if="!siteSettings.data.enableUI.fullscreen">
-          UI is disabled for this site.
-        </div>
-
         <div
           class="flex flex-col field-group compact-form"
-          :class="{disabled: !siteSettings.data.enableUI.fullscreen}"
         >
           <div class="field disabled">
             <div class="label">
@@ -107,6 +101,9 @@
       </div>
 
     </div>
+    <div v-else>
+      Loading settings ...
+    </div>
   </div>
 </template>