Site and extension options: done

src/common/interfaces/SettingsInterface.ts

@@ -355,7 +355,8 @@ export interface SiteSettingsInterface {
   enableAard: ExtensionEnvironmentSettingsInterface;
   enableKeyboard: ExtensionEnvironmentSettingsInterface;
 
-  type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled';
+  type?: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
+  defaultType: 'official' | 'community' | 'user-defined' | 'testing' | 'officially-disabled' | 'unknown' | 'modified';
 
   // must be defined in @global and @empty
   persistCSA?: CropModePersistence,  // CSA - crop, stretch, alignment

src/csui/res/css/common.scss

@@ -389,3 +389,8 @@ small {
 .monospace {
   font-family: 'Overpass Mono';
 }
+
+.pointer {
+  cursor: pointer;
+  user-select: none;
+}

src/csui/src/PlayerUIWindow.vue

@@ -267,7 +267,7 @@ export default {
     }
 
     &.community {
-      background-color: rgb(47, 47, 97);
+      background-color: rgb(85, 85, 179);
       color: #fff;
 
       .mdi {

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -48,6 +48,13 @@
       ></SiteExtensionSettings>
     </template>
 
+    <template v-if="tab === 'otherSites'">
+      <OtherSiteSettings
+        v-if="settings"
+        :settings="settings"
+      >
+      </OtherSiteSettings>
+    </template>
     <!-- <SiteSettingsBasicTable
       :settings="settings"
     ></SiteSettingsBasicTable> -->
@@ -56,8 +63,9 @@
 </template>
 
 <script>
-import SiteSettingsBasicTable from './PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue'
+import SiteSettingsBasicTable from './PanelComponents/ExtensionSettings/SiteSettingsBasicTable.vue';
-import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue'
+import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
+import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
 
 export default {
   data() {
@@ -74,8 +82,9 @@ export default {
   ],
   components: {
     SiteExtensionSettings,
-    SiteSettingsBasicTable
+    SiteSettingsBasicTable,
-  },
+    OtherSiteSettings
+},
   computed: {
     globalSettings() {
       return this.settings?.getSiteSettings('@global') ?? null;

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

@@ -0,0 +1,122 @@
+<template>
+  <div class="">
+    <template v-if="!selectedSite">
+      <div style="margin-top: 1rem; margin-bottom: 1rem;">
+        <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-column container pointer" 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>
+          <div>Edit</div>
+        </div>
+        <div class="flex flex-row">
+          <small>
+            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>
+          </small>
+        </div>
+      </div>
+    </template>
+    <template v-if="selectedSite">
+      <div class="flex flex-row container" style="align-items: center; color: #dedede; margin-top: 1rem;">
+        <div @click="selectedSite = null" class="pointer button-hover" style=" font-size: 2em; padding: 0.5rem; margin-right: 1em;">
+          ←
+        </div>
+        <div>
+          Editing {{ selectedSite }}
+        </div>
+      </div>
+      <div>
+        <SiteExtensionSettings
+          v-if="selectedSiteSettings"
+          :settings="settings"
+          :siteSettings="selectedSiteSettings"
+          :isDefaultConfiguration="false"
+        ></SiteExtensionSettings>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
+import SiteExtensionSettings from './SiteExtensionSettings.vue';
+
+export default {
+  data() {
+    return {
+      selectedSite: null,
+    }
+  },
+  props: [
+    'settings',
+  ],
+  components: {
+    SiteExtensionSettings,
+  },
+  computed: {
+    sites() {
+      if (!this.settings?.active?.sites) {
+        return [];
+      } else {
+        const sites = [];
+        for (const siteKey in this.settings.active.sites) {
+          if (!siteKey.startsWith('@')) {
+            sites.push({
+              key: siteKey,
+              ...this.settings.active.sites[siteKey]
+            })
+          }
+        };
+        sites.sort((a, b) => {
+          const cmpa = a.key.replace('www.', '');
+          const cmpb = b.key.replace('www.', '');
+
+          return cmpa < cmpb ? -1 : 1;
+        });
+        return sites;
+      }
+    },
+    selectedSiteSettings() {
+      return this.settings?.getSiteSettings(this.selectedSite) ?? null;
+    }
+  },
+  methods: {
+    getSiteTypeColor(siteType) {
+      switch (siteType) {
+        case 'official': return 'color: #fa6';
+        case 'community': return 'color: rgb(114, 114, 218)';
+        case 'officially-disabled': return 'color: #f00';
+        case 'testing': return 'color: #d81';
+        default: return 'color: rgb(138, 65, 126)'
+      };
+    },
+    getSiteEnabledColor(site, component) {
+      const status = this.getSiteEnabledModes(site, component);
+
+      return status === 'disabled' ? 'color: #f00' : 'color: #1f8';
+    },
+    getSiteEnabledModes(site, component) {
+      if (this.settings?.getSiteSettings(site).data[component]?.normal === ExtensionMode.Enabled) {
+        return 'always';
+      }
+      if (this.settings?.getSiteSettings(site).data[component]?.theater === ExtensionMode.Enabled) {
+        return 'T + FS';
+      }
+      if (this.settings?.getSiteSettings(site).data[component]?.fullscreen === ExtensionMode.Enabled) {
+        return 'fullscreen';
+      }
+      return 'disabled';
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="../../../../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../../../res-common/common.scss" scoped></style>

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

@@ -408,8 +408,6 @@ export default {
     setExtensionMode(component, event) {
       const option = event.target.value;
 
-      console.log('setting option', component, 'to', event.target.value);
-
       if (option === 'complex') {
         return;
       }
@@ -458,3 +456,8 @@ export default {
 <style lang="scss" src="../../../../../res/css/flex.scss" scoped></style>
 <style lang="scss" src="../../../res-common/panels.scss" scoped></style>
 <style lang="scss" src="../../../res-common/common.scss" scoped></style>
+<style scoped>
+.button-hover:hover {
+  color: #fa6;
+}
+</style>

src/csui/src/res-common/common.scss

@@ -150,3 +150,8 @@ h1, h2, h3 {
   padding: 0.25rem 0.5rem;
   padding-top: 0.5rem;
 }
+
+.pointer {
+  cursor: pointer;
+  user-select: none;
+}

src/csui/src/res-common/panels.scss

@@ -20,3 +20,7 @@
     background-color:rgba(0, 0, 0, 0.75)
   }
 }
+
+.container {
+  background-color: rgba(0, 0, 0, 0.5);
+}

src/ext/conf/ExtConfPatches.ts

@@ -264,6 +264,15 @@ const ExtensionConfPatch = [
       }
       userOptions.sites['@empty'].defaults.alignment = {x: VideoAlignmentType.Default, y: VideoAlignmentType.Default};
     }
+  }, {
+    forVersion: '5.99.6',
+    updateFn: (userOptions: SettingsInterface, defaultOptions) => {
+      for (const site in userOptions.sites) {
+        userOptions.sites[site].defaultType = userOptions.sites[site].type as any;
+      }
+      userOptions.sites['@global'].defaultType = 'unknown';
+      userOptions.sites['@empty'].defaultType = 'modified';
+    }
   }
 ];
 

src/ext/conf/ExtensionConf.ts

@@ -1441,7 +1441,7 @@ const ExtensionConf: SettingsInterface = {
         theater: ExtensionMode.Enabled,
         normal: ExtensionMode.Disabled
       },
-
+      defaultType: 'unknown',
       persistCSA: CropModePersistence.Disabled,
 
       defaults: {
@@ -1467,6 +1467,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'user-defined',
+      defaultType: 'user-defined',
       persistCSA: CropModePersistence.Default,
       defaults: {
         crop: null,
@@ -1492,6 +1493,8 @@ const ExtensionConf: SettingsInterface = {
       },
       override: false,                  // ignore value localStorage in favour of this
       type: 'official',                 // is officially supported? (Alternatives are 'community' and 'user-defined')
+      defaultType: 'official',          // if user mucks around with settings, type changes to 'user-defined'.
+                                        // We still want to know what the original type was, hence defaultType
 
       activeDOMConfig: 'official',
       DOMConfig: {
@@ -1524,6 +1527,7 @@ const ExtensionConf: SettingsInterface = {
       },
       override: false,
       type: 'community',
+      defaultType: 'community',
     },
     "www.disneyplus.com" : {
       enable: {
@@ -1542,6 +1546,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'community',
+      defaultType: 'community',
       activeDOMConfig: 'community-mstefan99',
       DOMConfig: {
         'community-mstefan99': {
@@ -1577,32 +1582,34 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'official',
+      defaultType: 'official',
     },
-    "streamable.com": {
+    // "streamable.com": {
-      enable: {
+    //   enable: {
-        fullscreen: ExtensionMode.Default,
+    //     fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
+    //     theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
+    //     normal: ExtensionMode.Default,
-      },
+    //   },
-      enableAard: {
+    //   enableAard: {
-        fullscreen: ExtensionMode.Default,
+    //     fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
+    //     theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
+    //     normal: ExtensionMode.Default,
-      },
+    //   },
-      enableKeyboard: {
+    //   enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
+    //     fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
+    //     theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default
+    //     normal: ExtensionMode.Default
-      },
+    //   },
-      type: 'official',
+    //   type: 'official',
-      activeDOMConfig: 'official',
+    //   type: 'defaultType',
-      DOMConfig: {
+    //   activeDOMConfig: 'official',
-        'official': {
+    //   DOMConfig: {
-          type: 'official',
+    //     'official': {
-          customCss: ".player {text-align: left}"
+    //       type: 'official',
-        }
+    //       customCss: ".player {text-align: left}"
-      }
+    //     }
-    },
+    //   }
+    // },
     "vimeo.com": {
       enable: {
         fullscreen: ExtensionMode.Default,
@@ -1620,6 +1627,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'official',
+      defaultType: 'official',
       activeDOMConfig: 'official',
       DOMConfig: {
         'official': {
@@ -1651,6 +1659,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Disabled,
       },
       type: 'officially-disabled',
+      defaultType: 'officially-disabled',
       activeDOMConfig: 'official',
       DOMConfig: {
         'official': {
@@ -1682,6 +1691,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Disabled,
       },
       type: 'officially-disabled',
+      defaultType: 'officially-disabled',
       activeDOMConfig: 'official',
       DOMConfig: {
         'official': {
@@ -1713,6 +1723,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Disabled,
       },
       type: 'officially-disabled',
+      defaultType: 'officially-disabled',
     },
     "gfycat.com": {
       enable: {
@@ -1731,6 +1742,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Disabled,
       },
       type: 'officially-disabled',
+      defaultType: 'officially-disabled',
     },
     "giant.gfycat.com": {
       enable: {
@@ -1749,6 +1761,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Disabled,
       },
       type: 'officially-disabled',
+      defaultType: 'officially-disabled',
     },
     "www.wakanim.tv": {
       enable: {
@@ -1767,6 +1780,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'community',
+      defaultType: 'community',
       activeDOMConfig: 'community',
       DOMConfig: {
         'community': {
@@ -1797,6 +1811,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: 'community',
+      defaultType: 'community',
       activeDOMConfig: 'community',
       DOMConfig: {
         'community': {
@@ -1822,6 +1837,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: "community",
+      defaultType: "community",
       activeDOMConfig: 'community',
       DOMConfig: {
         'community': {
@@ -1851,6 +1867,7 @@ const ExtensionConf: SettingsInterface = {
         normal: ExtensionMode.Default
       },
       type: "community",
+      defaultType: "community",
       activeDOMConfig: 'community',
       DOMConfig: {
         'community': {

src/ext/lib/settings/SiteSettings.ts

@@ -80,7 +80,6 @@ export class SiteSettings {
       }
     }
 
-
     for (const enableSegment of ['enable', 'enableAard', 'enableKeyboard']) {
       if (!this.data[enableSegment]) {
         this.data[enableSegment] = {};

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "5.99.5",
+  "version": "5.99.6",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"