.nvmrc

@@ -1 +1 @@
-20.19.6
+14.21.3

src/common/enums/LegacyExtensionMode.enum.ts

@@ -1,10 +0,0 @@
-enum ExtensionMode {
-  AutoDisabled = -2,
-  Disabled = -1,
-  Default = 0,
-  Whitelist = 1,
-  Basic = 2,
-  Enabled = 3,
-};
-
-export default ExtensionMode;

src/common/interfaces/SettingsInterface.ts

@@ -330,7 +330,7 @@ interface SettingsInterface {
       popupAlignment: 'left' | 'right',
       minEnabledWidth: number,                 // don't show UI if player is narrower than % of screen width
       minEnabledHeight: number,                // don't show UI if player is narrower than % of screen height
-      activation: 'player' | 'trigger-zone' | 'distance' | 'none',   // what needs to be hovered in order for UI to be visible
+      activation: 'trigger-zone' | 'player',   // what needs to be hovered in order for UI to be visible
       triggerZoneDimensions: {                 // how large the trigger zone is (relative to player size)
         width: number
         height: number,

src/ext/lib/video-data/PlayerData.ts

@@ -259,7 +259,7 @@ class PlayerData {
    * Stops manually scanning for dimension changes
    */
   stopFallbackDimensionMonitor() {
-    clearInterval(this.fallbackDimensionChangeInterval);
+    clearImmediate(this.fallbackDimensionChangeInterval);
     this.fallbackDimensionChangeInterval = undefined;
   }
 

src/main.css

@@ -2,9 +2,6 @@
 @import "tailwindcss/utilities";
 
 @theme {
-  --breakpoint-popup: 640px;
-  --breakpoint-window: 960px;
-
   --color-primary: #ff872c;
   --color-primary-50:  #ffddbe;
   --color-primary-100: #ffcda0;
@@ -31,9 +28,6 @@ html, body {
   html, body {
     font-size: 12px;
   }
-  .mdi svg {
-    transform: scale(0.75)
-  }
 }
 
 @layer base {
@@ -80,26 +74,4 @@ html, body {
   small, strike {
     @apply opacity-50;
   }
-
-
-  /* Site support levels */
-  .site-support-level {
-    &.official {
-      @apply text-primary-400;
-    }
-    &.community {
-      @apply text-indigo-600;
-    }
-    &.officially-disabled {
-      @apply text-red-600;
-    }
-    &.no-support {
-      @apply text-slate-600;
-    }
-    &.user-added {
-      @apply text-cyan-700;
-    }
-  }
-  /* END site support levels */
-
 }

src/manifest.json

@@ -9,7 +9,7 @@
   },
   "action": {
     "default_title": "Ultrawidify",
-    "default_popup": "ui/pages/settings/index.html#popup"
+    "default_popup": "csui/csui-popup.html"
   },
 
 

src/ui/components/ExtensionSettings/Panels/FrameSiteSettings.vue

@@ -92,6 +92,9 @@ export default {
 }
 </script>
 
+<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;

src/ui/components/PopupHead/PopupHead.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="w-full flex flex-row justify-between items-start border-b border-b-stone-700">
-    <div class="flex flex-col grow items-baseline grow px-4">
-      <div class="flex flex-row">
-        <h1 class="text-[3rem] text-white">Ultrawidify</h1><small v-if="settingsInitialized">{{settings.getExtensionVersion()}}-{{BrowserDetect.processEnvBrowser}}</small>
-      </div>
-      <div class="flex flex-row items-center gap-4 -mt-4">
-        <div>{{site?.host}}</div>
-        <SupportLevelIndicator
-          :siteSettings="siteSettings"
-        ></SupportLevelIndicator>
-      </div>
-    </div>
-    <div class="pt-4 pb-2 flex flex-col justify-start mr-8">
-      <div class="
-        flex flex-row
-        font-semibold
-      ">
-        <div
-          class="
-            pl-3 pr-4 py-2 flex flex-row items-center
-            bg-black text-stone-400 border border-stone-500
-            hover:text-white hover:border-white
-          "
-          @click="showInPlayerUi()"
-        >
-          <mdicon name="cog" size="24" class="mr-1"></mdicon>
-          Open settings window
-        </div>
-        <div class="
-          dropdown-parent
-          relative
-          py-2 bg-black text-stone-400 border border-stone-500
-          hover:text-white hover:border-white
-          transition-transform duration-100
-        ">
-          <mdicon name="chevron-down" size="24" class="group-hover:rotate-90"></mdicon>
-          <div
-            class="
-              open-settings-popup
-              bg-black text-stone-400 border border-stone-500
-              absolute top-0 right-[2rem]
-              hidden w-48
-              group-hover:flex group-hover:flex-col
-              hover:flex hover:flex-col
-            "
-          >
-            <div
-              @click="showInPlayerUi()"
-            >
-              Open settings in-page
-            </div>
-            <div
-              @click="openSettingsInTab()"
-            >
-              Open settings in a new tab
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import SupportLevelIndicator from '@components/common/components/SupportLevelIndicator.vue';
-
-
-export default defineComponent({
-  components: {
-
-    SupportLevelIndicator
-  },
-  props: [
-    'settings',
-    'siteSettings',
-    'eventBus',
-    'site'
-  ],
-  data() {
-    return {
-      BrowserDetect,
-    }
-  },
-  methods: {
-    showInPlayerUi() {
-      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
-    },
-    openSettingsInTab() {
-      chrome.runtime.openOptionsPage();
-    }
-  }
-})
-</script>
-<style lang="postcss" scoped>
-@import '../../../main.css'; /** postcss processor doesn't support aliases */
-
-.open-settings-popup {
-  width: 16rem;
-}
-
-.dropdown-parent:hover {
-  .mdi {
-    @apply rotate-90;
-  }
-
-  .open-settings-popup {
-    @apply flex flex-col border-white -mt-[1px];
-
-    div {
-      @apply w-full hover:text-white cursor-pointer px-4 py-1 hover:bg-stone-800;
-    }
-  }
-}
-
-</style>

src/ui/components/SettingsWindowContent.vue

@@ -4,54 +4,28 @@
   >
     <div class="flex flex-row w-full h-full overflow-hidden">
       <div class="settings-categories">
-        <div class="tab-column">
+        <div
+          v-for="tab of tabs"
+          :key="tab.id"
+        >
           <div
-            v-for="tab of tabs"
+            v-if="!tab.hidden"
-            :key="tab.id"
+            class="tab"
+            :class="{
+              'active': tab.id === selectedTab,
+              'highlight-tab': tab.highlight,
+            }"
+            @click="selectTab(tab.id)"
           >
-            <div
+            <div class="label">
-              v-if="!tab.hidden"
+              {{tab.label}}
-              class="tab"
+            </div>
-              :class="{
+            <div class="icon-container">
-                'active': tab.id === selectedTab || tab.children?.find(x => x.id === selectedTab),
+              <mdicon
-                'highlight-tab': tab.highlight,
+                v-if="tab.icon"
-              }"
+                :name="tab.icon"
-            >
+                :size="32"
-              <div
+              />
-                class="main-tab"
-                @click="selectTab(tab.id)"
-              >
-                <div class="label">
-                  {{tab.label}}
-                </div>
-                <div class="icon-container">
-                  <mdicon
-                    v-if="tab.icon"
-                    :name="tab.icon"
-                    :size="32"
-                  />
-                </div>
-              </div>
-              <div v-if="tab.children && (tab.id === selectedTab ||  tab.children?.find(x => x.id === selectedTab))" class="suboptions flex flex-col">
-                <div
-                  v-for="suboption of tab.children"
-                  :key="suboption.id"
-                  class="suboption"
-                  :class="{'active': suboption.id === selectedTab}"
-                  @click="selectTab(suboption.id)"
-                >
-                  <div class="label">
-                    {{suboption.label}}
-                  </div>
-                  <div class="icon-container">
-                    <mdicon
-                      v-if="suboption.icon"
-                      :name="suboption.icon"
-                      :size="32"
-                    />
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -74,7 +48,7 @@
           </div>
         </div>
 
-        <div class="flex flex-col panel-content">
+        <div class="flex flex-row panel-content">
           <!-- Panel section -->
           <VideoSettings
             v-if="selectedTab === 'video-settings'"
@@ -83,43 +57,6 @@
             :eventBus="eventBus"
             :site="site"
           ></VideoSettings>
-
-          <template
-            v-if="settings && selectedTab === 'site-extension-settings'"
-          >
-            <h3>Settings for {{site?.host}}</h3>
-            <SiteExtensionSettings
-              :settings="settings"
-              :siteSettings="siteSettings"
-              :isDefaultConfiguration="false"
-            ></SiteExtensionSettings>
-
-            <pre>{{JSON.stringify(siteSettings.data, null, 2)}}</pre>
-          </template>
-
-          <template
-            v-if="settings && selectedTab === 'embedded-extension-settings'"
-          >
-            <h3>Settings for embedded sites</h3>
-            <FrameSiteSettings
-              :parentHost="site?.host"
-              :hosts="site?.hostnames"
-              :settings="settings"
-            ></FrameSiteSettings>
-          </template>
-
-
-          <template
-            v-if="settings && selectedTab === 'default-extension-settings'"
-          >
-            <h3>Default settings</h3>
-            <SiteExtensionSettings
-              :settings="settings"
-              :siteSettings="siteSettings"
-              :isDefaultConfiguration="false"
-            ></SiteExtensionSettings>
-          </template>
-
           <OtherSiteSettings
             v-if="selectedTab === 'extensionSettings'"
             :settings="settings"
@@ -192,8 +129,6 @@ import OtherSiteSettings from '@components/ExtensionSettings/Panels/OtherSiteSet
 import AutodetectionSettings from '@components/AutodetectionSettings/AutodetectionSettings.vue';
 import UISettings from '@components/UISettings/UISettings.vue';
 import KeyboardShortcutSettings from '@components/KeyboardShortcuts/KeyboardShortcutSettings.vue';
-import SiteExtensionSettings from '@components/ExtensionSettings/Panels/SiteExtensionSettings.vue';
-import FrameSiteSettings from '@components/ExtensionSettings/Panels/FrameSiteSettings.vue';
 
 import WhatsNew from '@components/ExtensionInfo/WhatsNew.vue';
 import About from '@components/ExtensionInfo/About.vue';
@@ -208,17 +143,8 @@ import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vu
 
 
 const AVAILABLE_TABS = {
-  'video-settings': {
+  'video-settings': {id: 'video-settings', label: 'Video settings', icon: 'crop'},
-    id: 'video-settings', label: 'Video settings', icon: 'crop',
+  'site-extension-settings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
-  },
-  'site-extension-settings': {
-    id: 'site-extension-settings', label: 'Site and Extension options', icon: 'cogs',
-    children: [
-      { id: 'site-extension-settings', label: 'For this site', },
-      { id: 'embedded-extension-settings', label: 'For embedded sites' },
-      { id: 'default-extension-settings', label: 'Default settings' }
-    ]
-  },
   'extensionSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
   'siteSettings': {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
   'autodetectionSettings': {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
@@ -255,8 +181,6 @@ export default defineComponent({
     AutodetectionSettings,
     KeyboardShortcutSettings,
     UISettings,
-    SiteExtensionSettings,
-    FrameSiteSettings,
 
     WhatsNew,
     About,
@@ -302,11 +226,6 @@ export default defineComponent({
     'inPlayer',
     'site',
   ],
-  watch: {
-    'initialPath': function (newVal) {
-      this.setInitialPath(newVal);
-    }
-  },
   computed: {
     // LPT: NO ARROW FUNCTIONS IN COMPUTED,
     // IS SUPER HARAM
@@ -319,7 +238,9 @@ export default defineComponent({
     this.generateTabs();
     this.settings.listenAfterChange(this.setDebugTabVisibility);
 
-    this.setInitialPath();
+    if (this.initialPath && this.initialPath.length) {
+      this.selectedTab = this.initialPath[0];
+    }
     const changelogTab  = this.tabs.find(x => x.id === 'changelog');
     if (changelogTab) {
       changelogTab.highlight = !this.settings.active?.whatsNewChecked;
@@ -362,12 +283,6 @@ export default defineComponent({
       }
       this.tabs = tabs;
     },
-    setInitialPath(path: string[] = this.initialPath) {
-      console.log('setting initial path:', this.initialPath)
-      if (path && path.length) {
-        this.selectedTab = path[0];
-      }
-    },
     selectTab(tab) {
       console.log("Selecting tab", tab);
       this.selectedTab = tab;
@@ -392,62 +307,23 @@ export default defineComponent({
 @import '../../main.css'; /** postcss processor doesn't support aliases */
 
 .settings-categories {
-  @apply
+  @apply w-[20em] max-w-[20em] flex flex-col grow-0 shrink-0 mr-4 border-r border-r-stone-800 text-right;
-    relative
-    w-[4.5em] popup:w-[18em] window:w-[24em]
-    mr-[1em]
-    grow-0 shrink-0 flex flex-col
 
-    text-right;
+  .tab {
+    @apply flex flex-row gap-4 px-4 py-2 justify-end items-center
+      text-[1.125em] text-stone-300 text-right font-mono
+      cursor-pointer
+      border-r-2 border-r-transparent
+      hover:bg-stone-800
+      hover:text-primary-200
+      hover:border-r-stone-600;
 
-  .tab-column {
+      .label {
-    @apply absolute popup:relative top-0 right-0
+        @apply grow-0;
-      w-[18em] window:w-full h-full z-[1000]
-      hover:bg-stone-950 popup:hover:bg-transparent
-      border-r border-r-stone-800
-      hover:translate-x-[calc(100%-4.5em)] popup:hover:translate-x-0
-      transition-transform duration-200;
-
-    .tab {
-      @apply
-        flex flex-col
-        cursor-pointer
-        border-r-2 border-r-transparent
-        border-r-primary-400;
-
-      &.active {
-        .main-tab {
-          @apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200 ;
-        }
       }
-    }
 
-    .main-tab {
+    &.active {
-      @apply
+      @apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200 border-r-primary-400;
-        px-[1em] py-[0.5em]
-        flex flex-row gap-4 justify-end items-center
-        text-[1.125em] text-stone-300 text-right font-mono
-        cursor-pointer
-        hover:bg-stone-800
-        hover:text-primary-200
-        hover:border-r-stone-600;
-
-        .label {
-          @apply grow-0;
-        }
-    }
-
-    .suboption {
-      @apply
-        px-6 py-2
-        text-[1.125rem] text-stone-500 font-mono
-        hover:bg-stone-800
-        hover:text-primary-200
-        hover:border-r-stone-600;
-
-      &.active {
-        @apply !bg-transparent !text-primary-300 bg-gradient-to-r from-transparent to-black hover:!text-primary-200;
-      }
     }
   }
 }

src/ui/components/VideoSettings/VideoSettings.vue

@@ -1,26 +1,23 @@
 <template>
-  <div class="flex flex-col w-full h-full">
+  <div class="flex flex-col" style="position: relative; width: 100%;">
-
     <!-- 'Change UI' options is a tiny bit in upper right corner. -->
     <h3>Crop</h3>
-    <div class="button-container">
+    <div class="w-full grid grid-cols-4 gap-2 pt-2">
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.crop"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
-        @click="execAction(command)"
       ></ShortcutButton>
     </div>
 
     <h3>Zoom</h3>
-    <div class="button-container">
+    <div class="w-full grid grid-cols-4 gap-2 pt-2">
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.zoom"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
-        @click="execAction(command)"
       ></ShortcutButton>
     </div>
     <div class="text-white font-mono text-semibold mt-4 mb-1">Free-form zoom</div>
@@ -90,13 +87,12 @@
     </div>
 
     <h3>Stretch</h3>
-    <div class="button-container">
+    <div class="w-full grid grid-cols-4 gap-2 pt-2">
       <ShortcutButton
         v-for="(command, index) of settings?.active.commands.stretch"
         :key="index"
         :label="command.label"
         :shortcut="getKeyboardShortcutLabel(command)"
-        @click="execAction(command)"
       ></ShortcutButton>
     </div>
 
@@ -229,12 +225,6 @@ export default defineComponent({
 <style lang="postcss" scoped>
 @import '../../../main.css';
 
-.button-container {
-  @apply w-full pt-2
-    grid grid-cols-[repeat(auto-fill,minmax(9em,1fr))]
-    gap-[0.5em];
-}
-
 .xy-lock-bar-break {
   @apply relative;
 

src/ui/components/VideoSettings/components/ShortcutButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="flex flex-col min-h-[3rem] justify-center items-center" :class="classList">
+  <button class="flex flex-col justify-center items-center" :class="classList">
     <div class="flex justify-self-center">
       {{label}}
     </div>

src/ui/components/common/components/SupportLevelIndicator.vue

@@ -1,103 +0,0 @@
-<template>
-  <div
-    v-if="computedSiteSupportLevel === 'official'"
-    class="site-support site-support-level official"
-    :style="supportLevelStyle"
-  >
-    <mdicon name="check-decagram" />
-    <div v-if="!small">Verified</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Verified&nbsp;—&nbsp;</template>
-      The extension is being tested and should work on this site.
-    </div>
-  </div>
-  <div v-if="computedSiteSupportLevel === 'community'" class="site-support site-support-level community" :style="supportLevelStyle">
-    <mdicon name="account-group" />
-    <div v-if="!small">Community</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Community&nbsp;—&nbsp;</template>
-      People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
-      Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
-      is geoblocked.
-    </div>
-  </div>
-  <div v-if="computedSiteSupportLevel === 'no-support' || computedSiteSupportLevel === 'unknown'" class="site-support site-support-level no-support" :style="supportLevelStyle">
-    <mdicon name="help-circle-outline" />
-    <div v-if="!small">Untested</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Untested&nbsp;—&nbsp;</template>
-      Extension will try to fix things, but no promises; for you are exploring the uncharted lands.<br/><br/>
-      Tamius (the dev) does not test the extension on this site for various reasons
-      (unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
-    </div>
-  </div>
-  <div v-if="computedSiteSupportLevel === 'user-added' || computedSiteSupportLevel === 'user-defined'" class="site-support site-support-level user-added" :style="supportLevelStyle">
-    <mdicon name="account" />
-    <div v-if="!small">Modified by you</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Modified by you&nbsp;—&nbsp;</template>
-      You are on your own. You have manually changed settings for this site. The extension is doing what you told it to do.
-    </div>
-  </div>
-  <div v-if="computedSiteSupportLevel === 'officially-disabled'" class="site-support site-support-level officially-disabled" :style="supportLevelStyle">
-    <mdicon name="close-circle" />
-    <div v-if="!small">Blacklisted</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Blacklisted&nbsp;—&nbsp;</template>
-      Extension is known to not work with this site.
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    siteSupportLevel: String,
-    siteSettings: Object,
-    small: Boolean,
-    supportLevelStyle: String,
-    tooltipStyle: String,
-  },
-  computed: {
-    computedSiteSupportLevel() {
-      return this.siteSupportLevel ?? this.siteSettings ? this.siteSettings.data.type || 'no-support' : 'waiting';
-    }
-  }
-
-});
-</script>
-
-<style lang="postcss" scoped>
-@import '../../../../main.css'; /** postcss processor doesn't support aliases */
-
-.site-support {
-  @apply inline-flex flex-row items-center gap-1 rounded-[0.5rem] relative;
-
-  .tooltip {
-    padding: 1rem;
-    display: none;
-    position: absolute;
-    bottom: 0;
-    transform: translateY(110%);
-    width: 42em;
-
-    background-color: rgba(0,0,0,0.90);
-    color: #ccc;
-    z-index: 99999 !important;
-
-    white-space: normal;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-  }
-  &:hover {
-    .tooltip {
-      display: block;
-    }
-  }
-}
-
-
-</style>

src/ui/pages/popup/popup.js

@@ -0,0 +1,30 @@
+import EventBus from '../../../ext/lib/EventBus';
+import { ComponentLogger } from '../../../ext/lib/logging/ComponentLogger';
+import { LogAggregator } from '../../../ext/lib/logging/LogAggregator';
+import Settings from '../../../ext/lib/settings/Settings';
+
+const loadedTabs = [
+  'videoSettings',
+  'extensionSettings',
+  'changelog',
+  'about',
+];
+
+async function load() {
+  const _uw_data = {
+    eventBus: new EventBus(),
+    settings: {},
+    settingsInitialized: false,
+    logAggregator: undefined,
+    logger: undefined,
+    site: undefined,
+    siteSettings: undefined,
+    comms: undefined,
+  };
+
+  _uw_data.logAggregator = new LogAggregator('🔵ext-popup🔵');
+  _uw_data.logger = new ComponentLogger(_uw_data.logAggregator, 'Popup');
+  _uw_data.settings = new Settings({logAggregator: _uw_data.logAggregator});
+
+  _uw_data.
+}

src/ui/pages/settings/App.vue

@@ -1,23 +1,9 @@
 <template>
-  <div class="
+  <div class="w-full h-[100dvh] overflow-hidden flex flex-row justify-center items-center py-4 px-16">
-    w-full h-[100dvh] overflow-hidden
-    p-1 popup-lg:py-2 popup-lg:px-2 window:py-4 window:px-8
-    flex flex-row justify-center items-center
-  ">
 
     <!-- page content -->
     <div class="w-full max-w-[1920px] h-[100dvh] overflow-hidden flex flex-col">
-      <PopupHead
+      <h1 class="text-[3em] grow-0 shrink-0">Ultrawidify settings</h1>
-        v-if="role === 'popup' && settings && siteSettings && eventBus"
-        :settings="settings"
-        :siteSettings="siteSettings"
-        :site="site"
-        :eventBus="eventBus"
-      >
-      </PopupHead>
-      <div v-else>
-        <h1 class="text-[3em] grow-0 shrink-0">Ultrawidify settings</h1>
-      </div>
 
       <div v-if="!settingsInitialized" class="flex flex-row w-full justify-center items-center">
         Loading settings...
@@ -31,7 +17,7 @@
         :eventBus="eventBus"
         :logger="logger"
         :inPlayer="false"
-        :site="site"
+        :site="null"
       >
       </SettingsWindowContent>
     </div>
@@ -40,31 +26,23 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import BrowserDetect from '@src/ext/conf/BrowserDetect';
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
 import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
 import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
 import Settings from '@src/ext/lib/settings/Settings';
-import { SiteSettings } from '@src/ext/lib/settings/SiteSettings';
 import SettingsWindowContent from '@components/SettingsWindowContent.vue';
 
 import EventBus from '@src/ext/lib/EventBus';
 import CommsClient, { CommsOrigin } from '@src/ext/lib/comms/CommsClient';
 import {ChromeShittinessMitigations as CSM} from '@src/common/js/ChromeShittinessMitigations';
 
-import PopupHead from '@components/PopupHead/PopupHead.vue';
-
 export default defineComponent({
   components: {
-    SettingsWindowContent,
+    SettingsWindowContent
-    PopupHead,
   },
   data () {
     return {
-      BrowserDetect,
-      site: undefined,
       settings: undefined as Settings | undefined,
-      siteSettings: undefined as SiteSettings | undefined,
-      eventBus: undefined as EventBus | undefined,
       logger: undefined as ComponentLogger | undefined,
       logAggregator: undefined as LogAggregator | undefined,
       settingsInitialized: false,
@@ -143,18 +121,6 @@ export default defineComponent({
               this.site = config.site;
               // this.selectedSite = this.selectedSite || config.site.host;
               this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
-
-              console.log('set-site received:', this.site, this.siteSettings, 'current path:', this.initialPath);
-              if (!this.initialPath || this.initialPath.length < 1) {
-                if (this.siteSettings.data.enable) {
-                  this.initialPath = ['video-settings'];
-                } else {
-                  this.initialPath = ['site-extension-settings'];
-                }
-              }
-              console.log('New path:', this.initialPath);
-
-
               this.eventBus.setupPopupTunnelWorkaround({
                 origin: CommsOrigin.Popup,
                 comms: {
@@ -240,67 +206,7 @@ export default defineComponent({
           },
         }
       )
-    },
+    }
-
-    //#region EXTENSION POPUP
-
-    showInPlayerUi() {
-      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
-    },
-    async sleep(t) {
-      return new Promise<void>( (resolve,reject) => {
-        setTimeout(() => resolve(), t);
-      });
-    },
-    toObject(obj) {
-      return JSON.parse(JSON.stringify(obj));
-    },
-    requestSite() {
-      try {
-        this.logger.log('info','popup', '[popup::getSite] Requesting current site ...')
-        // CSM.port.postMessage({command: 'get-current-site'});
-        this.eventBus.send(
-          'get-current-site',
-          {},
-          {
-            comms: {forwardTo: 'active'}
-          }
-        );
-      } catch (e) {
-        this.logger.log('error','popup','[popup::getSite] sending get-current-site failed for some reason. Reason:', e);
-      }
-    },
-    getRandomColor() {
-      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
-    },
-    selectTab(tab) {
-      this.selectedTab = tab;
-    },
-    isDefaultFrame(frameId) {
-      return frameId === '__playing' || frameId === '__all';
-    },
-    loadHostnames() {
-      this.activeHosts = this.site.hostnames;
-    },
-    loadFrames() {
-      this.activeFrames = [{
-        host: this.site.host,
-        isIFrame: false,  // not used tho. Maybe one day
-      }];
-
-      for (const frame in this.site.frames) {
-        if (!this.activeFrames.find(x => x.host === this.site.frames[frame].host)) {
-          this.activeFrames.push({
-            id: `${this.site.id}-${frame}`,
-            label: this.site.frames[frame].host,
-            host: this.site.frames[frame].host,
-            ...this.site.frames[frame],
-            ...this.settings.active.sites[this.site.frames[frame].host]
-          })
-        };
-      }
-    },
-    //#endregion
   }
 });
 </script>

src/ui/pages/settings/index-dark.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
-<head>
-  <meta charset="UTF-8">
-  <meta name="color-scheme" content="dark">
-  <title>Ultrawidify - settings</title>
-  <!-- <link rel="stylesheet" href="csui.css"> -->
-  <% if (NODE_ENV === 'development') { %>
-  <!-- Load some resources only in development environment -->
-  <% } %>
-</head>
-<body class="uw-ultrawidify-container-root" style="overflow: hidden">
-  <div id="app">
-    <!-- <div style="width: 799px; height: 599px">test</div> -->
-  </div>
-  <script src="settings.js"></script>
-</body>
-</html>

src/ui/pages/settings/index-light.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
-<head>
-  <meta charset="UTF-8">
-  <meta name="color-scheme" content="light">
-  <title>Ultrawidify - settings</title>
-  <!-- <link rel="stylesheet" href="csui.css"> -->
-  <% if (NODE_ENV === 'development') { %>
-  <!-- Load some resources only in development environment -->
-  <% } %>
-</head>
-<body class="uw-ultrawidify-container-root" style="overflow: hidden">
-  <div id="app">
-    <!-- <div style="width: 799px; height: 599px">test</div> -->
-  </div>
-  <script src="settings.js"></script>
-</body>
-</html>

src/ui/pages/settings/index-none.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
-<head>
-  <meta charset="UTF-8">
-  <title>Ultrawidify - settings</title>
-  <!-- <link rel="stylesheet" href="csui.css"> -->
-  <% if (NODE_ENV === 'development') { %>
-  <!-- Load some resources only in development environment -->
-  <% } %>
-</head>
-<body class="uw-ultrawidify-container-root" style="overflow: hidden">
-  <div id="app">
-    <!-- <div style="width: 799px; height: 599px">test</div> -->
-  </div>
-  <script src="settings.js"></script>
-</body>
-</html>

src/ui/pages/settings/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en"; style="position: relative; width: 799px; min-width: 320px; height: 600px; overflow: hidden;">
+<html lang="en"; style="position: relative">
 <head>
   <meta charset="UTF-8">
   <meta name="color-scheme" content="light dark">
@@ -9,10 +9,8 @@
   <!-- Load some resources only in development environment -->
   <% } %>
 </head>
-<body class="uw-ultrawidify-container-root" style="overflow: hidden">
+<body class="uw-ultrawidify-container-root">
-  <div id="app">
+  <div id="app"></div>
-    <!-- <div style="width: 799px; height: 599px">test</div> -->
-  </div>
   <script src="settings.js"></script>
 </body>
 </html>

tailwind.config.json

@@ -4,11 +4,6 @@
   ],
   "theme": {
     "extend": {
-      "screens": {
-        "popup-sm": {"max": "639px"},
-        "popup-lg": {"min": "640px", "max": "899px"},
-        "window": {"min": "900px"}
-      },
       "colors": {
         "primary": {
           "50": "#ffddbe",