wip

src/common/interfaces/SettingsInterface.ts

@@ -185,6 +185,12 @@ interface SettingsInterface {
     }
   },
 
+  ui: {
+    inPlayer: {
+      enabled: boolean
+    }
+  }
+
   restrictions?: RestrictionsSettings;
 
   crop: {
@@ -310,52 +316,6 @@ interface SettingsInterface {
   sites: {
     [x: string]: SiteSettingsInterface,
   }
-  // sites: {
-  //   [x: string]: {
-  //     defaultCrop?: any,                          // v6 new
-  //     defaultStretch?: any,                       // v6 new
-  //     enabled: ExtensionEnvironmentSettingsInterface,     // v6 new
-  //     enabledAard: ExtensionEnvironmentSettingsInterface,// v6 new
-
-  //                                                 // everything 'superseded by' needs to be implemented
-  //                                                 // as well as ported from the old settings
-  //     mode?: ExtensionMode,                       // v6 — superseded by looking at enableIn
-  //     autoar?: ExtensionMode,                     // v6 — superseded by looking at enableIn
-  //     autoarFallback?: ExtensionMode,             // v6 — deprecated, no replacement
-  //     stretch?: StretchType,                      // v6 — superseded by defaultStretch
-  //     videoAlignment?: VideoAlignmentType,
-  //     keyboardShortcutsEnabled?: ExtensionMode,
-  //     type?: string,
-  //     override?: boolean,
-  //     arPersistence?: boolean,
-  //     actions?: any;
-
-  //     cropModePersistence?: CropModePersistence;
-
-  //     DOM?: {
-  //       player?: {
-  //         manual?: boolean,
-  //         querySelectors?: string,
-  //         additionalCss?: string,
-  //         useRelativeAncestor?: boolean,
-  //         videoAncestor?: any,
-  //         playerNodeCss?: string,
-  //         periodicallyRefreshPlayerElement?: boolean
-  //       },
-  //       video?: {
-  //         manual?: boolean,
-  //         querySelectors?: string,
-  //         additionalCss?: string,
-  //         useRelativeAncestor?: boolean,
-  //         playerNodeCss?: string
-  //       }
-  //     },
-  //     css?: string;
-  //     usePlayerArInFullscreen?: boolean;
-
-  //     restrictions?: RestrictionsSettings;
-  //   }
-  // }
 }
 
 export interface SiteSettingsInterface {

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -5,6 +5,9 @@
         <h1>What's new</h1>
         <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md" target="_blank">is available here</a>.</p>
 
+        <h2>6.0.1</h2>
+        <p>Fixed external links.</p>
+
         <h2>6.0.0</h2>
         <p>
           I don't think I need to write a changelog for this one. I've also been working on this, on and (mostly) off, for ... a long time, so I might have "kinda forgot" some minor things.

src/ext/conf/ExtConfPatches.ts

@@ -11,129 +11,14 @@ import AspectRatioType from '../../common/enums/AspectRatioType.enum';
 
 const ExtensionConfPatch = [
   {
-    forVersion: '5.0.5',
+    forVersion: '6.0.1-1',
-    sites: {
-      "app.plex.tv": {
-        mode: 3,
-        autoar: 3,
-        type: "community",
-        stretch: -1,
-        videoAlignment: -1,
-        keyboardShortcutsEnabled: 0,
-        DOM: {
-          player: {
-            manual: false,
-            querySelectors: "",
-            additionalCss: "",
-            useRelativeAncestor: false,
-            playerNodeCss: ""
-          }
-        },
-        css: "body {\n  background-color: #000;\n}\n\n.application {\n  background-color: #000;\n}"
-      }
-    }
-  }, {
-    forVersion: '5.0.6',
-    sites: {
-      "metaivi.com": {
-        mode: 0,
-        autoar: 0,
-        type: "community",
-        stretch: -1,
-        videoAlignment: -1,
-        DOM: {
-          video: {
-            manual: false,
-            querySelectors: "",
-            additionalCss: "position: absolute !important;"
-          },
-          player: {
-            manual: false,
-            querySelectors: "",
-            additionalCss: "",
-            useRelativeAncestor: false,
-            playerNodeCss: ""
-          }
-        },
-        "css": ""
-      },
-      "piped.kavin.rocks": {
-        mode: 0,
-        autoar: 0,
-        type: 'community',
-        autoarFallback: 0,
-        stretch: 0,
-        videoAlignment: -1,
-        keyboardShortcutsEnabled: 0,
-        DOM: {
-          player: {
-            manual: false,
-            querySelectors: "",
-            additionalCss: "",
-            useRelativeAncestor: false,
-            playerNodeCss: ""
-          }
-        },
-        css: ".shaka-video-container {\n  flex-direction: column !important;\n}"
-      },
-    },
-    updateFn: (userOptions, defaultOptions) => {
-      // 5.0.5 initially incorrectly had app.plex.tv marked as 'user-added'
-      // when 'user-added' is generally reserved for marking sites with user-
-      // changed configuration. Site patches submitted by community should have
-      // 'community' type. extConfPatch for 5.0.5 was also retroactively corrected.
-      userOptions.sites['app.plex.tv'].type = 'community';
-      userOptions.sites['piped.kavin.rocks'] = {
-        mode: 0,
-        autoar: 0,
-        type: 'community',
-        autoarFallback: 0,
-        stretch: 0,
-        videoAlignment: -1,
-        keyboardShortcutsEnabled: 0,
-        DOM: {
-          player: {
-            manual: false,
-            querySelectors: "",
-            additionalCss: "",
-            useRelativeAncestor: false,
-            playerNodeCss: ""
-          }
-        },
-        css: ".shaka-video-container {\n  flex-direction: column !important;\n}"
-      };
-    }
-  }, {
-    forVersion: '5.0.7',
-    updateFn: (userOptions, defaultOptions) => {
-      // 5.0.5 initially incorrectly had app.plex.tv marked as 'user-added'
-      // when 'user-added' is generally reserved for marking sites with user-
-      // changed configuration. Site patches submitted by community should have
-      // 'community' type. extConfPatch for 5.0.5 was also retroactively corrected.
-      userOptions.sites['www.youtube.com'].DOM.player = {
-        manual: true,
-        querySelectors: "#movie_player, #player, #c4-player",
-        additionalCss: "",
-        useRelativeAncestor: false,
-        playerNodeCss: "",
-      }
-    }
-  }, {
-    forVersion: '5.0.8',
-    updateFn: (userOptions, defaultOptions) => {
-      userOptions.sites['www.netflix.com'].DOM.player = {
-        manual: false
-      }
-    }
-  }, {
-    forVersion: '5.99.0-1',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       // add new commands
       userOptions.commands = defaultOptions.commands;
     }
   }, {
     // NOTE - when releasing shit, ensure ALL alpha migrations are combined together in one function
-    forVersion: '5.99.0-2',
+    forVersion: '6.0.1-2',
     updateFn: (userOptions, defaultOptions) => {
       userOptions.commands = defaultOptions.commands;
 
@@ -204,7 +89,7 @@ const ExtensionConfPatch = [
       }
     }
   }, {
-    forVersion: '5.99.0-3',
+    forVersion: '6.0.1-3',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       delete (userOptions as any).sites['@global'].persistOption;
       delete (userOptions as any).sites['@empty'].persistOption;
@@ -213,7 +98,7 @@ const ExtensionConfPatch = [
       userOptions.sites['@empty'].persistCSA = CropModePersistence.Disabled;
     }
   },  {
-    forVersion: '5.99.0-4',
+    forVersion: '6.0.1-4',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
 
       // deprecated much?
@@ -254,7 +139,7 @@ const ExtensionConfPatch = [
       })
     }
   }, {
-    forVersion: '5.99.5',
+    forVersion: '6.0.1-5',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       if (!userOptions.sites['@global'].defaults.alignment || !userOptions.sites['@global'].defaults.alignment.x || !userOptions.sites['@global'].defaults.alignment.y) {
         userOptions.sites['@global'].defaults.alignment = {
@@ -265,7 +150,7 @@ const ExtensionConfPatch = [
       userOptions.sites['@empty'].defaults.alignment = {x: VideoAlignmentType.Default, y: VideoAlignmentType.Default};
     }
   }, {
-    forVersion: '5.99.6',
+    forVersion: '6.0.1-6',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       for (const site in userOptions.sites) {
         userOptions.sites[site].defaultType = userOptions.sites[site].type as any;
@@ -274,13 +159,18 @@ const ExtensionConfPatch = [
       userOptions.sites['@empty'].defaultType = 'modified';
     }
   }, {
-    forVersion: '6.0.0',
+    forVersion: '6.0.1-7',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       // remove custom CSS, as it is no longer needed
       for (const site in userOptions.sites) {
         for (const domOption in userOptions.sites[site].DOMConfig)
         userOptions.sites[site].DOMConfig[domOption].customCss;
       }
+      userOptions.ui = {
+        inPlayer: {
+          enabled: false, // keep disabled for existing users
+        }
+      }
     }
   }
 ];

src/ext/conf/ExtensionConf.ts

@@ -141,6 +141,13 @@ const ExtensionConf: SettingsInterface = {
       testRowOffset: 0.02     // we test this % of height from detected edge
     }
   },
