Fix sliders, but for real this time (pt 2)

Bumps [shell-quote](https://github.com/substack/node-shell-quote) from 1.7.2 to 1.7.3.
- [Release notes](https://github.com/substack/node-shell-quote/releases)
- [Changelog](https://github.com/substack/node-shell-quote/blob/master/CHANGELOG.md)
- [Commits](https://github.com/substack/node-shell-quote/compare/v1.7.2...1.7.3)

---
updated-dependencies:
- dependency-name: shell-quote
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.nvmrc

@@ -1 +1 @@
-14.4.0
+14.21.3

.vscode/launch.json

@@ -4,10 +4,19 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach to Chrome",
+      "port": 9222,
+      "urlFilter": "http://*/*",
+      "webRoot": "${workspaceFolder}"
+    },
     {
       "type": "firefox",
       "request": "attach",
-      "name": "Attach",
+      "name": "Attach (firefox)",
       "pathMappings": [
         {
           "url": "webpack:///ext",
@@ -16,7 +25,7 @@
       ]
     },
     {
-      "name": "Launch addon",
+      "name": "Launch addon (firefox)",
       "type": "firefox",
       "request": "launch",
       "port": 6000,
@@ -36,5 +45,8 @@
     "firefoxArgs": [
       "--start-debugger-server"
     ]
+  },
+  "chrome": {
+    "executable": "/usr/bin/google-chrome-stable --remote-debugging-port=9222",
   }
 }

.vscode/settings.json

@@ -9,10 +9,13 @@
     "blackbars",
     "blackframe",
     "canvas",
+    "clickthrough",
     "com",
     "comms",
     "csui",
     "decycle",
+    "dinked",
+    "dinks",
     "disneyplus",
     "endregion",
     "equalish",
@@ -29,6 +32,8 @@
     "insta",
     "letterboxed",
     "manjaro",
+    "mdicon",
+    "mdijs",
     "minification",
     "mitigations",
     "nogrow",
@@ -49,6 +54,7 @@
     "tablist",
     "tamius",
     "textbox",
+    "ultrawide",
     "ultrawidify",
     "unmark",
     "unmarking",

CHANGELOG.md

@@ -11,12 +11,69 @@
 ## v7.0 (planned major)
  * WebGL autodetection
 
-## v6.0 (next major)
+## v6.0 (current major)
 
- * in-player GUI
- * Fix UI logger
+### v6.0.1
 
-## v5.x (current major)
+* Fixed external links
+
+### v6.0.0
+
+Chrome only, because I needed to rush manifest v3 migration before ensuring things work in Firefox.
+
+ * In player UI
+ * New alignment options (can align video both vertically, as well as horizontally)
+ * Extension does a little bit of a better job differentiating between levels of support for a given site
+ * Changed how cropping and panning works. This should lead to fewer problems and better generic support.
+  * REGRESSION: no manual panning with shift + mouse movement
+ * "Player select" screen, which provides a GUI way for picking HTML element that acts as the video player area
+
+Regressions and potential issues:
+ * Settings were largely not migrated from previous versions. This is as intended, since changes to cropping (and some other aspects)
+   rendered certain old settings obsolete.
+ * Extension can no longer discriminate between iframes — extension popup commands get sent to ALL iframes on page
+ * Extension probably can't discriminate between multiple videos on a single page
+
+## v5.x 
+
+### v5.1.7
+
+Firefox-only.
+
+* When cropping and panning video, CSS' `transform: translate(x,y)` now uses integers _always_. Before that fix, `translate(x,y)` could be offset by x.5 px, and that half of a pixel introduced a 1px thick line on the portion of the left edge of the video.
+
+### v5.1.7
+
+* When aligning videos, ensure video is never translated by a fractional value
+* As of recent nVidia driver update in Edge, Angle detection fails in a way that prevents popup from showing up. This problem should be fixed now.
+
+The angle detection problem was fixed by disabling the angle detection check for now, as Chrome, et al. appear to have fixed buggy video hardware acceleration.
+
+### v5.1.6
+
+* Added new config for disney+ (courtesy of @MStefan99)
+* Chrome hardware acceleration is bugged and cannot be worked around in-extension. Only way to fix this is for users to change their Google Chrome settings. Added naggathon with instructions into the extension popup.
+
+### v5.1.5
+
+* Fixed laginess in Chromium-based browsers on Windows. Details in [#199](https://github.com/tamius-han/ultrawidify/issues/199#issuecomment-1221383134)
+
+### v5.1.4
+
+* Fixed some problems with autodetection not returning to 16:9 when necessary if autodetection already changed aspect ratio ([#198](https://github.com/tamius-han/ultrawidify/issues/198))
+
+### v5.1.3
+
+* Fixed some problems with autodetection sometimes briefly resetting on dark frames ([#195](https://github.com/tamius-han/ultrawidify/issues/195), [#196](https://github.com/tamius-han/ultrawidify/issues/196))
+
+### v5.1.2
+
+* `set-extension-mode` turned into `set-ExtensionMode` at some point. This caused in "Enable this extension" options to vanish on certain setups.
+* Blackframe tests now run on same data as main algorithm as opposed on a smaller sample (`drawImage()` calls are _very_ expensive even for a 16x9 sample).
+
+### v5.1.1
+
+* Fixed autodetection
 
 ### v5.1.0
 

DOCUMENTATION.MD

@@ -0,0 +1,6 @@
+# Implementation details
+
+## Enabling/disabling aspect ratio corrections
+
+* Aspect ratios are changed by proxy. Extension attaches **a custom CSS class** to `video` and `player` elements.
+* To prevent extension from affecting the appearance of a webpage, **it's sufficient to remove our custom CSS classes from `video` and `player` elements.** 

Jenkinsfile

@@ -0,0 +1,32 @@
+// required jenkins plugins:
+//     * https://plugins.jenkins.io/git/
+
+pipeline {
+  agent any
+
+  stages {
+
+    // stage('Check for changes') {
+    //   sh "env.GIT_COMMIT != env.GIT_PREVIOUS_COMMIT"
+    // }
+
+    stage('Install dependencies') {
+      steps {
+        sh 'npm ci'
+      }
+    }
+
+    stage('Build') {
+      steps {
+        sh 'npm run build-all'
+      }
+    }
+
+    stage('Push to release server') {
+      steps {
+        sh "echo 'implement me pls!'"
+      }
+    }
+  }
+
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "5.1.0",
+  "version": "6.0.2",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {
@@ -16,44 +16,46 @@
     "build-zip": "node scripts/build-zip.js",
     "build:dev": "webpack --hide-modules",
     "dev": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- --watch\" \"cross-env BROWSER=chrome npm run build:dev -- --watch\"  \"cross-env BROWSER=edge npm run build:dev -- --watch\"",
-    "dev-ff": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
-    "dev-chrome": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=chrome npm run build:dev -- --watch",
-    "dev-edge": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=edge npm run build:dev -- --watch",
-    "pre-build": "rm -rf ./dist-ff; rm -rf ./dist-chrome; rm -rf ./node_modules; npm ci",
-    "start": "npm run dev"
+    "dev:windows": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- -w --watch-poll\" \"cross-env BROWSER=chrome npm run build:dev -- -w --watch-poll\"  \"cross-env BROWSER=edge npm run build:dev -- -w --watch-poll\"",
+    "dev-ff": "rm -rf ./dist-ff && cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
+    "dev-chrome": "rm -rf ./dist-chrome && cross-env NODE_ENV=development CHANNEL=dev BROWSER=chrome npm run build:dev -- --watch",
+    "dev-edge": "rm -rf ./dist-edge && cross-env NODE_ENV=development CHANNEL=dev BROWSER=edge npm run build:dev -- --watch",
+    "pre-build": "rm -rf ./dist-ff; rm -rf ./dist-chrome; rm -rf ./dist-edge; rm -rf ./node_modules; npm ci",
+    "start": "npm run dev",
+    "start:windows": "npm run dev:windows"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@types/chrome": "0.0.129",
-    "@types/core-js": "^2.5.3",
-    "@types/es6-promise": "^3.3.0",
-    "@types/firefox": "0.0.30",
-    "@types/resize-observer-browser": "^0.1.5",
-    "@vue/cli": "^4.5.9",
-    "@vue/cli-plugin-typescript": "^4.5.11",
-    "bootstrap": "^4.5.3",
-    "bootstrap-icons": "^1.1.0",
-    "bootstrap-icons-vue": "^0.3.0",
-    "bootstrap-vue": "^2.20.1",
-    "concurrently": "^5.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@mdi/font": "^6.5.95",
+    "@mdi/js": "^6.4.95",
+    "@types/resize-observer-browser": "^0.1.6",
+    "concurrently": "^5.3.0",
     "fs-extra": "^7.0.1",
+    "gl-matrix": "^3.4.3",
     "json-cyclic": "0.0.3",
     "lodash": "^4.17.21",
-    "typescript": "^4.2.3",
-    "vue": "^3.0.0-beta.1",
-    "vuex": "^4.0.0-alpha.1",
-    "vuex-webextensions": "^1.3.0",
-    "webextension-polyfill-ts": "^0.24.0"
+    "mdi-vue": "^3.0.11",
+    "typescript": "^4.4.4",
+    "vue": "^3.2.21",
+    "vue-style-loader": "^4.1.3",
+    "vuex": "^4.0.2",
+    "vuex-webextensions": "^1.3.3",
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-    "@babel/preset-env": "^7.12.13",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.25",
-    "@vue/compiler-sfc": "^3.0.3",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@types/chrome": "0.0.240",
+    "@types/core-js": "^2.5.5",
+    "@types/es6-promise": "^3.3.0",
+    "@types/firefox": "0.0.31",
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^14.17.32",
+    "@vue/cli": "^4.5.15",
+    "@vue/cli-plugin-typescript": "^4.5.15",
+    "@vue/compiler-sfc": "^3.2.21",
     "archiver": "^3.0.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "babel-preset-es2020": "^1.0.2",
     "copy-webpack-plugin": "^4.5.3",
     "cross-env": "^5.2.0",
@@ -62,13 +64,13 @@
     "file-loader": "^1.1.11",
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.14.1",
+    "resolve-url-loader": "^5.0.0",
     "sass-loader": "^7.1.0",
-    "ts-loader": "^8.0.16",
+    "ts-loader": "^8.3.0",
     "vue-cli-plugin-vue-next": "~0.1.4",
-    "vue-loader": "^16.0.0",
+    "vue-loader": "^16.8.2",
     "web-ext-types": "^2.3.0",
-    "webextension-polyfill": "^0.6.0",
-    "webpack": "^4.44.0",
+    "webpack": "^4.46.0",
     "webpack-chrome-extension-reloader": "^0.8.3",
     "webpack-cli": "^3.3.12",
     "webpack-shell-plugin": "^0.5.0"

scripts/remove-evals.js

@@ -5,8 +5,7 @@ const fs = require('fs');
 
 const BUNDLE_DIR = path.join(__dirname, `../dist-${process.env.BROWSER === 'firefox' ? 'ff' : process.env.BROWSER}`);
 const bundles = [
-  'popup/popup.js',
-  'options/options.js',
+  'csui/csui-popup.js',
 ];
 
 const evalRegexForProduction = /;([a-z])=function\(\){return this}\(\);try{\1=\1\|\|Function\("return this"\)\(\)\|\|\(0,eval\)\("this"\)}catch\(t\){"object"==typeof window&&\(\1=window\)}/g;

src/common/components/Button.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="button center-text flex" 
-       :class="{'setting-selected': selected, 'w24': fixedWidth, 'flex-auto': !fixedWidth }"
-       >
-    {{label}}
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    fixedWidth: Boolean,
-    selected: Boolean,
-    label: String,
-  }
-}
-</script>

src/common/components/JsonEditor/json.scss

@@ -1,25 +0,0 @@
-.uw-ultrawidify-container-root {
-  .json-level-indent {
-    padding-left: 2em !important;
-    font-family: 'Overpass Mono', monospace;
-  }
-  .item-key {
-    color: rgb(255, 196, 148);
-  }
-  .item-key-boolean-false {
-    color: rgb(207, 149, 101)
-  }
-
-  .json-value-boolean-true {
-    color: rgb(150, 240, 198);
-  }
-  .json-value-boolean-false {
-    color: rgb(241, 21, 21);
-  }
-  .json-value-number {
-    color: rgb(121, 121, 238);
-  }
-  .json-value-string {
-    color:  rgb(226, 175, 7);
-  }
-}

src/common/components/QsElement.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="qsb flex flex-row flex-cross-center flex-center flex-nogrow"
-  :class="{
-    'id': selector.startsWith('#'),
-    'class': selector.startsWith('.'),
-  }">
-    <div class="flex mt2px">{{selector}}</div> <span class="flex closeButton" @click="remove">×</span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    selector: String,
-  },
-  methods: {
-    remove() {
-      this.$emit('remove');
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.uw-ultrawidify-container-root {
-  .mt2px {
-    margin-top: 7px;
-  }
-  .id {
-    border: 1px solid #d00;
-    background-color: rgba(216, 94, 24, 0.25)
-  }
-  .class {
-    border: 1px solid #33d;
-    background-color: rgba(69, 69, 255, 0.25)
-  }
-  .closeButton {
-    margin-top: 2px;
-    margin-left: 4px;
-    margin-right: 4px;
-    font-size: 1.5em;
-    color: #e00;
-  }
-  .closeButton:hover {
-    cursor: pointer;
-    color: #fa6;
-  }
-  .qsb {
-    cursor:default;
-    margin-left: 3px;
-    margin-right: 3px;
-    margin-bottom: 2px;
-  }
-}
-</style>

src/common/enums/AspectRatioType.enum.ts

@@ -1,11 +1,13 @@
 enum AspectRatioType {
+  Cycle = -2,
   Initial = -1,        // page default
   Reset = 0,           // reset to initial
-  Automatic = 1,   // set by Aard
+  Automatic = 1,       // we want to request automatic aspect ratio detection
   FitWidth = 2,        // legacy/dynamic = fit to width
   FitHeight = 3,       // legacy/dynamic = fit to height
   Fixed = 4,           // pre-determined aspect ratio
   Manual = 5,          // ratio achieved by zooming in/zooming out
+  AutomaticUpdate = 6, // set by Aard
 }
 
 export default AspectRatioType;

src/common/enums/VideoAlignmentType.enum.ts

@@ -2,6 +2,8 @@ enum VideoAlignmentType {
   Left = 0,
   Center = 1,
   Right = 2,
+  Top = 3,
+  Bottom = 4,
   Default = -1
 };
 

src/common/interfaces/ArInterface.ts

@@ -0,0 +1,6 @@
+import AspectRatioType from '../enums/AspectRatioType.enum';
+
+export interface Ar {
+  type: AspectRatioType,
+  ratio?: number
+}

src/common/interfaces/SettingsInterface.ts

@@ -6,10 +6,7 @@ import ExtensionMode from '../enums/ExtensionMode.enum'
 import StretchType from '../enums/StretchType.enum'
 import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
 
-interface ActionScopeInterface {
-  show: boolean,
-  label?: string,   // example override, takes precedence over default label
-  shortcut?: {
+export interface KeyboardShortcutInterface {
   key?: string,
   code?: string,
   ctrlKey?: boolean,
@@ -19,11 +16,44 @@ interface ActionScopeInterface {
   onKeyUp?: boolean,
   onKeyDown?: boolean,
   onMouseMove?: boolean,
-  }[],
 }
 
-interface SettingsInterface {
-  arDetect: {
+interface ActionScopeInterface {
+  show: boolean,
+  label?: string,   // example override, takes precedence over default label
+  shortcut?: KeyboardShortcutInterface[],
+}
+
+interface RestrictionsSettings {
+  disableOnSmallPlayers?: boolean;    // Whether ultrawidify should disable itself when the player is small
+  minAllowedWidth?: number;           // if player is less than this many px wide, ultrawidify will disable itself
+  minAllowedHeight?: number;          // if player is less than this many px tall, ultrawidify will disable itself
+  onlyAllowInFullscreen?: boolean;    // if enabled, ultrawidify will be disabled when not in full screen regardless of what previous two options say
+  onlyAllowAutodetectionInFullScreen?: boolean;  // if enabled, autodetection will only start once in full screen
+}
+
+interface ExtensionEnvironmentSettingsInterface {
+  normal: ExtensionMode,
+  theater: ExtensionMode,
+  fullscreen: ExtensionMode,
+}
+
+export interface CommandInterface {
+  action: string,
+  label: string,
+  comment?: string,
+  arguments?: any,
+  shortcut?: KeyboardShortcutInterface,
+  internalOnly?: boolean,
+  actionId?: string,
+}
+
+export type SettingsReloadComponent = 'PlayerData' | 'VideoData';
+export type SettingsReloadFlags = true | SettingsReloadComponent;
+
+export interface AardSettings {
+  aardType: 'webgl' | 'legacy' | 'auto';
+
   disabledReason: string,     // if automatic aspect ratio has been disabled, show reason
   allowedMisaligned: number,  // top and bottom letterbox thickness can differ by this much.
                               // Any more and we don't adjust ar.
@@ -56,7 +86,7 @@ interface SettingsInterface {
     },
   },
 
-    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1] 
+  // NOTE: Black Frame is currently not in use.
   blackframe: {
     sufficientColorVariance: number,  // calculate difference between average intensity and pixel, for every pixel for every color
                                     // component. Average intensity is normalized to where 0 is black and 1 is biggest value for
@@ -70,6 +100,8 @@ interface SettingsInterface {
                                // precedence over cumulative threshold: if blackPixelsCondition is met, the frame is dark
                                // regardless of whether cumulative threshold has been reached.
   },
+
+  // Used by old aspect ratio detection algorithm. Pls remove.
   blackbar: {
     blackLevel: number,         // everything darker than 10/255 across all RGB components is considered black by
                             // default. blackLevel can decrease if we detect darker black.
@@ -90,6 +122,7 @@ interface SettingsInterface {
     gradientMaxSD: number,    // reserved for future use
     antiGradientMode: AntiGradientMode
   },
+  // Also not in use, probs.
   variableBlackbarThresholdOptions: {    // In case of poor bitrate videos, jpeg artifacts may cause us issues
     // FOR FUTURE USE
     enabled: boolean,                      // allow increasing blackbar threshold
@@ -98,10 +131,18 @@ interface SettingsInterface {
     thresholdStep: number,                   // when failing to set aspect ratio, increase threshold by this much
     increaseAfterConsecutiveResets: number   // increase if AR resets this many times in a row
   },
+  blackLevels: {
+    defaultBlack: number,    // By default, pixels darker than this are considered black.
+                             // (If detection algorithm detects darker blacks, black is considered darkest detected pixel)
+    blackTolerance: number,  // If pixel is more than this much brighter than blackLevel, it's considered not black
+                             // It is not considered a valid image detection if gradient detection is enabled
+    imageDelta: number,      // When gradient detection is enabled, pixels this much brighter than black skip gradient detection
+  }
   sampling: {
+    edgePosition: number;    // % of width (max 0.33). Pixels up to this far away from either edge may contain logo.
     staticCols: number,      // we take a column at [0-n]/n-th parts along the width and sample it
     randomCols: number,      // we add this many randomly selected columns to the static columns
-      staticRows: number,      // forms grid with staticSampleCols. Determined in the same way. For black frame checks
+    staticRows: number,      // forms grid with staticSampleCols. Determined in the same way. For black frame checks,
   },
   guardLine: {              // all pixels on the guardline need to be black, or else we trigger AR recalculation
                             // (if AR fails to be recalculated, we reset AR)
@@ -112,16 +153,29 @@ interface SettingsInterface {
     edgeTolerancePx: number,         // black edge violation is performed this far from reported 'last black pixel'
     edgeTolerancePercent: null  // unused. same as above, except use % of canvas height instead of pixels
   },
-    fallbackMode: {
-      enabled: boolean,
-      safetyBorderPx: number,        // determines the thickness of safety border in fallback mode
-      noTriggerZonePx: number        // if we detect edge less than this many pixels thick, we don't correct.
-    },
   arSwitchLimiter: {          // to be implemented
     switches: number,              // we can switch this many times
       period: number             // per this period
   },
+
+
+  // pls deprecate and move things used
   edgeDetection: {
+    slopeTestWidth: number,
+    gradientTestSamples: number,         // we check this many pixels below (or above) the suspected edge to check for gradient
+    gradientTestBlackThreshold: number,  // if pixel in test sample is brighter than that, we aren't looking at gradient
+    gradientTestDeltaThreshold: number,  // if delta between two adjacent pixels in gradient test exceeds this, it's not gradient
+    gradientTestMinDelta: number,        // if last pixels of the test sample is less than this brighter than the first -> not gradient
+
+    thresholds: {
+      edgeDetectionLimit: number,             // during scanning of the edge, quit after edge gets detected at this many points
+      minQualitySingleEdge: number,           // At least one of the detected must reach this quality
+      minQualitySecondEdge: number,           // The other edge must reach this quality (must be smaller or equal to single edge quality)
+    }
+
+    maxLetterboxOffset: 0.1,             // Upper and lower letterbox can be different by this many (% of height)
+
+    // Previous iteration variables VVVV
     sampleWidth: number,        // we take a sample this wide for edge detection
     detectionThreshold: number,  // sample needs to have this many non-black pixels to be a valid edge
     confirmationThreshold: number,  //
@@ -149,12 +203,55 @@ interface SettingsInterface {
                                    // is over 50% of the canvas width
     testRowOffset: number     // we test this % of height from detected edge
   }
+}
+
+interface SettingsInterface {
+  _updateFlags?: {
+    requireReload?: SettingsReloadFlags,
+    forSite?: string
+  }
+
+  arDetect: AardSettings,
+
+  ui: {
+    inPlayer: {
+      enabled: boolean,
+      enabledFullscreenOnly: boolean,
+      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: '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,
+        offsetX: number,                       // fed to translateX(offsetX + '%'). Valid range [-100,   0]
+        offsetY: number                        // fed to translateY(offsetY + '%'). Valid range [-100, 100]
       },
+    }
+  }
+
+  restrictions?: RestrictionsSettings;
+
+  crop: {
+    default: any;
+  },
+  stretch: {
+    default: any;
+    conditionalDifferencePercent: number  // black bars less than this wide will trigger stretch
+                                        // if mode is set to '1'. 1.0=100%
+  },
+  kbm: {
+    enabled: boolean,          // if keyboard/mouse handler service will run
+    keyboardEnabled: boolean,  // if keyboard shortcuts are processed
+    mouseEnabled: boolean,     // if mouse movement is processed
+  }
+
   zoom: {
     minLogZoom: number,
     maxLogZoom: number,
     announceDebounce: number     // we wait this long before announcing new zoom
   },
+
   miscSettings: {
     mousePan: {
       enabled: boolean
@@ -162,10 +259,7 @@ interface SettingsInterface {
     mousePanReverseMouse: boolean,
     defaultAr?: any
   },
-  stretch: {
-    conditionalDifferencePercent: number  // black bars less than this wide will trigger stretch
-                                        // if mode is set to '1'. 1.0=100%
-  },
+
   resizer: {
     setStyleString: {
       maxRetries: number,
@@ -220,11 +314,20 @@ interface SettingsInterface {
     },
     userAdded?: boolean,
   }[],
+  // This object fulfills the same purpose as 'actions', but is written in less retarded and overly
+  // complicated way. Hopefully it'll be easier to maintain it that way.
+  commands?: {
+    crop?: CommandInterface[],
+    stretch?: CommandInterface[],
+    zoom?: CommandInterface[],
+    pan?: CommandInterface[],
+    internal?: CommandInterface[],
+  },
   whatsNewChecked: boolean,
+  newFeatureTracker: any,
   // -----------------------------------------
   //       ::: SITE CONFIGURATION :::
   // -----------------------------------------
-  // Nastavitve za posamezno stran
   // Config for a given page:
   //
   // <hostname> : {
@@ -241,7 +344,6 @@ interface SettingsInterface {
   //    override: <true|false>           // override user settings for this site on update
   // }
   //
-  // Veljavne vrednosti za možnosti 
   // Valid values for options:
   //
   //     status, arStatus, statusEmbedded:
@@ -252,42 +354,65 @@ interface SettingsInterface {
   //    * disabled    — never allow
   //
   sites: {
-    [x: string]: {
-      mode?: ExtensionMode,
-      autoar?: ExtensionMode,
-      autoarFallback?: ExtensionMode,
-      stretch?: StretchType,
-      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;
-    }
+    [x: string]: SiteSettingsInterface,
   }
 }
 
+export interface SiteSettingsInterface {
+  enable: ExtensionEnvironmentSettingsInterface;
+  enableAard: ExtensionEnvironmentSettingsInterface;
+  enableKeyboard: ExtensionEnvironmentSettingsInterface;
+
+  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
+
+  defaults?: {       // must be defined in @global and @empty
+    crop?: {type: AspectRatioType, [x: string]: any},
+    stretch?: StretchType,
+    alignment?: {x: VideoAlignmentType, y: VideoAlignmentType},
+  }
+
+  cropModePersistence?: CropModePersistence;
+  stretchModePersistence?: CropModePersistence;
+  alignmentPersistence?: CropModePersistence;
+
+
+  activeDOMConfig?: string;
+  DOMConfig?: { [x: string]: SiteDOMSettingsInterface };
+
+  // the following script are for extension caching and shouldn't be saved.
+  // if they _are_ saved, they will be overwritten
+  currentDOMConfig?: SiteDOMSettingsInterface;
+
+  // the following fields are for use with extension update script
+  override?: boolean;   // whether settings for this site will be overwritten by extension upgrade script
+}
+
+export interface SiteDOMSettingsInterface {
+  type: 'official' | 'community' | 'user-defined' | 'modified' | undefined;
+  elements?: {
+    player?: SiteDOMElementSettingsInterface,
+    video?: SiteDOMElementSettingsInterface,
+    other?: { [x: number]: SiteDOMElementSettingsInterface }
+  };
+  customCss?: string;
+  periodicallyRefreshPlayerElement?: boolean;
+
+  // the following script are for extension caching and shouldn't be saved.
+  // if they _are_ saved, they will be overwritten
+  anchorElementIndex?: number;
+  anchorElement?: HTMLElement;
+}
+
+export interface SiteDOMElementSettingsInterface {
+  manual?: boolean;
+  querySelectors?: string;
+  index?: number; // previously: useRelativeAncestor + videoAncestor
+  mode?: 'index' | 'qs';
+  nodeCss?: {[x: string]: string};
+}
+
 export default SettingsInterface;

src/common/js/ChromeShittinessMitigations.ts

@@ -20,7 +20,7 @@
  *     does things in its own very special(tm) way, as if it had one
  *     extra chromosome over Firefox.
  *
- * Easy chhoice, really.
+ * Easy choice, really.
  */
 export class ChromeShittinessMitigations {
   static port = null;

src/common/js/KeyboardShortcutParser.ts

@@ -21,6 +21,20 @@ class KeyboardShortcutParser {
     }
     return shortcutCombo;
   }
+
+  static generateShortcutFromKeypress(event) {
+    return {
+      ctrlKey: event.ctrlKey,
+      altKey: event.altKey,
+      shiftKey: event.shiftKey,
+      metaKey: event.metaKey,
+      code: event.code,
+      key: event.key,
+      keyup: true,
+      keydown: false,
+      type: event.type,     // only needed for purposes of EditShortcutButton
+    }
+  }
 }
 
 export default KeyboardShortcutParser;

src/common/js/utils.ts

@@ -1,3 +1,18 @@
 export async function sleep(timeout) {
   return new Promise<void>( (resolve, reject) => setTimeout(() => resolve(), timeout));
 }
+
+/**
+ * Creates deep copy of an object
+ * @param obj
+ * @returns
+ */
+export function _cp(obj) {
+  try {
+    return JSON.parse(JSON.stringify(obj));
+  } catch (e) {
+    // console.error('Failed to parse json. This probably means that the data we received was not an object. Will return data as-is');
+    // console.error('data in:', obj, 'error:', e);
+    return obj;
+  }
+}

src/csui/GlobalFrame.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="uw-clickthrough relative w-100 h-100">
+    <template v-for="rectangle of drawnRectangles" :key="rectangle.id ?? rectangle">
+
+      <!-- Player element overlays -->
+      <div class="absolute z-index-overlay"
+        :style="rectangle.style"
+      >
+        <!-- used for drawing player element overlay rectangles - keep this section empty -->
+      </div>
+
+      <!-- Notification overlay -->
+      <div class="absolute z-index-notification notification-area">
+        <template v-for="notification of displayedNotifications" :key="notification.id">
+          <div class="notification d-flex flex-row">
+            <div class="notification-icon">
+              <mdicon :name="notification.icon ?? 'alert'" :size="128"></mdicon>
+            </div>
+            <div class="notification-text">
+              <h3 class="notification-title">{{ notification.title }}</h3>
+              <p class="notification-verbose">{{ notification.text }}</p>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import UIProbeMixin from './src/utils/UIProbeMixin';
+
+export default {
+  components: {
+  },
+  mixins: [
+    UIProbeMixin
+  ],
+  data() {
+    return {
+      drawnRectangles: [],
+      displayedNotifications: [],
+    }
+  },
+
+  async created() {
+    this.logger = new Logger();
+
+    // this prolly needs to be taken out
+    await this.logger.init({
+      allowLogging: true,
+    });
+
+    /**
+     * Setup the "companion" onMouseMove handler to the one in the content script.
+     * We can handle events with the same function we use to handle events from
+     * the content script.
+     */
+     document.addEventListener('mousemove', (event) => {
+      this.handleProbe({
+        coords: {
+          x: event.clientX,
+          y: event.clientY
+        }
+      }, this.origin);
+    });
+  }
+}
+</script>

src/csui/LoggerUi.vue

@@ -1,461 +0,0 @@
-<template>
-  <div v-if="showLoggerUi" class="root-window flex flex-column overflow-hidden"
-       @keyup.stop
-       @keydown.stop
-       @keypress.stop
-  >
-    <div class="header">
-      <div class="header-top flex flex-row">
-        <div class="flex-grow">
-          <h1>{{header.header}}</h1>
-        </div>
-        <div class="button flex-noshrink button-header"
-            @click="hidePopup()"
-        >
-          <template v-if="logStringified">Finish logging</template>
-          <template v-else>Hide popup</template>
-        </div>
-        <!-- <div class="button flex-noshrink button-header"
-             @click="stopLogging()"
-        >
-          Stop logging
-        </div> -->
-      </div>
-      <div class="header-bottom">
-        <div>{{header.subheader}}</div>
-      </div>
-    </div>
-    <div class="content flex flex-row flex-grow overflow-hidden">
-
-      <!-- LOGGER SETTINGS PANEL -->
-      <div class="settings-panel flex flex-noshrink flex-column">
-        <div class="panel-top flex-nogrow">
-          <h2>Logger configuration</h2>
-        </div>
-        <div class="flex flex-row flex-end w100">
-          <div v-if="!showTextMode" class="button" @click="loadDefaultConfig()">
-            Default config
-          </div>
-          <div v-if="!showTextMode" class="button" @click="showTextMode = true">
-            <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ...
-          </div>
-          <div v-else class="button" @click="showTextMode = false">
-            Back
-          </div>
-        </div>
-
-        <div class="panel-middle scrollable flex-grow log-config-margin">
-          <template v-if="showTextMode">
-            <div ref="settingsEditArea"
-              style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
-              class="monospace h100"
-              :class="{'jsonbg': !confHasError, 'jsonbg-error': confHasError}"
-              contenteditable="true"
-              @input="updateSettings"
-            >
-              {{parsedSettings}}
-            </div>
-          </template>
-          <template v-else>
-            <JsonObject label="logger-settings" 
-                        :value="currentSettings" 
-                        :ignoreKeys="{'allowLogging': false}"
-                        @change="updateSettingsUi"
-            ></JsonObject>
-          </template>
-        </div>
-
-
-        <div class="flex flex-row flex-end">
-          <div class="button" @click="restoreLoggerSettings()">
-            Revert
-          </div>
-          <div class="button button-primary" @click="saveLoggerSettings()">
-            Save
-          </div>
-        </div>
-      </div>
-
-      <!-- LOGGER OUTPUT/START LOGGING -->
-      <div class="results-panel flex flex-shrink flex-column overflow-hidden">
-        <div class="panel-top flex-nogrow">
-          <h2>Logger results</h2>
-        </div>
-        <template v-if="logStringified">
-          <div v-if="confHasError" class="warn">
-            Logger configuration contains an error. You can export current log, but you will be unable to record a new log.
-          </div>
-          <div class="panel-middle scrollable flex-grow p-t-025em">
-            <pre>
-              {{logStringified}}
-            </pre>
-          </div>
-          <div class="flex-noshrink flex flex-row flex-end p-t-025em">
-            <div class="button button-bar"
-                 @click="startLogging()"
-            >
-              New log
-            </div>
-            <div class="button button-bar"
-                 @click="exportLog()"
-            >
-              Export log
-            </div>
-            <div class="button button-bar button-primary"
-                 @click="exportAndQuit()"
-            >
-              Export & finish
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <div class="panel-middle scrollable flex-grow">
-            <div>
-              <p>Here's express usage tutorial on how to use the logger.</p>
-              <p>Quick rundown of all the options you can put into logger configuration can be found <a href="https://github.com/tamius-han/ultrawidify/wiki/Development&Debugging:-Logger-options" target="_blank">here</a>.</p>
-              <p>If you want logging results to appear here, in this window, you need to put appropriate configuration in the fileOptions section of the settings. You can edit the settings by clicking 'paste config' button.</p>
-              <p>To start logging to console, it's enough to click that tiny 'save' button down there, under logger options (<code>logger-settings.allowLogging</code> must be set to true. Then — depending on where you want logging to happen — you also need to enable either <code>logger-settings.fileOptions.enabled</code> or <code>logger-settings.consoleOptions.enabled</code>)</p>
-              <p>You can quickly toggle values for various components by clicking on "true" or "false".</p>
-              <p>Click the small 'save' down at the bottom of this window to immediately apply the logger configuration changes.</p>
-              <p>Yes, I know this is not a pinnacle of user-friendliness, nor a pinnacle of web design. It was put together very quickly, mostly for my convenience. I have plans to move extension UI from the popup into the player, tho, and these plans will make this window obsolete. Because of that, I plan to do absolutely nothing about the state of this window. Wait for the extension redesign pls.</p>
-            </div>
-            <div v-if="confHasError" class="warn">
-              Logger configuration contains an error. Cannot start logging.
-            </div>
-            <div v-else-if="lastSettings && lastSettings.allowLogging && lastSettings.consoleOptions && lastSettings.consoleOptions.enabled"
-                 class="flex flex-column flex-center flex-cross-center w100 h100"
-            >
-              <p class="m-025em">
-                Logging in progress ...
-              </p>
-              <div class="button button-big button-primary"
-                   @click="stopLogging()"
-              >
-                Stop logging
-              </div>
-              <template v-if="lastSettings && lastSettings.timeout"
-                        class="m-025em"
-              >
-                <p>
-                  ... or wait until logging ends.
-                </p>
-                <p>
-                  You can <a @click="hidePopup()">hide popup</a> — it will automatically re-appear when logging finishes.
-                </p>
-              </template>
-              <template v-else-if="lastSettings">
-                <p>
-                  You can <a @click="hidePopup()">hide popup</a> — the logging will continue until you re-open the popup and stop it.
-                </p>
-              </template>
-            </div>
-            <div v-else class="flex flex-column flex-center flex-cross-center w100 h100">
-              <div class="button button-big button-primary"
-                   @click="startLogging()"
-              >
-                Start logging
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-    <!-- <div>
-      button row is heres
-    </div> -->
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import Logger, { baseLoggingOptions } from '../ext/lib/Logger';
-import Comms from '../ext/lib/comms/Comms';
-import IO from '../common/js/IO';
-import JsonObject from '../common/components/JsonEditor/JsonObject';
-import Icon from '../common/components/Icon';
-
-export default {
-  components: {
-    JsonObject,
-    Icon,
-  },
-  data() {
-    return {
-      showLoggerUi: false,
-      header: {
-        header: 'whoopsie daisy',
-        subheader: 'you broke the header choosing script'
-      },
-      parsedSettings: '',
-      lastSettings: {},
-      currentSettings: {},
-      confHasError: false,
-      logStringified: '',
-      showTextMode: false,
-    }
-  },
-  async created() {
-    const headerRotation = [{
-      header: "DEFORESTATOR 5000",
-      subheader: "Iron Legion's finest logging tool"
-    }, {
-      header: "Astinus",
-      subheader: "Ultrawidify logging tool"
-    }, {
-      header: "Tracer",
-      subheader: "I'm already printing stack traces"
-    }, {
-      header: "Grûmsh",
-      subheader: "He who watches"
-    }, {
-      header: "Situation Room/The Council",
-      subheader: "We will always be watching"
-    }];
-
-    this.header = headerRotation[Math.floor(+Date.now() / (3600000*24)) % headerRotation.length] || this.header;
-
-    this.getLoggerSettings();
-  },
-  computed: {
-    ...mapState([
-      'uwLog',
-      'showLogger',
-      'loggingEnded',
-    ]),
-  },
-  watch: {
-    uwLog(newValue, oldValue)  {
-      if (oldValue !== newValue) {
-        this.$store.dispatch('uw-show-logger');
-        this.logStringified = JSON.stringify(newValue, null, 2);
-      }
-    },
-    async showLogger(newValue) {
-      this.showLoggerUi = newValue;
-
-      // update logger settings (they could have changed while the popup was closed)
-      if (newValue) {
-        this.getLoggerSettings();
-      }
-    },
-    loggingEnded(newValue) {
-      // note — the value of loggingEnded never actually matters. Even if this value is 'true'
-      // internally, vuexStore.dspatch() will still do its job and give us the signal we want
-      if (newValue) {
-        this.stopLogging();
-      }
-    }
-  },
-  methods: {
-    loadDefaultConfig() {
-      this.lastSettings = baseLoggingOptions;
-      this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
-      this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
-    },
-    async getLoggerSettings() {
-      this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
-      this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
-      this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
-    },
-    updateSettings(val) {
-      try {
-        this.parsedSettings = JSON.stringify(JSON.parse(val.target.textContent.trim()), null, 2);
-        this.lastSettings = JSON.parse(val.target.textContent.trim());
-        this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
-        this.confHasError = false;
-      } catch (e) {
-        this.confHasError = true;
-      }
-    },
-    updateSettingsUi(val) {
-      try {
-        this.parsedSettings = JSON.stringify(val, null, 2);
-        this.lastSettings = val;
-        this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
-      } catch (e) {
-        
-      }
-    },
-    saveLoggerSettings() {
-      Logger.saveConfig({...this.lastSettings});
-    },
-    restoreLoggerSettings() {
-      this.getLoggerSettings();
-      this.confHasError = false;
-    },
-    async startLogging(){
-      this.logStringified = undefined;
-      await Logger.saveConfig({...this.lastSettings, allowLogging: true});
-      window.location.reload();
-    },
-    hidePopup() {
-      // this function only works as 'close' if logging has finished
-      if (this.logStringified) {
-        Logger.saveConfig({...this.lastSettings, allowLogging: false});
-        this.logStringified = undefined;
-      }
-      this.$store.dispatch('uw-hide-logger');
-
-      this.showLoggerUi = false;
-    },
-    closePopupAndStopLogging() {
-      Logger.saveConfig({...this.lastSettings, allowLogging: false});
-      this.logStringified = undefined;
-      this.$store.dispatch('uw-hide-logger');
-    },
-    stopLogging() {
-      Logger.saveConfig({...this.lastSettings, allowLogging: false});
-      this.lastSettings.allowLogging = false;
-    },
-    exportLog() {
-      IO.csStringToFile(this.logStringified);
-    },
-    exportAndQuit() {
-      this.exportLog();
-      this.logStringified = undefined;
-      this.closePopupAndStopLogging();
-    }
-  }
-}
-</script>
-
-<style lang="scss" src="../res/css/flex.scss" scoped></style> 
-
-<style lang="scss" scoped>
-@import '../res/css/colors.scss';
-@import '../res/css/font/overpass.css';
-@import '../res/css/font/overpass-mono.css';
-@import '../res/css/common.scss';
-
-.uw-ultrawidify-container-root {
-  .root-window {
-    position: fixed !important;
-    top: 5vh !important;
-    left: 5vw !important;
-    width: 90vw !important;
-    height: 90vh !important;
-    z-index: 999999 !important;
-    background-color: rgba( $page-background, 0.9) !important;
-    color: #f1f1f1 !important;
-    font-size: 14px !important;
-
-    box-sizing: border-box !important;
-    pointer-events: auto !important;
-  }
-
-  div {
-    font-family: 'Overpass';
-  }
-
-  h1, h2 {
-    font-family: 'Overpass Thin';
-  }
-  h1 {
-    font-size: 4em;
-  }
-  h2 {
-    font-size: 2em;
-  }
-
-  .header {
-    h1 {
-      margin-bottom: -0.20em;
-      margin-top: 0.0em;
-    }
-    .header-top, .header-bottom {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-    .header-top {
-      background-color: $popup-header-background !important;
-    }
-    .header-bottom {
-      font-size: 1.75em;
-    }
-  }
-  .content {
-    box-sizing: border-box;
-    padding: 8px 32px;
-    width: 100%;
-  }
-  .settings-panel {
-    box-sizing: border-box;
-    padding-right: 8px;
-    flex-grow: 2 !important;
-    min-width: 30% !important;
-    flex-shrink: 0 !important;
-    height: inherit !important;
-  }
-  .results-panel {
-    box-sizing: border-box;
-    padding-left: 8px;
-    max-width: 70% !important;
-    flex-grow: 5 !important;
-    flex-shrink: 0 !important;
-    height: inherit !important;
-  }
-
-  .scrollable {
-    overflow: auto;
-  }
-
-  .overflow-hidden {
-    overflow: hidden;
-  }
-
-  pre {
-    font-family: 'Overpass Mono';
-  }
-
-  .m-025em {
-    margin: 0.25em;
-  }
-
-  .p-t-025em {
-    padding-top: 0.25em;
-  }
-
-  .button {
-    display: inline-flex;
-    align-items: center;
-    justify-items: center;
-    padding-left: 2em;
-    padding-right: 2em;
-  }
-
-  .button-primary {
-    background-color: $primary;
-    color: #fff;
-  }
-
-  .button-big {
-    font-size: 1.5em;
-    padding: 1.75em 3.25em;
-  }
-
-  .button-bar {
-    font-size: 1.25em;
-    padding: 0.25em 1.25em;
-    margin-left: 0.25em;
-  }
-
-  .button-header {
-    font-size: 2em;
-    padding-top: 0.1em;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-
-  .jsonbg {
-    background-color: #131313;
-  }
-  .jsonbg-error {
-    background-color: #884420;
-  }
-
-  .log-config-margin {
-    margin-top: 3em;
-    margin-bottom: 3em;
-  }
-}
-</style>

src/csui/NotificationUi.vue

@@ -1,216 +0,0 @@
-<template>
-  <div v-if="showNotification" class="uw-ultrawidify-container flex flex-column overflow-hidden">
-    <div class="notification-popup flex flex-row">
-      <div v-if="notificationIcon" class="flex-nogrow flex-noshrink notification-icon">
-        <Icon
-          class="flex-nogrow flex-noshrink"
-          :icon="notificationIcon"
-        >
-        </Icon>
-      </div>
-      <div class="notification-content flex-grow flex-shrink flex flex-column flex-cross-center">
-        <div
-          class="notification-text"
-          v-html="notificationText"
-        >
-        </div>
-        <div 
-          v-if="notificationActions"
-          class="action-buttons flex flex-row"
-        >
-          <div 
-            v-for="action of notificationActions"
-            class="action-button"
-            :key="action"
-            @click="action.command"
-          >
-            <Icon v-if="action.icon" :icon="action.icon"></Icon>{{action.label}}
-          </div>
-        </div>
-        <div 
-          v-if="hideActions"
-          class="hide-actions"
-        >
-          Never show again:<wbr>&nbsp;
-          <template 
-            v-for="action of hideActions"
-            :key="action"
-          >
-            <i @click="closeNotification">
-              <a 
-                class="hide-action-button"
-                @click="action.command"
-              >
-                {{action.label}}
-              </a>
-              <wbr>&nbsp;
-            </i>
-          </template>
-        </div>
-      </div>
-      <div
-        class="notification-icon action-button"
-          @click="closeNotification()"
-      >
-        <Icon
-          class="flex-nogrow flex-noshrink"
-          icon="x"
-        >
-        </Icon>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-import Icon from '../common/components/Icon';
-
-export default {
-  components: {
-    Icon,
-  },
-  data() {
-    return {
-      notificationTimeout: null,
-      notificationIcon: "exclamation-triangle",
-      notificationText: "<b>Sample text.</b> This will be replaced with real notification later.",
-      notificationActions: null,
-      hideActions: null,
-      showNotification: false,
-    };
-  },
-  computed: {
-    ...mapState([
-      'notificationConfig'
-    ]),
-  },
-  watch: {
-    /**
-     * Sets new notification config. Currently, we can only show one notification at a time.
-     * 
-     * We expect a config object like this:
-     * {
-     *    timeout: number  — how long we'll be displaying the notification. If empty, 10s. -1: until user dismisses it
-     *    icon: string     — what icon we're gonna show. We're using bootstrap icons. Can be empty.
-     *    text:            — notification text. Supports HTML.
-     *    notificationActions: [
-     *      {
-     *        command: function that gets executed upon clicking the button.
-     *        label: label of the button
-     *        icon: icon of the button
-     *      }
-     *    ],
-     *    hideOptions: [
-     *      // more of notificationActions except it's a special case
-     *    ]
-     * }
-     */
-    notificationConfig(newConfig) {
-      if (newConfig) {
-        this.notificationText = newConfig.text;
-        this.notificationActions = newConfig.notificationActions;
-        this.notificationIcon = newConfig.icon;
-        this.hideActions = newConfig.hideActions;
-
-        this.showNotification = true;
-
-        if (newConfig.timeout !== -1) {
-          this.notificationTimeout = setTimeout(() => this.closeNotification(), newConfig.timeout ?? 5000);
-        }
-      }
-    }
-  },
-  methods: {
-    closeNotification() {
-      clearTimeout(this.notificationTimeout);
-
-      this.showNotification = false;
-      this.notificationIcon = null;
-      this.notificationText = null;
-      this.notificationActions = null;
-      this.hideActions = null;
-    }
-  }
-}
-
-</script>
-
-<style lang="scss" scoped>
-@import '../res/css/uwui-base.scss';
-@import '../res/css/colors.scss';
-@import '../res/css/font/overpass.css';
-@import '../res/css/font/overpass-mono.css';
-@import '../res/css/common.scss';
-
-.uw-ultrawidify-container-root {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-
-  display: block !important;
-  position: relative !important;
-  width: 100% !important;
-  height: 100% !important;
-  pointer-events: none !important;
-
-  font-size: 16px !important;
-
-  .notification-popup {
-    pointer-events: auto !important;
-    position: absolute;
-    z-index: 99999999;
-    top: 2em;
-    right: 2em;
-    width: 32em;
-
-    padding: 0.7em 0.5em;
-
-    font-family: 'Overpass';
-
-    background-color: rgba(108, 55, 12, 0.779);
-    color: #fff;
-
-    user-select: none;
-  }
-
-  .notifcation-content {
-    margin-left: 0.5em;
-  }
-
-  .notification-text {
-    text-align: justify;
-    padding-left: 0.5em;
-    padding-right: 0.25em;
-  }
-  
-  .notification-icon {
-    font-size: 3em;
-    line-height: 0.5;
-  }
-  .action-button {
-    pointer-events: auto;
-    cursor: pointer;
-  }
-
-  .hide-actions {
-    color: #ccc;
-    font-size: 0.8em;
-    justify-self: flex-end;
-    align-self: flex-end;
-    margin-top: 1em;
-    margin-bottom: -1em;
-  }
-
-  .hide-action-button {
-    color: #eee;
-    font-size: 0.9em;
-    text-decoration: underline;
-    text-decoration-color: rgba(255,255,255,0.5);
-
-    pointer-events: auto;
-    cursor: pointer;
-  }
-}
-</style>

src/csui/PlayerOverlay.vue

@@ -0,0 +1,687 @@
+<template>
+  <div
+    class="context-spawn uw-ui-area"
+    style="z-index: 1000;"
+    v-if="!triggerZoneEditorVisible"
+  >
+    <div
+      class="spawn-container uw-ui-trigger"
+      :style="triggerZoneStyles"
+    >
+      &nbsp;
+    </div>
+  </div>
+
+  <div
+    v-if="contextMenuActive || settingsInitialized && uwTriggerZoneVisible && !isGlobal"
+    class="context-spawn uw-clickable uw-ui-area"
+    style="z-index: 1001"
+
+  >
+    <GhettoContextMenu
+      alignment="right" class="uw-menu"
+      @mouseenter="() => {preventContextMenuHide(); newFeatureViewUpdate('uw6.ui-popup')}"
+      @mouseleave="allowContextMenuHide()"
+    >
+      <template v-slot:activator>
+        <div class="context-item">
+          Ultrawidify
+        </div>
+        </template>
+      <slot>
+
+        <!--
+          Didn't manage to ensure that extension status pops up above other menu items in less than 3 minutes with z-index,
+          so wrapping 'status' and 'real menu items' in two different divs, ordering them in the opposite way, and then
+          ensuring correct ordering with flex-direction: column-reverse ended up being easier and faster.
+        -->
+        <div class="menu-width flex-reverse-order">
+          <div style="z-index: 1000">
+            <GhettoContextMenu alignment="right">
+              <template v-slot:activator>
+                Crop
+              </template>
+              <slot>
+                <GhettoContextMenuOption
+                  v-for="(command, index) of settings?.active.commands.crop"
+                  :key="index"
+                  :label="command.label"
+                  :shortcut="getKeyboardShortcutLabel(command)"
+                  @click="execAction(command)"
+                >
+                </GhettoContextMenuOption>
+              </slot>
+            </GhettoContextMenu>
+            <GhettoContextMenu alignment="right">
+              <template v-slot:activator>
+                Stretch
+              </template>
+              <slot>
+                <GhettoContextMenuOption
+                  v-for="(command, index) of settings?.active.commands.stretch"
+                  :key="index"
+                  :label="command.label"
+                  :shortcut="getKeyboardShortcutLabel(command)"
+                  @click="execAction(command)"
+                >
+                </GhettoContextMenuOption>
+              </slot>
+            </GhettoContextMenu>
+            <GhettoContextMenu alignment="right">
+              <template v-slot:activator>
+                <div class="context-item">
+                  Align
+                </div>
+              </template>
+              <slot>
+                <GhettoContextMenuItem :disableHover="true" :css="{'reduced-padding': true}">
+                  <AlignmentOptionsControlComponent
+                    :eventBus="eventBus"
+                  >
+                  </AlignmentOptionsControlComponent>
+                </GhettoContextMenuItem>
+              </slot>
+            </GhettoContextMenu>
+
+            <!-- shortcut for configuring UI  -->
+            <GhettoContextMenuOption
+              v-if="settings.active.newFeatureTracker?.['uw6.ui-popup']?.show > 0"
+              @click="showUwWindow('playerUiSettings')"
+            >
+              <span style="color: #fa6;">Change when and if<br/>this popup appears</span>
+              <span style="font-size: 0.8rem">
+                <span style="font-size: 0.8rem; opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/>
+                Also accessible via:<br/> <span style="font-size: 0.85em">EXTENSION SETTINGS > UI AND KEYBOARD</span>.
+                </span>
+                <br/>
+                <a style="color: #fa6; cursor: pointer;" @click="() => acknowledgeNewFeature('uw6.ui-popup')">Dismiss this option</a>
+              </span>
+            </GhettoContextMenuOption>
+
+            <!--  -->
+            <GhettoContextMenuOption
+              @click="showUwWindow()"
+              label="Extension settings"
+            >
+            </GhettoContextMenuOption>
+            <GhettoContextMenuOption
+              @click="showUwWindow('playerDetection')"
+              label="Incorrect cropping?"
+            >
+            </GhettoContextMenuOption>
+            <GhettoContextMenuOption
+              @click="showUwWindow('about')"
+              label="Not working?"
+            >
+            </GhettoContextMenuOption>
+          </div>
+
+          <div style="z-index: 10000">
+            <GhettoContextMenuItem
+              class="extension-status-messages"
+              :disableHover="true"
+            >
+              Site compatibility:
+              <SupportLevelIndicator
+                :siteSupportLevel="siteSupportLevel"
+              >
+              </SupportLevelIndicator>
+              <div v-if="statusFlags.hasDrm" class="aard-blocked">
+                Autodetection potentially<br/>
+                unavailable due to <a href="https://en.wikipedia.org/wiki/Digital_rights_management">DRM</a>.
+              </div>
+              <div v-else-if="statusFlags.aardErrors?.cors" class="aard-blocked">
+                Autodetection blocked<br/>
+                by site/browser (CORS).
+              </div>
+              <div v-else-if="statusFlags.aardErrors?.webglError" class="aard-blocked">
+                Autodetection unavailable<br/>
+                due to webgl error.
+              </div>
+            </GhettoContextMenuItem>
+          </div>
+        </div>
+      </slot>
+    </GhettoContextMenu>
+  </div>
+
+  <div
+    v-if="settingsInitialized && uwWindowVisible"
+    class="uw-window flex flex-col uw-clickable uw-ui-area"
+    :class="{'fade-out': uwWindowFadeOut}"
+  >
+    <PlayerUIWindow
+      :settings="settings"
+      :eventBus="eventBus"
+      :logger="logger"
+      :in-player="!isGlobal"
+      :site="site"
+      :defaultTab="defaultWindowTab"
+      @close="uwWindowVisible = false"
+      @preventClose="(event) => uwWindowFadeOutDisabled = event"
+    ></PlayerUIWindow>
+  </div>
+
+  <div
+    v-if="triggerZoneEditorVisible"
+    class="context-spawn uw-ui-area"
+    style="z-index: 1000;"
+  >
+    <TriggerZoneEditor
+      :settings="settings"
+      :eventBus="eventBus"
+      :playerDimensions="playerDimensions"
+    >
+    </TriggerZoneEditor>
+  </div>
+</template>
+
+<script>
+import PlayerUIWindow from './src/PlayerUIWindow.vue';
+import GhettoContextMenu from './src/components/GhettoContextMenu.vue';
+import GhettoContextMenuItem from './src/components/GhettoContextMenuItem.vue';
+import GhettoContextMenuOption from './src/components/GhettoContextMenuOption.vue';
+import AlignmentOptionsControlComponent from './src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
+import BrowserDetect from '../ext/conf/BrowserDetect';
+import Logger from '../ext/lib/Logger';
+import Settings from '../ext/lib/Settings';
+import EventBus from '../ext/lib/EventBus';
+import UIProbeMixin from './src/utils/UIProbeMixin';
+import KeyboardShortcutParserMixin from './src/utils/KeyboardShortcutParserMixin';
+import CommsMixin from './src/utils/CommsMixin';
+import SupportLevelIndicator from './src/components/SupportLevelIndicator.vue';
+import TriggerZoneEditor from './src/components/TriggerZoneEditor.vue';
+
+export default {
+  components: {
+    PlayerUIWindow,
+    GhettoContextMenu,
+    GhettoContextMenuItem,
+    GhettoContextMenuOption,
+    AlignmentOptionsControlComponent,
+    SupportLevelIndicator,
+    TriggerZoneEditor,
+  },
+  mixins: [
+    UIProbeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
+  data() {
+    return {
+      uwTriggerZoneVisible: false,
+      uwTriggerZoneTimeout: undefined,
+      uwTriggerRegionConf: {
+        left: "10%",
+        top: "10%",
+        height: "30%",
+        width: "30%",
+        maxWidth: "24rem",
+        maxHeight: "13.37rem",
+      },
+
+      uwWindowFadeOutDisabled: false,
+      uwWindowFadeOut: false,
+      uwWindowCloseTimeout: undefined,
+      uwWindowVisible: false,
+      triggerZoneEditorVisible: false,
+
+      // component properties
+      settings: {},
+      BrowserDetect: BrowserDetect,
+      settingsInitialized: false,
+      eventBus: new EventBus(),
+      logger: null,
+
+      // NOTE: chromium doesn't allow us to access window.parent.location
+      // meaning we will have to correct this value from our uwui-probe
+      // messages ... which is a bummer.
+      site: null,
+      origin: '*', // will be set appropriately once the first uwui-probe event is received
+      lastProbeTs: null,
+
+      isGlobal: true,
+      disabled: false,
+
+      contextMenuActive: false,
+      triggerZoneActive: false,
+
+      uiVisible: true,
+      debugData: {
+        resizer: {},
+        player: {},
+      },
+      debugDataPrettified: '',
+
+      // in global overlay, this property is used to determine
+      // if closing the window should emit uw-set-ui-state
+      // event on eventBus
+      showPlayerUIAfterClose: false,
+
+      statusFlags: {
+        hasDrm: undefined,
+        aardErrors: undefined,
+      },
+      defaultWindowTab: 'videoSettings',
+
+      saveState: {},
+      siteSettings: undefined,
+      previewZoneVisible: false,
+    };
+  },
+  computed: {
+    // LPT: NO ARROW FUNCTIONS IN COMPUTED,
+    // IS SUPER HARAM
+    // THINGS WILL NOT WORK IF YOU USE ARROWS
+    windowWidth() {
+      return window.innerWidth;
+    },
+    windowHeight() {
+      return window.innerHeight;
+    },
+    // LPT: NO ARROW FUNCTIONS IN COMPUTED,
+    // IS SUPER HARAM
+    // THINGS WILL NOT WORK IF YOU USE ARROWS
+    siteSupportLevel() {
+      return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
+    }
+  },
+  watch: {
+    showUi(visible) {
+      if (visible !== undefined) {
+        this.uiVisible = visible;
+      }
+    },
+    resizerDebugData(newData) {
+      this.debugData.resizer = newData;
+      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
+    },
+    playerDebugData(newData) {
+      this.debugData.player = newData;
+      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
+    }
+  },
+
+  async created() {
+    this.logger = new Logger();
+
+    // this prolly needs to be taken out
+    await this.logger.init({
+        allowLogging: true,
+    });
+
+    this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
+    this.settings.listenAfterChange(() => this.updateTriggerZones());
+
+    await this.settings.init();
+    this.settingsInitialized = true;
+
+    // set up communication with client script.
+    // NOTE: companion onmousemove is set up in UIProbeMixin
+    window.addEventListener('message', event => {
+      this.handleMessage(event);
+    });
+
+    this.eventBus.subscribe('uw-config-broadcast', {function: (data) => {
+      switch (data.type) {
+        case 'drm-status':
+          this.statusFlags.hasDrm = data.hasDrm;
+          break;
+        case 'aard-error':
+          this.statusFlags.aardErrors = data.aardErrors;
+          break;
+        case 'player-dimensions':
+          this.playerDimensionsUpdate(data.data);
+          break;
+      }
+    }});
+
+    this.eventBus.subscribe('uw-set-ui-state', { function: (data) => {
+      if (data.globalUiVisible !== undefined) {
+        if (this.isGlobal) {
+          if (data.globalUiVisible) {
+            this.showUwWindow();
+          } else {
+            this.hideUwWindow(true);
+          }
+          // this.showPlayerUIAfterClose = data.showPlayerUIAfterClose;
+        } else {
+          // non global UIs are hidden while global overlay
+          // is visible and vice versa
+          // this.disabled = data.globalUiVisible;
+          this.saveState = {
+            uwWindowVisible: this.uwWindowVisible,
+            uwWindowFadeOutDisabled: this.uwWindowFadeOutDisabled,
+            uwWindowFadeOut: this.uwWindowFadeOut
+          };
+          this.uwWindowFadeOutDisabled = false;
+          this.hideUwWindow(true);
+        }
+      }
+    }});
+
+    this.eventBus.subscribe(
+      'uw-restore-ui-state',
+      {
+        function: (data) => {
+          if (this.saveState) {
+            if (this.saveState.uwWindowVisible) {
+              this.showUwWindow();
+            }
+            this.uwWindowFadeOutDisabled = this.saveState.uwWindowFadeOutDisabled;
+            this.uwWindowFadeOut = this.saveState.uwWindowFadeOut;
+          }
+          this.saveState = {};
+        }
+      }
+    );
+
+    this.eventBus.subscribe('ui-trigger-zone-update', {
+      function: (data) => {
+        this.showTriggerZonePreview = data.previewZoneVisible;
+        // this.;
+      }
+    });
+
+    this.eventBus.subscribe(
+      'start-trigger-zone-edit',
+      {
+        function: () => {
+          this.triggerZoneEditorVisible = true;
+          this.uwWindowVisible = false;
+        }
+      }
+    );
+
+     this.eventBus.subscribe(
+      'finish-trigger-zone-edit',
+      {
+        function: () => {
+          this.triggerZoneEditorVisible = false;
+          this.showUwWindow('playerUiSettings');
+        }
+      }
+    );
+
+    this.sendToParentLowLevel('uwui-get-role', null);
+    this.sendToParentLowLevel('uwui-get-theme', null);
+
+    this.sendToParentLowLevel('uw-bus-tunnel', {
+      action: 'get-player-dimensions'
+    });
+  },
+
+  methods: {
+    /**
+     * Gets URL of the browser settings page (i think?)
+     */
+    getUrl(url) {
+      return BrowserDetect.getURL(url);
+    },
+
+    /**
+     * Mostly intended to process messages received via window.addEventListener('message').
+     * This method should include minimal logic — instead, it should only route messages
+     * to the correct function down the line.
+     */
+    handleMessage(event) {
+      switch (event.data.action) {
+        case 'uwui-probe':
+          if (!this.site) {
+            this.origin = event.origin;
+            this.site = event.origin.split('//')[1];
+            this.siteSettings = this.settings.getSiteSettings(this.site);
+          }
+          return this.handleProbe(event.data, event.origin); // handleProbe is defined in UIProbeMixin
+        case 'uw-bus-tunnel':
+          return this.handleBusTunnelIn(event.data.payload);
+        case 'uwui-set-role':
+          this.isGlobal = event.data.payload.role === 'global';
+          this.sendToParentLowLevel('uwui-interface-ready', true);
+          break;
+      }
+    },
+
+    /**
+     * Handles trigger zone
+     */
+    handleTriggerZone(mouseInside) {
+      // this.triggerZoneActive = mouseInside;
+    },
+
+    acknowledgeNewFeature(featureKey) {
+      delete this.settings.active.newFeatureTracker[featureKey];
+      this.settings.saveWithoutReload();
+    },
+    newFeatureViewUpdate(featureKey) {
+      if (!this.settings.active.newFeatureTracker[featureKey]) {
+        return;
+      }
+      try {
+        this.settings.active.newFeatureTracker[featureKey].show--;
+        this.settings.saveWithoutReload();
+
+        if (this.settings.active.newFeatureTracker[featureKey]?.show < 0) {
+          this.acknowledgeNewFeature(featureKey);
+        }
+      } catch (e) {
+        // do nothing
+      }
+    },
+
+    /**
+     * Sends message to parent _without_ using event bus.
+     */
+    sendToParentLowLevel(action, payload, lowLevelExtras = {}) {
+      window.parent.postMessage(
+        {
+          action, payload, ...lowLevelExtras
+        },
+        '*'
+      );
+    },
+
+    preventContextMenuHide() {
+      this.contextMenuActive = true;
+    },
+    allowContextMenuHide() {
+      this.contextMenuActive = false;
+    },
+
+    setTriggerZoneActive(active, event) {
+      this.triggerZoneActive = active;
+    },
+
+    showUwWindow(tab) {
+      this.defaultWindowTab = tab; // can be undefined
+
+      this.uwWindowFadeOut = false;
+      this.uwWindowVisible = true;
+      this.uwTriggerZoneVisible = false;
+      this.allowContextMenuHide();
+
+      // refresh DRM status
+      this.eventBus.send('get-drm-status');
+
+      // if (this.isGlobal) {
+      //   this.sendToParentLowLevel('uwui-clickable', undefined, {clickable: true});
+      // }
+    },
+
+    hideUwWindow(skipTimeout = false) {
+      if (this.uwWindowFadeOutDisabled) {
+        return;
+      }
+
+      const timeout = skipTimeout ? 0 : 1100;
+
+      this.uwWindowCloseTimeout = setTimeout(
+        () => {
+          this.uwWindowVisible = false;
+
+          // Global UI has some extra housekeeping to do when window gets hidden
+          if (this.isGlobal) {
+            this.sendToParentLowLevel('uwui-global-window-hidden', {});
+          }
+        },
+        timeout
+      );
+      this.uwWindowFadeOut = true;
+    },
+
+    cancelUwWindowHide() {
+      this.uwWindowFadeOut = false;
+      clearTimeout(this.uwWindowCloseTimeout);
+    },
+
+    handleBusTunnelIn(payload) {
+      this.eventBus.send(payload.action, payload.config, payload.routingData);
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ard-blocked {
+  color: rgb(219, 125, 48) !important;
+  background-color: rgba(0,0,0,0.85) !important;
+}
+</style>
+
+<style lang="scss" src="./src/res-common/panels.scss" scoped module></style>
+<style lang="scss" src="./src/res-common/common.scss" scoped module></style>
+
+<style lang="scss" scoped>
+
+.uw-hover {
+  position: absolute;
+  z-index: 999999999999999999;
+}
+
+.reduced-padding {
+  padding: 1rem !important;
+}
+
+.uv-hover-trigger-region {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border: 0.5rem dashed #fff;
+  color: #fff;
+  backdrop-filter: blur(0.5rem) brightness(0.5);
+}
+
+.uw-window {
+  position: fixed;
+
+  top: 10%;
+  left: 10%;
+
+  z-index: 999999999999999999;
+
+  width: 2500px;
+  height: 1200px;
+  max-width: 80%;
+  max-height: 80%;
+
+  pointer-events: all !important;
+
+  opacity: 1;
+  backdrop-filter: blur(16px) saturate(120%);
+
+  &.fade-out {
+    opacity: 0;
+    transition: opacity 0.5s;
+    transition-delay: 0.5s;
+  }
+}
+
+.gib-bg {
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px) saturate(120%);
+
+  width: fit-content;
+  block-size: fit-content;
+}
+
+
+.context-spawn {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100dvw;
+  height: 100dvh;
+
+  box-sizing: border-box;
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  // width: 100%;
+  // height: 100%;
+
+  color: #fff;
+
+  // .context-item {
+  //   font-size: .95rem;
+  //   padding: 1rem 1.6rem;
+  //   background-color: rgba(0, 0, 0, 0.5);
+  //   backdrop-filter: blur(16px) saturate(120%);
+
+  //   white-space: nowrap;
+  // }
+
+  // .spawn-container {
+    // border: 1px solid white;
+  // }
+}
+
+.extension-status-messages {
+  z-index: 1000;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
+  width: 112.25%;
+  transform: translate(-12.5%, 12.5%) scale(0.75);
+
+  > * {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.flex-reverse-order {
+  display: flex;
+  flex-direction: column-reverse;
+
+}
+
+.aard-blocked {
+  color: #fa6;
+}
+
+.trigger-zone-preview {
+  border: 4px solid #fa4;
+}
+
+.debug-1 {
+  border: 1px solid yellow;
+
+  &:hover {
+    background-color: rbba(255,255,0,0.5);
+  }
+}
+.debug-2 {
+  border: 1px solid blue;
+
+  &:hover {
+    background-color: rbba(0,0,255,.5);
+  }
+}
+</style>

src/csui/PlayerUiComponent.vue

@@ -1,177 +0,0 @@
-<template>
-  <div class="uw-hover uv-hover-trigger-region">
-    TEST CONTENT
-  </div>
-  <div class="popup-panel">
-    <div class="tab-row flex flex-row">
-      <div class="tab">
-        todo: icon<br/>
-        Video options
-      </div>
-    </div>
-    <div>sudpo 
-      <!-- Panel section -->
-      <template v-if="settingsInitialized">
-        <VideoSettings
-          :settings="settings"
-        ></VideoSettings>
-        <ResizerDebugPanel :debugData="debugData">
-        </ResizerDebugPanel>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
-import { mapState } from 'vuex';
-import Icon from '../common/components/Icon';
-import ResizerDebugPanel from './PlayerUiPanels/ResizerDebugPanelComponent';
-import BrowserDetect from '../ext/conf/BrowserDetect';
-import ExecAction from './ui-libs/ExecAction';
-import Logger from '../ext/lib/Logger';
-import Settings from '../ext/lib/Settings';
-
-export default {
-  components: {
-    Icon,
-    ResizerDebugPanel, VideoSettings
-  },
-  data() {
-    return {
-      // component properties
-      settings: {},
-      settingsInitialized: false,
-      execAction: new ExecAction(),
-      logger: null,
-
-      uiVisible: true,
-      debugData: {
-        resizer: {},
-        player: {},
-      },
-      debugDataPrettified: ''
-    };
-  },
-  computed: {
-    ...mapState([
-      'showUi',
-      'resizerDebugData',
-      'playerDebugData'
-    ]),
-    windowWidth: () => {
-      return window.innerWidth;
-    },
-    windowHeight: () => {
-      return window.innerHeight;
-    },
-  },
-  watch: {
-    showUi(visible) {
-      if (visible !== undefined) {
-        this.uiVisible = visible;
-      }
-    },
-    resizerDebugData(newData) {
-      this.debugData.resizer = newData;
-      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
-    },
-    playerDebugData(newData) {
-      this.debugData.player = newData;
-      this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
-    }
-  },
-  async created() {
-    try {
-      this.logger = new Logger();
-      await this.logger.init({
-          allowLogging: true,
-      });
-
-      this.settings = new Settings({afterSettingsSaved: this.updateConfig, logger: this.logger});
-      await this.settings.init();
-      this.settingsInitialized = true;
-
-      this.execAction.setSettings(this.settings);
-    } catch (e) {
-      console.error('Failed to initiate ultrawidify player ui.', e);
-    }
-  },
-  methods: {
-    getUrl(url) {
-      return BrowserDetect.getURL(url);
-    },
-  }
-}
-</script>
-
-<style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
-<style lang="scss" scoped>
-@import '../res/css/uwui-base.scss';
-@import '../res/css/colors.scss';
-@import '../res/css/font/overpass.css';
-@import '../res/css/font/overpass-mono.css';
-@import '../res/css/common.scss';
-
-.uw-ultrawidify-container-root {
-  // .relative-wrapper {
-  //   position: relative;
-  //   width: 100%;
-  //   height: 100%;
-  // }
-
-  .uw-hover {
-    position: absolute;
-    top: 10%;
-    left: 10%;
-    width: 100px;
-    height: 100px;
-    color: #fff;
-    background-color: #000;
-
-    z-index: 999999999999999999;
-  }
-  .uw-hover:hover {
-    background-color: #f00;
-  }
-
-  .popup-panel {
-    position: absolute;
-
-    top: 10%;
-    left: 10%;
-    
-    z-index: 999999999999999999;
-
-    width: 2500px;
-    height: 1200px;
-    max-width: 80%;
-    max-height: 80%;
-
-    pointer-events: all !important;
-
-    background-color: rgba(0,0,0,0.69);
-    color: #fff;
-
-    overflow-y: auto;
-
-    .tab {
-      display: block;
-      height: 42px;
-      font-size: 2.5rem;
-      background: rgb(87, 54, 26);
-    }
-    .tab:hover {
-      background-color: #f00;
-    }
-  }
-
-  pre {
-    white-space: pre-wrap;
-  }
-
-
-}
-
-
-</style>

src/csui/Popup.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="popup-panel">
+    <!--
+      NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
+      extension is being displayed in a normal or a small/overflow popup breaks the popup
+      behaviour on Chrome (where the popup would never reach the full width of 800px)
+
+      Since I'm tired and the hour is getting late, we'll just add an extra CSS class for
+      non-firefox builds of this extension and be done with it. No need to complicate things
+      further than that.
+    -->
+    <div v-if="settingsInitialized"
+        class="popup flex flex-col no-overflow"
+        :class="{'popup-chrome': ! BrowserDetect?.firefox}"
+    >
+      <div class="flex-row flex-nogrow flex-noshrink relative header"
+      >
+        <div class="grow shrink">
+          <h1>
+            <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
+          </h1>
+        </div>
+        <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
+          Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
+          <label>Version:</label> <br/>
+          {{ settings.getExtensionVersion() }}
+        </div>
+        <div v-else class="version-info">
+          <label>Version:</label> <br/>
+          {{ settings.getExtensionVersion() }}
+        </div>
+      </div>
+
+
+      <!-- CONTAINER ROOT -->
+      <div class="flex flex-row body no-overflow flex-grow">
+
+        <!-- TABS -->
+        <div class="flex flex-col tab-row" style="flex: 3 3; border-right: 1px solid #222;">
+          <div
+            v-for="tab of tabs"
+            :key="tab.id"
+            class="tab flex flex-row"
+            :class="{'active': tab.id === selectedTab}"
+            @click="selectTab(tab.id)"
+          >
+            <div class="icon-container">
+              <mdicon
+                :name="tab.icon"
+                :size="32"
+              />
+            </div>
+            <div class="label">
+              {{tab.label}}
+            </div>
+          </div>
+        </div>
+
+        <!-- CONTENT -->
+        <div class="scrollable" style="flex: 7 7; padding: 1rem;">
+          <template v-if="settings && siteSettings">
+            <InPlayerUIAdvertisement
+              v-if="selectedTab === 'playerUiCtl'"
+              :eventBus="eventBus"
+            />
+            <PopupVideoSettings
+              v-if="selectedTab === 'videoSettings'"
+              :settings="settings"
+              :eventBus="eventBus"
+              :siteSettings="siteSettings"
+            ></PopupVideoSettings>
+            <!-- <PlayerDetectionPanel
+              v-if="selectedTab === 'playerDetection'"
+              :settings="settings"
+              :eventBus="eventBus"
+              :siteSettings="siteSettings"
+              :site="site.host"
+            >
+            </PlayerDetectionPanel> -->
+            <BaseExtensionSettings
+              v-if="selectedTab === 'extensionSettings'"
+              :settings="settings"
+              :eventBus="eventBus"
+              :siteSettings="siteSettings"
+              :site="site.host"
+            >
+            </BaseExtensionSettings>
+          </template>
+          <template v-else>No settings or site settings found.</template>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vue'
+import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.vue'
+import PopupVideoSettings from './src/popup/panels/PopupVideoSettings.vue'
+import InPlayerUIAdvertisement from './src/PlayerUiPanels/InPlayerUiAdvertisement.vue';
+import Debug from '../ext/conf/Debug';
+import BrowserDetect from '../ext/conf/BrowserDetect';
+import Comms from '../ext/lib/comms/Comms';
+import CommsClient, {CommsOrigin} from '../ext/lib/comms/CommsClient';
+import Settings from '../ext/lib/Settings';
+import Logger from '../ext/lib/Logger';
+import EventBus from '../ext/lib/EventBus';
+import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
+
+export default {
+  data () {
+    return {
+      comms: undefined,
+      eventBus: new EventBus(),
+      settings: {},
+      settingsInitialized: false,
+      narrowPopup: null,
+      sideMenuVisible: null,
+      logger: undefined,
+      site: undefined,
+      siteSettings: undefined,
+      selectedTab: 'playerUiCtl',
+      tabs: [
+        // see this for icons: https://pictogrammers.com/library/mdi/
+        {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
+        {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
+        // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
+        {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+      ],
+    }
+  },
+  async created() {
+    this.logger = new Logger();
+    await this.logger.init({
+        allowLogging: true,
+    });
+
+    this.settings = new Settings({afterSettingsSaved: () => this.updateConfig(), logger: this.logger});
+    await this.settings.init();
+    this.settingsInitialized = true;
+
+    // const port = chrome.runtime.connect({name: 'popup-port'});
+    // port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
+    // CSM.setProperty('port', port);
+
+    this.eventBus = new EventBus();
+    this.eventBus.subscribe(
+      'set-current-site',
+      {
+        function: (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.selectedSite = this.selectedSite || config.site.host;
+          this.siteSettings = this.settings.getSiteSettings(this.site.host);
+
+          this.eventBus.setupPopupTunnelWorkaround({
+            origin: CommsOrigin.Popup,
+            comms: {
+              forwardTo: 'active'
+            }
+          });
+
+          this.loadFrames(this.site);
+
+        }
+      }
+    );
+
+    this.comms = new CommsClient('popup-port', this.logger, this.eventBus);
+    this.eventBus.setComms(this.comms);
+    this.eventBus.setupPopupTunnelWorkaround({
+      origin: CommsOrigin.Popup,
+      comms: {forwardTo: 'active'}
+    });
+
+
+    // ensure we'll clean player markings on popup close
+    window.addEventListener("unload", () => {
+      CSM.port.postMessage({
+        cmd: 'unmark-player',
+        forwardToAll: true,
+      });
+      // if (BrowserDetect.anyChromium) {
+      //   chrome.extension.getBackgroundPage().sendUnmarkPlayer({
+      //     cmd: 'unmark-player',
+      //     forwardToAll: true,
+      //   });
+      // }
+    });
+
+    // get info about current site from background script
+    while (true) {
+      this.requestSite();
+      await this.sleep(5000);
+    }
+  },
+  async updated() {
+    const body = document.getElementsByTagName('body')[0];
+
+    // ensure that narrowPopup only gets set the first time the popup renders
+    // if popup was rendered before, we don't do anything because otherwise
+    // we'll be causing an unwanted re-render
+    //
+    // another thing worth noting — the popup gets first initialized with
+    // offsetWidth set to 0. This means proper popup will be displayed as a
+    // mini popup if we don't check for that.
+    if (this.narrowPopup === null && body.offsetWidth > 0) {
+      this.narrowPopup = body.offsetWidth < 600;
+    }
+  },
+  components: {
+    Debug,
+    BrowserDetect,
+    PopupVideoSettings, PlayerDetectionPanel, BaseExtensionSettings, InPlayerUIAdvertisement
+  },
+  methods: {
+    async sleep(t) {
+      return new Promise( (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;
+    },
+    processReceivedMessage(message, port) {
+      this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
+
+      if (message.command === 'set-current-site'){
+        if (this.site) {
+          if (!this.site.host) {
+            // dunno why this fix is needed, but sometimes it is
+            this.site.host = site.tabHostname;
+          }
+        }
+        this.site = message.site;
+
+        // update activeSites
+        // this.activeSites = this.activeSites.filter(x => x.host !== message.site);
+
+        // add current site
+        // this.activeSites = unshift({
+        //   host: message.site.host,
+        //   isIFrame: false,  // currently unused
+        // });
+        this.selectedSite = this.selectedSite || message.site.host;
+
+        this.loadFrames(this.site);
+      }
+
+      return true;
+    },
+
+    isDefaultFrame(frameId) {
+      return frameId === '__playing' || frameId === '__all';
+    },
+    loadFrames() {
+      this.activeSites = [{
+        host: this.site.host,
+        isIFrame: false,  // not used tho. Maybe one day
+      }];
+      this.selectedSite = this.selectedSite || this.site.host;
+
+      // for (const frame in videoTab.frames) {
+      //   this.activeFrames.push({
+      //     id: `${this.site.id}-${frame}`,
+      //     label: videoTab.frames[frame].host,
+      //     ...this.frameStore[frame],
+      //   })
+
+      //   // only add each host once at most
+      //   if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
+      //     this.activeSites.push({
+      //       host: videoTab.frames[frame].host,
+      //       isIFrame: undefined // maybe one day
+      //     });
+      //   }
+      // }
+
+      // update whether video tab can be shown
+      // this.updateCanShowVideoTab();
+    },
+    getRandomColor() {
+      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// @import 'res/css/uwui-base.scss';
+@import 'res/css/colors.scss';
+@import 'res/css/font/overpass.css';
+@import 'res/css/font/overpass-mono.css';
+@import 'res/css/common.scss';
+@import './src/res-common/_variables';
+
+.header {
+  background-color: rgb(90, 28, 13);
+  color: #fff;
+  padding: 8px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .version-info {
+    text-align: right;
+    font-size: 0.8rem;
+    opacity: 0.8;
+    label {
+      opacity: 0.5;
+    }
+  }
+
+}
+
+.site-support-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .site-support-site {
+    font-size: 1.5em;
+  }
+
+  .site-support {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+
+    margin-left: 1rem;
+    border-radius: 8px;
+    padding: 0rem 1.5rem 0rem 1rem;
+
+    position: 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;
+    }
+    &:hover {
+      .tooltip {
+        display: block;
+      }
+    }
+
+    .mdi {
+      margin-right: 1rem;
+    }
+
+    &.official {
+      background-color: #fa6;
+      color: #000;
+
+      .mdi {
+        fill: #000 !important;
+      }
+    }
+
+    &.community {
+      background-color: rgb(85, 85, 179);
+      color: #fff;
+
+      .mdi {
+        fill: #fff !important;
+      }
+    }
+
+    &.no-support {
+      background-color: rgb(138, 65, 126);
+      color: #eee;
+
+      .mdi {
+        fill: #eee !important;
+      }
+    }
+
+    &.user-added {
+      border: 1px solid #ff0;
+
+      color: #ff0;
+
+      .mdi {
+        fill: #ff0 !important;
+      }
+    }
+  }
+}
+
+.content {
+  flex-grow: 1;
+
+  .warning-area {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .panel-content {
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    overflow-y: auto;
+    padding: 1rem;
+  }
+}
+
+.warning-box {
+  background: rgb(255, 174, 107);
+  color: #000;
+  margin: 1rem;
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon-container {
+    margin-right: 1rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  a {
+    color: rgba(0,0,0,0.7);
+    cursor: pointer;
+  }
+}
+
+
+.popup-panel {
+  background-color: rgba(0,0,0,0.50);
+  color: #fff;
+
+  overflow-y: auto;
+
+  .popup-window-header {
+    padding: 1rem;
+    background-color: rgba(5,5,5, 0.75);
+  }
+  .tab-row {
+    background-color: rgba(11,11,11, 0.75);
+
+    .tab {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      padding: 1rem;
+      font-size: 1.25rem;
+      // height: rem;
+      min-height: 3rem;
+
+      border-bottom: 1px solid rgba(128, 128, 128, 0.5);
+      border-top: 1px solid rgba(128, 128, 128, 0.5);
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+      &.active {
+        opacity: 1.0;
+        background-color: $primaryBg;
+        color: rgb(255, 174, 107);
+        border-bottom: 1px solid rgba(116, 78, 47, 0.5);
+        border-top: 1px solid rgba(116, 78, 47, 0.5);
+      }
+
+      .icon-container {
+        width: 64px;
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
+      .label {
+        flex-grow: 1;
+        flex-shrink: 1;
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .popup-title, .popup-title h1 {
+    font-size: 48px !important;
+  }
+}
+
+pre {
+  white-space: pre-wrap;
+}
+
+.button {
+  border: 1px solid #222 !important;
+}
+
+h1 {
+  margin: 0; padding: 0; font-weight: 400; font-size:24px;
+}
+</style>

src/csui/csui-global.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en"; style="position: relative">
+<head>
+  <meta charset="UTF-8">
+  <meta name="color-scheme" content="light dark">
+  <title>Ultrawidify - Content Script User Interface (global overlay)</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">
+  <div id="app"></div>
+  <script src="csui-global.js"></script>
+</body>
+</html>

src/csui/csui-global.js

@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import GlobalFrame from './GlobalFrame';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
+
+// NOTE — this is in-player interface for ultrawidify
+// it is injected into the page in UI.init()
+
+createApp(GlobalFrame)
+  .use(mdiVue, {icons: mdijs})
+  .mount('#app');

src/csui/csui-overlay-dark.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" style="position: relative">
+<head>
+  <meta charset="UTF-8">
+  <meta name="color-scheme" content="dark">
+  <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+</head>
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
+  <div id="app"></div>
+  <script src="csui.js"></script>
+</body>
+</html>

src/csui/csui-overlay-light.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" style="position: relative">
+<head>
+  <meta charset="UTF-8">
+  <meta name="color-scheme" content="light">
+  <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+</head>
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
+  <div id="app"></div>
+  <script src="csui.js"></script>
+</body>
+</html>

src/csui/csui-overlay-normal.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" style="position: relative">
+<head>
+  <meta charset="UTF-8">
+  <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+</head>
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
+  <div id="app"></div>
+  <script src="csui.js"></script>
+</body>
+</html>

src/csui/csui-popup.html

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

src/csui/csui-popup.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import Popup from './Popup';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
+
+createApp(Popup)
+  .use(mdiVue, {icons: mdijs})
+  .mount('#app');

src/csui/csui.js

@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import PlayerOverlay from './PlayerOverlay';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
+
+// NOTE — this is in-player interface for ultrawidify
+// it is injected into the page in UI.init()
+
+createApp(PlayerOverlay)
+  .use(mdiVue, {icons: mdijs})
+  .mount('#app');

src/csui/res/css/common.scss

@@ -0,0 +1,396 @@
+@import "colors.scss";
+@import "fonts.scss";
+@import "flex.scss";
+// @import "~/@mdi/font/css/materialdesignicons.css";
+
+// @import "form.scss";
+
+body {
+  background-color: $background-primary;
+  color: $text-normal;
+  font-family: 'Overpass', sans-serif;
+  font-size: 1.2em;
+  width: 100%;
+  min-height: 100%;
+  height: 100vh;
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+}
+
+/* STANDARD WIDTHS AND HEIGHTS */
+.w100 {
+  width: 100%;
+}
+
+.h100, .h-full {
+  height: 100%;
+}
+
+.w24 {
+  width: 100px;
+}
+
+.m-t-0-33em {
+  margin-top: 0.33em;
+}
+
+.x-pad-1em {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+
+
+/* overflow stuff */
+.overflow-y-auto {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba($primary-color, 0.7) $background-primary;
+}
+.scrollbar-darker {
+  scrollbar-color: rgba($primary-color, 0.5) $background-primary;
+}
+
+
+/* scrollbars for chrome/webkit */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 3px;
+}
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: $background-primary;
+}
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: rgba($primary-color, 0.7);
+}
+.overflow-y-auto::-webkit-scrollbar-button {
+  display: none;
+}
+.scrollbar-darker::-webkit-scrollbar-thumb {
+  background: rgba($primary-color, 0.5);
+}
+
+.no-overflow {
+  overflow: hidden;
+}
+
+.no-overflow-x {
+  overflow-x: hidden;
+}
+
+.no-overflow-y {
+  overflow-y: hidden;
+}
+
+/* .SELECTED CLASSES */
+
+.selected-tab {
+  background-color: initial;
+  border-left: $primary-color 5px solid;
+}
+
+.selected-tab-secondary {
+  background-color: initial;
+  border-left: $secondary-color 3px solid !important;
+}
+
+
+/* BASIC STYLING */
+
+.description {
+  color: $text-dim;
+  font-size: 1rem;
+}
+
+.label {
+  padding-top: 1.5rem;
+  font-size: 1.5rem;
+  font-variant: small-caps;
+  font-weight: 600;
+}
+
+.label-secondary {
+  font-weight: 600;
+}
+
+.button-box {
+  padding-top: 0.69rem;
+  padding-bottom: 0.69rem;
+}
+
+.indent {
+  padding-left: 4.2rem;
+}
+
+.row-padding {
+  padding-top: 0.69rem;
+  padding-bottom: 0.69rem;
+}
+
+a, a:visited {
+  color: $primary-color;
+}
+a:hover {
+  color: lighten($primary-color, 10%);
+}
+
+/* INPUT FORMATTING */
+input[type="number"], input[type="text"], input {
+  outline: none;
+  background-color: $input-background;
+  color: $text-normal;
+  padding: 0.1rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.1rem;
+  margin-left: 1rem;
+  border: 1px solid $input-border;
+}
+
+input:disabled {
+  background: #444444;
+  color: darken($text-normal, 50%);
+}
+
+/* ELEMENT POSITIONING */
+
+.row {
+  display: block;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.button-row {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
+
+.float-left {
+  float: left;
+}
+.float-right {
+  float: right;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.block {
+  display: block;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.hide {
+  display: none !important;
+}
+
+
+
+/* TEXT FORMATTING (no colors) */
+
+small {
+  font-size: 0.75em;
+  font-weight: 200;
+}
+
+.small {
+  font-size: 0.75em;
+  font-weight: 200;
+}
+
+.medium-small {
+  font-size: 0.85em;
+  font-weight: 200;
+}
+
+.smallcaps{
+  font-variant: small-caps;
+}
+
+.center{
+  text-align: center;
+  width: 100%;
+}
+.text-center {
+  text-align: center;
+}
+
+
+.invalid-input {
+  border: 1px solid #720 !important;
+  background-color: #410 !important;
+}
+
+.button {
+  /*display: inline-block;*/
+  // padding-top: 8px;
+  // padding-bottom: 3px;
+  //padding-left: 5px;
+  //padding-right: 5px;
+  border: 1px solid rgb(39, 39, 39);
+  margin-top: 3px;
+  margin-bottom: 3px;
+  color: $text-dim;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;;
+}
+
+
+.selected, .setting-selected {
+  color: $selected-color !important;
+  background-color: $background-selected !important;
+}
+
+.selected-tab {
+  color: $selected-color;
+}
+
+.setting-selected {
+  border: 1px solid shade($selected-color, 25%);
+}
+
+.button:hover {
+  color: lighten($selected-color, 10%);
+  background-color: lighten($background-selected, 10%);
+}
+
+.disabled {
+  pointer-events: none;
+  /* color: #666; */
+  filter: contrast(50%) brightness(40%) grayscale(100%);
+}
+
+.disabled-button {
+  color: #666 !important;
+  cursor: not-allowed !important;
+}
+
+.disabled-button:hover {
+  color: #777 !important;
+  background-color: #222 !important;
+}
+
+/* BROWSER-SPECIFIC DISABLE */
+.disabled-edge {
+  pointer-events: none !important;
+  filter: contrast(50%) brightness(40%) grayscale(100%) !important;
+  content: "NOT SUPPORTED IN THIS BROWSER";
+}
+.disabled-edge::after {
+  background-color: #333272;
+  color: #d8d9e6;
+  display: inline-block;
+  font-size: .75em;
+  font-variant: small-caps;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-left: 10px;
+}
+
+
+
+
+/** misc **/
+
+.warning-color {
+  color: #d6ba4a;
+}
+
+.warning, .warning-lite {
+  color: #d6ba4a;
+  padding-left: 35px;
+  float: right;
+}
+
+.warning::before, .warning-lite::before {
+  content: "⚠ ";
+  display: inline-block;
+}
+.warning::before {
+  font-weight: bold;
+  font-size: 2.5em;
+  margin-left: -35px;
+  padding-right: 10px;
+}
+
+.info {
+  color: $info-color;
+  padding-left: 35px;
+  float: right;
+}
+
+.info::before {
+  content: "ⓘ";
+  display: inline-block;
+  font-weight: bold;
+  margin-left: -35px;
+  padding-right: 10px;
+}
+
+.new {
+  color: #fff;
+}
+
+.new::after {
+  content: "ⓘ";
+  color: $info-color !important;
+  display: inline-block;
+  font-weight: bold;
+  padding-right: 10px;
+}
+
+.experimental::after {
+  // content: "Experimental";
+  content: "Ⓔ";
+  color: #ffde12;
+  // background-color: #1f1f1f;
+  display: inline-block;
+  font-size: .75em;
+  font-variant: small-caps;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-left: 10px;
+  margin-top: -4px;
+}
+.experimental:hover::after {
+  content: "Ⓔ Experimental";
+  //  content: "";
+  color: #ffde12;
+  //  background-color: #1f1f1f;
+  display: inline-block;
+  font-size: .75em;
+  font-variant: small-caps;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-left: 10px;
+  margin-top: -4px;
+}
+
+.sticky-bottom {
+  width: 100%;
+  position: sticky;
+  // position: fixed;
+  bottom: 0px;
+  background-color: rgba($background-primary, 0.7);
+}
+
+.rtl {
+  direction: rtl;
+}
+
+.ltr {
+  direction: ltr;
+}
+.monospace {
+  font-family: 'Overpass Mono';
+}
+
+.pointer {
+  cursor: pointer;
+  user-select: none;
+}

src/csui/res/css/flex.scss

@@ -0,0 +1,51 @@
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+.flex-nogrow {
+  flex-grow: 0;
+}
+.flex-shrink {
+  flex-shrink: 1;
+}
+.flex-noshrink {
+  flex-shrink: 0;
+}
+
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-center {
+  align-content: center;
+  align-items: center;
+}
+
+.flex-end {
+  justify-content: flex-end;
+}
+
+.flex-cross-center {
+  justify-content: center;
+  justify-items: center;
+}
+
+.flex-self-center {
+  align-self: center;
+}

src/csui/res/css/fonts.scss

@@ -1,111 +1,111 @@
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-thin.woff2') format('woff2'); /* Super Modern Browsers */
+  src: url('/csui/res/fonts/overpass-webfont/overpass-thin.woff2') format('woff2'); /* Super Modern Browsers */
        font-weight: 200;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-thin-italic.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-thin-italic.woff2') format('woff2');
        font-weight: 200;
        font-style: italic;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-extralight.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-extralight.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-extralight-italic.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-extralight-italic.woff2') format('woff2');
        font-weight: 300;
        font-style: italic;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-light.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-light.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-light-italic.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-light-italic.woff2') format('woff2');
        font-weight: 400;
        font-style: italic;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-regular.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-regular.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-italic.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-italic.woff2') format('woff2');
        font-weight: 500;
        font-style: italic;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-semibold.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-semibold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-semibold-italic.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-semibold-italic.woff2') format('woff2');
        font-weight: 600;
        font-style: italic;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-bold.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass';
-  src: url('/res/fonts/overpass-webfont/overpass-bold-italic.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-webfont/overpass-bold-italic.woff2') format('woff2');
        font-weight: 700;
        font-style: italic;
 }
 
 @font-face {
   font-family: 'Overpass mono';
-  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass mono';
-  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass mono';
-  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
 }
 
 @font-face {
   font-family: 'Overpass mono';
-  src: url('/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
+  src: url('/csui/res/fonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
 }

src/csui/res/css/uwui-base.scss

@@ -0,0 +1,35 @@
+@import 'flex.scss';
+@import 'colors.scss';
+@import 'common.scss';
+
+* {
+  font-family: 'Overpass';
+}
+
+.uw-ultrawidify-container-root {
+  // here's the defaults:
+  // all: initial;
+  // * {
+  //   all: unset;
+  // }
+
+  // here's things that we don't want as defaults
+  // (must come after the all: declaration, otherwise
+  // all: declaration overrides everything.)
+
+  // we put our UI _over_ site's player:
+  z-index: 999999;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: none transparent !important;
+
+  // Ensure we're display:block
+  display: block;
+
+  // we are click-through by default:
+  pointer-events: none;
+}
+

src/csui/src/PlayerUIWindow.vue

@@ -0,0 +1,415 @@
+<template>
+  <div
+    class="popup-panel flex flex-col uw-clickable h-full"
+  >
+    <div class="popup-window-header">
+      <div class="header-title">
+        <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
+        <div class="site-support-info flex flex-row">
+          <div class="site-support-site">{{site}}</div>
+          <SupportLevelIndicator
+            v-if="inPlayer"
+            :siteSupportLevel="siteSupportLevel"
+          >
+          </SupportLevelIndicator>
+        </div>
+      </div>
+      <div class="header-buttons">
+        <div
+          class="header-button close-button"
+          @click="$emit('close')"
+        >
+          <mdicon name="close" :size="36"></mdicon>
+        </div>
+        <!-- <a >{{preventClose ? 'allow auto-close' : 'prevent auto-close'}}</a> -->
+      </div>
+    </div>
+
+    <div class="tab-main flex flex-row">
+      <div class="tab-row flex flex-col grow-0 shrink-0">
+        <div
+          v-for="tab of tabs"
+          :key="tab.id"
+          class="tab"
+          :class="{
+            'active': tab.id === selectedTab,
+            'highlight-tab': tab.highlight,
+          }"
+          @click="selectTab(tab.id)"
+        >
+          <div class="icon-container">
+            <mdicon
+              v-if="tab.icon"
+              :name="tab.icon"
+              :size="32"
+            />
+          </div>
+          <div class="label">
+            {{tab.label}}
+          </div>
+        </div>
+      </div>
+      <div class="content flex flex-col">
+        <!-- autodetection warning -->
+
+        <div class="warning-area">
+          <div
+            v-if="statusFlags.hasDrm"
+            class="warning-box"
+          >
+            <div class="icon-container">
+              <mdicon name="alert" :size="32" />
+            </div>
+            <div>
+              This site is blocking automatic aspect ratio detection. You will have to adjust aspect ratio manually.<br/>
+              <a>Learn more ...</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-row panel-content">
+          <!-- Panel section -->
+          <!-- <VideoSettings
+            v-if="selectedTab === 'videoSettings'"
+            :settings="settings"
+            :siteSettings="siteSettings"
+            :eventBus="eventBus"
+            :site="site"
+          ></VideoSettings> -->
+          <PlayerDetectionPanel
+            v-if="selectedTab === 'playerDetection'"
+            :siteSettings="siteSettings"
+            :eventBus="eventBus"
+            :site="site"
+          >
+          </PlayerDetectionPanel>
+          <PlayerUiSettings
+            v-if="selectedTab === 'playerUiSettings'"
+            :settings="settings"
+            :eventBus="eventBus"
+          >
+          </PlayerUiSettings>
+          <BaseExtensionSettings
+            v-if="selectedTab === 'extensionSettings'"
+            :settings="settings"
+            :siteSettings="siteSettings"
+            :site="site"
+          ></BaseExtensionSettings>
+          <AutodetectionSettingsPanel
+            v-if="selectedTab === 'autodetectionSettings'"
+            :settings="settings"
+            :siteSettings="siteSettings"
+            :eventBus="eventBus"
+            :site="site"
+          >
+          </AutodetectionSettingsPanel>
+          <DebugPanel
+            v-if="selectedTab === 'debugging'"
+            :settings="settings"
+            :eventBus="eventBus"
+            :site="site"
+          ></DebugPanel>
+          <ChangelogPanel
+            v-if="selectedTab === 'changelog'"
+            :settings="settings"
+          ></ChangelogPanel>
+          <AboutPanel
+            v-if="selectedTab === 'about'"
+          >
+          </AboutPanel>
+          <!-- <ResetBackupPanel
+            v-if="selectedTab === 'resetBackup'"
+            :settings="settings"
+          >
+          </ResetBackupPanel> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import DebugPanel from './PlayerUiPanels/DebugPanel.vue'
+import AutodetectionSettingsPanel from './PlayerUiPanels/AutodetectionSettingsPanel.vue'
+import BaseExtensionSettings from './PlayerUiPanels/BaseExtensionSettings.vue'
+import PlayerDetectionPanel from './PlayerUiPanels/PlayerDetectionPanel.vue'
+import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
+import BrowserDetect from '../../ext/conf/BrowserDetect'
+import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
+import AboutPanel from './PlayerUiPanels/AboutPanel.vue'
+import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
+import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
+
+import SupportLevelIndicator from './components/SupportLevelIndicator.vue'
+
+export default {
+  components: {
+    VideoSettings,
+    PlayerDetectionPanel,
+    BaseExtensionSettings,
+    AutodetectionSettingsPanel,
+    DebugPanel,
+    PlayerUiSettings,
+    ChangelogPanel,
+    AboutPanel,
+    SupportLevelIndicator,
+    ResetBackupPanel,
+  },
+  mixins: [],
+  data() {
+    return {
+      statusFlags: {
+        hasDrm: undefined,
+      },
+
+      tabs: [
+        // {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
+        {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+        {id: 'playerUiSettings', label: 'UI and keyboard', icon: 'movie-cog-outline' },
+        {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
+        {id: 'autodetectionSettings', label: 'Autodetection options', icon: 'auto-fix'},
+        // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
+        // {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
+        {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
+        {id: 'about', label: 'About', icon: 'information-outline'},
+        // {id: 'resetBackup', label: 'Reset and backup', icon: 'file-restore-outline'},
+      ],
+      selectedTab: 'extensionSettings',
+      BrowserDetect: BrowserDetect,
+      preventClose: false,
+      siteSettings: null,
+    }
+  },
+  props: [
+    'settings',
+    'eventBus',
+    'logger',
+    'in-player',
+    'site',
+    'defaultTab'
+  ],
+  computed: {
+    // LPT: NO ARROW FUNCTIONS IN COMPUTED,
+    // IS SUPER HARAM
+    // THINGS WILL NOT WORK IF YOU USE ARROWS
+    siteSupportLevel() {
+      return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
+    }
+  },
+  created() {
+    if (this.defaultTab) {
+      this.selectedTab = this.defaultTab;
+    }
+    this.siteSettings = this.settings.getSiteSettings(this.site);
+    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active.whatsNewChecked;
+
+    this.eventBus.subscribe(
+      'uw-show-ui',
+      () => {
+        if (this.inPlayer) {
+          return; // show-ui is only intended for global overlay
+        }
+      }
+    )
+  },
+  methods: {
+    /**
+     * Gets URL of the browser settings page (i think?)
+     */
+    getUrl(url) {
+      return BrowserDetect.getURL(url);
+    },
+    selectTab(tab) {
+      this.selectedTab = tab;
+    },
+    setPreventClose(bool) {
+      this.preventClose = bool;
+      this.$emit('preventClose', bool);
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../res/css/uwui-base.scss';
+@import '../res/css/colors.scss';
+@import '../res/css/font/overpass.css';
+@import '../res/css/font/overpass-mono.css';
+@import '../res/css/common.scss';
+@import '../src/res-common/_variables';
+
+// .relative-wrapper {
+//   position: relative;
+//   width: 100%;
+//   height: 100%;
+// }
+
+.tab-row {
+  width: 22rem;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.tab-main {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+}
+
+.content {
+  flex-grow: 1;
+
+  .warning-area {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .panel-content {
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    overflow-y: auto;
+    padding: 1rem;
+  }
+}
+
+.warning-box {
+  background: rgb(255, 174, 107);
+  color: #000;
+  margin: 1rem;
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon-container {
+    margin-right: 1rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  a {
+    color: rgba(0,0,0,0.7);
+    cursor: pointer;
+  }
+}
+
+
+.site-support-info {
+  display: flex;
+  flex-direction: row;
+  align-items: bottom;
+
+  .site-support-site {
+    font-size: 1.5em;
+  }
+}
+
+.popup-panel {
+  background-color: rgba(0,0,0,0.50);
+  color: #fff;
+
+  overflow-y: auto;
+
+  .popup-window-header {
+    padding: 1rem;
+    background-color: rgba(5,5,5, 0.75);
+
+    display: flex;
+    flex-direction: row;
+
+    .header-title {
+      flex: 1 1;
+    }
+    .header-buttons {
+      flex: 0 0;
+      display: flex;
+      flex-direction: row;
+
+      .header-button {
+        cursor: pointer;
+        border-radius: 50%;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.button-active {
+          background-color: #fa6;
+          color: #000;
+
+          &:hover {
+            color: #ccc;
+          }
+        }
+
+        &.close-button {
+          color: #f00;
+        }
+
+        &:hover {
+          color: #fa6;
+        }
+      }
+    }
+  }
+  .tab-row {
+    background-color: rgba(11,11,11, 0.75);
+
+    .tab {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      padding: 2rem;
+      font-size: 1.5rem;
+      height: 4rem;
+
+      border-bottom: 1px solid rgba(128, 128, 128, 0.5);
+      border-top: 1px solid rgba(128, 128, 128, 0.5);
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+      &.active {
+        opacity: 1.0;
+        background-color: $primaryBg;
+        color: rgb(255, 174, 107);
+        border-bottom: 1px solid rgba(116, 78, 47, 0.5);
+        border-top: 1px solid rgba(116, 78, 47, 0.5);
+      }
+
+      .icon-container {
+        width: 64px;
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
+      .label {
+        flex-grow: 1;
+        flex-shrink: 1;
+        padding: 0 !important;
+      }
+
+      &.highlight-tab {
+        opacity: 0.9;
+        color: #eee;
+
+        // .label {
+        //   color: rgb(239, 192, 152);
+        // }
+      }
+    }
+  }
+
+  .popup-title, .popup-title h1 {
+    font-size: 48px !important;
+  }
+}
+
+pre {
+  white-space: pre-wrap;
+}
+
+
+</style>

src/csui/src/PlayerUiPanels/AboutPanel.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2">
+    <h1>About Ultrawidify</h1>
+    <p>
+      Ultrawidify version: <b>{{addonVersion}}</b><br>
+      Install source: <b>{{addonSource}}</b>
+    </p>
+
+    <div class="flex flex-row gap-2 bg-black">
+      <div class="w-[1/2]" style="width: 50%">
+        <h2>Report a problem</h2>
+        <p>
+          You may report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
+        </p>
+        <ul>
+          <li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
+          <li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
+        </ul>
+        <p>
+          When reporting bugs, please include the following information:
+        </p>
+        <ul>
+          <li>Extension version</li>
+          <li>Which browser you're using¹</li>
+          <li>Which extension store you installed extension from (install source)²</li>
+          <li>Which site you're having the issue on (preferably link. For issues with autodetection, please also include a timestamp)</li>
+          <li>What do I need to do in order to make the issue happen</li>
+          <li>Please include a screenshot of the problem. It usually helps.</li>
+        </ul>
+        <p>
+          <small>
+            [1] If using anything other than Firefox, Chrome, or Edge, please check if issue also happens in Chrome or Edge. Bugs affecting Opera will only get fixed if they also affect Chrome, because <a target="_blank" href="https://stuff.tamius.net/sacred-texts/2024/06/08/why-im-boycotting-opera/">I'm salty</a>.<br/>
+            [2] It is recommended that users of Microsoft Edge install Ultrawidify from the Microsoft Edge Addons source
+          </small>
+        </p>
+      </div>
+
+      <div class="w-[1/2]" style="width: 50%">
+        <h2>Thank you monies</h2>
+        <p>
+          If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.
+        </p>
+        <p class="text-center">
+          <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
+        </p>
+        <p>
+          I also have <a href="https://instagram.com/shaman_urkog" target="_blank">instagram with nerdy shit</a> <small>(mini painting + various fantasy events)</small>.
+        </p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+
+export default {
+  components: {
+    BrowserDetect,
+ },
+  data() {
+    return {
+      // reminder — webextension-polyfill doesn't seem to work in vue!
+      addonVersion: BrowserDetect.firefox ? chrome.runtime.getManifest().version : chrome.runtime.getManifest().version,
+      addonSource: BrowserDetect.processEnvVersion,
+      mailtoLink: '',
+      redditLink: '',
+      showEasterEgg: false,
+    }
+  },
+  async created() {
+    const messageTemplate = encodeURIComponent(
+`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
+ issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
+ problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.
+
+
+Extension info (AUTOGENERATED — DO NOT CHANGE OR REMOVE):
+* Build: ${BrowserDetect.processEnvBrowser}-${this.addonVersion}-stable
+
+Browser-related stuff (please ensure this section is correct):
+* User Agent string: ${window.navigator.userAgent}
+* vendor: ${window.navigator.vendor}
+* Operating system: ${window.navigator.platform}
+`
+      );
+    this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+.flex-row {
+  flex-direction: row;
+}
+
+p, li {
+  font-size: 1rem;
+}
+small {
+  opacity: 0.5;
+  font-size: 0.8em;
+}
+a {
+  color: #fa6;
+}
+.text-center {
+  text-align: center;
+}
+.donate {
+  margin: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  background-color: #fa6;
+  color: #000;
+}
+</style>

src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="alignment-box">
+    <div
+      class="col top left"
+      @click="align(VideoAlignment.Left, VideoAlignment.Top)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col top center"
+      @click="align(VideoAlignment.Center, VideoAlignment.Top)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col top right"
+      @click="align(VideoAlignment.Right, VideoAlignment.Top)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col ycenter left"
+      @click="align(VideoAlignment.Left, VideoAlignment.Center)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col ycenter center"
+      @click="align(VideoAlignment.Center, VideoAlignment.Center)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col ycenter right"
+      @click="align(VideoAlignment.Right, VideoAlignment.Center)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col bottom left"
+      @click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col bottom center"
+      @click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+    <div
+      class="col bottom right"
+      @click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
+    >
+      <div class="alignment-ui"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';
+
+
+export default {
+  props: [
+    'eventBus'
+  ],
+  data() {
+    return {
+      VideoAlignment: VideoAlignmentType
+    }
+  },
+  methods: {
+    align(alignmentX, alignmentY) {
+      this.eventBus?.sendToTunnel('set-alignment', {x: alignmentX, y: alignmentY})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped module>
+.alignment-box {
+  aspect-ratio: 1;
+  // width: 100%;
+  // min-width: 40px;
+  // max-width: 80px;
+
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+
+
+  .col {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: rgba(0,0,0,0.25);
+    cursor: pointer;
+
+    padding: 0.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+
+    border-bottom: 1px solid transparent;
+
+    .alignment-ui {
+
+      width: 50%;
+      height: 50%;
+
+      border-style: solid;
+      border-width: 0px;
+      border-color: #fff;
+    }
+
+    &:hover {
+      background-color: rgba(0,0,0,0.5);
+      border-bottom: 1px solid #fa6;
+
+      .alignment-ui {
+        border-color: #fa6 !important;
+      }
+
+      &.center.ycenter {
+        .alignment-ui {
+          background-color: #fa6;
+        }
+      }
+    }
+
+    &.top  {
+      align-items: flex-start;
+
+      .alignment-ui {
+        border-top-width: 3px;
+      }
+    }
+    &.bottom  {
+      align-items: flex-end;
+
+      .alignment-ui {
+        border-bottom-width: 3px;
+      }
+    }
+    &.left {
+      justify-content: flex-start;
+
+      .alignment-ui {
+        border-left-width: 3px;
+      }
+    }
+    &.right {
+      justify-content: flex-end;
+
+      .alignment-ui {
+        border-right-width: 3px;
+      }
+    }
+
+    &.center.ycenter {
+
+      .alignment-ui {
+        width: 25%;
+        height: 25%;
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -0,0 +1,478 @@
+<template>
+  <div class="flex flex-col tab-root">
+    <div class="flex flex-row flex-wrap">
+
+      <!-- AARD performance metrics -->
+      <div class="sub-panel">
+        <div class="flex flex-row">
+          <h1><mdicon name="television-play" :size="32" /> Automatic Aspect Ratio Detection</h1>
+        </div>
+        <div class="sub-panel-content">
+          <p>
+            <b>Autodetection performance</b>
+          </p>
+          <p>
+            Automatic aspect ratio detection is a resource-hungry feature.
+            This page allows you to trade autodetection accuracy and/or frequency for
+            better performance.
+          </p>
+          <p>
+            Note that some browsers <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now" target="_blank">limit the accuracy of time measurements</a>, though once the bars go past the blue line those limitations are largely inconsequential.
+          </p>
+          <div class="performance-graph-container">
+            <div class="performance-graph">
+              <div class="time-budget hz144"></div>
+              <div class="time-budget hz120"></div>
+              <div class="time-budget hz60"></div>
+              <div class="time-budget hz30"></div>
+              <div class="time-budget hz24"></div>
+              <div class="time-budget rest"></div>
+
+              <div class="bar-container">
+                <div class="average-case">
+                  <div class="stats">
+                    <b>Average: </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">
+                      processing {{
+                        Math.max(
+                          (performanceData?.total?.averageTime ?? 0)
+                            - (performanceData?.imageDraw?.averageTime ?? 0)
+                            - (performanceData?.blackFrame?.averageTime ?? 0),
+                          0
+                        ).toFixed(1)
+                      }} ms
+                    </span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrame?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': Math.max(
+                          (performanceData?.total?.averageTime ?? 0)
+                            - (performanceData?.imageDraw?.averageTime ?? 0)
+                            - (performanceData?.blackFrame?.averageTime ?? 0),
+                          0
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+                <div class="worst-case">
+                  <div class="stats">
+                    <b>Worst: </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">
+                      processing {{
+                        Math.max(
+                          (performanceData?.total?.worstTime ?? 0)
+                            - (performanceData?.imageDraw?.worstTime ?? 0)
+                            - (performanceData?.blackFrame?.worstTime ?? 0),
+                          0
+                        ).toFixed(1)
+                      }} ms
+                    </span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrame?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': Math.max(
+                          (performanceData?.total?.worstTime ?? 0)
+                            - (performanceData?.imageDraw?.worstTime ?? 0)
+                            - (performanceData?.blackFrame?.worstTime ?? 0),
+                          0
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+
+                <div class="average-case">
+                  <div class="stats">
+                    <b>AR change (average): </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.averageTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">processing {{
+                      (
+                        (performanceData?.fastLetterbox?.averageTime ?? 0)
+                        + (performanceData?.edgeDetect?.averageTime ?? 0)
+                      ).toFixed(1)
+                      }} ms</span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrame?.averageTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': (
+                          (performanceData?.fastLetterbox?.averageTime ?? 0)
+                          + (performanceData?.edgeDetect?.averageTime ?? 0)
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+                <div class="worst-case">
+                  <div class="stats">
+                    <b>AR change (worst): </b>
+                    <span class="draw">draw (main) {{(performanceData?.imageDraw?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="draw-blackframe">blackframe {{(performanceData?.blackFrame?.worstTime ?? 0).toFixed(1)}} ms</span> |
+                    <span class="processing">processing {{
+                      (
+                        (performanceData?.fastLetterbox?.worstTime ?? 0)
+                        + (performanceData?.edgeDetect?.worstTime ?? 0)
+                      ).toFixed(1)
+                      }} ms</span>
+                  </div>
+                  <div class="bar">
+                    <div
+                      class="draw"
+                      :style="{'width': (performanceData?.imageDraw?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="draw-blackframe"
+                      :style="{'width': (performanceData?.blackFrame?.worstTime ?? 0) + '%'}"
+                    >
+                    </div>
+                    <div
+                      class="processing"
+                      :style="{
+                        'width': (
+                          (performanceData?.fastLetterbox?.worstTime ?? 0)
+                          + (performanceData?.edgeDetect?.worstTime ?? 0)
+                        ) + '%'
+                      }"
+                    >
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+          <div class="settings-segment">
+            <h2>Basic settings</h2>
+
+            <div class="option">
+              <div class="name">
+                Autodetection frequency
+              </div>
+              <div class="description">
+                Shorter intervals (left side of the slider) are more responsive to changes in aspect ratio detections,
+                but requires more system resources.
+              </div>
+              <div class="indent">
+                <div class="flex flex-row row-padding">
+                  <div class="flex flex-input">
+                    More often&nbsp;<small>(~60/s)</small>
+                    <input type="range"
+                          :value="Math.log(settings.active.arDetect.timers.playing)"
+                          @change="setArCheckFrequency($event.target.value)"
+                          min="2.3"
+                          max="9.3"
+                          step="any"
+                    />
+                    &nbsp; Less often&nbsp;<small>(~1/10s)</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="option">
+              <div class="name">
+                Autodetection sensitivity
+              </div>
+              <div class="description">
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="label">Maximum allowed vertical video misalignment:</div>
+              <div class="input">
+                <input v-model="settings.active.arDetect.allowedMisaligned" />
+              </div>
+              <div class="description">
+                Ultrawidify detects letterbox only if video is vertically centered. Some people are bad at vertically
+                centering the content, though. This is how off-center the video can be before autodetection will
+                refuse to crop it.
+              </div>
+            </div>
+
+            <div class="option">
+              <div class="name">Video sample size</div>
+              <div class="input">
+                <input v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.width" /> x <input v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.height" />
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="label">Sample columns:</div>
+              <div class="input"><input v-model="settings.active.arDetect.sampling.staticCols" /></div>
+            </div>
+            <div class="field">
+              <div class="label">Sample rows:</div>
+              <div class="input"><input v-model="settings.active.arDetect.sampling.staticRows" /></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../components/Button.vue'
+import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser';
+import ShortcutButton from '../components/ShortcutButton';
+import EditShortcutButton from '../components/EditShortcutButton';
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
+import StretchType from '../../../common/enums/StretchType.enum';
+import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
+import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
+
+export default {
+  data() {
+    return {
+      exec: null,
+      performanceData: {},
+      graphRefreshInterval: undefined,
+    }
+  },
+  mixins: [
+  ],
+  props: [
+    'settings',
+    'frame',
+    'eventBus',
+    'site'
+  ],
+  created() {
+    this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
+  },
+  mounted() {
+    this.eventBus.sendToTunnel('get-aard-timing');
+    this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500);
+  },
+  destroyed() {
+    clearInterval(this.graphRefreshInterval);
+  },
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+    Button,
+    AlignmentOptionsControlComponent
+  },
+  computed: {
+  },
+  methods: {
+    async openOptionsPage() {
+      BrowserDetect.runtime.openOptionsPage();
+    },
+    refreshGraph() {
+       this.eventBus.sendToTunnel('get-aard-timing');
+    },
+    handleConfigBroadcast(data) {
+      if (data.type === 'aard-performance-data') {
+        this.performanceData = data.performanceData;
+        this.$nextTick( () => this.$forceUpdate() );
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
+
+<style lang="scss" scoped module>
+@import '../res-common/variables';
+
+.performance-graph-container {
+  position: relative;
+
+  width: 100%;
+  height: 8rem;
+  padding: 1rem;
+
+  .performance-graph {
+    border: 1px solid #fa6;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100%;
+    height: 100%;
+
+    // graph is 100 ms wide
+    .time-budget {
+      height: 100%;
+      display: inline-block;
+      position: relative;
+
+      box-sizing: border-box;
+
+      z-index: 100;
+
+      &.hz144 {
+        width: 6.9%;
+        // background-color: rgba(143, 143, 235, 0.47);
+      }
+      &.hz120 {
+        width: 1.39%;
+        // background-color: rgba(108, 108, 211, 0.441);
+      }
+      &.hz60 {
+        width: 8.33%;
+        // background-color: rgba(78, 78, 182, 0.327);
+        border-right: 2px solid rgb(96, 96, 227);
+        &::after {
+          content: '60fps';
+          position: absolute;
+          top: 0;
+          right: -2px;
+
+          border-right: 2px solid rgb(96, 96, 227);
+
+          transform: translateY(-100%);
+
+          font-size: 0.6rem;
+          padding-right: 0.25rem;
+          text-transform: small-caps;
+        }
+      }
+      &.hz30 {
+        width: 16.67%;
+        // background-color: rgba(56, 56, 151, 0.308);
+        border-right: 2px solid #fb772a;
+
+        &::after {
+          content: '30fps';
+          position: absolute;
+          top: 0;
+          right: -2px;
+
+          border-right: 2px solid #fb772a;
+
+          transform: translateY(-100%);
+
+          font-size: 0.6rem;
+          padding-right: 0.25rem;
+          text-transform: small-caps;
+        }
+      }
+      &.hz24 {
+        width: 8.33%;
+        // background-color: rgba(37, 37, 118, 0.269);
+      }
+    }
+
+
+    .bar-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+
+      > div {
+        height: 2.5rem;
+      }
+
+      .stats {
+        background-color: rgba(0, 0, 0, 0.544);
+        font-size: 0.75rem;
+        font-family: 'Overpass Mono';
+        z-index: 11010;
+
+        span {
+          font-size: 0.75rem;
+          z-index: 11011;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-top: 0.25rem;
+            margin-right: 0.5rem;
+          }
+
+          &.draw::before {
+            background-color: #fb772a;
+          }
+          &.draw-blackframe::before {
+            background-color: #e70c0c;
+          }
+          &.processing::before {
+            background-color: rgb(176, 167, 239);
+          }
+        }
+      }
+
+      .bar {
+        width: 100%;
+        height: 0.69rem;
+        background-color: #000;
+
+        overflow: hidden;
+        * {
+          display: inline-block;
+          height: 100%;
+        }
+
+        .draw {
+          background-color: #fb772a;
+        }
+        .draw-blackframe {
+          background-color: #e70c0c;
+        }
+        .processing {
+          background-color: rgb(176, 167, 239);
+        }
+      }
+    }
+  }
+}
+</style>

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="flex flex-col w-100">
+
+    <!-- TAB ROW -->
+    <div class="flex flex-row">
+      <div
+        class="tab"
+        :class="{'active': tab === 'siteSettings'}"
+        @click="setTab('siteSettings')"
+      >
+        Settings for current site<br/>
+        <small>{{ site }}</small>
+      </div>
+      <div
+        class="tab"
+        :class="{'active': tab === 'extensionSettings'}"
+        @click="setTab(tab = 'extensionSettings')"
+      >
+        Default settings for extension
+      </div>
+      <div
+        class="tab"
+        :class="{'active': tab === 'otherSites'}"
+        @click="setTab(tab = 'otherSites')"
+      >
+        Settings for other sites
+      </div>
+    </div>
+
+    <template v-if="tab === 'siteSettings' && siteSettings">
+      <!-- <div class="button">
+        Reset settings for site
+      </div> -->
+      <SiteExtensionSettings
+        v-if="settings"
+        :settings="settings"
+        :siteSettings="siteSettings"
+        :isDefaultConfiguration="false"
+      ></SiteExtensionSettings>
+    </template>
+
+    <template v-if="tab === 'extensionSettings' && globalSettings">
+      <SiteExtensionSettings
+        v-if="settings"
+        :settings="settings"
+        :siteSettings="globalSettings"
+        :isDefaultConfiguration="true"
+      ></SiteExtensionSettings>
+    </template>
+
+    <template v-if="tab === 'otherSites'">
+      <OtherSiteSettings
+        v-if="settings"
+        :settings="settings"
+      >
+      </OtherSiteSettings>
+    </template>
+
+
+
+    <!-- Reset options -->
+    <div class="flex flex-col" style="margin-top: 2rem">
+      <h2>Reset and backup</h2>
+      <p>
+        Pressing the button will reset settings to default without asking.
+      </p>
+      <button
+        class="danger"
+        @click="resetSettings"
+      >
+        Reset settings
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
+import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
+
+export default {
+  data() {
+    return {
+      tab: 'siteSettings'
+    }
+  },
+  mixins: [
+
+  ],
+  props: [
+    'settings',
+    'site',
+  ],
+  components: {
+    SiteExtensionSettings,
+    OtherSiteSettings
+},
+  computed: {
+    globalSettings() {
+      return this.settings?.getSiteSettings('@global') ?? null;
+    },
+    siteSettings() {
+      if (this.site) {
+        return  this.settings?.getSiteSettings(this.site) ?? null;
+      }
+      return null;
+    },
+    resetSettings() {
+      this.settings.active = JSON.parse(JSON.stringify(this.settings.default));
+      this.settings.saveWithoutReload();
+    }
+  },
+  methods: {
+    setTab(tab) {
+      this.tab = tab;
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-2">
+    <div class="flex flex-row gap-2 bg-black">
+      <div class="w-[1/2]" style="width: 50%">
+        <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.2.0</h2>
+        <p>
+          There's been another major change that skips a version.
+        </p>
+        <ul>
+          <li>Parts of automatic aspect ratio detection use WebGL now. This should result in improved performance. Slightly underwhelming blog post about this issue can be found <a href="https://stuff.tamius.net/sacred-texts/2024/10/02/hot-dang-i-shouldnt-have-given-on-webgl/" target="_blank">here</a>.</li>
+          <li>In-player UI now indicates whether a site is having a problem with automatic aspect ratio detection.</li>
+          <li>UI improvements</li>
+        </ul>
+        <p>
+          Since automatic aspect ratio detection had to be rewritten completely and since the new version needs to be out 5 days ago, there are some regressions in the automatic aspect ratio detection.
+        </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.
+        </p>
+        <ul>
+          <li><b>Manifest v3</b>. Bit late, but still.</li>
+          <li>
+            <b>In-player UI.</b><br/>
+            This one took major effort to pull off. Required some changes under the hood, required me to de-spaghettify some code. The UI will only show
+            if the video takes up sufficient amount of space (currently determined as 960 pixels wide).
+          </li>
+          <li>
+            <b>New alignment options.</b> Video can be aligned vertically as well as horizontally.
+          </li>
+          <!-- <li>
+            By default, Ultrawidify will not kick in on "small videos". You have to be either in full screen or theater mode. Ultrawidify assumes that any
+            video that takes up more than 85% of the window width is being viewed in theater mode. This value may be tweaked later on. This feature can be
+            configured (or turned off entirely) via 'Advanced options' menu on the in-player UI.
+          </li> -->
+          <li>
+            The in-player extension UI will do a better job differentiating between the various level of support: "official" for the sites that Tam can check
+            on his own, "fingers crossed" for sites that Tam can't check because my load-bearing credit card can't support the weight of a dozen subscription
+            services, and "community support" for sites that enjoy support through the helping hand of people willing to help.
+          </li>
+          <li>
+            The in-player UI should now display a warning whenever Ultrawidify detects automatic aspect ratio detection isn't happening because the site uses DRM.
+          </li>
+          <!-- <li>
+            Better zooming. The slider is back, baby.
+          </li> -->
+          <!-- <li>
+            Panning option that's a bit more intuitive.
+          </li> -->
+        </ul>
+        <h3>Regressions</h3>
+        <ul>
+          <li>
+            Due to major changes under the hood, custom settings from older versions were NOT been migrated (probably).
+          </li>
+          <li>
+            It is unclear how extension acts on sites with more than one video.
+          </li>
+          <li>
+            Extension lost the ability to discriminate between iframes. Actions taken through the popup will be affect <b>all</b> iframes.
+          </li>
+          <li>
+            Hope the UI is worth the regressions, because getting UI to work has been a MAJOR pain in the ass.
+          </li>
+        </ul>
+      </div>
+      <div class="w-[1/2]" style="width: 50%; padding-left: 1rem; padding-top: 5rem;">
+        <h2>Thank you monies</h2>
+        <p>
+          If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.
+        </p>
+        <p class="text-center">
+          <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
+        </p>
+
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default({
+  props: [
+    'settings'
+  ],
+  mounted() {
+    this.settings.active.whatsNewChecked = true;
+    this.settings.saveWithoutReload();
+  }
+});
+</script>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+.flex-row {
+  flex-direction: row;
+}
+
+p, li {
+  font-size: 1rem;
+}
+small {
+  opacity: 0.5;
+  font-size: 0.8em;
+}
+a {
+  color: #fa6;
+}
+.text-center {
+  text-align: center;
+}
+.donate {
+  margin: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  background-color: #fa6;
+  color: #000;
+}
+</style>

src/csui/src/PlayerUiPanels/DebugPanel.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+
+    <div>
+      <h1>{{loggerPanel.title}}<small><br/>{{loggerPanel.subtitle}}</small></h1>
+
+      <div>Logger configuration:</div>
+
+      <template v-if="loggerPanel.pasteConfMode">
+
+      </template>
+      <template v-else>
+        <JsonObject
+          label="logger-settings"
+          :value="currentSettings"
+          :ignoreKeys="{'allowLogging': false}"
+          @change="updateSettingsUi"
+        ></JsonObject>
+      </template>
+
+      <div class="flex flex-row flex-end">
+        <div class="button" @click="restoreLoggerSettings()">
+          Revert
+        </div>
+        <div class="button button-primary" @click="saveLoggerSettings()">
+          Save
+        </div>
+        <div class="button button-primary" @click="startLogging()">
+          Save and start logging
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import JsonObject from '../components/JsonEditor/JsonObject.vue'
+import Logger, { baseLoggingOptions } from '../../../ext/lib/Logger';
+
+export default {
+  components: {
+    JsonObject
+  },
+  data() {
+    return {
+      loggerPanelRotation: [{
+        title: 'DEFORESTATOR 5000',
+        subtitle: 'Iron Legion\'s finest logging tool'
+      },{
+        title: 'Astinus',
+        subtitle: 'Ultrawidify logging tool'
+      }, {
+        title: 'Tracer',
+        subtitle: "Maybe I'll be Tracer — I'm already printing stack traces."
+      }, {
+        title: 'Grûmsh',
+        subtitle: "He who watches (all the things printed to the console)."
+      }, {
+        title: 'Situation Room/The Council',
+        subtitle: 'We will always be watching.'
+      }, {
+        title: 'Isengard Land Management Services',
+        subtitle: "#log4saruman"
+      }, {
+        title: 'Saw Hero',
+        subtitle: 'Ultrawidify logging tool'
+      }],
+
+      loggerPanel: {
+        title: 'whoopsie daisy',
+        subtitle:  'you broke the header choosing script',
+        pasteConfMode: false,
+      },
+      lastSettings: undefined,
+      parsedSettings: undefined,
+      currentSettings: undefined
+    };
+  },
+  props: [
+    'settings',
+    'eventBus',
+    'site'
+  ],
+  created() {
+    this.loggerPanel = {
+      ...this.loggerPanelRotation[Math.floor(Math.random() * this.loggerPanelRotation.length)],
+      pasteConfMode: false,
+    };
+    this.loadDefaultConfig();
+  },
+  methods: {
+    loadDefaultConfig() {
+      this.lastSettings = baseLoggingOptions;
+      this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
+      this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
+    },
+    async getLoggerSettings() {
+      this.lastSettings = await Logger.getConfig() || baseLoggingOptions;
+      this.parsedSettings = JSON.stringify(this.lastSettings, null, 2) || '';
+      this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
+    },
+    updateSettingsUi(val) {
+      try {
+        this.parsedSettings = JSON.stringify(val, null, 2);
+        this.lastSettings = val;
+        this.currentSettings = JSON.parse(JSON.stringify(this.lastSettings));
+      } catch (e) {
+
+      }
+    },
+    saveLoggerSettings() {
+      Logger.saveConfig({...this.lastSettings});
+    },
+    restoreLoggerSettings() {
+      this.getLoggerSettings();
+      this.confHasError = false;
+    },
+    async startLogging(){
+      this.logStringified = undefined;
+      await Logger.saveConfig({...this.lastSettings, allowLogging: true});
+      window.location.reload();
+    },
+  }
+}
+</script>

src/csui/src/PlayerUiPanels/InPlayerUiAdvertisement.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>In-player UI</h1>
+    <div
+      class="button b3"
+      style="margin: 16px; padding: 4px;"
+      @click="showInPlayerUi()"
+    >
+      Show in-player UI
+    </div>
+    <p></p>
+    <p></p>
+    <p>In-player UI should show and hide automatically as you start or stop moving your mouse inside the player window.</p>
+    <p>Note that by default, in-player UI may not show if player window is not big enough.</p>
+  </div>
+</template>
+
+<script>
+import UIProbeMixin from '../utils/UIProbeMixin';
+
+export default {
+  mixins: [
+    UIProbeMixin
+  ],
+  props: [
+    'eventBus',
+  ],
+  methods: {
+    showInPlayerUi() {
+      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+    }
+  }
+}
+</script>

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

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

@@ -0,0 +1,462 @@
+<template>
+  <div>
+    <!-- Enable extension -->
+    <div class="field">
+      <div class="label">
+        Enable extension under the following conditions:
+      </div>
+      <div class="select">
+        <select
+          v-model="simpleExtensionSettings.enable"
+          @click="setExtensionMode('enable', $event)"
+        >
+          <option
+            v-if="simpleExtensionSettings.enable === 'complex'"
+            value="complex"
+          >
+            (Site uses advanced settings)
+          </option>
+          <template v-if="isDefaultConfiguration">
+            <option value="disabled">
+              Disabled (unless enabled for specific site)
+            </option>
+          </template>
+          <template v-else>
+            <option value="default">
+              Use default ()
+            </option>
+            <option value="disabled">
+              Never
+            </option>
+          </template>
+          <option value="fs">
+            Fullscreen only
+          </option>
+          <option value="theater">
+            Fullscreen and theater mode
+          </option>
+          <option value="enabled">
+            Always
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Enable AARD -->
+    <div class="field">
+      <div class="label">
+        Enable automatic aspect ratio detection under the following conditions:
+      </div>
+      <div class="select">
+        <select
+          v-model="simpleExtensionSettings.enableAard"
+          @click="setExtensionMode('enableAard', $event)"
+        >
+          <option
+            v-if="simpleExtensionSettings.enable === 'complex'"
+            value="complex"
+          >
+            (Site uses advanced settings)
+          </option>
+          <template v-if="isDefaultConfiguration">
+            <option value="disabled">
+              Disabled (unless enabled for specific site)
+            </option>
+          </template>
+          <template v-else>
+            <option value="default">
+              Use default ()
+            </option>
+            <option value="disabled">
+              Never
+            </option>
+          </template>
+          <option value="fs">
+            Fullscreen only
+          </option>
+          <option value="theater">
+            Fullscreen and theater mode
+          </option>
+          <option value="enabled">
+            Always
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Enable keyboard -->
+    <div class="field">
+      <div class="label">
+        Enable keyboard shortcuts under the following conditions
+      </div>
+      <div class="select">
+        <select
+          v-model="simpleExtensionSettings.enableKeyboard"
+          @click="setExtensionMode('enableKeyboard', $event)"
+        >
+          <option
+            v-if="simpleExtensionSettings.enable === 'complex'"
+            value="complex"
+          >
+            (Site uses advanced settings)
+          </option>
+          <template v-if="isDefaultConfiguration">
+            <option value="disabled">
+              Disabled (unless enabled for specific site)
+            </option>
+          </template>
+          <template v-else>
+            <option value="default">
+              Use default ()
+            </option>
+            <option value="disabled">
+              Never
+            </option>
+          </template>
+          <option value="fs">
+            Fullscreen only
+          </option>
+          <option value="theater">
+            Fullscreen and theater mode
+          </option>
+          <option value="enabled">
+            Always
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Default crop -->
+    <div class="field">
+      <div class="label">Default crop:</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultCrop"
+          @change="setOption('defaults.crop', $event)"
+        >
+          <option
+            v-if="!isDefaultConfiguration"
+            :value="JSON.stringify({useDefault: true})"
+          >
+            Use default ({{getCommandValue(settings?.active.commands.crop, siteSettings.data.defaults.crop)}})
+          </option>
+          <option
+            v-for="(command, index) of settings?.active.commands.crop"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+      <div class="hint">This is how extension will crop video if/when autodetection is disabled. Pick 'Reset' option to keep aspect ratio as-is by default.</div>
+    </div>
+
+    <!-- Default stretch -->
+    <div class="field">
+      <div class="label">Default stretch:</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultStretch"
+          @change="setOption('defaults.stretch', $event)"
+        >
+          <option
+            v-if="!isDefaultConfiguration"
+            :value="JSON.stringify({useDefault: true})"
+          >
+            Use default ({{getCommandValue(settings?.active.commands.stretch, siteSettings.data.defaults.stretch)}})
+          </option>
+          <option
+            v-for="(command, index) of settings?.active.commands.stretch"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Default alignment -->
+    <div class="field">
+      <div class="label">Default alignment:</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultAlignment"
+          @change="setOption('defaults.alignment', $event)"
+        >
+          <option
+            v-if="!isDefaultConfiguration"
+            :value="JSON.stringify({useDefault: true})"
+          >
+            Use default ({{getAlignmentLabel(siteSettings.data.defaults.alignment)}})
+          </option>
+          <option
+            v-for="(command, index) of alignmentOptions"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Crop, et. al. Persistence -->
+    <div class="field">
+      <div class="label">Persist crop, stretch, and alignment between videos</div>
+      <div class="select">
+        <select
+          v-model="siteDefaultCropPersistence"
+          @click="setOption('persistCSA', $event)"
+        >
+          <option
+            v-if="!isDefaultConfiguration"
+            :value="CropModePersistence.Default"
+          >
+            Use default ({{defaultPersistanceLabel}})
+          </option>
+          <option :value="CropModePersistence.Disabled">Disabled</option>
+          <option :value="CropModePersistence.UntilPageReload">Until page reload</option>
+          <option :value="CropModePersistence.CurrentSession">Current session</option>
+          <option :value="CropModePersistence.Forever">Always persist</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
+import VideoAlignmentType from '../../../../../common/enums/VideoAlignmentType.enum';
+import CropModePersistence from './../../../../../common/enums/CropModePersistence.enum';
+
+export default {
+  data() {
+    return {
+      CropModePersistence: CropModePersistence,
+      alignmentOptions: [
+        {label: 'Top left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Top}},
+        {label: 'Top center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Top}},
+        {label: 'Top right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Top}},
+        {label: 'Left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Center}},
+        {label: 'Center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Center}},
+        {label: 'Right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Center}},
+        {label: 'Bottom left', arguments: {x: VideoAlignmentType.Left, y: VideoAlignmentType.Bottom}},
+        {label: 'Bottom center', arguments: {x: VideoAlignmentType.Center, y: VideoAlignmentType.Bottom}},
+        {label: 'Bottom right', arguments: {x: VideoAlignmentType.Right, y: VideoAlignmentType.Bottom}}
+      ]
+    }
+  },
+  mixins: [
+
+  ],
+  props: [
+    'settings',
+    'siteSettings',
+    'isDefaultConfiguration'
+  ],
+  components: {
+
+  },
+  computed: {
+    simpleExtensionSettings() {
+      return {
+        enable: this.compileSimpleSettings('enable'),
+        enableAard: this.compileSimpleSettings('enableAard'),
+        enableKeyboard: this.compileSimpleSettings('enableKeyboard'),
+      }
+    },
+    siteDefaultCrop() {
+      return this.siteSettings.raw?.defaults?.crop ? JSON.stringify(this.siteSettings.raw?.defaults?.crop) : JSON.stringify({useDefault: true});
+    },
+    siteDefaultStretch() {
+      return this.siteSettings.raw?.defaults?.stretch ? JSON.stringify(this.siteSettings.raw?.defaults?.stretch) : JSON.stringify({useDefault: true});
+    },
+    siteDefaultAlignment() {
+      return this.siteSettings.raw?.defaults?.alignment ? JSON.stringify(this.siteSettings.raw?.defaults?.alignment) : JSON.stringify({useDefault: true});
+    },
+    siteDefaultCropPersistence() {
+      return this.siteSettings.raw?.persistCSA ?? undefined;
+    },
+    defaultPersistanceLabel() {
+      switch (this.siteSettings.defaultSettings.persistCSA) {
+        case CropModePersistence.CurrentSession:
+          return 'current session';
+        case CropModePersistence.Disabled:
+          return 'disabled';
+        case CropModePersistence.UntilPageReload:
+          return 'until page reload';
+        case CropModePersistence.Forever:
+          return 'Always persist';
+      }
+
+      return '??';
+    }
+  },
+  methods: {
+    /**
+     * Compiles our extension settings into more user-friendly options
+     */
+    compileSimpleSettings(component) {
+      try {
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Disabled
+        ) {
+          return 'disabled';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Default
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Default
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Default
+        ) {
+          return 'default';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+        ) {
+          return 'fs';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Disabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+        ) {
+          return 'theater';
+        }
+        if (
+          this.siteSettings?.data?.[component]?.normal        === ExtensionMode.Enabled
+          && this.siteSettings?.data?.[component]?.theater    === ExtensionMode.Enabled
+          && this.siteSettings?.data?.[component]?.fullscreen === ExtensionMode.Enabled
+        ) {
+          return 'enabled';
+        }
+
+        return 'complex';
+      } catch (e) {
+        return 'loading';
+      }
+    },
+
+    getCommandValue(availableCommands, command) {
+      for (const cmd of availableCommands) {
+        if (JSON.stringify(cmd.arguments) === JSON.stringify(command)) {
+          return cmd.label;
+        }
+      }
+      return 'Unknown command';
+    },
+
+    getAlignmentLabel(alignment) {
+      // in case default settings don't have this set
+      if (!alignment) {
+        return 'Center'
+      }
+
+      let x, y;
+      if (alignment.x === VideoAlignmentType.Center) {
+        x = 'center';
+      } else if (alignment.x === VideoAlignmentType.Left) {
+        x = 'left';
+      } else if (alignment.x === VideoAlignmentType.Right) {
+        x = 'right';
+      } else {
+        x = '??'
+      }
+
+      if (alignment.y === VideoAlignmentType.Center) {
+        y = 'center';
+      } else if (alignment.y === VideoAlignmentType.Bottom) {
+        y = 'bottom';
+      } else if (alignment.y === VideoAlignmentType.Top) {
+        y = 'top';
+      } else {
+        y = '???'
+      };
+
+      if (x === y) {
+        return x;
+      }
+      return `${y} ${x}`;
+    },
+    getOption(option) {
+
+    },
+    async setOption(option, $event) {
+      const value = $event.target.value;
+      let commandArguments;
+
+      // if argument is json, parse json. Otherwise, pass the value as-is
+      try {
+        commandArguments = value !== undefined ? JSON.parse(value) : undefined;
+      } catch(e) {
+        commandArguments = value;
+      }
+
+      if (commandArguments.useDefault) {
+        commandArguments = undefined;
+      }
+
+      await this.siteSettings.set(option, commandArguments);
+      this.$nextTick( () => this.$forceUpdate() );
+    },
+    setExtensionMode(component, event) {
+      const option = event.target.value;
+
+      if (option === 'complex') {
+        return;
+      }
+
+      if (option === 'default') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Default,
+          theater: ExtensionMode.Default,
+          fullscreen: ExtensionMode.Default
+        });
+      }
+      if (option === 'disabled') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Disabled,
+          theater: ExtensionMode.Disabled,
+          fullscreen: ExtensionMode.Disabled
+        });
+      }
+      if (option === 'enabled') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Enabled,
+          theater: ExtensionMode.Enabled,
+          fullscreen: ExtensionMode.Enabled
+        });
+      }
+      if (option === 'theater') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Disabled,
+          theater: ExtensionMode.Enabled,
+          fullscreen: ExtensionMode.Enabled
+        });
+      }
+      if (option === 'fs') {
+        return this.siteSettings.set(component, {
+          normal: ExtensionMode.Disabled,
+          theater: ExtensionMode.Disabled,
+          fullscreen: ExtensionMode.Enabled
+        });
+      }
+    }
+  }
+
+}
+</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>
+<style scoped>
+.button-hover:hover {
+  color: #fa6;
+}
+</style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="sub-panel-content flex flex-row flex-wrap">
+
+    <ShortcutButton
+      v-for="(command, index) of settings?.active.commands.crop"
+      class="flex b3 button"
+      :class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
+      :key="index"
+      :label="command.label"
+      :shortcut="getKeyboardShortcutLabel(command)"
+      @click="editMode ? editAction(command, index, 'crop') : execAction(command)"
+    >
+    </ShortcutButton>
+
+    <!-- "Add new" button -->
+    <ShortcutButton
+      v-if="editMode"
+      class="button b3"
+     :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
+      label="Add new"
+      @click="editAction(
+        {action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
+        null,
+        'crop'
+      )"
+    ></ShortcutButton>
+  </div>
+
+  <!-- EDIT MODE PANEL -->
+  <div
+    v-if="editMode && !editModeOptions?.crop?.selected"
+    class="sub-panel-content"
+  >
+    <div class="edit-action-area">
+      Click a button to edit
+    </div>
+  </div>
+  <div v-if="editMode && editModeOptions?.crop?.selected" class="sub-panel-content">
+    <div class="edit-action-area-header">
+      <span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.crop?.selected?.label}}</b>&nbsp;
+      <template v-if="editModeOptions?.crop?.selectedIndex === null && editModeOptions?.crop?.selected?.label !== 'New aspect ratio'">(New ratio)</template>
+    </div>
+    <div class="edit-action-area">
+      <!-- Some options are only shown for type 4 (fixed) crops -->
+      <template v-if="editModeOptions?.crop?.selected?.arguments?.type === AspectRatioType.Fixed">
+        <div class="field">
+          <div class="label">
+            Ratio:
+          </div>
+          <div class="input">
+            <!-- We do an ugly in order to avoid spamming functions down at the bottom -->
+            <input
+              v-model="editModeOptions.crop.selected.arguments.ratio"
+              @blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
+            >
+          </div>
+          <div class="hint">
+            You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
+            (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
+            your numbers without quote marks. Number will be converted to factor form on save.
+          </div>
+        </div>
+        <div class="field">
+          <div class="label">
+            Label:
+          </div>
+          <div class="input">
+            <input v-model="editModeOptions.crop.selected.label">
+          </div>
+          <div class="hint">
+            Label for the button. You can make it say something other than ratio.
+          </div>
+        </div>
+      </template>
+
+      <!-- editing keyboard shortcuts is always allowed -->
+      <div class="field">
+        <div class="label">Shortcut:</div>
+        <div class="">
+          <EditShortcutButton
+            :shortcut="editModeOptions?.crop?.selected?.shortcut"
+            @shortcutChanged="updateSelectedShortcut($event, 'crop')"
+          >
+          </EditShortcutButton>
+        </div>
+        <div class="hint">
+          <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
+          The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
+          any keyboard shortcuts defined by the site itself.
+        </div>
+      </div>
+
+      <div class="flex flex-row flex-end">
+        <div
+          v-if="editModeOptions?.crop?.selected?.arguments?.type === AspectRatioType.Fixed && editModeOptions?.crop?.selectedIndex !== null"
+          class="button"
+          @click="deleteAction('crop')"
+        >
+          <mdicon name="delete"></mdicon> Delete
+        </div>
+        <div class="flex-grow"></div>
+        <div class="button" @click="cancelEdit('crop')">Cancel</div>
+        <div class="button" @click="saveShortcut('crop')">
+          <mdicon name="floppy"></mdicon>
+          &nbsp;
+          <template v-if="editModeOptions?.crop?.selectedIndex === null">Add</template>
+          <template v-else>Save</template>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div v-if="siteSettings" class="edit-action-area">
+    <div class="field">
+      <div class="label">Default for this site</div>
+      <div class="select">
+        <select
+          :value="siteDefaultCrop"
+          @change="setDefaultCrop($event, 'site')"
+        >
+          <option
+            v-for="(command, index) of settings?.active.commands.crop"
+            :key="index"
+            :value="JSON.stringify(command.arguments)"
+          >
+            {{command.label}}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShortcutButton from '../../../components/ShortcutButton.vue';
+import EditShortcutButton from '../../../components/EditShortcutButton';
+import EditModeMixin from '../../../utils/EditModeMixin';
+import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
+import CommsMixin from '../../../utils/CommsMixin';
+import AspectRatioType from '../../../../../common/enums/AspectRatioType.enum';
+
+export default {
+  data() {
+
+    return {
+      AspectRatioType: AspectRatioType,
+
+      // TODO: this should be mixin?
+      resizerConfig: {
+        crop: null,
+        stretch: null,
+        zoom: null,
+        pan: null
+      }
+    }
+  },
+  mixins: [
+    // ComputeActionsMixin,
+    EditModeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
+  props: [
+    'settings',      // required for buttons and actions, which are global
+    'siteSettings',
+    'eventBus',
+    'isEditing'
+  ],
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+  },
+  computed: {
+    siteDefaultCrop()  {
+      if (!this.siteSettings) {
+        return null;
+      }
+      return JSON.stringify(
+        this.siteSettings.data.defaults.crop
+      );
+    },
+  },
+  created() {
+    if (this.isEditing) {
+      this.enableEditMode();
+    }
+  },
+  watch: {
+    isEditing(newValue, oldValue) {
+      if (newValue) {
+        this.enableEditMode();
+      } else {
+        this.disableEditMode();
+      }
+    }
+  },
+  methods: {
+    /**
+     * Sets default crop, for either site or global
+     */
+    setDefaultCrop($event, scope) {
+      if (!this.siteSettings) {
+        return;
+      }
+      const commandArguments = JSON.parse($event.target.value);
+
+      this.siteSettings.set('defaults.crop', commandArguments);
+      this.settings.saveWithoutReload();
+    },
+
+    /**
+     * Determines whether a given crop command is the currently active one
+     */
+    isActiveCrop(cropCommand) {
+      if (! this.resizerConfig.crop || !this.siteSettings) {
+        return false;
+      }
+
+      const defaultCrop = this.siteSettings.data.defaults.crop;
+
+      if (cropCommand.arguments.type === AspectRatioType.Automatic) {
+        return this.resizerConfig.crop.type === AspectRatioType.Automatic
+          || this.resizerConfig.crop.type === AspectRatioType.AutomaticUpdate
+          || this.resizerConfig.crop.type === AspectRatioType.Initial && defaultCrop === AspectRatioType.Automatic;
+      }
+      if (cropCommand.arguments.type === AspectRatioType.Reset) {
+        return this.resizerConfig.crop.type === AspectRatioType.Reset
+          || this.resizerConfig.crop.type === AspectRatioType.Initial && defaultCrop !== AspectRatioType.Automatic;
+      }
+      if (cropCommand.arguments.type === AspectRatioType.Fixed) {
+        return this.resizerConfig.crop.type === AspectRatioType.Fixed
+          && this.resizerConfig.crop.ratio === cropCommand.arguments.ratio;
+      }
+      // only legacy options (fitw, fith) left to handle:
+      return cropCommand.arguments.type === this.resizerConfig.crop.type;
+    },
+  }
+}
+</script>
+
+<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../../../res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="sub-panel-content flex flex-row flex-wrap">
+    <ShortcutButton
+      v-for="(command, index) of settings?.active.commands.stretch"
+      class="b3 button"
+      :class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}"
+      :key="index"
+      :label="command.label"
+      :shortcut="getKeyboardShortcutLabel(command)"
+      @click="editMode ? editAction(command, index, 'stretch') : execAction(command)"
+    >
+    </ShortcutButton>
+
+    <!-- "Add new" button -->
+    <ShortcutButton
+      v-if="editMode"
+      class="button b3"
+      label="Add new"
+      @click="editAction(
+        {action: 'set-stretch', label: 'Stretch to ...', arguments: {type: StretchType.FixedSource}},
+        null,
+        'stretch'
+      )"
+    ></ShortcutButton>
+  </div>
+
+  <!-- EDIT MODE PANEL -->
+  <div
+    v-if="editMode && !editModeOptions?.stretch?.selected"
+    class="sub-panel-content"
+  >
+    <div class="edit-action-area">
+      Click a button to edit
+    </div>
+  </div>
+  <div v-if="editMode && editModeOptions?.stretch?.selected" class="sub-panel-content">
+    <div class="edit-action-area-header">
+      <span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.stretch?.selected?.label}}</b>&nbsp;
+      <template v-if="editModeOptions?.stretch?.selectedIndex === null && editModeOptions?.stretch?.selected?.label !== 'Stretch to ...'">(New option)</template>
+    </div>
+    <div class="edit-action-area">
+      <!-- There are some special options for 'thin borders' -->
+      <template v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.Conditional">
+        <div class="field">
+          <div class="label">
+            Limit:
+          </div>
+          <div class="input">
+            <input
+              v-model="editModeOptions.stretch.selected.arguments.limit"
+            >
+          </div>
+          <div class="hint">
+            If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
+            Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
+          </div>
+        </div>
+      </template>
+
+      <!-- Some options are only shown for type 5 (fixed) stretch -->
+      <template v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.FixedSource">
+        <div class="field">
+          <div class="label">
+            Ratio:
+          </div>
+          <div class="input">
+            <!-- We do an ugly in order to avoid spamming functions down at the bottom -->
+            <input
+              v-model="editModeOptions.stretch.selected.arguments.ratio"
+              @blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
+            >
+          </div>
+          <div class="hint">
+            You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
+            (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
+            your numbers without quote marks. Number will be converted to factor form on save.
+          </div>
+        </div>
+        <div class="field">
+          <div class="label">
+            Label:
+          </div>
+          <div class="input">
+            <input v-model="editModeOptions.stretch.selected.label">
+          </div>
+          <div class="hint">
+            Label for the button. You can make it say something other than ratio.
+          </div>
+        </div>
+      </template>
+
+      <!-- editing keyboard shortcuts is always allowed -->
+      <div class="field">
+        <div class="label">Shortcut:</div>
+        <div class="">
+          <EditShortcutButton
+            :shortcut="editModeOptions?.stretch?.selected?.shortcut"
+            @shortcutChanged="updateSelectedShortcut($event, 'stretch')"
+          >
+          </EditShortcutButton>
+        </div>
+        <div class="hint">
+          <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
+          The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
+          any keyboard shortcuts defined by the site itself.
+        </div>
+      </div>
+
+      <div class="flex flex-row flex-end">
+        <div
+          v-if="editModeOptions?.stretch?.selected?.arguments?.type === StretchType.FixedSource && editModeOptions?.stretch?.selectedIndex !== null"
+          class="button"
+          @click="deleteAction('stretch')"
+        >
+          <mdicon name="delete"></mdicon> Delete
+        </div>
+        <div class="flex-grow"></div>
+        <div class="button" @click="cancelEdit('stretch')">Cancel</div>
+        <div class="button" @click="saveShortcut('stretch')">
+          <mdicon name="floppy"></mdicon>
+          &nbsp;
+          <template v-if="editModeOptions?.crop?.selectedIndex === null">Add</template>
+          <template v-else>Save</template>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <div v-if="siteSettings" class="edit-action-area">
+    <div class="field">
+      <div class="label">Default for this site:</div>
+      <div class="select">
+        <div class="select">
+          <select
+            v-model="siteDefaultStretchMode"
+            @change="setDefaultStretchingMode($event, 'site')"
+          >
+            <option
+              v-for="(command, index) of settings?.active.commands.stretch"
+              :key="index"
+              :value="JSON.stringify(command.arguments)"
+            >
+              {{command.label}}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShortcutButton from '../../../components/ShortcutButton.vue';
+import EditShortcutButton from '../../../components/EditShortcutButton';
+import EditModeMixin from '../../../utils/EditModeMixin';
+import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
+import CommsMixin from '../../../utils/CommsMixin';
+import StretchType from '../../../../../common/enums/StretchType.enum';
+
+export default {
+  data() {
+    return {
+      exec: null,
+      StretchType: StretchType,
+
+      // TODO: this should be mixin?
+      resizerConfig: {
+        crop: null,
+        stretch: null,
+        zoom: null,
+        pan: null
+      }
+    }
+  },
+  mixins: [
+    // ComputeActionsMixin,
+    EditModeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
+  props: [
+    'settings',      // required for buttons and actions, which are global
+    'siteSettings',
+    'eventBus',
+    'isEditing'
+  ],
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+  },
+  computed: {
+    siteDefaultStretch() {
+      if (!this.siteSettings) {
+        return null;
+      }
+      return JSON.stringify(
+        this.siteSettings.data.defaults.stretch
+      );
+    },
+  },
+  created() {
+    if (this.isEditing) {
+      this.enableEditMode();
+    }
+  },
+  watch: {
+    isEditing(newValue, oldValue) {
+      if (newValue) {
+        this.enableEditMode();
+      } else {
+        this.disableEditMode();
+      }
+    }
+  },
+  methods: {
+    /**
+     * Sets default stretching mode, for either site or global
+     */
+    setDefaultStretchingMode($event, globalOrSite) {
+      if (!this.siteSettings) {
+        return;
+      }
+      const commandArguments = JSON.parse($event.target.value);
+      this.siteSettings.set('defaults.stretch', commandArguments);
+    },
+
+    /**
+     * Determines whether a given stretch command is the currently active one
+     */
+    isActiveStretch(stretchCommand) {
+      if (! this.resizerConfig.stretch || !this.siteSettings) {
+        return false;
+      }
+
+      // const defaultCrop = this.settings.getDefaultStretch(this.site);
+
+      if ([StretchType.NoStretch, StretchType.Basic, StretchType.Hybrid, StretchType.Conditional, StretchType.Default].includes(stretchCommand.arguments.type)) {
+        return this.resizerConfig.stretch.type === stretchCommand.arguments.type;
+      }
+      return this.resizerConfig.crop.type === stretchCommand.arguments.type && this.resizerConfig.crop.ratio === stretchCommand.arguments.ratio;
+    },
+  }
+}
+</script>
+
+<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../../../res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="flex flex-col">
+    <!--
+      min, max and value need to be implemented in js as this slider
+      should use logarithmic scale
+    -->
+    <div class="flex flex-row flex-end">
+      <Button
+        v-if="zoomAspectRatioLocked"
+        label="Unlock aspect ratio"
+        icon="lock-open"
+        :fixedWidth="true"
+        @click="toggleZoomAr()"
+      >
+      </Button>
+      <Button
+        v-else
+        label="Lock aspect ratio"
+        icon="lock"
+        :fixedWidth="true"
+        @click="toggleZoomAr()"
+      >
+      </Button>
+    </div>
+    <template v-if="zoomAspectRatioLocked">
+      <input id="_input_zoom_slider"
+              class="input-slider"
+              type="range"
+              step="any"
+              min="-1"
+              max="3"
+              :value="zoom.x"
+              @input="changeZoom($event.target.value)"
+              />
+      <div style="overflow: auto" class="flex flex-row">
+        <div class="flex flex-grow medium-small x-pad-1em">
+          Zoom: {{getZoomForDisplay('x')}}
+        </div>
+        <div class="flex flex-nogrow flex-noshrink medium-small">
+          <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div>Horizontal zoom</div>
+      <input id="_input_zoom_slider"
+              class="input-slider"
+              type="range"
+              step="any"
+              min="-1"
+              max="4"
+              :value="zoom.x"
+              @input="changeZoom($event.target.value, 'x')"
+      />
+
+      <div>Vertical zoom</div>
+      <input id="_input_zoom_slider"
+              class="input-slider"
+              type="range"
+              step="any"
+              min="-1"
+              max="3"
+              :value="zoom.y"
+              @input="changeZoom($event.target.value, 'y')"
+      />
+
+      <div style="overflow: auto" class="flex flex-row">
+        <div class="flex flex-grow medium-small x-pad-1em">
+          Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
+        </div>
+        <div class="flex flex-nogrow flex-noshrink medium-small">
+          <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      zoomAspectRatioLocked: true,
+      zoom: {
+        x: 0,
+        y: 0
+      },
+
+      // TODO: this should be mixin?
+      resizerConfig: {
+        crop: null,
+        stretch: null,
+        zoom: null,
+        pan: null
+      }
+    }
+  },
+  mixins: [
+
+  ],
+  props: [
+    'settings',      // required for buttons and actions, which are global
+    'siteSettings',
+    'eventBus',
+    'isEditing'
+  ],
+  methods: {
+    getZoomForDisplay(axis) {
+      // zoom is internally handled logarithmically, because we want to have x0.5, x1, x2, x4 ... magnifications
+      // spaced out at regular intervals. When displaying, we need to convert that to non-logarithmic values.
+
+      return `${(Math.pow(2, this.zoom[axis]) * 100).toFixed()}%`
+    },
+    toggleZoomAr() {
+      this.zoomAspectRatioLocked = !this.zoomAspectRatioLocked;
+    },
+
+    resetZoom() {
+      // we store zoom logarithmically on this component
+      this.zoom = {x: 0, y: 0};
+
+      // we do not use logarithmic zoom elsewhere
+      // todo: replace eventBus with postMessage to parent
+      // this.eventBus.send('set-zoom', {zoom: 1, axis: 'y'});
+      // this.eventBus.send('set-zoom', {zoom: 1, axis: 'x'});
+
+      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'y'});
+      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'x'});
+    },
+    changeZoom(newZoom, axis) {
+      // we store zoom logarithmically on this compnent
+      if (!axis) {
+        this.zoom.x = newZoom;
+      } else {
+        this.zoom[axis] = newZoom;
+      }
+
+      // we do not use logarithmic zoom elsewhere, therefore we need to convert
+      newZoom = Math.pow(2, newZoom);
+
+      if (this.zoomAspectRatioLocked) {
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'y'});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'x'});
+      } else {
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
+      }
+    },
+  }
+}
+
+</script>
+
+<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
+<style lang="scss" src="../../../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../../../res-common/common.scss" scoped></style>

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="flex flex-col tab-root">
+    <!-- ADD ANY OPTION BARS HERE -->
+
+    <!-- The rest of the tab -->
+    <div class="flex flex-row flex-wrap">
+
+      <!-- Player element picker -->
+      <div class="sub-panel">
+        <div class="flex flex-row">
+          <h1><mdicon name="television-play" :size="32" /> Player element</h1>
+        </div>
+        <div class="flex flex-row">
+          <div class="sub-panel-content">
+            <p>
+              You're probably on this page because Ultrawidify doesn't crop the player correctly.
+            </p>
+            <p>
+              If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
+              should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
+            </p>
+            <p>
+              You need to reload the page for changes to take effect.
+            </p>
+
+            <!-- <p>
+              <a @click="showAdvancedOptions = !showAdvancedOptions">
+                <template v-if="showAdvancedOptions">Hide advanced options</template>
+                <template v-else>Show advanced options</template>
+              </a>
+            </p> -->
+
+            <div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
+              <div style="display: flex; flex-direction: column">
+                <div>
+                  <input :checked="playerManualQs"
+                          @change="togglePlayerManualQs"
+                          type="checkbox"
+                  />
+                  <div>
+                    Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">CSS selector</a> for player<br/>
+                    <small>If defining multiple selectors, separate them with commas.</small>
+                  </div>
+                </div>
+                <div>Selector</div>
+                <input type="text"
+                  v-model="playerQs"
+                  @change="updatePlayerQuerySelector"
+                  @blur="updatePlayerQuerySelector"
+                  :disabled="playerByNodeIndex || !playerManualQs"
+                />
+              </div>
+              <div style="display: flex; flex-direction: column">
+                <b>Custom CSS for site</b>
+                <textarea></textarea>
+              </div>
+            </div>
+
+            <div style="display: flex; flex-direction: row;">
+              <div class="element-tree">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>
+                        <div class="status-relative">
+                          Status <mdicon name="help-circle" @click="showLegend = !showLegend" />
+
+                          <div v-if="showLegend" class="element-symbol-legend">
+                            <b>Symbols:</b><br />
+                            <mdicon name="alert-remove" class="invalid" /> Element of invalid dimensions<br />
+                            <mdicon name="refresh-auto" class="auto-match" /> Ultrawidify's player detection thinks this should be the player<br />
+                            <mdicon name="bookmark" class="parent-offset-match" /> Site settings say this should be the player (based on counting parents)<br />
+                            <mdicon name="crosshairs" class="qs-match" /> Site settings say this should be the player (based on query selectors)<br />
+                            <mdicon name="check-circle" class="activePlayer" /> Element that is actually the player
+                          </div>
+                        </div>
+                      </th>
+                      <th>Element</th>
+                      <!-- <th>Actions</th> -->
+                      <!-- <th>Quick fixes</th> -->
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(element, index) of elementStack"
+                      :key="index"
+                      class="element-row"
+                    >
+                      <td>
+                        <div class="status">
+                          <div
+                            v-if="element.heuristics?.invalidSize"
+                            class="invalid"
+                          >
+                            <mdicon name="alert-remove" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.autoMatch"
+                            class="auto-match"
+                          >
+                            <mdicon name="refresh-auto" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.qsMatch"
+                            class="qs-match"
+                          >
+                            <mdicon name="crosshairs" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.manualElementByParentIndex"
+                            class="parent-offset-match"
+                          >
+                            <mdicon name="bookmark" />
+                          </div>
+                          <div
+                            v-if="element.heuristics?.activePlayer"
+                            class="activePlayer"
+                          >
+                            <mdicon name="check-circle" />
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <div
+                          class="element-data"
+
+                          @mouseover="markElement(index, true)"
+                          @mouseleave="markElement(index, false)"
+
+                          @click="setPlayer(index)"
+                        >
+                          <div class="tag">
+                            <b>{{element.tagName}}</b> <i class="id">{{element.id ? `#`:''}}{{element.id}}</i>  @ <span class="dimensions">{{element.width}}</span>x<span class="dimensions">{{element.height}}</span>
+
+                          </div>
+                          <div v-if="element.classList" class="class-list">
+                            <div v-for="cls of element.classList" :key="cls">
+                              {{cls}}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <div class="flex flex-row">
+                          <!-- <div @click="designatePlayer(index)">Set as player {{ index }}</div> -->
+                        </div>
+                      </td>
+                      <!-- <td>
+                        <div
+                          class="css-fixes"
+                        >
+                          <div style="width: 100%"><b>Quick fixes:</b></div>
+                          <div
+                            class="css-line"
+                            :class="{'active': cssStack[index]?.includes('width: 100%;')}"
+                            @click="toggleCssForElement(index, 'width: 100%;')"
+                          >
+                            Width: 100%
+                          </div>
+                          <div
+                            class="css-line"
+                            :class="{'active': cssStack[index]?.includes('height: 100%;')}"
+                            @click="toggleCssForElement(index, 'height: 100%;')"
+                          >
+                            Height: 100%
+                          </div>
+                          <div
+                            class="css-line"
+                            :class="{'active': cssStack[index]?.includes('display: flex;')}"
+                            @click="toggleCssForElement(index, 'display: flex;')"
+                          >
+                            Display: flex
+                          </div>
+                          <div class="css-line">
+                            Flex direction:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('flex-direction: row;')}"
+                              @click="toggleCssForElement(index, 'flex-direction', 'row')"
+                            >
+                              row
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('flex-direction: column;')}"
+                              @click="toggleCssForElement(index, 'flex-direction', 'column')"
+                            >
+                              column
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Justify content:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-content: start;')}"
+                              @click="toggleCssForElement(index, 'justify-content', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-content: center;')}"
+                              @click="toggleCssForElement(index, 'justify-content', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-content: end;')}"
+                              @click="toggleCssForElement(index, 'justify-content', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Align items:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-items: start;')}"
+                              @click="toggleCssForElement(index, 'align-items', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-items: center;')}"
+                              @click="toggleCssForElement(index, 'align-items', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-items: end;')}"
+                              @click="toggleCssForElement(index, 'align-items', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+
+                          <div class="css-line">
+                            Justify self:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-self: start;')}"
+                              @click="toggleCssForElement(index, 'justify-self', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-self: center;')}"
+                              @click="toggleCssForElement(index, 'justify-self', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('justify-self: end;')}"
+                              @click="toggleCssForElement(index, 'justify-self', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Align self:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-self: start;')}"
+                              @click="toggleCssForElement(index, 'align-self', 'start')"
+                            >
+                              start
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-self: center;')}"
+                              @click="toggleCssForElement(index, 'align-self', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('align-self: end;')}"
+                              @click="toggleCssForElement(index, 'align-self', 'end')"
+                            >
+                              end
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Text-align:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('text-align: left;')}"
+                              @click="toggleCssForElement(index, 'text-align', 'left')"
+                            >
+                              left
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('text-align: center;')}"
+                              @click="toggleCssForElement(index, 'text-align', 'center')"
+                            >
+                              center
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.find(x => x.includes('text-align: right'))}"
+                              @click="toggleCssForElement(index, 'text-align', 'right')"
+                            >
+                              right
+                            </span>
+                          </div>
+                          <div class="css-line">
+                            Position:
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('position: relative;')}"
+                              @click="toggleCssForElement(index, 'position', 'relative')"
+                            >
+                              relative
+                            </span> |
+                            <span
+                              class="css-line-suboption"
+                              :class="{'active': cssStack[index]?.includes('position: absolute;')}"
+                              @click="toggleCssForElement(index, 'position', 'absolute')"
+                            >
+                              absolute
+                            </span>
+                          </div>
+                        </div>
+                      </td> -->
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="element-config">
+                </div>
+              </div>
+
+              <!-- <div class="css-preview">
+                {{cssStack}}
+              </div> -->
+            </div>
+          </div>
+
+          <!-- <div class="sub-panel-content">
+            <h2>Advanced settings</h2>
+          </div> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+
+export default({
+  components: {
+
+  },
+  data() {
+    return {
+      elementStack: [],
+      cssStack: [],
+      showLegend: false,
+      showAdvancedOptions: false,
+    };
+  },
+  mixins: [],
+  props: [
+    'siteSettings',
+    'frame',
+    'eventBus',
+    'site',
+    'isPopup'
+  ],
+  created() {
+    this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleElementStack(config)});
+  },
+  mounted() {
+    this.getPlayerTree();
+  },
+  computed: {},
+  methods: {
+    getPlayerTree() {
+      if (this.isPopup) {
+        this.eventBus.send('get-player-tree');
+      } else {
+        this.eventBus.sendToTunnel('get-player-tree');
+      }
+    },
+    handleElementStack(configBroadcast) {
+      if (configBroadcast.type === 'player-tree') {
+        this.elementStack = configBroadcast.config;
+        this.$nextTick( () => this.$forceUpdate() );
+      }
+    },
+    markElement(parentIndex, enable) {
+      this.eventBus.sendToTunnel('set-mark-element', {parentIndex, enable});
+    },
+    async setPlayer(index) {
+      // yup.
+      this.siteSettings.getDOMConfig('modified', 'original');
+      await this.siteSettings.setUpdateFlags(['PlayerData']);
+      await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
+      await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
+
+      // if user agrees with ultrawidify on what element player should be,
+      // we just unset our settings for this site
+      if (this.elementStack[index].heuristics?.autoMatch) {
+        await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
+        this.getPlayerTree();
+      } else {
+        // ensure settings exist:
+        await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
+        await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
+        await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
+        this.getPlayerTree();
+      }
+    },
+    /**
+     * Toggles active CSS for element of certain parent index.
+     * cssValue is optional and can be included in cssRule argument
+     */
+    toggleCssForElement(index, cssRule, cssValue) {
+      // we will handle elements that put cssValue as a separate argument elsewhere
+      if (cssValue) {
+        return this.toggleCssForElement_3arg(index,cssRule, cssValue);
+      }
+
+      // this rule applies to current element — remove it!
+      if (this.cssStack[index]?.includes(cssRule)) {
+        this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
+      } else {
+        if (!this.cssStack[index]) {
+          this.cssStack[index] = [];
+        }
+        this.cssStack[index].push(cssRule)
+      }
+
+      //TODO: update settings!
+    },
+    toggleCssForElement_3arg(index, cssRule, cssValue) {
+      const matching = this.cssStack[index]?.find(x => x.includes(cssRule))
+      if (matching) {
+        this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
+        if (!matching.includes(cssValue)) {
+          this.cssStack[index].push(`${cssRule}: ${cssValue};`);
+        }
+      } else {
+        if (!this.cssStack[index]) {
+          this.cssStack[index] = [];
+        }
+        this.cssStack[index].push(`${cssRule}: ${cssValue};`);
+      }
+
+      //TODO: update settings!
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+p {
+  font-size: 1rem;
+}
+
+.element-tree {
+  .element-row {
+    // display: flex;
+    // flex-direction: row;
+    margin: 0.5rem;
+
+    .status {
+      width: 6.9rem;
+      margin-right: 1rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+
+      .invalid {
+        color: #f00;
+      }
+    }
+    .element-data {
+      border: 1px solid rgba(255,255,255,0.5);
+      padding: 0.5rem 1rem;
+
+      max-width: 30rem;
+
+      display: flex;
+      flex-direction: column;
+
+      .tag {
+        text-transform: lowercase;
+        font-weight: bold;
+      }
+      .id {
+        font-style: italic;
+      }
+      .class-list {
+        font-style: italic;
+        opacity: 0.75;
+        font-size: 0.75rem;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        > div {
+          background-color: rgba(255,255,255,0.5);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.5rem;
+          margin: 0.125rem 0.25rem;
+        }
+      }
+      .dimensions {
+        color: #473c85;
+      }
+    }
+
+  }
+}
+
+// .css-fixes {
+//   // display: flex;
+//   // flex-direction: row;
+//   // flex-wrap: wrap;
+//   // align-items: flex-start;
+//   // justify-content:flex-start;
+// }
+.css-line {
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border: 1px solid rgba(255,255,255,0.5);
+  background: #000;
+  margin: 0.125rem 0.25rem;
+  padding: 0.125rem 0.25rem;
+
+  &.active, >span.active {
+    background: rgb(255, 174, 107);
+    color: #000;
+  }
+}
+
+.status-relative {
+  position: relative;
+
+  .element-symbol-legend {
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    z-index: 20000;
+
+    width: 32rem;
+
+    text-align: left;
+
+    background-color: #000;
+    padding: 1rem;
+    border: 1px solid rgba(255,255,255,0.5);
+  }
+}
+
+.tab-root {
+  width: 100%;
+}
+</style>

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="flex flex-col" style="position: relative; width: 100%;">
+    <!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
+    <div class="flex flex-col" style="width: 100%">
+      <h2>Player UI options</h2>
+
+      <div class="flex flex-col compact-form">
+        <div class="field">
+          <div class="label">Enable in-player UI</div>
+          <input
+            type="checkbox"
+            v-model="settings.active.ui.inPlayer.enabled"
+            @change="saveSettings()"
+          />
+        </div>
+        <div
+          class="flex flex-col field-group compact-form"
+          :class="{disabled: !settings.active.ui.inPlayer.enabled}"
+        >
+          <div class="field">
+            <div class="label">Enable only in full screen</div>
+            <input type="checkbox" v-model="settings.active.ui.inPlayer.enabledFullscreenOnly" />
+          </div>
+
+          <div class="field disabled">
+            <div class="label">
+              Popup activator position:
+            </div>
+            <div class="select">
+              <select
+                v-model="settings.active.ui.inPlayer.popupAlignment"
+                @change="saveSettings()"
+              >
+                <option value="left">Left</option>
+                <option value="right">Right</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="label">
+              Activate in-player UI:
+            </div>
+            <div class="select">
+              <select
+                v-model="settings.active.ui.inPlayer.activation"
+                @change="saveSettings()"
+              >
+                <option value="player">
+                  When mouse hovers over player
+                </option>
+                <option value="trigger-zone">
+                  When mouse hovers over trigger zone
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="field" :class="{'disabled': settings.active.ui.inPlayer.activation !== 'trigger-zone'}">
+            <div class="label">Edit trigger zone:</div>
+            <button @click="startTriggerZoneEdit()">Edit</button>
+          </div>
+
+          <div class="field">
+            <div class="label">
+              Do not show in-player UI when video player is narrower than (% of screen width)
+            </div>
+            <div class="input range-input">
+              <input
+                :value="settings.active.ui.inPlayer.minEnabledWidth"
+                class="slider"
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value)"
+                @change="(event) => saveSettings()"
+              >
+              <input
+                :value="ghettoComputed.minEnabledWidth"
+                @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value, true)"
+                @change="(event) => saveSettings(true)"
+              >
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="label">
+              Do not show in-player UI when video player is shorter than (% of screen width)
+            </div>
+            <div class="input range-input">
+              <input
+                :value="settings.active.ui.inPlayer.minEnabledHeight"
+                class="slider"
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value)"
+                @change="(event) => saveSettings()"
+              >
+              <input
+                :value="ghettoComputed.minEnabledHeight"
+                @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)"
+                @change="(event) => saveSettings(true)"
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2 class="mt2r">Menu options and keyboard shortcuts</h2>
+      <div>
+        Click 'add new' to add a new option. Click a button to edit or remove the keyboard shortcut.
+      </div>
+      <div class="keyboard-settings">
+        <!-- CROP OPTIONS -->
+        <div>
+          <div class="flex flex-row">
+            <h3 class="mth3">CROP OPTIONS</h3>
+          </div>
+
+          <CropOptionsPanel
+            :settings="settings"
+            :eventBus="eventBus"
+            :isEditing="true"
+          >
+          </CropOptionsPanel>
+        </div>
+
+        <!-- STRETCH OPTIONS -->
+        <div>
+          <div class="flex flex-row">
+            <h3 class="mth3">STRETCH OPTIONS</h3>
+          </div>
+
+          <StretchOptionsPanel
+            :settings="settings"
+            :eventBus="eventBus"
+            :isEditing="true"
+          ></StretchOptionsPanel>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../components/Button.vue'
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel.vue'
+import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel.vue'
+
+export default {
+  components: {
+    Button,
+    CropOptionsPanel,
+    StretchOptionsPanel
+  },
+  data() {
+    return {
+      ghettoComputed: { }
+    }
+  },
+  mixins: [
+  ],
+  props: [
+    'settings',      // required for buttons and actions, which are global
+    'eventBus',
+  ],
+  mounted() {
+    this.ghettoComputed = {
+      minEnabledWidth: this.optionalToFixed(this.settings.active.ui.inPlayer.minEnabledWidth * 100, 0),
+      minEnabledHeight: this.optionalToFixed(this.settings.active.ui.inPlayer.minEnabledHeight * 100, 0),
+    }
+  },
+  methods: {
+    forcePositiveNumber(value) {
+      //       Change EU format to US if needed
+      //                  |       remove everything after second period if necessary
+      //                  |               |            |   remove non-numeric characters
+      //                  |               |            |           |
+      return value.replaceAll(',', '.').split('.', 2).join('.').replace(/[^0-9.]/g, '');
+    },
+    optionalToFixed(v, n) {
+      if ((`${v}`.split('.')[1]?.length ?? 0) > n) {
+        return v.toFixed(n);
+      }
+      return v;
+    },
+    setPlayerRestrictions(key, value, isTextInput) {
+      if (isTextInput) {
+        value = (+this.forcePositiveNumber(value) / 100);
+      }
+      if (isNaN(+value)) {
+        value = 0.5;
+      }
+
+      this.settings.active.ui.inPlayer[key] = value;
+
+      if (isTextInput) {
+        this.ghettoComputed[key] = this.optionalToFixed(value, 0);
+      } else {
+        this.ghettoComputed[key] = this.optionalToFixed(value * 100, 0);
+      }
+    },
+    saveSettings(forceRefresh) {
+      this.settings.saveWithoutReload();
+
+      if (forceRefresh) {
+        this.$nextTick( () => this.$forceRefresh() );
+      }
+    },
+    startTriggerZoneEdit() {
+      this.eventBus.send('start-trigger-zone-edit');
+    },
+    async openOptionsPage() {
+      BrowserDetect.runtime.openOptionsPage();
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" scoped>
+.justify-center {
+  justify-content: center;
+}
+.items-center {
+  align-items: center;
+}
+.mt-4{
+  margin-top: 1rem;
+}
+
+.input {
+  max-width: 24rem;
+}
+
+.range-input {
+  display: flex;
+  flex-direction: row;
+
+  * {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+
+  input {
+    max-width: 5rem;
+  }
+
+  input[type=range] {
+    max-width: none;
+  }
+}
+
+.trigger-zone-editor {
+  background-color: rgba(0,0,0,0.25);
+
+  padding-bottom: 2rem;
+  .field {
+    margin-bottom: -1em;
+  }
+}
+
+.disabled {
+  pointer-events: none;
+  /* color: #666; */
+  filter: contrast(50%) brightness(40%) grayscale(100%);
+}
+
+.compact-form {
+  > .field, > .field-group {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.keyboard-settings {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  > * {
+    width: calc(50% - 0.5rem);
+  }
+}
+
+.mt2r {
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
+.mth3 {
+  margin-top: 1.5rem;
+}
+</style>

src/csui/src/PlayerUiPanels/ResetBackupPanel.vue

@@ -0,0 +1,30 @@
+<template>
+<div class="flex flex-col">
+  <h1>Reset and backup</h1>
+  <p>
+    Pressing the button will reset settings to default without asking.
+  </p>
+  <button
+    class="danger"
+    @click="resetSettings"
+  >
+    Reset settings
+  </button>
+</div>
+</template>
+<script>
+export default {
+  props: {
+    settings: Object
+  },
+  methods: {
+    resetSettings() {
+      this.settings.active = JSON.parse(JSON.stringify(this.settings.default));
+      this.settings.saveWithoutReload();
+    }
+  }
+}
+</script>
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/ResizerDebugPanelComponent.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="panel-root">
+    <h1>Resizer debug data</h1>
+    <div class="flex flex-row flex-wrap">
+      <div class="panel">
+        <h3 class="panel-title">
+          Player info
+        </h3>
+        <div class="data-item">
+          <div class="data-title">Window size:
+            <small>(Inner size)</small>
+          </div>
+          <div class="data">{{windowWidth}} x {{windowHeight}}</div>
+          <div class="button" @click="refreshWindowSize()">
+            <!-- <Icon icon="arrow-clockwise"></Icon> -->
+            Refresh</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Player dimensions:</div>
+          <div class="data">{{debugData?.resizer?.playerData?.dimensions?.width ?? 'not detected'}} x {{debugData?.resizer?.playerData?.dimensions?.height ?? 'not detected'}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Is fullscreen?</div>
+          <div class="data">{{debugData?.resizer?.playerData?.dimensions?.fullscreen ?? 'unknown'}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Player id | classlist</div>
+          <div class="data">{{debugData?.resizer?.playerData?.elementId || '<no ID>'}} | {{debugData?.resizer?.playerData?.classList || '<no classes>'}}</div>
+        </div>
+      </div>
+
+        <!-- Stream info -->
+      <div class="panel">
+        <h3 class="panel-title">
+          Stream info
+        </h3>
+        <div class="data-item">
+          <div class="data-title">
+            Stream dimensions: <small>(Native size of the video)</small>
+          </div>
+          <div class="data">
+            {{debugData?.resizer?.videoRawData?.streamDimensions.x}} x {{debugData?.resizer?.videoRawData?.streamDimensions?.y}}
+          </div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">
+            Stream displayed dimensions: <small>(Video file is being upscaled to this size)</small>
+          </div>
+          <div class="data">
+            {{debugData?.resizer?.videoRawData?.displayedSize?.x.toFixed()}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y.toFixed()}}
+          </div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Video element native size: <small>(Size of the html element. Should be same as above most of the time!)</small></div>
+          <div class="data">{{debugData?.resizer?.videoRawData?.displayedSize?.x.toFixed(1)}} x {{debugData?.resizer?.videoRawData?.displayedSize?.y.toFixed(1)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Size difference to player (raw): <small>(positive numbers: video element is bigger than player element)</small></div>
+          <div class="data">x: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.wdiff.toFixed(1)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.beforeZoom?.hdiff.toFixed(1)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Video element size (post zoom): <small>(Size of the html element after transform:scale is applied. Or at least, that's what Resizer::computeOffsets() thinks the final size is.)</small></div>
+          <div class="data">{{debugData?.resizer?.transformedSize?.x.toFixed(2)}} x {{debugData?.resizer?.transformedSize?.y.toFixed(2)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title"><b>Size difference to player (post-zoom):</b> <small>(same as above, except after cropping, stretching, panning and zoom are applied)</small></div>
+          <div class="data">x: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.wdiff.toFixed(2)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.sizeDifferenceToPlayer?.afterZoom?.hdiff.toFixed(2)}}</div>
+        </div>
+      </div>
+
+      <!-- Transform info -->
+      <div class="panel">
+        <h3 class="panel-title">
+          Transformations
+        </h3>
+        <div class="data-item">
+          <div class="data-title">Alignment: <small>(I agree that 'left' and 'right' are both evil, but that's not the kind of alignments we're thinking of)</small></div>
+          <div class="data">{{debugData?.resizer?.videoTransform?.alignment || '<unknown>'}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Scale factor</div>
+          <div class="data">x: {{debugData?.resizer?.videoTransform?.scale.x.toFixed(2)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.videoTransform?.scale.y.toFixed(2)}}</div>
+        </div>
+        <div class="data-item">
+          <div class="data-title">Translation</div>
+          <div class="data">x: {{debugData?.resizer?.videoTransform?.translate.x.toFixed(2)}}; &nbsp; &nbsp; y: {{debugData?.resizer?.videoTransform?.translate.y.toFixed(2)}}</div>
+        </div>
+      </div>
+    </div>
+      <!-- <div class="uw-debug-info flex"> -->
+        <!-- <pre> -->
+          <!-- {{debugDataPrettified}} -->
+        <!-- </pre> -->
+      <!-- </div> -->
+  </div>
+</template>
+
+<script>
+// import Icon from '../../common/components/Icon';
+
+export default {
+  components: {
+    // Icon,
+  },
+  props: {
+    debugData: Object
+  },
+  data() {
+    return {
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight
+    };
+  },
+  methods: {
+    refreshWindowSize() {
+      this.windowWidth = window.innerWidth;
+      this.windowHeight = window.innerHeight;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../res/css/uwui-base.scss';
+@import '../../../res/css/colors.scss';
+@import '../../../res/css/font/overpass.css';
+@import '../../../res/css/font/overpass-mono.css';
+@import '../../../res/css/common.scss';
+
+.panel-root {
+  display: block;
+  padding: 16px;
+}
+
+.panel {
+  display: inline-block;
+  width: 420px;
+  max-width: 100%;
+  padding: 12px 6px;
+}
+
+.data-item {
+  display: block;
+  margin-bottom: 0.69rem;
+}
+
+.data-title {
+
+  small {
+    display: block;
+    opacity: 0.69;
+  }
+}
+.data {
+  color: $primary-color;
+  }
+</style>

src/csui/src/PlayerUiPanels/SiteSettings.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex flex-col">
+
+
+    <div class="">
+
+    </div>
+  </div>
+</template>

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="flex flex-col" style="position: relative; width: 100%;">
+    <!-- 'Change UI' options is a tiny bit in upper right corner. -->
+    <div
+      class="options-bar flex flex-row"
+      :class="{isEditing: editMode}"
+    >
+      <template v-if="editMode">
+        <div style="height: 100%; display: flex; flex-direction: column; justify-content: center; flex: 0 0; padding-right: 8px;">
+          <mdicon name="alert" size="32" />
+        </div>
+        <div class="flex-grow">
+          You are currently editing options and shortcuts.<br/>
+          <b>NOTE: changes will take effect after page reload.</b>
+        </div>
+        <div
+          class="flex-nogrow flex-noshrink"
+          @click="editMode = !editMode"
+        >
+          Exit edit mode
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex-grow"></div>
+        <div
+          class=""
+          @click="editMode = !editMode"
+        >
+          Edit ratios and shortcuts
+        </div>
+      </template>
+    </div>
+
+    <!-- The rest of the tab is under 'edit ratios and shortcuts' row -->
+    <div class="flex flex-row flex-wrap" style="width: 100%">
+
+      <div class="flex flex-col">
+        <!-- CROP OPTIONS -->
+        <div v-if="settings" class="sub-panel">
+          <div class="flex flex-row">
+            <mdicon name="crop" :size="32" />
+            <h1>Crop video:</h1>
+          </div>
+
+          <CropOptionsPanel
+            :settings="settings"
+            :siteSettings="siteSettings"
+            :eventBus="eventBus"
+            :isEditing="editMode"
+          >
+          </CropOptionsPanel>
+        </div>
+
+        <!-- STRETCH OPTIONS -->
+        <div v-if="settings" class="sub-panel">
+          <div class="flex flex-row">
+            <mdicon name="stretch-to-page-outline" :size="32" />
+            <h1>Stretch video:</h1>
+          </div>
+
+          <StretchOptionsPanel
+            :settings="settings"
+            :siteSettings="siteSettings"
+            :eventBus="eventBus"
+            :isEditing="editMode"
+          ></StretchOptionsPanel>
+        </div>
+      </div>
+
+      <div class="flex flex-col">
+
+        <!-- VIDEO ALIGNMENT -->
+        <div class="sub-panel">
+          <div class="flex flex-row">
+            <mdicon name="align-horizontal-center" :size="32" />
+            <h1>Video alignment:</h1>
+          </div>
+
+          <div class="flex flex-row justify-center mt-4">
+            <alignment-options-control-component
+              :eventBus="eventBus"
+            >
+            </alignment-options-control-component>
+          </div>
+
+          <!-- <div class="flex flex-row flex-wrap">
+            <div class="m-t-0-33em display-block">
+              <input id="_input_zoom_site_allow_pan"
+                      type="checkbox"
+                      />
+              Pan with mouse
+            </div>
+          </div> -->
+        </div>
+
+        <!-- ZOOM OPTIONS -->
+        <!-- <div class="sub-panel">
+          <div class="flex flex-row">
+            <mdicon name="magnify-plus-outline" :size="32" />
+            <h1>Manual zoom:</h1>
+          </div>
+
+          <ZoomOptionsPanel
+            :settings="settings"
+            :siteSettings="siteSettings"
+            :eventBus="eventBus"
+            :isEditing="editMode"
+          ></ZoomOptionsPanel>
+        </div> -->
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ZoomOptionsPanel from './PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
+import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel'
+import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel'
+import Button from '../components/Button.vue'
+import ShortcutButton from '../components/ShortcutButton';
+import EditShortcutButton from '../components/EditShortcutButton';
+import ComputeActionsMixin from '../mixins/ComputeActionsMixin';
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
+import CommsMixin from '../utils/CommsMixin';
+
+export default {
+  data() {
+    return {
+      exec: null,
+      scope: 'page',
+
+      editMode: false,
+
+      resizerConfig: {
+        crop: null,
+        stretch: null,
+        zoom: null,
+        pan: null
+      }
+    }
+  },
+  mixins: [
+    ComputeActionsMixin,
+    CommsMixin,
+  ],
+  props: [
+    'settings',      // required for buttons and actions, which are global
+    'siteSettings',
+    'frame',
+    'eventBus',
+    'site'
+  ],
+  created() {
+    this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
+  },
+  mounted() {
+    this.eventBus.sendToTunnel('get-ar');
+  },
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+    Button,
+    AlignmentOptionsControlComponent,
+    StretchOptionsPanel,
+    CropOptionsPanel, ZoomOptionsPanel
+  },
+  methods: {
+
+    async openOptionsPage() {
+      BrowserDetect.runtime.openOptionsPage();
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
+<style lang="scss" scoped>
+.justify-center {
+  justify-content: center;
+}
+.items-center {
+  align-items: center;
+}
+.mt-4{
+  margin-top: 1rem;
+}
+</style>

src/csui/src/components/AardStatusIndicator.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    siteSettings: Object,
+    hasDrm: Boolean,
+    problems: Object,
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/csui/src/components/ActionAlt.vue

@@ -12,7 +12,7 @@
       </div>
     </div>
     <div class="command-details">
-      <div class="flex flex-column cmd-container cd-pad">
+      <div class="flex flex-col cmd-container cd-pad">
         <div class="flex bold">
           Command:
         </div>
@@ -22,7 +22,7 @@
       </div>
 
      <!-- SCOPES -->
-      <div class="flex flex-column scopes-container cd-pad">
+      <div class="flex flex-col scopes-container cd-pad">
         <div class="flex bold">Popup tabs:</div>
 
         <!-- global scope -->
@@ -151,14 +151,13 @@ export default {
 <style lang="scss" scoped>
 @import '../../res/css/colors.scss';
 
-.uw-ultrawidify-container-root {
-  .action {
+.action {
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
-  }
+}
 
-  .action .command-details {
+.action .command-details {
   height: 0px;
   max-height: 0px;
   transition: max-height 0.5s ease;
@@ -168,82 +167,81 @@ export default {
   top: 0;
   right: 0;
   width: 50%;
-  }
+}
 
-  .action:hover .command-details {
+.action:hover .command-details {
   height: auto;
   max-height: 200px;
   transition: max-height 0.5s ease;
-  }
+}
 
-  .command-details {
+.command-details {
   position: absolute;
   top: 0;
   right: 0;
   width: 50%;
-  }
+}
 
-  .action-name-cmd-container, .p1rem {
+.action-name-cmd-container, .p1rem {
   padding: 1rem;
-  }
+}
 
-  .cd-pad {
+.cd-pad {
   padding: 0.5em;
-  }
+}
 
-  .action-name {
+.action-name {
   font-size: 1.5rem;
   font-weight: 300;
   color: $text-normal;
   width: 50%;
-  }
+}
 
-  .action-name:hover, .action:hover .action-name {
+.action-name:hover, .action:hover .action-name {
   color: lighten($primary-color, 20%);
-  }
+}
 
-  .red {
+.red {
   color: $primary-color !important;
-  }
+}
 
-  .cmd-container {
+.cmd-container {
   width: 13.37rem;
-  }
+}
 
-  .cmdlist {
+.cmdlist {
   font-family: 'Overpass Mono';
   font-size: 0.9rem;
   color: $text-dim;
-  }
+}
 
-  .bold {
+.bold {
   font-weight: 600;
-  }
+}
 
-  .scope-scope {
+.scope-scope {
   width: 5rem;
   text-align: right !important;
   color: $secondary-color;
-  }
+}
 
-  .scope-visible {
+.scope-visible {
   width: 7rem;
-  }
+}
 
-  .scope-button-label {
+.scope-button-label {
   width: 16rem;
-  }
+}
 
-  .scope-row-label {
+.scope-row-label {
   color: $text-dark;
-  }
+}
 
-  .scope-row-highlight {
+.scope-row-highlight {
   color: $text-normal;
-  }
+}
 
-  .transparent {
+.transparent {
   opacity: 0;
-  }
 }
 </style>

src/csui/src/components/Button.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="button center-text"
+       :class="{'setting-selected': selected }"
+  >
+    <div class="label">
+      {{label}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fixedWidth: Boolean,
+    selected: Boolean,
+    label: String,
+    icon: String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: none;
+
+  align-items: center;
+
+  .icon {
+    margin-right: 8px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .label {
+    text-align: center;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+}
+</style>

src/csui/src/components/EditShortcutButton.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="flex flex-row">
+    <div
+      class="flex-grow button"
+      @click="editShortcut()"
+
+    >
+      <template v-if="!editing">
+        {{shortcutDisplay}}
+      </template>
+      <template v-else>
+        {{currentKeypress ?? 'Press a key'}}
+        <input ref="input"
+          class="hidden-input"
+          @keyup.capture="keyup($event)"
+          @keydown.capture="keydown($event)"
+          @input.prevent=""
+          @blur="editing = false;"
+        >
+      </template>
+    </div>
+    <div class="button" @click="$emit('shortcutChanged', null)">
+      <mdicon name="delete"></mdicon>
+    </div>
+  </div>
+</template>
+
+<script>
+import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser';
+
+export default {
+  props: {
+    shortcut: Object,
+  },
+  data() {
+    return {
+      currentKeypress: undefined,
+      currentKey: undefined,
+      editing: false,
+    }
+  },
+  computed: {
+    shortcutDisplay() {
+      if (!this.shortcut) {
+        return '(no shortcut)'
+      }
+      return KeyboardShortcutParser.parseShortcut(this.shortcut);
+    }
+  },
+  methods: {
+    editShortcut() {
+      this.editing = true;
+      this.currentKeypress = undefined;
+      this.currentKey = undefined;
+
+      // input doesn't exist now, but will exist on the next tick
+      this.$nextTick(()=> this.$refs.input.focus());
+    },
+    /**
+     * Updates currently pressed keypress for display
+     */
+    keydown(event) {
+      // event.repeat is set to 'true' when key is being held down, but not on
+      // first keydown. We don't need to process subsequent repeats of a keypress
+      // we already processed.
+      if (event.repeat) {
+        return;
+      }
+
+      const shortcut = KeyboardShortcutParser.generateShortcutFromKeypress(event);
+      const fixedShortcut = this.handleModifierKeypress(shortcut);
+
+      if (this.currentKey === undefined) {
+        this.currentKey = fixedShortcut;
+      } else {
+        // here's a fun fact. Keydown doesn't do modifier keys the way we want —
+        // notably, A-Z0-9 keys are returned without modifier state (all modifiers)
+        // are set to false in keydown events. That means we need to keep track of
+        // modifiers ourselves.
+        if (fixedShortcut.notModifier) {
+          this.currentKey.key = fixedShortcut.key;
+          this.currentKey.code = fixedShortcut.code;
+        } else {
+          this.currentKey = {
+            ...fixedShortcut,
+            key: this.currentKey.key,
+            code: this.currentKey.code
+          }
+        }
+      }
+
+      // update display
+      this.currentKeypress = KeyboardShortcutParser.parseShortcut(this.currentKey);
+    },
+    /**
+     * Emits shortcutChanged when shortcut is considered changed
+     */
+    keyup(event) {
+      const shortcut = KeyboardShortcutParser.generateShortcutFromKeypress(event);
+      const fixedShortcut = this.handleModifierKeypress(shortcut);
+
+      if (fixedShortcut.notModifier) {
+        this.editing = false;
+        this.$emit('shortcutChanged', this.currentKey);
+      } else {
+        // if none of the modifiers are pressed and if no other key is being held down,
+        // we need to reset label back to 'pls press key'
+        if (!fixedShortcut.altKey && !fixedShortcut.ctrlKey && !fixedShortcut.metaKey && !fixedShortcut.shiftKey && !fixedShortcut.code) {
+          this.currentKeypress = undefined;
+          this.currentKey = undefined;
+        } else {
+          this.currentKey = shortcut;
+          this.currentKeypress = KeyboardShortcutParser.parseShortcut(this.currentKey);
+        }
+      }
+    },
+
+    /**
+     * Handles current keypress if event.keyCode is a modifier key.
+     * Returns true if current event was a modifier key, false if
+     * if was a regular A-Z 0-9 key.
+     */
+    handleModifierKeypress(event) {
+      const modifierPressed = event.type === 'keydown';
+
+      switch (event.code) {
+          case 'ShiftLeft':
+          case 'ShiftRight':
+            return {
+              ...event,
+              key: '…',
+              code: null,
+              shiftKey: modifierPressed
+            }
+          case 'ControlLeft':
+          case 'ControlRight':
+            return {
+              ...event,
+              key: '…',
+              code: null,
+              controlKey: modifierPressed
+            };
+          case 'MetaLeft':
+          case 'MetaRight':
+            return {
+              ...event,
+              key: '…',
+              code: null,
+              metaKey: modifierPressed
+            };
+          case 'AltLeft':
+          case 'AltRight':
+            return {
+              ...event,
+              key: '…',
+              code: null,
+              altKey: modifierPressed
+            };
+        }
+
+        return {
+          ...event,
+          notModifier: true,
+        }
+    }
+
+  }
+}
+
+
+
+
+</script>
+
+<style lang="scss" src="../res-common/common.scss" scoped></style>
+<style lang="scss" scoped>
+@import "../res-common/variables";
+
+.center-text {
+  text-align: center;
+}
+.dark {
+  opacity: 50%;
+}
+
+.hidden-input {
+  position: absolute;
+  z-index: -9999;
+  opacity: 0;
+}
+</style>

src/csui/src/components/GhettoContextMenu.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="context-container" @mouseleave="hideContextMenu()">
+    <GhettoContextMenuItem
+      class="activator uw-clickable"
+      :css="{
+        'expand-left': alignment === 'left',
+        'expand-right': alignment === 'right',
+      }"
+      @click="showContextMenu()"
+      @mouseenter="showContextMenu()"
+    >
+      <slot name="activator"></slot>
+    </GhettoContextMenuItem>
+    <div
+      v-if="contextMenuVisible"
+      class="context-menu uw-clickable"
+      :class="{
+        'menu-left': alignment === 'left',
+        'menu-right': alignment === 'right'
+      }"
+      @mouseleave="hideContextMenu()"
+    >
+      <slot></slot>
+    </div>
+  </div>
+
+</template>
+<script>
+import GhettoContextMenuItem from './GhettoContextMenuItem.vue';
+
+export default {
+  components: {
+    GhettoContextMenuItem,
+  },
+  props: {
+    alignment: String,
+  },
+  data() {
+    return {
+      contextMenuVisible: false,
+      contextMenuHideTimeout: undefined,
+    }
+  },
+  methods: {
+    showContextMenu() {
+      this.contextMenuVisible = true;
+    },
+    hideContextMenu() {
+      this.contextMenuHideTimeout = setTimeout( () => {
+        this.contextMenuVisible = false;
+      }, 50);
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.context-container {
+  position: relative;
+}
+.context-menu-wrapper {
+  position: relative;
+}
+.context-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  min-width: 5rem;
+
+  top: 50%;
+  transform: translateY(-50%);
+}
+.menu-left {
+  right: 100%;
+}
+.menu-right {
+  left: 100%;
+}
+</style>
+<style lang="scss">
+.activator {
+  position: relative;
+  padding: 1rem 1.6rem;
+
+  font-size: .95rem;
+  padding: 1rem 1.6rem;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px) saturate(120%);
+
+  white-space: nowrap;
+  &:hover {
+    background-color: rgba(255, 128, 64, 0.5);
+  }
+
+  &.expand-left {
+    padding-left: 2.2rem;
+  }
+  &.expand-right {
+    padding-right: 2.2rem;
+  }
+
+  &.expand-left::before,
+  &.expand-right::after {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.88rem;
+  }
+
+  &.expand-left::before {
+    content: '⮜';
+    left: 0.5rem;
+  }
+  &.expand-right::after {
+    content: '⮞';
+    right: 0.5rem;
+  }
+}
+</style>

src/csui/src/components/GhettoContextMenuItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="flex flex-col flex-center center-text item"
+    :class="{
+      'can-hover': !disableHover,
+      ...(css ? css : {}),
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    shortcut: String,
+    childAlignment: String,
+    css: Object,
+    disableHover: Boolean,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  font-size: .95rem;
+  font-family: 'Overpass';
+  padding: 1rem 1.6rem;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px) saturate(120%);
+
+  white-space: nowrap;
+
+  &.can-hover:hover {
+    background-color: rgba(0,0,0,0.8);
+    border-bottom: 1px solid #fa6;
+  }
+
+  display: flex;
+  flex-direction: column;
+}
+
+
+</style>

src/csui/src/components/GhettoContextMenuOption.vue

@@ -0,0 +1,26 @@
+<template>
+<div>
+  <GhettoContextMenuItem>
+    <template v-if="label">
+      {{label}} {{shortcut ? `(${shortcut})` : ''}}
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </GhettoContextMenuItem>
+  </div>
+</template>
+
+<script>
+import GhettoContextMenuItem from './GhettoContextMenuItem.vue';
+
+export default {
+  components: {
+    GhettoContextMenuItem,
+  },
+  props: {
+    label: String,
+    shortcut: String,
+  }
+}
+</script>

src/csui/src/components/JsonEditor/JsonArray.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column json-level-indent">
+  <div class="flex flex-col json-level-indent">
     <div class="flex flex-row" @click="expanded_internal = !expanded_internal">
       <div v-if="value_internal.key" class="item-key">
         "{{value_internal.key}}" <b>:</b>

src/csui/src/components/JsonEditor/JsonObject.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column json-level-indent">
+  <div class="flex flex-col json-level-indent">
     <div class="flex flex-row" @click="expanded_internal = !expanded_internal">
       <div class="item-key-line">
         <template v-if="label">

src/csui/src/components/JsonEditor/json.scss

@@ -0,0 +1,23 @@
+.json-level-indent {
+  padding-left: 2em !important;
+  font-family: 'Overpass Mono', monospace;
+}
+.item-key {
+  color: rgb(255, 196, 148);
+}
+.item-key-boolean-false {
+  color: rgb(207, 149, 101)
+}
+
+.json-value-boolean-true {
+  color: rgb(150, 240, 198);
+}
+.json-value-boolean-false {
+  color: rgb(241, 21, 21);
+}
+.json-value-number {
+  color: rgb(121, 121, 238);
+}
+.json-value-string {
+  color:  rgb(226, 175, 7);
+}