From 57261b509400efb6e595573213d695ba6623e222 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 23 Jan 2023 00:15:56 +0100
Subject: [PATCH] Extension settings now holds both extension and site settings

---
 src/csui/src/PlayerUIWindow.vue               |  4 +-
 .../PlayerUiPanels/BaseExtensionSettings.vue  | 55 +++++++++++++++++--
 .../SiteExtensionSettings.vue                 |  2 +-
 3 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/csui/src/PlayerUIWindow.vue b/src/csui/src/PlayerUIWindow.vue
index cf54cf1..4c91ddf 100644
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@@ -150,9 +150,9 @@ export default {
       tabs: [
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
-        {id: 'extensionSettings', label: 'Extension options', icon: 'cogs' },
+        {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
         {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
-        {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
+        // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
         {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
       ],
       selectedTab: 'videoSettings',
diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index 7780268..b7b1288 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -1,12 +1,43 @@
 <template>
   <div class="flex flex-column w-100">
 
-    <SiteExtensionSettings
-      v-if="settings"
-      :settings="settings"
-      :siteSettings="globalSettings"
-      :isDefaultConfiguration="true"
-    ></SiteExtensionSettings>
+    <!-- TAB ROW -->
+    <div class="flex flex-row">
+      <div
+        class="tab"
+        :class="{'active': tab === 'siteSettings'}"
+        @click="setTab('siteSettings')"
+      >
+        Settings for current site<br/>
+        <small>{{ site }}</small>
+      </div>
+      <div
+        class="tab"
+        :class="{'active': tab === 'extensionSettings'}"
+        @click="setTab(tab = 'extensionSettings')"
+      >
+        Default settings for extension
+      </div>
+    </div>
+
+    <template v-if="tab === 'siteSettings' && siteSettings">
+      <SiteExtensionSettings
+        v-if="settings"
+        :settings="settings"
+        :siteSettings="siteSettings"
+        :isDefaultConfiguration="false"
+      ></SiteExtensionSettings>
+    </template>
+
+    <template v-if="tab === 'extensionSettings' && globalSettings">
+      not site settings
+      <SiteExtensionSettings
+        v-if="settings"
+        :settings="settings"
+        :siteSettings="globalSettings"
+        :isDefaultConfiguration="true"
+      ></SiteExtensionSettings>
+    </template>
 
     <!-- <SiteSettingsBasicTable
       :settings="settings"
@@ -22,6 +53,7 @@ import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExten
 export default {
   data() {
     return {
+      tab: 'siteSettings'
     }
   },
   mixins: [
@@ -38,6 +70,17 @@ export default {
   computed: {
     globalSettings() {
       return this.settings?.getSiteSettings('@global') ?? null;
+    },
+    siteSettings() {
+      if (this.site) {
+        return  this.settings?.getSiteSettings(this.site) ?? null;
+      }
+      return null;
+    }
+  },
+  methods: {
+    setTab(tab) {
+      this.tab = tab;
     }
   }
 
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
index 48c83ab..6a84f01 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
@@ -214,7 +214,7 @@
             v-if="!isDefaultConfiguration"
             :value="CropModePersistence.Default"
           >
-            Use default ({{defaultPersistanceLabel()}})
+            Use default ({{defaultPersistanceLabel}})
           </option>
           <option :value="CropModePersistence.Disabled">Disabled</option>
           <option :value="CropModePersistence.UntilPageReload">Until page reload</option>