+
+  ui: {
+    inPlayer: {
+      enabled: true, // enable by default on new installs
+    }
+  },
+
   crop: {
     default: {
       type: AspectRatioType.Automatic,

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

@@ -152,7 +152,15 @@ class PlayerData {
       this.initEventBus();
 
       // this.notificationService = new PlayerNotificationUi(this.element, this.settings, this.eventBus);
-      this.ui = new UI('ultrawidifyUi', {parentElement: this.element, eventBus: this.eventBus});
+      if (this.videoData.settings.active.ui?.inPlayer?.enabled) {
+        this.ui = new UI(
+          'ultrawidifyUi',
+          {
+            parentElement: this.element,
+            eventBus: this.eventBus
+          }
+        );
+      }
 
       this.dimensions = undefined;
       this.overlayNode = undefined;
@@ -215,7 +223,6 @@ class PlayerData {
   destroy() {
     document.removeEventListener('fullscreenchange', this.dimensionChangeListener);
     this.stopChangeDetection();
-    this.destroyOverlay();
     this.notificationService?.destroy();
   }
   //#endregion
@@ -326,11 +333,14 @@ class PlayerData {
     const canEnable = this.siteSettings.isEnabledForEnvironment(this.isFullscreen, this.isTheaterMode) === ExtensionMode.Enabled;
 
     if (this.runLevel === RunLevel.Off && canEnable) {
+      console.log('runLevel: off -> [anything]');
       this.eventBus.send('restore-ar', null);
       // must be called after
       this.handleDimensionChanges(currentPlayerDimensions, this.dimensions);
     } else if (!canEnable && this.runLevel !== RunLevel.Off) {
       // must be called before
+      console.log('runLevel: [anything] -> off');
+
       this.handleDimensionChanges(currentPlayerDimensions, this.dimensions);
       this.setRunLevel(RunLevel.Off);
     }
@@ -338,8 +348,8 @@ class PlayerData {
 
 
   private handleDimensionChanges(newDimensions: PlayerDimensions, oldDimensions: PlayerDimensions) {
-    console.log('handling dimension changes');
+    console.log('handling dimension changes\n\nold dimensions:', oldDimensions, '\nnew dimensions:', newDimensions, '\n\nis enabled:', this.enabled, this.runLevel, RunLevel);
-    if (!this.enabled) {
+    if (this.runLevel === RunLevel.Off ) {
       this.logger.log('info', 'debug', "[PlayerDetect] player size changed, but PlayerDetect is in disabled state. The player element is probably too small.");
       return;
     }
@@ -354,8 +364,10 @@ class PlayerData {
       || newDimensions?.height != oldDimensions?.height
       || newDimensions?.fullscreen != oldDimensions?.fullscreen
     ){
+      console.log('dimensions changed + we are enabled. Sending restore-ar ...');
       // If player size changes, we restore aspect ratio
       this.eventBus.send('restore-ar', null);
+      this.eventBus.send('delayed-restore-ar', {delay: 500});
       // this.videoData.resizer?.restore();
     }
   }
@@ -424,59 +436,6 @@ class PlayerData {
     this.observer.disconnect();
   }
 
-  //#region interface
-  makeOverlay() {
-    if (!this.overlayNode) {
-      this.destroyOverlay();
-    }
-
-    let overlay = document.createElement('div');
-    overlay.style.width = '100%';
-    overlay.style.height = '100%';
-    overlay.style.position = 'absolute';
-    overlay.style.top = '0';
-    overlay.style.left = '0';
-    overlay.style.zIndex = '1000000000';
-    overlay.style.pointerEvents = 'none';
-
-    this.overlayNode = overlay;
-    this.element.appendChild(overlay);
-  }
-
-  destroyOverlay() {
-    if(this.playerIdElement) {
-      this.playerIdElement.remove();
-      this.playerIdElement = undefined;
-    }
-    if (this.overlayNode) {
-      this.overlayNode.remove();
-      this.overlayNode = undefined;
-    }
-  }
-
-  markPlayer(name, color) {
-    if (!this.overlayNode) {
-      this.makeOverlay();
-    }
-    if (this.playerIdElement) {
-      this.playerIdElement.remove();
-    }
-    this.playerIdElement = document.createElement('div');
-    this.playerIdElement.innerHTML = `<div style="background-color: ${color}; color: #fff; position: absolute; top: 0; left: 0">${name}</div>`;
-
-    this.overlayNode.appendChild(this.playerIdElement);
-  }
-
-  unmarkPlayer() {
-    this.logger.log('info', 'debug', "[PlayerData::unmarkPlayer] unmarking player!", {playerIdElement: this.playerIdElement});
-    if (this.playerIdElement) {
-      this.playerIdElement.innerHTML = '';
-      this.playerIdElement.remove();
-    }
-    this.playerIdElement = undefined;
-  }
-  //#endregion
-
 
   //#region helper functions
   collectionHas(collection, element) {

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

@@ -739,19 +739,6 @@ class VideoData {
     this.resizer.restore();
   }
 
-  markPlayer(name, color) {
-    if (this.invalid) {
-      return;
-    }
-    if (this.player) {
-      this.player.markPlayer(name, color)
-    }
-  }
-
-  unmarkPlayer() {
-    this.player.unmarkPlayer();
-  }
-
   isPlaying() {
     return this.video && this.video.currentTime > 0 && !this.video.paused && !this.video.ended;
   }

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

@@ -18,6 +18,7 @@ import { _cp } from '../../../common/js/utils';
 import Settings from '../Settings';
 import { Ar } from '../../../common/interfaces/ArInterface';
 import { RunLevel } from '../../enum/run-level.enum';
+import * as _ from 'lodash';
 
 if(Debug.debug) {
   console.log("Loading: Resizer.js");
@@ -133,6 +134,18 @@ class Resizer {
     }],
     'restore-ar': [{
       function: () => this.restore()
+    }],
+    'delayed-restore-ar': [{
+      function: () => {
+        _.debounce(
+          this.restore,
+          500,
+          {
+            leading: true,
+            trailing: true
+          }
+        )
+      }
     }]
   }
   //#endregion
@@ -738,7 +751,7 @@ class Resizer {
     const alignXOffset = (realVideoWidth * stretchFactors.xFactor - this.videoData.player.dimensions.width) * 0.5;
     const alignYOffset = (realVideoHeight * stretchFactors.yFactor - this.videoData.player.dimensions.height) * 0.5;
 
-    if (this.pan.relativeOffsetX || this.pan.relativeOffsetY) {
+    if (this.pan?.relativeOffsetX || this.pan?.relativeOffsetY) {
       // don't offset when video is smaller than player
       if(alignXOffset >= 0 || alignYOffset >= 0) {
         translate.x += alignXOffset * this.pan.relativeOffsetX * this.zoom.scale;