Sort out types

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "aard",
+    "allowtransparency",
     "ardetector",
     "autodetect",
     "autodetection",
@@ -8,6 +9,7 @@
     "blackbar",
     "blackbars",
     "blackframe",
+    "bruteforce",
     "canvas",
     "clickthrough",
     "cmpa",
@@ -15,6 +17,7 @@
     "com",
     "comms",
     "csui",
+    "ctab",
     "cycleable",
     "decycle",
     "dinked",
@@ -90,7 +93,8 @@
     "wuckies",
     "wucky",
     "ycenter",
-    "youtube"
+    "youtube",
+    "YYMM"
   ],
   "cSpell.ignoreWords": [
     "abcdefghijklmnopqrstuvwxyz",

package-lock.json

@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "ultrawidify",
-      "version": "6.3.996",
+      "version": "6.3.997",
       "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@mdi/font": "^7.4.47",

paths.config.js

@@ -2,7 +2,6 @@ const path = require('path')
 
 module.exports = {
   '@src': path.resolve(__dirname, 'src'),
-  '@csui': path.resolve(__dirname, 'src/csui'),
   '@ui': path.resolve(__dirname, 'src/ui'),
   '@components': path.resolve(__dirname, 'src/ui/components'),
   '@res': path.resolve(__dirname, 'src/ui/res'),

src/common/interfaces/EventBusMessage.interface.ts

@@ -0,0 +1,39 @@
+import { CommsOrigin } from '@/ext/module/comms/CommsClient';
+import type { Runtime } from 'chrome';
+
+export interface EventBusCommand {
+  isGlobal?: boolean,
+  source?: any,
+  function: (commandData: any, context?: EventBusContext) => void | Promise<void>
+}
+
+export interface EventBusMessage<T = unknown> {
+  command: string;
+  config?: T;
+  context?: EventBusContext;
+}
+
+export interface EventBusContext {
+  stopPropagation?: boolean;
+
+  origin?: CommsOrigin;
+
+  // tab?: number;
+  // frame?: number;
+  // port?: string;
+
+  comms?: {
+    forwardTo?: 'all' | 'active' | 'popup' | 'contentScript' | 'all-frames';
+    sender?: Runtime.MessageSender;
+    port?: Runtime.Port;
+    // frame?: any;
+    sourceFrame?: {
+      tabId: number;
+      frameId: number;
+    };
+  };
+  borderCrossings?: {
+    commsServer?: boolean,
+    iframe?: boolean,
+  };
+}

src/common/interfaces/SettingsInterface.ts

@@ -1,5 +1,5 @@
-import { AardPollingOptions } from '@src/ext/lib/aard/enums/aard-polling-options.enum'
+import { AardPollingOptions } from '@src/ext/module/aard/enums/aard-polling-options.enum'
-import { AardSubtitleCropMode } from '@src/ext/lib/aard/enums/aard-subtitle-crop-mode.enum'
+import { AardSubtitleCropMode } from '@src/ext/module/aard/enums/aard-subtitle-crop-mode.enum'
 import { SiteSupportLevel } from '@src/common/enums/SiteSupportLevel.enum';
 import AspectRatioType from '@src/common/enums/AspectRatioType.enum'
 import CropModePersistence from '@src/common/enums/CropModePersistence.enum'

src/ext/UWContent.ts

@@ -1,13 +1,13 @@
 import Debug from './conf/Debug';
-import Settings from './lib/settings/Settings';
+import Settings from './module/settings/Settings';
-import CommsClient from './lib/comms/CommsClient';
+import CommsClient from './module/comms/CommsClient';
-import PageInfo from './lib/video-data/PageInfo';
+import PageInfo from './module/video-data/PageInfo';
-import EventBus from './lib/EventBus';
+import EventBus from './module/EventBus';
-import KeyboardHandler from './lib/kbm/KeyboardHandler';
+import KeyboardHandler from './module/kbm/KeyboardHandler';
-import { SiteSettings } from './lib/settings/SiteSettings';
+import { SiteSettings } from './module/settings/SiteSettings';
-import UI from './lib/uwui/UI';
+import UI from './module/uwui/UI';
-import { BLANK_LOGGER_CONFIG, LogAggregator } from './lib/logging/LogAggregator';
+import { BLANK_LOGGER_CONFIG, LogAggregator } from './module/logging/LogAggregator';
-import { ComponentLogger } from './lib/logging/ComponentLogger';
+import { ComponentLogger } from './module/logging/ComponentLogger';
 import { getIframeParentHost, setupHostnameReporting } from './util/getHost';
 
 export default class UWContent {
@@ -82,7 +82,7 @@ export default class UWContent {
         this.siteSettings = this.settings.getSiteSettings({site: window.location.hostname, isIframe: this.isIframe, parentHostname: this.parentHostname});
       }
 
-      this.eventBus = new EventBus();
+      this.eventBus = new EventBus({name: 'content-script'});
       this.eventBus.subscribe(
         'uw-restart',
         {

src/ext/UWServer.ts

@@ -1,11 +1,12 @@
 import Debug from './conf/Debug.js';
 import BrowserDetect from './conf/BrowserDetect';
-import CommsServer from './lib/comms/CommsServer';
+import CommsServer from './module/comms/CommsServer.js';
-import Settings from './lib/settings/Settings';
+import Settings from './module/settings/Settings.js';
 import { sleep } from '../common/js/utils';
-import EventBus, { EventBusCommand } from './lib/EventBus';
+import { ComponentLogger } from './module/logging/ComponentLogger.js';
-import { ComponentLogger } from './lib/logging/ComponentLogger';
+import { BLANK_LOGGER_CONFIG, LogAggregator } from './module/logging/LogAggregator.js';
-import { BLANK_LOGGER_CONFIG, LogAggregator } from './lib/logging/LogAggregator';
+import { Runtime } from 'chrome';
+import EventBus from '@src/ext/module/EventBus.js';
 
 
 const BASE_LOGGING_STYLES = {
@@ -50,7 +51,7 @@ export default class UWServer {
       function: (message, context) => this.replaceCss(message.oldCssString, message.newCssString, context.comms.sender)
     },
     'get-current-site': {
-      function: (message, context) => this.getCurrentSite()
+      function: (message, context) => this.getCurrentSite(context.comms.sender)
     }
   };
 
@@ -101,7 +102,7 @@ export default class UWServer {
     });
   }
 
-  //#region CSS managemeent
+  //#region CSS management
 
   async injectCss(css, sender) {
     this.logger.info('injectCss', 'Trying to inject CSS into tab', sender.tab.id, ', frameId:', sender.frameId, 'css:\n', css)
@@ -201,7 +202,7 @@ export default class UWServer {
     const tabHostname = this.extractHostname(sender.tab.url);
     const frameHostname = this.extractHostname(sender.url);
 
-    // check for orphaned/outdated values and remove them if neccessary
+    // check for orphaned/outdated values and remove them if necessary
     if (this.videoTabs[sender.tab.id]?.host != tabHostname) {
       delete this.videoTabs[sender.tab.id]
     } else if(this.videoTabs[sender.tab.id]?.frames[sender.frameId]?.host != frameHostname) {
@@ -252,7 +253,7 @@ export default class UWServer {
     this.selectedSubitem[menu] = subitem;
   }
 
-  async getCurrentSite() {
+  async getCurrentSite(sender: Runtime.MessageSender) {
     this.logger.info('getCurrentSite', 'received get-current-site ...');
 
     const site = await this.getVideoTab();

src/ext/conf/ExtensionConf.ts

@@ -10,8 +10,8 @@ import SettingsInterface from '../../common/interfaces/SettingsInterface';
 import BrowserDetect from './BrowserDetect';
 import { Extension } from 'typescript';
 import EmbeddedContentSettingsOverridePolicy from '../../common/enums/EmbeddedContentSettingsOverridePolicy.enum';
-import { AardPollingOptions } from '../lib/aard/enums/aard-polling-options.enum';
+import { AardPollingOptions } from '../module/aard/enums/aard-polling-options.enum';
-import { AardSubtitleCropMode } from '../lib/aard/enums/aard-subtitle-crop-mode.enum';
+import { AardSubtitleCropMode } from '../module/aard/enums/aard-subtitle-crop-mode.enum';
 import { SiteSupportLevel } from '../../common/enums/SiteSupportLevel.enum';
 import { PlayerDetectionMode } from '../../common/enums/PlayerDetectionMode.enum';
 import { InputHandlingMode } from '../../common/enums/InputHandlingMode.enum';
@@ -294,11 +294,6 @@ const ExtensionConf: SettingsInterface = {
     maxLogZoom: 3,
     announceDebounce: 200     // we wait this long before announcing new zoom
   },
-  kbm: {
-    enabled: true,
-    keyboardEnabled: true,
-    mouseEnabled: true
-  },
   miscSettings: {
     mousePan: {
       enabled: false

src/ext/module/EventBus.ts

@@ -1,33 +1,32 @@
 import { IframeData } from './video-data/IframeManager';
 import CommsClient, { CommsOrigin } from './comms/CommsClient';
 import CommsServer from './comms/CommsServer';
+import { EventBusCommand, EventBusContext } from '@src/common/interfaces/EventBusMessage.interface';
 
-export interface EventBusCommand {
-  isGlobal?: boolean,
-  source?: any,
-  function: (commandData: any, context?: any) => void | Promise<void>
-}
 
-export interface EventBusContext {
-  stopPropagation?: boolean,
 
-  // Context stuff added by Comms
+// export interface EventBusContext {
-  origin?: CommsOrigin,
+//   stopPropagation?: boolean,
-  comms?: {
+
-    sender?: any,
+//   // Context stuff added by Comms
-    port?: any,
+//   origin?: CommsOrigin,
-    frame?: any,
+//   comms?: {
-    sourceFrame?: IframeData
+//     sender?: chrome.runtime.MessageSender,
-    forwardTo?: 'all' | 'active' | 'contentScript' | 'server' | 'sameOrigin' | 'popup' | 'all-frames',
+//     port?: chrome.runtime.Port,
-  };
+//     frame?: any,
-  borderCrossings?: {
+//     sourceFrame?: IframeData
-    commsServer?: boolean,
+//     forwardTo?: 'all' | 'active' | 'contentScript' | 'server' | 'sameOrigin' | 'popup' | 'all-frames',
-    iframe?: boolean,
+//   };
-  }
+//   borderCrossings?: {
-}
+//     commsServer?: boolean,
+//     iframe?: boolean,
+//   }
+// }
 
 export default class EventBus {
 
+  private name: string;
+
   private commands: { [x: string]: EventBusCommand[]} = {};
   private comms?: CommsClient | CommsServer;
 
@@ -38,10 +37,11 @@ export default class EventBus {
 
   // private uiUri = window.location.href;
 
-  constructor(options?: {isUWServer?: boolean}) {
+  constructor(options?: {isUWServer?: boolean, name?: string}) {
     if (!options?.isUWServer) {
       this.setupIframeTunnelling();
     }
+    this.name = options?.name;
   }
 
   setupPopupTunnelWorkaround(context: EventBusContext): void {
@@ -103,6 +103,7 @@ export default class EventBus {
   }
 
   send(command: string, commandData: any, context?: EventBusContext) {
+    console.info('sending eventBus command:', this.name, 'command:', {command, commandData, context});
     // execute commands we have subscriptions for
 
     if (this.commands?.[command]) {
@@ -145,6 +146,7 @@ export default class EventBus {
           }
         );
       }
+      this.sendToTunnel(command, commandData);
     }
 
     if (context?.stopPropagation) {
@@ -192,7 +194,11 @@ export default class EventBus {
     window.removeEventListener('message', this.handleIframeMessage);
   }
   private handleIframeMessage(event: any) {
-    // console.log('GOT IFRAME MESSAGE!', event)
+    if (event.data?.action !== 'uw-bus-tunnel') {
+      return;
+    }
+    console.info(this.name, 'received message from iframe. command:', event.data.payload);
+    this.send(event.data.payload.command, event.data.payload.config);
   }
 
   //#endregion

src/ext/module/comms/CommsClient.ts

@@ -1,7 +1,8 @@
-import BrowserDetect from '../../conf/BrowserDetect';
+import { EventBusContext } from '@/common/interfaces/EventBusMessage.interface';
-import EventBus, { EventBusContext } from '../EventBus';
+import EventBus from '../EventBus';
 import { ComponentLogger } from '../logging/ComponentLogger';
 import { LogAggregator } from '../logging/LogAggregator';
+import BrowserDetect from '@/ext/conf/BrowserDetect';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading CommsClient");

src/ext/module/comms/CommsServer.ts

@@ -1,15 +1,15 @@
-import { ComponentLogger } from './../logging/ComponentLogger';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
-import Settings from '../settings/Settings';
+import Settings from '@src/ext/module/settings/Settings';
-import EventBus from '../EventBus';
+import EventBus from '@src/ext/module/EventBus';
 import { CommsOrigin } from './CommsClient';
-
+import UWServer from '@src/ext/UWServer';
 
 const BASE_LOGGING_STYLES = {
   log: "background-color: #11D; color: #aad",
 };
 
 class CommsServer {
-  server: any;
+  server: UWServer;
   logger: ComponentLogger;
   settings: Settings;
   eventBus: EventBus;
@@ -76,17 +76,17 @@ class CommsServer {
   //#endregion
 
   //#region lifecycle
-  constructor(server) {
+  constructor(server: UWServer) {
     this.server = server;
     this.logger = new ComponentLogger(server.logAggregator, 'CommsServer', {styles: BASE_LOGGING_STYLES});
     this.settings = server.settings;
     this.eventBus = server.eventBus;
 
     chrome.runtime.onConnect.addListener(p => this.onConnect(p));
-    chrome.runtime.onMessage.addListener((m, sender) => this.processReceivedMessage_nonpersistent(m, sender));
+    chrome.runtime.onMessage.addListener((m, sender: chrome.runtime.MessageSender) => this.processReceivedMessage_nonpersistent(m, sender));
   }
 
-  private onConnect(port){
+  private onConnect(port: chrome.runtime.Port){
     // special case
     if (port.name === 'popup-port') {
       this.popupPort = port;
@@ -297,7 +297,11 @@ class CommsServer {
   }
 
 
-  private async processReceivedMessage(message, port, sender?: {frameId: string, tabId: string}){
+  private async processReceivedMessage(
+    message: any,
+    port: chrome.runtime.Port,
+    sender?: chrome.runtime.MessageSender
+  ){
     this.logger.info('processMessage', `                   ==> Received message ${message.command ?? ''} from content script or port`, "background-color: #11D; color: #aad", message, port, sender);
     // this triggers events
     this.eventBus.send(
@@ -318,7 +322,10 @@ class CommsServer {
     );
   }
 
-  private processReceivedMessage_nonpersistent(message, sender){
+  private processReceivedMessage_nonpersistent(
+    message,
+    sender: chrome.runtime.MessageSender
+  ){
     this.logger.info('processMessage_nonpersistent', `                   ==> Received message from background script!`, message, sender);
 
     this.eventBus.send(

src/ext/module/kbm/KbmBase.ts

@@ -1,8 +1,9 @@
+import EventBus from '@/ext/module/EventBus';
+import { ComponentLogger } from '@/ext/module/logging/ComponentLogger';
+import Settings from '@/ext/module/settings/Settings';
+import { SiteSettings } from '@/ext/module/settings/SiteSettings';
 import { InputHandlingMode } from '@src/common/enums/InputHandlingMode.enum';
-import EventBus, { EventBusCommand } from '../EventBus';
+import { EventBusCommand } from '@src/common/interfaces/EventBusMessage.interface';
-import { ComponentLogger } from '../logging/ComponentLogger';
-import Settings from '../settings/Settings';
-import { SiteSettings } from '../settings/SiteSettings';
 
 export class KbmBase {
   listenFor: string[] = [];
@@ -80,6 +81,10 @@ export class KbmBase {
     // way, otherwise we can't remove event listener
     // https://stackoverflow.com/a/19507086
 
+    if (!this.siteSettings) {
+
+    }
+
     const enableInput = this.siteSettings.data.enableKeyboard;
 
     if (enableInput === InputHandlingMode.Disabled) {

src/ext/module/kbm/KeyboardHandler.ts

@@ -1,11 +1,12 @@
-import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import { KbmBase } from '@/ext/module/kbm/KbmBase';
-import Settings from '../settings/Settings';
+import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
-import EventBus, { EventBusCommand } from '../EventBus';
+import { InputHandlingMode } from '@src/common/enums/InputHandlingMode.enum';
-import KbmBase from './KbmBase';
+import { EventBusCommand } from '@src/common/interfaces/EventBusMessage.interface';
-import { SiteSettings } from '../settings/SiteSettings';
+import EventBus from '@src/ext/module/EventBus';
-import { LogAggregator } from '../logging/LogAggregator';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
-import { ComponentLogger } from '../logging/ComponentLogger';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
-import { InputHandlingMode } from '../../../common/enums/InputHandlingMode.enum';
+import Settings from '@src/ext/module/settings/Settings';
+import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
 
 if(process.env.CHANNEL !== 'stable'){
   console.info("Loading KeyboardHandler");
@@ -173,7 +174,6 @@ export class KeyboardHandler extends KbmBase {
     return event;
   }
 
-
   isLatin(key) {
     return 'abcdefghijklmnopqrstuvwxyz1234567890'.indexOf(key.toLocaleLowerCase()) !== -1;
   }

src/ext/module/kbm/PlayerMouseHandler.ts

@@ -1,4 +1,4 @@
-import { LogAggregator } from './../logging/LogAggregator';
+import { LogAggregator } from '../logging/LogAggregator';
 import EventBus, { EventBusCommand } from '../EventBus';
 import { ComponentLogger } from '../logging/ComponentLogger';
 import Settings from '../settings/Settings';

src/ext/module/settings/SiteSettings.ts

@@ -413,7 +413,6 @@ export class SiteSettings {
           elements: {
             player: undefined,
             video: undefined,
-            other: undefined,
           },
         },
         'modified': {
@@ -421,7 +420,6 @@ export class SiteSettings {
           elements: {
             player: undefined,
             video: undefined,
-            other: undefined,
           },
         },
       };

src/ext/module/uwui/UI.ts

@@ -443,7 +443,7 @@ class UI {
     });
 
     new UwuiWindow({
-      title: 'Ultrawidify settings (iframe)',
+      title: `Ultrawidify settings (${window.location.host})`,
       width: 1200,
       height: 800,
       x: 0,

src/ext/module/video-data/VideoData.ts

@@ -5,7 +5,6 @@ import BrowserDetect from '../../conf/BrowserDetect';
 import Settings from '../settings/Settings';
 import PageInfo from './PageInfo';
 import { sleep } from '../../../common/js/utils';
-import { hasDrm } from '../ar-detect/DrmDetecor';
 import EventBus from '../EventBus';
 import { SiteSettings } from '../settings/SiteSettings';
 import { Ar } from '../../../common/interfaces/ArInterface';
@@ -18,6 +17,7 @@ import { ExtensionEnvironment } from '../../../common/interfaces/SettingsInterfa
 import { LogAggregator } from '../logging/LogAggregator';
 import { ComponentLogger } from '../logging/ComponentLogger';
 import { AardLegacy } from '../aard/AardLegacy';
+import { hasDrm } from '@src/ext/module/ar-detect/DrmDetector';
 
 /**
  * VideoData — handles CSS for the video element.
@@ -143,7 +143,7 @@ class VideoData {
     };
 
     if (!pageInfo.eventBus) {
-      this.eventBus = new EventBus();
+      this.eventBus = new EventBus({name: 'video-data'});
     } else {
       this.eventBus = pageInfo.eventBus;
     }

src/ext/module/video-transform/Resizer.ts

@@ -1,4 +1,4 @@
-import { SiteSettings } from './../settings/SiteSettings';
+import { SiteSettings } from '../settings/SiteSettings';
 import Debug from '../../conf/Debug';
 import Scaler, { CropStrategy, VideoDimensions } from './Scaler';
 import Stretcher from './Stretcher';

src/ext/module/video-transform/Stretcher.ts

@@ -1,4 +1,4 @@
-import { SiteSettings } from './../settings/SiteSettings';
+import { SiteSettings } from '../settings/SiteSettings';
 import BrowserDetect from '../../conf/BrowserDetect';
 import VideoData from '../video-data/VideoData';
 import Settings from '../settings/Settings';

src/options/App.vue

@@ -111,15 +111,15 @@
 <script>
 import Donate from '../common/misc/Donate.vue';
 import SuperAdvancedSettings from './SuperAdvancedSettings.vue';
-import Settings from '../ext/lib/settings/Settings';
+import Settings from '../ext/module/settings/Settings';
 import GeneralSettings from './GeneralSettings';
 import ControlsSettings from './controls-settings/ControlsSettings';
 import AddEditActionPopup from './controls-settings/AddEditActionPopup';
 import ConfirmPopup from './common/ConfirmationPopup';
 import About from './about'
 import AutodetectionSettings  from './AutodetectionSettings';
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
-import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
 
 export default {
   name: "Ultrawidify",

src/options/about.vue

@@ -33,7 +33,7 @@
 
 <script>
 import BrowserDetect from '../ext/conf/BrowserDetect';
-import Settings from '../ext/lib/settings/Settings';
+import Settings from '../ext/module/settings/Settings';
 
 export default {
   data() {

src/ui/components/segments/AfterUpdate/AfterUpdate.vue

@@ -75,10 +75,10 @@
 
 <script lang="ts">
 import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
-import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
-import Settings from '@src/ext/lib/settings/Settings';
+import Settings from '@src/ext/module/settings/Settings';
-import { AardSubtitleCropMode } from '@src/ext/lib/aard/enums/aard-subtitle-crop-mode.enum';
+import { AardSubtitleCropMode } from '@src/ext/module/aard/enums/aard-subtitle-crop-mode.enum';
 
 export default {
   props: [

src/ui/components/segments/AutodetectionSettings/AutodetectionSettings.vue

@@ -234,8 +234,8 @@
 <script lang="ts">
 import BrowserDetect from '@src/ext/conf/BrowserDetect';
 import JsonEditor from '@components/common/JsonEditor.vue';
-import {AardPollingOptions} from '@src/ext/lib/aard/enums/aard-polling-options.enum';
+import {AardPollingOptions} from '@src/ext/module/aard/enums/aard-polling-options.enum';
-import {AardSubtitleCropMode} from '@src/ext/lib/aard/enums/aard-subtitle-crop-mode.enum';
+import {AardSubtitleCropMode} from '@src/ext/module/aard/enums/aard-subtitle-crop-mode.enum';
 import { defineComponent } from 'vue';
 
 export default defineComponent({

src/ui/components/segments/Debugging/Debugging.vue

@@ -198,8 +198,8 @@ import Popup from '@components/common/Popup.vue';
 import JsonEditor from '@components/common/JsonEditor.vue';
 import UploadJsonFileButton from '@components/common/UploadJsonFileButton.vue';
 
-import { LogAggregator, BLANK_LOGGER_CONFIG } from '@src/ext/lib/logging/LogAggregator';
+import { LogAggregator, BLANK_LOGGER_CONFIG } from '@src/ext/module/logging/LogAggregator';
-import { SettingsSnapshot } from '@src/ext/lib/settings/SettingsSnapshotManager';
+import { SettingsSnapshot } from '@src/ext/module/settings/SettingsSnapshotManager';
 import SettingsInterface from '@src/common/interfaces/SettingsInterface';
 import { _cp } from '@src/common/js/utils';
 

src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorAdvancedForm.vue

@@ -298,7 +298,7 @@
 </template>
 
 <script lang="ts">
-import { SiteSettings } from '@src/ext/lib/settings/SiteSettings';
+import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
 import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
 import UploadJsonFileButton from '@components/common/UploadJsonFileButton.vue';
 import SupportLevelIndicator from '@components/common/SupportLevelIndicator.vue';

src/ui/pages/installed/App.vue

@@ -62,8 +62,8 @@
 
 <script>
 import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
-import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
 
 export default {
   data () {

src/ui/pages/settings/App.vue

@@ -5,7 +5,7 @@
       flex flex-row justify-center items-center
     "
     :class="{
-      'p-1 popup-lg:py-2 popup-lg:px-2 window:py-4 window:px-8 bg-stone-950': role !== 'ui'
+      'p-1 popup-lg:py-2 popup-lg:px-2 window:py-4 window:px-8 bg-stone-950': role !== 'ui-window'
     }"
   >
 
@@ -38,6 +38,7 @@
         :role="role"
         :initialPath="initialPath"
         :settings="settings"
+        :siteSettings="siteSettings"
         :eventBus="eventBus"
         :logger="logger"
         :inPlayer="false"
@@ -52,24 +53,28 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
+import { LogAggregator } from '@src/ext/module/logging/LogAggregator';
-import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
+import { ComponentLogger } from '@src/ext/module/logging/ComponentLogger';
-import Settings from '@src/ext/lib/settings/Settings';
+import Settings from '@src/ext/module/settings/Settings';
-import { SiteSettings } from '@src/ext/lib/settings/SiteSettings';
+import { SiteSettings } from '@src/ext/module/settings/SiteSettings';
 import SettingsWindowContent from '@components/SettingsWindowContent.vue';
 
-import EventBus from '@src/ext/lib/EventBus';
+import EventBus from '@src/ext/module/EventBus';
-import CommsClient, { CommsOrigin } from '@src/ext/lib/comms/CommsClient';
+import CommsClient, { CommsOrigin } from '@src/ext/module/comms/CommsClient';
 import {ChromeShittinessMitigations as CSM} from '@src/common/js/ChromeShittinessMitigations';
 
 import PopupHead from '@components/PopupHead.vue';
 import ExtensionMode from '../../../common/enums/ExtensionMode.enum';
+import WarningsMixin from '../../utils/mixins/WarningsMixin.vue';
 
 export default defineComponent({
   components: {
     SettingsWindowContent,
     PopupHead,
   },
+  mixins: [
+    WarningsMixin
+  ],
   data () {
     return {
       BrowserDetect,
@@ -91,30 +96,34 @@ export default defineComponent({
     }
   },
   async created() {
-    const [segment, ...path] = window.location.hash.split('/');
+    try {
-    this.initialPath = path;
+      const [segment, ...path] = window.location.hash.split('/');
+      this.initialPath = path;
 
-    switch (segment) {
+      switch (segment) {
-      case '#popup':
+        case '#popup':
-        await this.setupPopup();
+          await this.setupPopup();
-        break;
+          break;
-      case '#iframe':
+        case '#ui':
-        await this.setupIframe();
+          await this.setupIframe();
-        break;
+          break;
-      case '#settings':
+        case '#settings':
-      case '#updated':
+        case '#updated':
-      case '#installed':
+        case '#installed':
-      default:
+        default:
-        await this.setupSettingsPage(segment);
+          await this.setupSettingsPage(segment);
+      }
+
+      if (segment !== '#popup') {
+        // undo that workaround that makes popup work correctly if we aren't in a popup
+        document.getElementsByTagName('html')[0].setAttribute('style', '');
+      }
+
+      await this.settings.init();
+      this.settingsInitialized = true;
+    } catch (e) {
+      console.error(`ultrawidify::failed to create vue app:`, e);
     }
-
-    if (segment !== '#popup') {
-      // undo that workaround that makes popup work correctly if we aren't in a popup
-      document.getElementsByTagName('html')[0].setAttribute('style', '');
-    }
-
-    await this.settings.init();
-    this.settingsInitialized = true;
   },
   methods: {
     setDebugStatus(isDebugging: boolean) {
@@ -157,11 +166,7 @@ export default defineComponent({
         await this.settings.init();
         this.settingsInitialized = true;
 
-        // const port = chrome.runtime.connect({name: 'popup-port'});
+        this.eventBus = new EventBus({name: 'popup'});
-        // port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
-        // CSM.setProperty('port', port);
-
-        this.eventBus = new EventBus();
         this.eventBus.subscribe(
           'set-current-site',
           {
@@ -233,10 +238,7 @@ export default defineComponent({
         });
 
         // get info about current site from background script
-        while (true) {
+        this.startSitePolling();
-          this.requestSite();
-          await this.sleep(5000);
-        }
       } catch (e) {
         console.error('[Popup.vue::created()] An error happened:', e)
       }
@@ -246,68 +248,119 @@ export default defineComponent({
      * Initializes page when it's being loaded as in-page settings window
      */
     async setupIframe() {
-      this.role='ui-window';
+      try {
+        this.role='ui-window';
 
-      this.logAggregator = new LogAggregator('settings-page');
+        this.logAggregator = new LogAggregator('settings-page');
-      this.logger = new ComponentLogger(this.logAggregator, 'SettingsPage');
+        this.logger = new ComponentLogger(this.logAggregator, 'SettingsPage');
 
-      this.settings = new Settings({
+        this.settings = new Settings({
-        logAggregator: this.logAggregator,
+          logAggregator: this.logAggregator,
-        onSettingsChanged: () => this.updateConfig()
+          onSettingsChanged: () => this.updateConfig()
-      });
+        });
 
-      if (this.defaultTab) {
+        if (this.defaultTab) {
-        this.selectedTab = this.defaultTab;
+          this.selectedTab = this.defaultTab;
-      }
-      this.siteSettings = this.settings.getSiteSettings({site: this.site});
-      this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
-
-      if (!this.eventBus) {
-        this.eventBus = new EventBus();
-      }
-
-      /**
-       * SETUP CROSS-FRAME COMMUNICATION
-       *
-       * 1. We need to allow eventBus to send messages to the parent page
-       * 2. We need to plug messages we receive from parent page into the event bus
-       */
-      this.eventBus.sendToTunnel = (command: string, config: any) => {
-        window.parent.postMessage(
-          {
-            action: 'uw-bus-tunnel',
-            payload: { command, config }
-          },
-          '*'
-        );
-      };
-
-      window.addEventListener('message', (event: MessageEvent) => {
-        const data = event.data;
-        if (data?.action === 'uw-bus-tunnel') {
-          // prevent double-crossing by marking borderCrossings
-          this.eventBus.send(data.payload.command, data.payload.config, {
-            borderCrossings: { iframe: true }
-          });
         }
-      });
 
-      /**
+        if (!this.eventBus) {
-       * Subscribe to event bus commands.
+          this.eventBus = new EventBus({name: 'ui-window'});
-       * Note that showing and hiding of the settings window is no longer handled by iframe
+        }
-       * Instead, uw-show-ui should be handled by the content-script.
+
-       */
+        /**
-      // this.eventBus.subscribe(
+         * SETUP CROSS-FRAME COMMUNICATION
-      //   'uw-show-ui',
+         *
-      //   {
+         * 1. We need to allow eventBus to send messages to the parent page
-      //     source: this,
+         * 2. We need to plug messages we receive from parent page into the event bus
-      //     function: () => {
+         */
-      //       if (this.inPlayer) {
+        this.eventBus.sendToTunnel = (command: string, config: any) => {
-      //         return; // show-ui is only intended for global overlay
+          window.parent.postMessage(
-      //       }
+            {
-      //     },
+              action: 'uw-bus-tunnel',
-      //   }
+              payload: { command, config }
-      // )
+            },
+            '*'
+          );
+        };
+
+        window.addEventListener('message', (event: MessageEvent) => {
+          const data = event.data;
+          if (data?.action === 'uw-bus-tunnel') {
+            // prevent double-crossing by marking borderCrossings
+            this.eventBus.send(data.payload.command, data.payload.config, {
+              borderCrossings: { iframe: true }
+            });
+          }
+        });
+
+        /**
+         * Subscribe to event bus commands.
+         * Note that showing and hiding of the settings window is no longer handled by iframe
+         * Instead, uw-show-ui should be handled by the content-script.
+         */
+        this.eventBus.subscribeMulti({
+          'set-current-site': {
+            source: this,
+            function: (config, context) => {
+              console.warn('———————————————— received setCurrentSite!', config, context);
+
+              if (this.site) {
+                if (!this.site.host) {
+                  // dunno why this fix is needed, but sometimes it is
+                  this.site.host = config.site.host;
+                }
+              }
+              this.site = config.site;
+
+              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: {
+              //     forwardTo: 'active'
+              //   }
+              // });
+
+              this.loadHostnames();
+              this.loadFrames();
+            }
+          },
+        });
+
+        this.startSitePolling();
+        // this.eventBus.subscribe(
+        //   'uw-show-ui',
+        //   {
+        //     source: this,
+        //     function: () => {
+        //       if (this.inPlayer) {
+        //         return; // show-ui is only intended for global overlay
+        //       }
+        //     },
+        //   }
+        // )
+      } catch (e) {
+        console.error('Failed to initialize vue:', e);
+      }
+    },
+
+    async startSitePolling() {
+      while (true) {
+        console.log('requesting site')
+        this.requestSite();
+        await this.sleep(5000);
+      }
     },
 
     //#region EXTENSION POPUP
@@ -326,6 +379,7 @@ export default defineComponent({
     requestSite() {
       try {
         this.logger.log('info','popup', '[popup::getSite] Requesting current site ...')
+        console.info('sending get-current-site to eventBus')
         // CSM.port.postMessage({command: 'get-current-site'});
         this.eventBus.send(
           'get-current-site',
@@ -334,13 +388,17 @@ export default defineComponent({
             comms: {forwardTo: 'active'}
           }
         );
+        this.eventBus.sendToTunnel(
+          '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;
     },

tsconfig.json

@@ -20,6 +20,9 @@
     "esModuleInterop": true,
     "paths": {
       "@src/*": [ "*" ],
+      "@ui/*": [ "ui/*" ],
+      "@components/*": ["ui/components/*"],
+      "@res/*": ["ui/res"],
       "@/*": [ "*" ]
     }
   },