Move default settings to 'other sites' tab

src/csui/res/css/flex.scss

@@ -30,6 +30,9 @@
 .items-center {
   align-items: center;
 }
+.items-baseline {
+  align-items: baseline;
+}
 
 .flex-wrap {
   flex-wrap: wrap;

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -9,22 +9,22 @@
           :class="{'active': tab === 'siteSettings'}"
           @click="setTab('siteSettings')"
         >
-          Settings for current site<br/>
+          Current site<br/>
           <small>{{ site }}</small>
         </div>
         <div
           class="tab"
-          :class="{'active': tab === 'extensionSettings'}"
+          :class="{'active': tab === 'embeddedSites'}"
-          @click="setTab(tab = 'extensionSettings')"
+          @click="setTab(tab = 'embeddedSites')"
         >
-          Default settings for extension
+          Embedded content
         </div>
         <div
           class="tab"
           :class="{'active': tab === 'otherSites'}"
           @click="setTab(tab = 'otherSites')"
         >
-          Settings for other sites
+          Defaults & other sites
         </div>
       </div>
 

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

@@ -1,16 +1,49 @@
 <template>
   <div class="">
     <template v-if="!selectedSite">
+
+      <div class="flex flex-col container pointer hoverable" style="margin-top: 1rem; padding: 0.5rem 1rem;" @click="selectedSite = '@global'" >
+        <div class="flex flex-row">
+          <div class="flex-grow pointer">
+            <b style="color: #fa6">Default settings</b>
+            <!-- <span :style="getSiteTypeColor('@global')"> -->
+              <!-- (config: {{site.type ?? 'unknown'}}) -->
+            <!-- </span> -->
+          </div>
+          <div>Edit</div>
+        </div>
+        <div class="flex flex-row">
+          <small>
+            <span style="text-transform: uppercase; font-size: 0.9rem">Enable extension: <span style="font-size: 0.9rem;" :style="getSiteEnabledColor('@global', 'enable')">{{ getSiteEnabledModes('@global', 'enable') }}</span></span>&nbsp;<br/>
+            Autodetection: <span :style="getSiteEnabledColor('@global', 'enableAard')"><small>{{ getSiteEnabledModes('@global', 'enableAard') }}</small></span>;&nbsp;
+            Keyboard shortcuts: <span :style="getSiteEnabledColor('@global', 'enableKeyboard')"><small>{{ getSiteEnabledModes('@global', 'enableKeyboard') }}</small></span>;
+            In-player UI: <span :style="getSiteEnabledColor('@global', 'enableUI')"><small>{{ getSiteEnabledModes('@global', 'enableUI') }}</small></span>;
+          </small>
+        </div>
+      </div>
+
       <div style="margin-top: 1rem; margin-bottom: 1rem;">
+        <div  class="info" style="float: none">
           <b>NOTE:</b> Sites not on this list use default extension settings.
         </div>
-      <div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-col container pointer" style="margin-top: 4px; padding: 0.5rem 1rem;">
+      </div>
+      <b>Other sites:</b>
+      <div style="margin: 1rem 0rem" class="w-full">
+        <div class="flex flex-row items-baseline">
+          <div style="margin-right: 1rem">Search for site:</div>
+          <div class="input flex-grow">
+            <input v-model="siteFilter" />
+          </div>
+        </div>
+      </div>
+      <div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-col container pointer hoverable" style="margin-top: 4px; padding: 0.5rem 1rem;">
         <div class="flex flex-row">
           <div class="flex-grow pointer">
             <b>{{ site.key }}</b>
             <span :style="getSiteTypeColor(site.type)">
               (config: {{site.type ?? 'unknown'}})
-            </span></div>
+            </span>
+          </div>
           <div>Edit</div>
         </div>
         <div class="flex flex-row">
@@ -18,6 +51,7 @@
             Enabled: <span :style="getSiteEnabledColor(site.key, 'enable')"><small>{{ getSiteEnabledModes(site.key, 'enable') }}</small></span>;&nbsp;
             Aard <span :style="getSiteEnabledColor(site.key, 'enableAard')"><small>{{ getSiteEnabledModes(site.key, 'enableAard') }}</small></span>;&nbsp;
             kbd: <span :style="getSiteEnabledColor(site.key, 'enableKeyboard')"><small>{{ getSiteEnabledModes(site.key, 'enableKeyboard') }}</small></span>
+            UI: <span :style="getSiteEnabledColor(site.key, 'enableUI')"><small>{{ getSiteEnabledModes(site.key, 'enableUI') }}</small></span>
           </small>
         </div>
       </div>
@@ -28,7 +62,7 @@
           ←
         </div>
         <div>
-          Editing {{ selectedSite }}
+          Editing {{ selectedSite === '@global' ? 'default settings' : selectedSite }}
         </div>
       </div>
       <div>
@@ -36,7 +70,7 @@
           v-if="selectedSiteSettings"
           :settings="settings"
           :siteSettings="selectedSiteSettings"
-          :isDefaultConfiguration="false"
+          :isDefaultConfiguration="selectedSite === '@global'"
         ></SiteExtensionSettings>
       </div>
     </template>
@@ -51,6 +85,8 @@ export default {
   data() {
     return {
       selectedSite: null,
+      siteFilter: '',
+      filteredSites: []
     }
   },
   props: [
@@ -66,7 +102,7 @@ export default {
       } else {
         const sites = [];
         for (const siteKey in this.settings.active.sites) {
-          if (!siteKey.startsWith('@')) {
+          if (!siteKey.startsWith('@') && (!this.siteFilter.trim() || siteKey.includes(this.siteFilter))) {
             sites.push({
               key: siteKey,
               ...this.settings.active.sites[siteKey]
@@ -120,3 +156,15 @@ export default {
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
+<style lang="scss" scoped>
+.hoverable {
+  border: 1px solid #333;
+
+  &:hover {
+    border: 1px solid #fa6;
+    color: rgb(255, 231, 212);
+    background-color: rgba(#fa6, 0.125);
+  }
+}
+
+</style>

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

@@ -44,7 +44,7 @@
     </div>
 
     <!-- The rest of the menu is disabled when extension is disabled -->
-    <div :class="{disabled: simpleEffectiveSettings.enable === 'disabled'}">
+    <div :class="{disabled: simpleEffectiveSettings.enable === 'disabled' && !isDefaultConfiguration}">
       <!-- Enable AARD -->
       <div class="field">
         <div class="label">
@@ -537,11 +537,13 @@ export default {
     setExtensionMode(component, event) {
       const option = event.target.value;
 
+      console.log('SET EXTENSION MODE — OPTIONS:', option);
+
       if (option === 'complex') {
         return;
       }
 
-      if (component === 'enable') {
+      if (component === 'enable' && !this.isDefaultConfiguration) {
         this.setExtensionMode('enableAard', event);
         this.setExtensionMode('enableKeyboard', event);
 

src/csui/src/popup/panels/PopupVideoSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col" style="padding-bottom: 20px">
+  <div class="flex flex-col relative h-full" style="padding-bottom: 20px">
 
     <!--
       Extension is disabled for a given site when it's disabled in full screen, since

src/ext/lib/video-transform/Zoom.ts

@@ -3,7 +3,6 @@ import Logger from '../Logger';
 import VideoData from '../video-data/VideoData';
 
 // calculates zooming and video offsets/panning
-
 const MIN_SCALE = 0.5;
 const MAX_SCALE = 8;
 const LOG_MAX_SCALE = Math.log2(MAX_SCALE);