Site and extension options: done

2023-07-15 01:28:20 +02:00 · 2023-07-15 01:28:20 +02:00 · 42cdcd5c25
commit 42cdcd5c25
parent 8b1da27af7
12 changed files with 210 additions and 36 deletions
--- a/src/common/interfaces/SettingsInterface.ts
+++ b/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
--- a/src/csui/res/css/common.scss
+++ b/src/csui/res/css/common.scss
@ -389,3 +389,8 @@ small {
 .monospace {
  font-family: 'Overpass Mono';
 }
+
+.pointer {
+  cursor: pointer;
+  user-select: none;
+}
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/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 {
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/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 SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue'
+import SiteSettingsBasicTable from './PanelComponents/ExtensionSettings/SiteSettingsBasicTable.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;
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/OtherSiteSettings.vue
+++ b/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>
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
+++ b/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>
--- a/src/csui/src/res-common/common.scss
+++ b/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;
+}
--- a/src/csui/src/res-common/panels.scss
+++ b/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);
+}
--- a/src/ext/conf/ExtConfPatches.ts
+++ b/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';
+    }
  }
 ];

--- a/src/ext/conf/ExtensionConf.ts
+++ b/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": {
-      enable: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
-      },
-      enableAard: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default,
-      },
-      enableKeyboard: {
-        fullscreen: ExtensionMode.Default,
-        theater: ExtensionMode.Default,
-        normal: ExtensionMode.Default
-      },
-      type: 'official',
-      activeDOMConfig: 'official',
-      DOMConfig: {
-        'official': {
-          type: 'official',
-          customCss: ".player {text-align: left}"
-        }
-      }
-    },
+    // "streamable.com": {
+    //   enable: {
+    //     fullscreen: ExtensionMode.Default,
+    //     theater: ExtensionMode.Default,
+    //     normal: ExtensionMode.Default,
+    //   },
+    //   enableAard: {
+    //     fullscreen: ExtensionMode.Default,
+    //     theater: ExtensionMode.Default,
+    //     normal: ExtensionMode.Default,
+    //   },
+    //   enableKeyboard: {
+    //     fullscreen: ExtensionMode.Default,
+    //     theater: ExtensionMode.Default,
+    //     normal: ExtensionMode.Default
+    //   },
+    //   type: 'official',
+    //   type: 'defaultType',
+    //   activeDOMConfig: 'official',
+    //   DOMConfig: {
+    //     'official': {
+    //       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': {
--- a/src/ext/lib/settings/SiteSettings.ts
+++ b/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] = {};
--- a/src/manifest.json
+++ b/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"