Merge remote-tracking branch 'origin/stable' into stable

.nvmrc

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

.vscode/launch.json

@@ -4,19 +4,10 @@
   // 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 (firefox)",
+      "name": "Attach",
       "pathMappings": [
         {
           "url": "webpack:///ext",
@@ -25,7 +16,7 @@
       ]
     },
     {
-      "name": "Launch addon (firefox)",
+      "name": "Launch addon",
       "type": "firefox",
       "request": "launch",
       "port": 6000,
@@ -45,8 +36,5 @@
     "firefoxArgs": [
       "--start-debugger-server"
     ]
-  },
-  "chrome": {
-    "executable": "/usr/bin/google-chrome-stable --remote-debugging-port=9222",
   }
 }

.vscode/settings.json

@@ -9,14 +9,10 @@
     "blackbars",
     "blackframe",
     "canvas",
-    "clickthrough",
     "com",
     "comms",
     "csui",
-    "cycleable",
     "decycle",
-    "dinked",
-    "dinks",
     "disneyplus",
     "endregion",
     "equalish",
@@ -33,8 +29,6 @@
     "insta",
     "letterboxed",
     "manjaro",
-    "mdicon",
-    "mdijs",
     "minification",
     "mitigations",
     "nogrow",
@@ -47,7 +41,6 @@
     "reddit",
     "rescan",
     "resizer",
-    "resizers",
     "scrollbar",
     "shitiness",
     "smallcaps",
@@ -56,7 +49,6 @@
     "tablist",
     "tamius",
     "textbox",
-    "ultrawide",
     "ultrawidify",
     "unmark",
     "unmarking",

CHANGELOG.md

@@ -1,118 +1,22 @@
 # Changelog
 
-## v6.0 (current major)
 
-### v6.3.0
-* Added zoom segment to in-player UI and popup. 
-* Fixed keyboard zoom
-* Added additional zoom options. If you wonder how zoom options differ from crop, mess around and find out.
-* Subdomains now inherit same settings as their parent domain by default
-* Extension detects embedded content (but not always)
-* Added `www.youtube-nocookie.com` to "officially supported" list
 
-### v6.2.5
+### Plans for the future
 
-* Popup appearance changed — UI advertisement panel was moved to the popup header
+* Native builds for Chromium Edge
-* Fixed the bug where popup wouldn't be showing the correct settings
+* Settings page looks ugly af right now. Maybe fix it some time later
-* Fixed the bug where site settings would default to 'disabled', even if Extension default setting was not disabled.
+* other bug fixes
-* Added ability to export and import settings from file (ft. developer mode editor)
-* [dev goodies] Added debug overlay for aard
-* Fixed an issue where aspect ratio wouldn't get calculated correctly on youtube videos with native aspect ratios other than 16:9
-* Fixed an issue that would crash the extension if video element didn't have a player element associated with it
-* Fixed an issue where extension sometimes wouldn't work if video element was grafted/re-parented to a different element
 
-### v6.2.4
+## v7.0 (planned major)
-* [#264](https://github.com/tamius-han/ultrawidify/issues/264) — fixed issue with white screen that affected some youtube users. Special thanks to [SnowyOwlNugget](https://github.com/SnowyOwlNugget">SnowyOwlNugget), who instead of whining provided the necessary information.
+ * WebGL autodetection
-* Minor updates to the settings
-* Switching between full screen, theater, and normal player now correctly enables and disables the extension according to the settings.
-* Don't reset settings if updating conf patches fails.
-* Darken in-player UI backgrounds until Chrome fixes its backdrop-filter bug
 
-### v6.2.3
+## v6.0 (next major)
-* Fixed default persistent mode
 
-### v6.2.2
+ * in-player GUI
-* Fixed the issue where stretching was not applied if no cropping was used
+ * Fix UI logger
-* Added way to manually enable or disable color scheme detection, as a compromise between #259 and #264
 
-### v6.2.1
+## v5.x (current major)
-
-* Fixed offset issue on Netflix
-* Fixed issue with overlay iframe not being transparent on twitter
-
-### v6.2.0
-
-* Parts of automatic aspect ratio detection use WebGL now. This should result in improved performance. 
-* In-player UI now indicates whether a site is having a problem with automatic aspect ratio detection.
-* UI improvements
-
-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.
-
-### v6.1.0
-
-Was skipped due to how major the changes were.
-
-### v6.0.1
-
-* 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
 

CONTRIBUTING.md

@@ -1,39 +0,0 @@
-# Contributing to Ultrawidify
-
-Thank you for considering contributing to this project! We welcome contributions from the community and are grateful for your efforts.
-
-## How to Contribute
-
-0. Open an issue, where you introduce the feature you want to add or thing you want to fix
-1. Fork the repository.
-2. Create a new branch for your contribution.
-3. Write readable code
-4. Check that your additions do not break existing features
-5. Open a pull request
-
-## Code of Conduct
-
-Please follow the code of conduct:
-
-* don't be too much of an asshole
-* language policing my code comments is not a worthwhile contribution, and is considered spam. If you're here to do that, fuck off. I'm looking at you, ScamOSS and co.
-
-## Code Style
-
-- Use formatting consistent with the rest of the project
-- Write meaningful commit messages.
-- Include comments where necessary to explain complex logic.
-
-## Licensing & Contribution Agreement
-
-By submitting a contribution (e.g., via pull request), you agree to the following:
-
-- You grant the project maintainer(s) a non-exclusive, irrevocable, worldwide, royalty-free license to use, copy, modify, and distribute your contributions as part of the project.
-- You certify that your contributions are your original work and that you have the right to submit them.
-- You agree that your contributions are licensed under the same license as the rest of the project, unless explicitly stated otherwise.
-
-**TL;DR:** once your code is in the project, there's no take-backsies.
-
-## Questions?
-
-The discussion board is right over there, three tabs to the right.

DOCUMENTATION.MD

@@ -1,6 +0,0 @@
-# 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

@@ -1,32 +0,0 @@
-// 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!'"
-      }
-    }
-  }
-
-}

LICENSE.MD

@@ -1,35 +0,0 @@
-# License
-
-Copyright (c) 2025 @tamius-han
-
-The source code is provided on the "you can look, but you can't take" basis.
-
-## Permissions
-
-You are permitted to:
-
-* You can view the code
-* You can create forks and modify the code for personal use
-* You can build and run modified versions of this project for personal use on your local machine
-* Push modifications to your personal github fork
-
-## Restrictions
-
-You may NOT:
-
-* Distribute this project or any modified versions outside of your personal Github fork
-* Publish or distribute compiled binaries, builds, or packages of this project or any derivative work
-* Use the code in commercial products, services, or other public-facing deployments.
-* Sub-license, sell, or otherwise make the software or derivatives available to third parties.
-
-## Contributions
-
-By submitting a pull request or other contribution, you agree that:
-
-- You grant the project maintainer(s) a non-exclusive, irrevocable, worldwide, royalty-free license to use, copy, modify, and distribute your contributions as part of the project.
-- You certify that your contributions are your original work and that you have the right to submit them.
-- You agree that your contributions are licensed under the same license as the rest of the project, unless explicitly stated otherwise.
-
-## Disclaimer
-
-This software is provided "as is", without warranty of any kind, express or implied. Use at your own risk.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.3.0",
+  "version": "5.1.0",
   "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,47 +16,44 @@
     "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: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": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
-    "dev-ff": "rm -rf ./dist-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-chrome": "rm -rf ./dist-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",
-    "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 ./node_modules; npm ci",
-    "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": "npm run dev",
-    "start:windows": "npm run dev:windows"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@mdi/font": "^6.5.95",
+    "@types/chrome": "0.0.129",
-    "@mdi/js": "^6.4.95",
+    "@types/core-js": "^2.5.3",
-    "@types/resize-observer-browser": "^0.1.6",
+    "@types/es6-promise": "^3.3.0",
-    "concurrently": "^5.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",
     "fs-extra": "^7.0.1",
-    "gl-matrix": "^3.4.3",
     "json-cyclic": "0.0.3",
     "lodash": "^4.17.21",
-    "mdi-vue": "^3.0.11",
+    "typescript": "^4.2.3",
-    "typescript": "^4.4.4",
+    "vue": "^3.0.0-beta.1",
-    "vanilla-jsoneditor": "^3.3.0",
+    "vuex": "^4.0.0-alpha.1",
-    "vue": "^3.2.21",
+    "vuex-webextensions": "^1.3.0",
-    "vue-style-loader": "^4.1.3",
+    "webextension-polyfill-ts": "^0.24.0"
-    "vuex": "^4.0.2",
-    "vuex-webextensions": "^1.3.3",
-    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-    "@types/chrome": "0.0.240",
+    "@babel/preset-env": "^7.12.13",
-    "@types/core-js": "^2.5.5",
+    "@types/lodash": "^4.14.168",
-    "@types/es6-promise": "^3.3.0",
+    "@types/node": "^14.14.25",
-    "@types/firefox": "0.0.31",
+    "@vue/compiler-sfc": "^3.0.3",
-    "@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.3",
+    "babel-loader": "^8.2.2",
     "babel-preset-es2020": "^1.0.2",
     "copy-webpack-plugin": "^4.5.3",
     "cross-env": "^5.2.0",
@@ -65,13 +62,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.3.0",
+    "ts-loader": "^8.0.16",
     "vue-cli-plugin-vue-next": "~0.1.4",
-    "vue-loader": "^16.8.2",
+    "vue-loader": "^16.0.0",
     "web-ext-types": "^2.3.0",
-    "webpack": "^4.46.0",
+    "webextension-polyfill": "^0.6.0",
+    "webpack": "^4.44.0",
     "webpack-chrome-extension-reloader": "^0.8.3",
     "webpack-cli": "^3.3.12",
     "webpack-shell-plugin": "^0.5.0"

scripts/remove-evals.js

@@ -5,7 +5,8 @@ const fs = require('fs');
 
 const BUNDLE_DIR = path.join(__dirname, `../dist-${process.env.BROWSER === 'firefox' ? 'ff' : process.env.BROWSER}`);
 const bundles = [
-  'csui/csui-popup.js',
+  'popup/popup.js',
+  'options/options.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/ActionAlt.vue

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

src/common/components/Button.vue

@@ -0,0 +1,17 @@
+<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/JsonArray.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="flex flex-column 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> 
+        <span v-if="!expanded_internal"><b> [</b> ... <b>]</b>,</span>
+        <template v-else><b>[</b></template>
+      </div>
+    </div>
+    <div v-for="(row, key) of value_internal.value"
+         :key="key"
+    >
+      <JsonArray v-if="Array.isArray(row)"
+                  :value="row"
+                  :ignoreKeys="ignoreKeys"
+                  @change="changeItem(rowKey, $event)"
+      >
+      </JsonArray>
+      <JsonObject v-else-if="typeof row === 'object' && row !== null"
+                  :value="row"
+                  :label="rowKey"
+                  :ignoreKeys="ignoreKeys"
+                  @change="changeItem(rowKey, $event)"
+      >
+      </JsonObject>
+      <JsonElement v-else
+                  :value="row"
+                  :label="rowKey"
+                  @change="changeItem(rowKey, $event)"
+      >
+      </JsonElement>
+    </div>
+    <div v-if="expanded_internal"><b>],</b></div>
+  </div>
+</template>
+
+<script>
+import JsonObject from './JsonObject';
+import JsonElement from './JsonElement';
+
+export default {
+  name: 'JsonArray',
+  props: [
+    'value',
+    'expanded',
+    'ignoreKeys', // this prop is passthrough for JsonArray
+  ],
+  components: {
+    JsonObject,
+    JsonElement,
+  },
+  data() {
+    return {
+      value_internal: undefined,
+      expanded_internal: true,
+    }
+  },
+  created() {
+    this.value_internal = this.value;
+  },
+  watch: {
+    value: function(val) {
+      this.value_internal = val;
+    },
+    expanded: function(val) {
+      if (val !== undefined && val !== null) {
+        this.expanded_internal = !!val;
+      }
+    }
+  },
+  methods: {
+    changeItem(key, value) {
+      this.value_internal[key] = value;
+      this.$emit('change', this.value_internal);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped src="./json.scss">
+</style>
+<style lang="scss" scoped src="../../../res/css/flex.scss">
+</style>

src/common/components/JsonEditor/JsonElement.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="flex flex-row json-level-indent">
+    <div>
+      <b>
+        <span v-if="label" class="item-key" 
+                           :class="{'item-key-boolean-false': typeof value_internal === 'boolean' && !value_internal}"
+        >
+          "{{label}}"
+        </span>
+        :&nbsp;
+      </b>
+    </div>
+    <div v-if="typeof value_internal === 'boolean'"
+         :class="{'json-value-boolean-true': value_internal, 'json-value-boolean-false': !value_internal}"
+         @click="toggleBoolean"
+    >
+      <template v-if="value_internal">true</template>
+      <template v-else>false</template>
+    </div>
+    <div v-else
+        class="flex flex-row inline-edit"
+        :class="{
+          'json-value-number': typeof value_internal === 'number',
+          'json-value-string': typeof value_internal === 'string'
+        }"
+    >
+      <template v-if="typeof value_internal === 'string'">
+        "<div ref="element-edit-area"
+              contenteditable="true"
+              @keydown.enter="changeValue"
+        >
+          {{value_internal}}
+        </div>"
+      </template>
+      <template v-else>
+        <div ref="element-edit-area"
+              contenteditable="true"
+              @keydown.enter="changeValue"
+        >
+          {{value_internal}}
+        </div>
+      </template>,
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'json-element',
+  props: [
+    'value',
+    'label',
+  ],
+  data() {
+    return {
+      value_internal: undefined,
+      editing: false,
+    }
+  },
+  created() {
+    this.value_internal = this.value;
+  },
+  watch: {
+    value: function(val) {
+      this.value_internal = val;
+    }
+  },
+  methods: {
+    toggleBoolean() {
+      this.value_internal = !this.value_internal;
+      this.$emit('change', this.value_internal);
+    },
+    changeValue() {
+      this.$refs['element-edit-area'].blur();
+      const newValue = this.$refs['element-edit-area'].textContent.replace(/\n/g, '');
+      if (isNaN(newValue)) {
+        this.value_internal = newValue;
+        this.$emit('change', newValue);
+      } else {
+        this.value_internal = +newValue;
+        this.$emit('change', +newValue);
+      }
+      this.editing = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped src="./json.scss">
+</style>

src/common/components/JsonEditor/JsonObject.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-column json-level-indent">
+    <div class="flex flex-row" @click="expanded_internal = !expanded_internal">
+      <div class="item-key-line">
+        <template v-if="label">
+          <b>
+            <span class="item-key">"{{label}}"</span>
+          :
+          </b> 
+        </template>
+        <span v-if="!expanded_internal"><b> {</b> ... <b>}</b>,</span>
+        <template v-else><b>{</b></template>
+      </div>
+    </div>
+    <template v-if="expanded_internal">
+      <div v-for="(row, rowKey) of value_internal"
+          :key="rowKey"
+      >
+        <template v-if="(ignoreKeys || {})[rowKey] !== true">
+          <JsonArray v-if="Array.isArray(row)"
+                    :value="row"
+                    :ignoreKeys="(ignoreKeys || {})[rowKey]"
+                    @change="changeItem(rowKey, $event)"
+          >
+          </JsonArray>
+          <JsonObject v-else-if="typeof row === 'object' && row !== null"
+                      :value="row"
+                      :label="rowKey"
+                      :ignoreKeys="(ignoreKeys || {})[rowKey]"
+                      @change="changeItem(rowKey, $event)"
+          >
+          </JsonObject>
+          <JsonElement v-else
+                      :value="row"
+                      :label="rowKey"
+                      @change="changeItem(rowKey, $event)"
+          >
+          </JsonElement>
+        </template>
+      </div>
+      <div><b>},</b></div>
+    </template>
+  </div>
+</template>
+
+<script>
+import JsonArray from './JsonArray';
+import JsonElement from './JsonElement';
+
+export default {
+  name: 'JsonObject',
+  props: [
+    'value',
+    'label',
+    'expanded',
+    'ignoreKeys',
+  ],
+  components: {
+    JsonArray,
+    JsonElement,
+  },
+  data() {
+    return {
+      value_internal: undefined,
+      expanded_internal: true,
+    }
+  },
+  created() {
+    this.value_internal = this.value;
+  },
+  watch: {
+    value: function(val) {
+      this.value_internal = val;
+    },
+    expanded: function(val) {
+      if (val !== undefined && val !== null) {
+        this.expanded_internal = !!val;
+      }
+    }
+  },
+  methods: {
+    changeItem(key, value) {
+      this.value_internal[key] = value;
+      this.$emit('change', this.value_internal);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped src="./json.scss">
+</style>

src/common/components/JsonEditor/json.scss

@@ -0,0 +1,25 @@
+.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

@@ -0,0 +1,55 @@
+<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/components/QuerySelectorSetting.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-column">
     <div v-if="!editing && !adding" class="flex flex-row">
       <div class="">
         <b>Query selector:</b> {{qs.string}}<br/>
         <b>Additional CSS:</b> {{qs.css || 'no style rules'}}
       </div>
-      <div class="flex flex-col flex-nogrow">
+      <div class="flex flex-column flex-nogrow">
         <a @click="editing = true">Edit</a>
         <a @click="$emit('delete')">Delete</a>
       </div>
     </div>
     <div v-else class="flex flex-row">
-      <div class="flex flex-col">
+      <div class="flex flex-column">
         <div class="flex flex-row">
           <div class="flex label-secondary form-label">
             Query selector:

src/common/components/ShortcutButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col flex-center">
+  <div class="flex flex-column flex-center">
     <div class="flex flex-self-center">
       {{label}}
     </div>
@@ -21,10 +21,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.center-text {
+.uw-ultrawidify-container-root {
-  text-align: center;
+  .center-text {
-}
+    text-align: center;
-.dark {
+  }
-  opacity: 50%;
+  .dark {
+    opacity: 50%;
+  }
 }
 </style>

src/common/enums/AspectRatioType.enum.ts

@@ -1,13 +1,11 @@
 enum AspectRatioType {
-  Cycle = -2,
+  Initial = -1,    // page default
-  Initial = -1,        // page default
+  Reset = 0,       // reset to initial
-  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
-  FitWidth = 2,        // legacy/dynamic = fit to width
+  FitHeight = 3,   // legacy/dynamic = fit to height
-  FitHeight = 3,       // legacy/dynamic = fit to height
+  Fixed = 4,       // pre-determined aspect ratio
-  Fixed = 4,           // pre-determined aspect ratio
+  Manual = 5,      // ratio achieved by zooming in/zooming out
-  Manual = 5,          // ratio achieved by zooming in/zooming out
-  AutomaticUpdate = 6, // set by Aard
 }
 
 export default AspectRatioType;

src/common/enums/VideoAlignmentType.enum.ts

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

src/common/interfaces/ArInterface.ts

@@ -1,13 +0,0 @@
-import AspectRatioType from '../enums/AspectRatioType.enum';
-
-export enum ArVariant {
-  Crop = undefined,
-  Zoom = 1
-}
-
-export interface Ar {
-  type: AspectRatioType,
-  ratio?: number,
-  variant?: ArVariant,
-  offset?: number,
-}

src/common/interfaces/SettingsInterface.ts

@@ -6,222 +6,155 @@ import ExtensionMode from '../enums/ExtensionMode.enum'
 import StretchType from '../enums/StretchType.enum'
 import VideoAlignmentType from '../enums/VideoAlignmentType.enum'
 
-export enum ExtensionEnvironment {
-  Normal = 'normal',
-  Theater = 'theater',
-  Fullscreen = 'fullscreen',
-}
-
-export interface DevUiConfig {
-  aardDebugOverlay: {
-    showOnStartup: boolean,
-    showDetectionDetails: boolean,
-  }
-}
-
-export interface KeyboardShortcutInterface {
-  key?: string,
-  code?: string,
-  ctrlKey?: boolean,
-  metaKey?: boolean,
-  altKey?: boolean,
-  shiftKey?: boolean,
-  onKeyUp?: boolean,
-  onKeyDown?: boolean,
-  onMouseMove?: boolean,
-}
-
 interface ActionScopeInterface {
   show: boolean,
   label?: string,   // example override, takes precedence over default label
-  shortcut?: KeyboardShortcutInterface[],
+  shortcut?: {
-}
+    key?: string,
-
+    code?: string,
-interface RestrictionsSettings {
+    ctrlKey?: boolean,
-  disableOnSmallPlayers?: boolean;    // Whether ultrawidify should disable itself when the player is small
+    metaKey?: boolean,
-  minAllowedWidth?: number;           // if player is less than this many px wide, ultrawidify will disable itself
+    altKey?: boolean, 
-  minAllowedHeight?: number;          // if player is less than this many px tall, ultrawidify will disable itself
+    shiftKey?: boolean,
-  onlyAllowInFullscreen?: boolean;    // if enabled, ultrawidify will be disabled when not in full screen regardless of what previous two options say
+    onKeyUp?: boolean,
-  onlyAllowAutodetectionInFullScreen?: boolean;  // if enabled, autodetection will only start once in full screen
+    onKeyDown?: boolean,
-}
+    onMouseMove?: boolean,
-
+  }[],
-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';
-
-  earlyStopOptions: {
-    stopAfterFirstDetection: boolean;
-    stopAfterTimeout: boolean;
-    stopTimeout: number;
-  },
-
-
-  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.
-  allowedArVariance: number,  // amount by which old ar can differ from the new (1 = 100%)
-  timers: {                   // autodetection frequency
-    playing: number,            // while playing
-    playingReduced: number,     // while video/player element has insufficient size
-    paused: number,             // while paused
-    error: number,              // after error
-    minimumTimeout: number,
-    tickrate: number,          // 1 tick every this many milliseconds
-  },
-  autoDisable: {            // settings for automatically disabling the extension
-    maxExecutionTime: number, // if execution time of main autodetect loop exceeds this many milliseconds,
-                            // we disable it.
-    consecutiveTimeoutCount: number,  // we only do it if it happens this many consecutive times
-
-    // FOR FUTURE USE
-    consecutiveArResets: number       // if aspect ratio reverts immediately after AR change is applied, we disable everything
-  },
-  canvasDimensions: {
-    blackframeCanvas: {   // smaller than sample canvas, blackframe canvas is used to recon for black frames
-                          // it's not used to detect aspect ratio by itself, so it can be tiny af
-      width: number,
-      height: number,
-    },
-    sampleCanvas: {   // size of image sample for detecting aspect ratio. Bigger size means more accurate results,
-                          // at the expense of performance
-      width: number,
-      height: number,
-    },
-  },
-
-  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,
-  },
-
-  // 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: number,             // 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,  //
-    singleSideConfirmationThreshold: number,    // we need this much edges (out of all samples, not just edges) in order
-                                           // to confirm an edge in case there's no edges on top or bottom (other
-                                          // than logo, of course)
-    logoThreshold: number,     // if edge candidate sits with count greater than this*all_samples, it can't be logo
-                               // or watermark.
-    edgeTolerancePx?: number,          // we check for black edge violation this far from detection point
-    edgeTolerancePercent?: number,  // we check for black edge detection this % of height from detection point. unused
-    middleIgnoredArea: number,      // we ignore this % of canvas height towards edges while detecting aspect ratios
-    minColsForSearch: number,       // if we hit the edge of blackbars for all but this many columns (%-wise), we don't
-                                    // continue with search. It's pointless, because black edge is higher/lower than we
-                                    // are now. (NOTE: keep this less than 1 in case we implement logo detection)
-    edgeMismatchTolerancePx: number,// corners and center are considered equal if they differ by at most this many px
-  },
-  pillarTest: {
-    ignoreThinPillarsPx: number, // ignore pillars that are less than this many pixels thick.
-    allowMisaligned: number   // left and right edge can vary this much (%)
-  },
-  textLineTest: {
-    nonTextPulse: number,     // if a single continuous pulse has this many non-black pixels, we aren't dealing
-                            // with text. This value is relative to canvas width (%)
-    pulsesToConfirm: number,    // this is a threshold to confirm we're seeing text.
-    pulsesToConfirmIfHalfBlack: number, // this is the threshold to confirm we're seeing text if longest black pulse
-                                   // is over 50% of the canvas width
-    testRowOffset: number     // we test this % of height from detected edge
-  }
-}
-
-interface DevSettings {
-  loadFromSnapshot: boolean,
 }
 
 interface SettingsInterface {
-  _updateFlags?: {
+  arDetect: {
-    requireReload?: SettingsReloadFlags,
+    disabledReason: string,     // if automatic aspect ratio has been disabled, show reason
-    forSite?: string
+    allowedMisaligned: number,  // top and bottom letterbox thickness can differ by this much. 
-  }
+                                // Any more and we don't adjust ar.
-  dev: DevSettings,
+    allowedArVariance: number,  // amount by which old ar can differ from the new (1 = 100%)
+    timers: {                   // autodetection frequency
+      playing: number,            // while playing
+      paused: number,             // while paused
+      error: number,              // after error
+      minimumTimeout: number,
+      tickrate: number,          // 1 tick every this many milliseconds
+    },
+    autoDisable: {            // settings for automatically disabling the extension
+      maxExecutionTime: number, // if execution time of main autodetect loop exceeds this many milliseconds,
+                              // we disable it.
+      consecutiveTimeoutCount: number,  // we only do it if it happens this many consecutive times
 
-  arDetect: AardSettings,
+      // FOR FUTURE USE
-
+      consecutiveArResets: number       // if aspect ratio reverts immediately after AR change is applied, we disable everything
-  ui: {
+    },
-    inPlayer: {
+    canvasDimensions: {
-      enabled: boolean,                        // Deprecated — moved to site settings
+      blackframeCanvas: {   // smaller than sample canvas, blackframe canvas is used to recon for black frames
-      enabledFullscreenOnly: boolean,          // Deprecated — moved to site settings
+                            // it's not used to detect aspect ratio by itself, so it can be tiny af
-      popupAlignment: 'left' | 'right',
+        width: number,
-      minEnabledWidth: number,                 // don't show UI if player is narrower than % of screen width
+        height: number,
-      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
+      sampleCanvas: {   // size of image sample for detecting aspect ratio. Bigger size means more accurate results,
-      triggerZoneDimensions: {                 // how large the trigger zone is (relative to player size)
+                            // at the expense of performance
-        width: number
+        width: number,
         height: number,
-        offsetX: number,                       // fed to translateX(offsetX + '%'). Valid range [-100,   0]
-        offsetY: number                        // fed to translateY(offsetY + '%'). Valid range [-100, 100]
       },
     },
-    devMode?: boolean,
-    dev: DevUiConfig,
-  }
 
-  restrictions?: RestrictionsSettings;
+    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1] 
-
+    blackframe: {
-  crop: {
+      sufficientColorVariance: number,  // calculate difference between average intensity and pixel, for every pixel for every color
-    default: any;
+                                      // component. Average intensity is normalized to where 0 is black and 1 is biggest value for
+                                      // that component. If sum of differences between normalized average intensity and normalized
+                                      // component varies more than this % between color components, we can afford to use less strict
+                                      // cumulative threshold.
+      cumulativeThresholdLax: number,    
+      cumulativeThresholdStrict: number,// if we add values of all pixels together and get more than this, the frame is bright enough.
+                                 // (note: blackframe is 16x9 px -> 144px total. cumulative threshold can be reached fast)
+      blackPixelsCondition: number, // How much pixels must be black (1 all, 0 none) before we consider frame as black. Takes
+                                 // precedence over cumulative threshold: if blackPixelsCondition is met, the frame is dark
+                                 // regardless of whether cumulative threshold has been reached.
+    },
+    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.
+      threshold: number,          // if pixel is darker than the sum of black level and this value, we count it as black
+                              // on 0-255. Needs to be fairly high (8 might not cut it) due to compression
+                              // artifacts in the video itself
+      frameThreshold: number,      // threshold, but when doing blackframe test
+      imageThreshold: number,     // in order to detect pixel as "not black", the pixel must be brighter than
+                              // the sum of black level, threshold and this value.
+      gradientThreshold: number,   // When trying to determine thickness of the black bars, we take 2 values: position of
+                              // the last pixel that's darker than our threshold, and position of the first pixel that's
+                              // brighter than our image threshold. If positions are more than this many pixels apart,
+                              // we assume we aren't looking at letterbox and thus don't correct the aspect ratio.
+      gradientSampleSize: number, // How far do we look to find the gradient
+      maxGradient: number,         // if two neighboring pixels in gradientSampleSize differ by more than this, then we aren't
+                              // looking at a gradient
+      gradientNegativeTreshold: number,
+      gradientMaxSD: number,    // reserved for future use
+      antiGradientMode: AntiGradientMode
+    },
+    variableBlackbarThresholdOptions: {    // In case of poor bitrate videos, jpeg artifacts may cause us issues
+      // FOR FUTURE USE
+      enabled: boolean,                      // allow increasing blackbar threshold
+      disableArDetectOnMax: boolean,         // disable autodetection when threshold goes over max blackbar threshold
+      maxBlackbarThreshold: number,            // max threshold (don't increase past this)
+      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
+    },
+    sampling: {
+      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
+    },
+    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)
+      enabled: boolean,
+      ignoreEdgeMargin: number, // we ignore anything that pokes over the black line this close to the edge
+                              // (relative to width of the sample)
+      imageTestThreshold: number, // when testing for image, this much pixels must be over blackbarThreshold
+      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
+    },
+    edgeDetection: {
+      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,  // 
+      singleSideConfirmationThreshold: number,    // we need this much edges (out of all samples, not just edges) in order
+                                             // to confirm an edge in case there's no edges on top or bottom (other
+                                            // than logo, of course)
+      logoThreshold: number,     // if edge candidate sits with count greater than this*all_samples, it can't be logo
+                              // or watermark.
+      edgeTolerancePx?: number,          // we check for black edge violation this far from detection point
+      edgeTolerancePercent?: number,  // we check for black edge detection this % of height from detection point. unused
+      middleIgnoredArea: number,      // we ignore this % of canvas height towards edges while detecting aspect ratios
+      minColsForSearch: number,       // if we hit the edge of blackbars for all but this many columns (%-wise), we don't
+                                   // continue with search. It's pointless, because black edge is higher/lower than we
+                                   // are now. (NOTE: keep this less than 1 in case we implement logo detection)
+    },
+    pillarTest: {
+      ignoreThinPillarsPx: number, // ignore pillars that are less than this many pixels thick. 
+      allowMisaligned: number   // left and right edge can vary this much (%)
+    },
+    textLineTest: {
+      nonTextPulse: number,     // if a single continuous pulse has this many non-black pixels, we aren't dealing 
+                              // with text. This value is relative to canvas width (%)
+      pulsesToConfirm: number,    // this is a threshold to confirm we're seeing text.
+      pulsesToConfirmIfHalfBlack: number, // this is the threshold to confirm we're seeing text if longest black pulse
+                                     // is over 50% of the canvas width
+      testRowOffset: number     // we test this % of height from detected edge
+    }
   },
-  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
@@ -229,7 +162,10 @@ 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,
@@ -245,7 +181,6 @@ interface SettingsInterface {
   pan?: any,
   version?: string,
   preventReload?: boolean,
-  lastModified?: Date,
 
   // -----------------------------------------
   //           ::: MITIGATIONS :::
@@ -258,20 +193,38 @@ interface SettingsInterface {
       limit?: number,
     }
   }
-  // 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.
+  //             ::: ACTIONS :::
-  commands?: {
+  // -----------------------------------------
-    crop?: CommandInterface[],
+  // Nastavitve za ukaze. Zamenja stare nastavitve za bližnične tipke.
-    stretch?: CommandInterface[],
+  // 
-    zoom?: CommandInterface[],
+  // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov. 
-    pan?: CommandInterface[],
+  actions: {
-    internal?: CommandInterface[],
+    name?: string,    // name displayed in settings
-  },
+    label?: string,                     // name displayed in ui (can be overridden in scope/playerUi)
+    cmd?: {
+      action: string,
+      arg: any,
+      customArg?: any,
+      persistent?: boolean, // optional, false by default. If true, change doesn't take effect immediately.
+                         // Instead, this action saves stuff to settings
+    }[],
+    scopes?: {
+      global?: ActionScopeInterface,
+      site?: ActionScopeInterface,
+      page?: ActionScopeInterface
+    },
+    playerUi?: {
+      show: boolean,
+      path?: string,
+    },
+    userAdded?: boolean,
+  }[],
   whatsNewChecked: boolean,
-  newFeatureTracker: any,
   // -----------------------------------------
   //       ::: SITE CONFIGURATION :::
   // -----------------------------------------
+  // Nastavitve za posamezno stran
   // Config for a given page:
   // 
   // <hostname> : {
@@ -288,6 +241,7 @@ 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:
@@ -298,74 +252,42 @@ interface SettingsInterface {
   //    * disabled    — never allow
   // 
   sites: {
-    [x: string]: SiteSettingsInterface,
+    [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;
+    }
   }
 }
 
-export interface SiteSettingsInterface {
-  enable: ExtensionEnvironmentSettingsInterface;
-  enableAard: ExtensionEnvironmentSettingsInterface;
-  enableKeyboard: ExtensionEnvironmentSettingsInterface;
-  enableUI: ExtensionEnvironmentSettingsInterface;  // Lies! enableUI doesn't use 'theater' property (but uses the other two)
-
-  autocreated?: boolean;
-  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?: {type: StretchType, ratio?: number},
-    alignment?: {x: VideoAlignmentType, y: VideoAlignmentType},
-  }
-
-  cropModePersistence?: CropModePersistence;
-  stretchModePersistence?: CropModePersistence;
-  alignmentPersistence?: CropModePersistence;
-
-  playerAutoConfig?: PlayerAutoConfigInterface;
-
-  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 PlayerAutoConfigInterface {
-  modified: boolean;
-  initialIndex: number;
-  currentIndex: number;
-}
-
-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/interfaces/StretchInterface.ts

@@ -1,7 +0,0 @@
-import StretchType from '../enums/StretchType.enum';
-
-export interface Stretch {
-  type: StretchType,
-  ratio?: number,
-  limit?: number,
-}

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 choice, really.
+ * Easy chhoice, really.
  */
 export class ChromeShittinessMitigations {
   static port = null;

src/common/js/KeyboardShortcutParser.ts

@@ -21,20 +21,6 @@ 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,18 +1,3 @@
 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/common/mixins/ComputeActionsMixin.js

@@ -1,7 +1,7 @@
 export default {
   computed: {
     scopeActions: function() {
-      return this.settings?.active.actions?.filter(x => {
+      return this.settings.active.actions.filter(x => {
         if (! x.scopes) {
           console.error('This action does not have a scope.', x);
           return false;

src/csui/GlobalFrame.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="uw-clickthrough relative w-full h-full">
-    <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() {
-    /**
-     * 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

@@ -0,0 +1,461 @@
+<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

@@ -0,0 +1,216 @@
+<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

@@ -1,757 +0,0 @@
-<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-ui-area"
-    style="z-index: 1001"
-
-  >
-    <GhettoContextMenu
-      alignment="right" class="uw-menu"
-      @mouseenter="() => {preventContextMenuHide(); newFeatureViewUpdate('uw6.ui-popup')}"
-      @mouseleave="allowContextMenuHide()"
-    >
-      <template v-slot:activator>
-          Ultrawidify
-      </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="uw-clickable 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>
-                Zoom
-              </template>
-              <slot>
-                <GhettoContextMenuOption
-                  v-for="(command, index) of settings?.active.commands.zoom"
-                  :key="index"
-                  :label="command.label"
-                  :shortcut="getKeyboardShortcutLabel(command)"
-                  @click="execAction(command)"
-                >
-                </GhettoContextMenuOption>
-                <GhettoContextMenuItem
-                  :disableHover="true"
-                >
-                  <ZoomControl
-                    :settings="settings"
-                    :eventBus="eventBus"
-                  />
-                </GhettoContextMenuItem>
-              </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"
-                supportLevelStyle="font-size: 0.69rem !important;"
-                tooltipStyle="font-size: 0.8rem;"
-              >
-              </SupportLevelIndicator>
-              <div v-if="statusFlags.hasDrm" class="aard-blocked">
-                Autodetection blocked<br/>
-                by <a style="color: #fff" href="https://en.wikipedia.org/wiki/Digital_rights_management" target="_blank">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/>
-                (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 '@csui/src/PlayerUIWindow.vue';
-import GhettoContextMenu from '@csui/src/components/GhettoContextMenu.vue';
-import GhettoContextMenuItem from '@csui/src/components/GhettoContextMenuItem.vue';
-import GhettoContextMenuOption from '@csui/src/components/GhettoContextMenuOption.vue';
-import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
-import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import Settings from '@src/ext/lib/Settings';
-import EventBus from '@src/ext/lib/EventBus';
-import UIProbeMixin from '@csui/src/utils/UIProbeMixin';
-import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
-import CommsMixin from '@csui/src/utils/CommsMixin';
-import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue';
-import TriggerZoneEditor from '@csui/src/components/TriggerZoneEditor.vue';
-import ZoomControl from '@csui/src/popup/player-menu/ZoomControl.vue';
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
-import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
-
-export default {
-  components: {
-    PlayerUIWindow,
-    GhettoContextMenu,
-    GhettoContextMenuItem,
-    GhettoContextMenuOption,
-    AlignmentOptionsControlComponent,
-    SupportLevelIndicator,
-    TriggerZoneEditor,
-    ZoomControl,
-  },
-  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(),
-      logAggregator: null,
-      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.logAggregator = new LogAggregator('player-overlay');
-    this.logger = new ComponentLogger(this.logAggregator, 'PlayerOverlay.vue');
-
-    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.subscribeMulti(
-      {
-        '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;
-              }
-            }
-        },
-        '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);
-              }
-            }
-          }
-        },
-        '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 = {};
-          }
-        },
-        '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 = {};
-          }
-        },
-        'ui-trigger-zone-update': {
-          function: (data) => {
-            this.showTriggerZonePreview = data.previewZoneVisible;
-            // this.;
-          }
-        },
-        'start-trigger-zone-edit': {
-          function: () => {
-            this.triggerZoneEditorVisible = true;
-            this.uwWindowVisible = false;
-          }
-        },
-        'finish-trigger-zone-edit': {
-          function: () => {
-            this.triggerZoneEditorVisible = false;
-            this.showUwWindow('playerUiSettings');
-          }
-        },
-      },
-      this
-    );
-
-    this.sendToParentLowLevel('uwui-get-role', null);
-    this.sendToParentLowLevel('uwui-get-theme', null);
-
-    // console.log('player overlay created — get player dims:')
-    this.sendToParentLowLevel('uw-bus-tunnel', {
-      action: 'get-player-dimensions'
-    });
-  },
-
-  destroyed() {
-    this.eventBus.unsubscribeAll(this)
-  },
-  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) {
-      this.settings.active.newFeatureTracker[featureKey].show = 0;
-      this.settings.active.newFeatureTracker[featureKey].acknowledged = true;
-      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;
-
-      // refresh DRM status
-      this.eventBus.sendToTunnel('get-drm-status');
-    },
-    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.sendToTunnel('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.context,
-          borderCrossings: {
-            ...payload.context?.borderCrossings,
-            iframe: true
-          }
-        }
-      );
-    },
-
-    updateConfig() {
-      this.settings.init();
-      this.$nextTick( () => this.$forceUpdate());
-    }
-  }
-}
-</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="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/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;
-}
-
-.ui-warning {
-  position: absolute;
-  top: 0;
-  transform: translateY(-100%);
-
-  max-width: 16rem;
-  width: 16rem;
-
-  overflow: hidden;
-  overflow-wrap: break-word;
-
-  white-space: normal;
-  word-break: break-word;
-  word-wrap: break-word;
-}
-
-
-.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;
-
-  font-size: 0.9rem;
-
-  // 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 {
-  font-size: 0.8rem;
-  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

@@ -0,0 +1,177 @@
+<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

@@ -1,596 +0,0 @@
-<template>
-  <div class="popup-panel" style="height: 100vh">
-    <!--
-      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"
-        style="height: 100vh"
-        class="popup flex flex-col no-overflow"
-        :class="{'popup-chrome': ! BrowserDetect?.firefox}"
-    >
-      <div class="flex flex-col w-full relative header"
-      >
-        <div class="flex flex-row w-full" style="height: 42px">
-          <h1 class="flex-grow">
-            <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
-          </h1>
-          <button
-            class="settings-header-button"
-            style="align-self: stretch"
-            @click="showInPlayerUi()"
-          >
-            Show settings window
-          </button>
-        </div>
-
-        <div class="flex flex-row w-full">
-          <div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row flex-grow items-center">
-            <div>site: {{site.host}}</div>
-            <SupportLevelIndicator
-              :siteSupportLevel="siteSupportLevel"
-            >
-            </SupportLevelIndicator>
-          </div>
-
-          <!-- Version info -->
-          <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
-            <label>Version:</label> <br/>
-            {{ settings.getExtensionVersion() }} (non-stable)
-          </div>
-          <div v-else class="version-info">
-            <label>Version:</label> <br/>
-            {{ settings.getExtensionVersion() }}
-          </div>
-        </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,
-              'highlight-tab': tab.highlight,
-            }"
-            @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 window-content" style="flex: 7 7; padding: 1rem;">
-          <template v-if="settings && siteSettings">
-            <PopupVideoSettings
-              v-if="selectedTab === 'videoSettings'"
-              :settings="settings"
-              :eventBus="eventBus"
-              :siteSettings="siteSettings"
-              :hosts="activeHosts"
-            ></PopupVideoSettings>
-            <BaseExtensionSettings
-              v-if="selectedTab === 'extensionSettings'"
-              :settings="settings"
-              :eventBus="eventBus"
-              :siteSettings="siteSettings"
-              :site="site.host"
-              :hosts="activeHosts"
-            >
-            </BaseExtensionSettings>
-            <ChangelogPanel
-              v-if="selectedTab === 'changelog'"
-              :settings="settings"
-            ></ChangelogPanel>
-            <AboutPanel
-              v-if="selectedTab === 'about'"
-            >
-            </AboutPanel>
-          </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 ChangelogPanel from './src/PlayerUiPanels/ChangelogPanel.vue'
-import PopupVideoSettings from './src/popup/panels/PopupVideoSettings.vue'
-import AboutPanel from '@csui/src/popup/panels/AboutPanel.vue'
-import Debug from '../ext/conf/Debug';
-import BrowserDetect from '../ext/conf/BrowserDetect';
-import CommsClient, {CommsOrigin} from '../ext/lib/comms/CommsClient';
-import Settings from '../ext/lib/Settings';
-import EventBus from '../ext/lib/EventBus';
-import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
-import SupportLevelIndicator from '@csui/src/components/SupportLevelIndicator.vue'
-import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
-import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
-
-export default {
-  components: {
-    Debug,
-    BrowserDetect,
-    PopupVideoSettings,
-    PlayerDetectionPanel,
-    BaseExtensionSettings,
-    SupportLevelIndicator,
-    ChangelogPanel,
-    AboutPanel
-  },
-  data () {
-    return {
-      comms: undefined,
-      eventBus: new EventBus(),
-      settings: {},
-      settingsInitialized: false,
-      narrowPopup: null,
-      sideMenuVisible: null,
-      logAggregator: undefined,
-      logger: undefined,
-      site: undefined,
-      siteSettings: undefined,
-      selectedTab: 'videoSettings',
-      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' },
-        {id: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
-        {id: 'about', label: 'About', icon: 'information-outline'},
-      ],
-    }
-  },
-  computed: {
-    siteSupportLevel() {
-      return (this.site && this.siteSettings) ? this.siteSettings.data.type || 'no-support' : 'waiting';
-    }
-  },
-  mounted() {
-    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
-    this.requestSite();
-  },
-  async created() {
-    try {
-      this.logAggregator = new LogAggregator('🔵ext-popup🔵');
-      this.logger = new ComponentLogger(this.logAggregator, 'Popup');
-
-      this.settings = new Settings({afterSettingsSaved: () => this.updateConfig(), logAggregator: this.logAggregator});
-      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',
-        {
-          source: this,
-          function: (config, context) => {
-            console.log('set-current-site | this.site:', this.site, 'config.site:', config.site);
-
-            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.loadHostnames();
-            this.loadFrames();
-          }
-        },
-      );
-      this.eventBus.subscribe(
-        'open-popup-settings',
-        {
-          source: this,
-          function: (config) => {
-            this.selectTab(config.tab)
-          }
-        }
-      )
-
-      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);
-      }
-    } catch (e) {
-      console.error('[Popup.vue::created()] An error happened:', e)
-    }
-  },
-  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;
-    }
-  },
-
-  methods: {
-    showInPlayerUi() {
-      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
-    },
-    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;
-    },
-    isDefaultFrame(frameId) {
-      return frameId === '__playing' || frameId === '__all';
-    },
-    loadHostnames() {
-      this.activeHosts = this.site.hostnames;
-    },
-    loadFrames() {
-      this.activeFrames = [{
-        host: this.site.host,
-        isIFrame: false,  // not used tho. Maybe one day
-      }];
-
-      for (const frame in this.site.frames) {
-        if (!this.activeFrames.find(x => x.host === this.site.frames[frame].host)) {
-          this.activeFrames.push({
-            id: `${this.site.id}-${frame}`,
-            label: this.site.frames[frame].host,
-            host: this.site.frames[frame].host,
-            ...this.site.frames[frame],
-            ...this.settings.active.sites[this.site.frames[frame].host]
-          })
-        };
-      }
-    },
-    getRandomColor() {
-      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
-    },
-    updateConfig() {
-      this.settings.init();
-      this.$nextTick( () => this.$forceUpdate());
-    }
-  }
-}
-</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);
-  background-color: rgb(0,0,0);
-  color: #fff;
-  padding: 8px;
-
-  // display: flex;
-  // flex-direction: row;
-  // justify-content: space-between;
-
-  border-bottom: 1px dotted #fa6;
-
-
-  h1 {
-    font-size: 2rem;
-  }
-
-  .version-info {
-    text-align: right;
-    font-size: 0.8rem;
-    opacity: 0.8;
-    label {
-      opacity: 0.5;
-    }
-  }
-
-}
-
-.settings-header-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  padding: 0.5rem 2rem;
-  text-transform: lowercase;
-  font-variant: small-caps;
-
-  background-color: #000;
-  border: 1px solid #fa68;
-
-  color: #eee;
-}
-
-.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;
-      }
-
-      &.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;
-}
-
-.button {
-  border: 1px solid #222 !important;
-}
-
-h1 {
-  margin: 0; padding: 0; font-weight: 400; font-size:24px;
-}
-
-.window-content {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-</style>

src/csui/csui-global.html

@@ -1,16 +0,0 @@
-<!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

@@ -1,13 +0,0 @@
-import { createApp } from 'vue';
-import GlobalFrame from './GlobalFrame';
-import mdiVue from 'mdi-vue/v3';
-import * as mdijs from '@mdi/js';
-
-import './src/res-common/common.scss';
-
-// 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

@@ -1,13 +0,0 @@
-<!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

@@ -1,13 +0,0 @@
-<!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

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

src/csui/csui-popup.js

@@ -1,8 +0,0 @@
-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

@@ -1,13 +0,0 @@
-import { createApp } from 'vue';
-import PlayerOverlay from './PlayerOverlay';
-import mdiVue from 'mdi-vue/v3';
-import * as mdijs from '@mdi/js';
-
-import './src/res-common/common.scss';
-
-// 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/iframes/notification/Notification.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div>Ultrawidify</div>
-    <div class="flex flex-row">
-      <div v-if="notification.icon">
-        <mdicon :name="notification.icon"></mdicon>
-      </div>
-      <div class="flex flex-grow flex-col">
-        <div v-if="notification.title">{{notification.title}}</div>
-        <div v-if="notification.description">{{notification.description}}</div>
-      </div>
-    </div>
-    <div v-if="notification.actions" class="flex flex-row flex-end">
-      <button
-        v-for="(action, index) of notification.actions"
-        :key="index"
-      >
-        {{ action.label }}
-      </button>
-    </div>
-    <div>Notification countdown</div>
-  </div>
-</template>
-
-<script>
-
-
-export default {
-  components: {
-  },
-  mixins: [
-  ],
-  data() {
-    return {
-      notification: {}
-    };
-  },
-  computed: {
-
-  },
-  watch: {
-  },
-  async created() {
-    this.logger = new Logger();
-
-    window.addEventListener('message', this.handleMessage);
-    this.sendToParentLowLevel('init-complete', {});
-  },
-  destroyed() {
-    window.removeEventListener('message', this.handleMessage);
-  },
-  methods: {
-    /**
-     * 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 'notification-data':
-          this.notification = event.data.payload;
-      }
-    },
-
-    /**
-     * Sends message to parent _without_ using event bus.
-     */
-    sendToParentLowLevel(action, payload, lowLevelExtras = {}) {
-      window.parent.postMessage(
-        {
-          action, payload, ...lowLevelExtras
-        },
-        '*'
-      );
-    },
-  }
-}
-</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>
-
-</style>

src/csui/iframes/notification/csui-notification.html

@@ -1,12 +0,0 @@
-<!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-notification.js"></script>
-</body>
-</html>

src/csui/iframes/notification/csui-notification.js

@@ -1,11 +0,0 @@
-import { createApp } from 'vue';
-import Notification from './Notification';
-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(Notification)
-  .use(mdiVue, {icons: mdijs})
-  .mount('#app');

src/csui/res/css/common.scss

@@ -1,449 +0,0 @@
-@import "colors.scss";
-@import "fonts.scss";
-@import "flex.scss";
-// @import "~/@mdi/font/css/materialdesignicons.css";
-
-// @import "form.scss";
-
-* {
-  box-sizing: border-box;
-}
-
-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;
-}
-
-.main-window::before {
-  content: ' ';
-  color: #000;
-  position: absolute;
-  left: -0.5rem;
-  top: -0.5rem;
-  z-index: -1;
-  width: calc(100% + 1rem);
-  height: calc(100% + 1rem);
-  background-image: url('/csui/res/img/uw-window-bg-texture-3.webp');
-  opacity: 0.75;
-}
-
-/* STANDARD WIDTHS AND HEIGHTS */
-.w100, .w-full {
-  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;
-}
-
-::-webkit-scrollbar {
-  width: 5px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: rgba(#fa6, 0.5);
-  border-radius: 20px;
-  border: transparent;
-}
-
-
-
-/* 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 {
-  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,
-.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;;
-
-  background-color: rgba(11,11,11,0.75);
-
-
-  padding: 0.5rem 2rem;
-  background-color: rgba(11, 11, 11, 0.5);
-  border: 1px solid transparent;
-  user-select: none !important;
-
-  &.primary {
-    background-color: #fa6;
-    color: #000;
-  }
-  &.danger {
-    background-color: #ff2211 !important;
-    color:#000;
-  }
-  &.disabled {
-    filter: saturate(0%);
-    pointer-events: 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-button {
-  color: $info-color;
-  border: 1px solid $info-color;
-}
-.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

@@ -1,57 +0,0 @@
-.flex {
-  display: flex;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-auto {
-  flex: 1 1 auto;
-}
-
-.flex-grow, .grow {
-  flex-grow: 1;
-}
-.flex-nogrow, .grow-0 {
-  flex-grow: 0;
-}
-.flex-shrink, .shrink {
-  flex-shrink: 1;
-}
-.flex-noshrink, .shrink-0 {
-  flex-shrink: 0;
-}
-
-.items-center {
-  align-items: center;
-}
-.items-baseline {
-  align-items: baseline;
-}
-
-.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/uwui-base.scss

@@ -1,35 +0,0 @@
-@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

@@ -1,437 +0,0 @@
-<template>
-  <div
-    class="popup-panel flex flex-col uw-clickable h-full main-window relative"
-  >
-    <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"
-        >
-          <div
-            v-if="!tab.hidden"
-            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>
-      <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"
-            :siteSettings="siteSettings"
-            :eventBus="eventBus"
-          >
-          </PlayerUiSettings>
-          <BaseExtensionSettings
-            v-if="selectedTab === 'extensionSettings'"
-            :settings="settings"
-            :siteSettings="siteSettings"
-            :site="site"
-            :enableSettingsEditor="true"
-          ></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 '@csui/src/PlayerUiPanels/AboutPanel.vue'
-import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
-import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
-import SupportLevelIndicator from '@csui/src/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: 'changelog', label: 'What\'s new', icon: 'alert-decagram' },
-        {id: 'about', label: 'About', icon: 'information-outline'},
-        {id: 'debugging', label: 'Debugging', icon: 'bug-outline', hidden: true},
-      ],
-      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() {
-    this.settings.listenAfterChange(this.setDebugTabVisibility);
-
-    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',
-      {
-        source: this,
-        function: () => {
-          if (this.inPlayer) {
-            return; // show-ui is only intended for global overlay
-          }
-        },
-      }
-    )
-    this.setDebugTabVisibility();
-  },
-  destroyed() {
-    this.settings.removeListenerAfterChange(this.setDebugTabVisibility);
-    this.eventBus.unsubscribeAll(this);
-  },
-  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);
-    },
-    setDebugTabVisibility() {
-      const debugTab = this.tabs.find( x => x.id === 'debugging');
-      if (debugTab) {
-        debugTab.hidden = !this.settings.active.ui.devMode;
-      }
-    }
-  }
-}
-</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: 6rem;
-
-      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

@@ -1,122 +0,0 @@
-<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>
-          Please 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

@@ -1,179 +0,0 @@
-<template>
-  <div class="alignment-box" :class="{large: large}">
-    <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',
-    'large',
-  ],
-  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;
-
-  &.large {
-    max-width: 15rem;
-
-    .col {
-      width: 4rem;
-      height: 4rem;
-    }
-  }
-
-  .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

@@ -1,546 +0,0 @@
-<template>
-  <div class="flex flex-col tab-root">
-    <div class="flex flex-row flex-wrap">
-
-      <!-- AARD performance metrics -->
-      <div>
-        <div class="flex flex-row">
-          <h1>Automatic Aspect Ratio Detection</h1>
-        </div>
-        <div class="aard-settings-group">
-
-          <!-- the last time i tried to comment out this block, it didn't work properly — v-if="false" it is -->
-          <div v-if="false">
-            <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>
-
-
-          <div class="settings-segment">
-            <!-- <h2>Basic settings</h2> -->
-
-            <!-- <div class="field">
-              <div class="label">
-                Stop autodetection after first detection:
-              </div>
-              <div class="">
-                <input type="checkbox" v-model="settings.active.arDetect.earlyStopOptions.stopAfterFirstDetection" />
-              </div>
-            </div>
-            <div class="field">
-              <div class="label">
-                Stop detection after a period of time:
-              </div>
-              <div class="">
-                <input type="checkbox" v-model="settings.active.arDetect.earlyStopOptions.stopAfterTimeout" />
-              </div>
-            </div>
-            <div class="field">
-              <div class="label">
-                Stop detection after:
-              </div>
-              <div class="input">
-                <input type="input" v-model="settings.active.arDetect.earlyStopOptions.stopTimeout" />
-                <div class="unit">seconds</div>
-              </div>
-            </div> -->
-
-            <div class="field">
-              <div class="label">Autodetection frequency (time between samples)</div>
-              <div class="range-input">
-                <input
-                  type="range"
-                  :value="Math.log(settings.active.arDetect.timers.playing)"
-                  @change="setArCheckFrequency($event.target.value)"
-                  min="2.3"
-                  max="9.3"
-                  step="0.01"
-                />
-                <input
-                  v-model="settings.active.arDetect.timers.playing"
-                  @change="setArCheckFrequency($event.target.value)"
-                  class="input"
-                  type="text"
-                >
-                <div class="unit">ms</div>
-              </div>
-            </div>
-
-            <div class="field">
-              <div class="label">Frame extraction canvas type:</div>
-              <div class="select">
-                <select v-model="settings.active.arDetect.aardType" @change="settings.saveWithoutReload">
-                  <option value="auto">Automatic</option>
-                  <option value="webgl">WebGL only</option>
-                  <option value="legacy">Legacy / fallback</option>
-                </select>
-              </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="hint">
-                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 (% of total height).
-              </div>
-            </div>
-          </div>
-
-          <div v-if="settings.active.ui.devMode" class="settings-segment">
-            <p>
-              <b>Debug options</b>
-            </p>
-            <div class="flex flex-row">
-              <div>
-                <div>
-                  <button @click="eventBus.sendToTunnel('aard-enable-debug', true)">Show debug overlay</button>
-                </div>
-                <div>
-                  <div class="label">Show debug overlay on startup</div>
-                  <input
-                    type="checkbox"
-                    v-model="settings.active.ui.dev.aardDebugOverlay.showOnStartup"
-                    @change="settings.saveWithoutReload"
-                  >
-                </div>
-              </div>
-              <div>
-                <JsonEditor
-                  v-model="settingsJson"
-                >
-                </JsonEditor>
-                <button @click="saveDebugUiSettings">Save debug UI settings</button>
-              </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';
-import JsonEditor from '@csui/src/components/JsonEditor';
-
-export default {
-  components: {
-    ShortcutButton,
-    EditShortcutButton,
-    Button,
-    AlignmentOptionsControlComponent,
-    JsonEditor
-  },
-  mixins: [
-  ],
-  props: [
-    'settings',
-    'frame',
-    'eventBus',
-    'site'
-  ],
-  data() {
-    return {
-      exec: null,
-      performanceData: {},
-      graphRefreshInterval: undefined,
-      settingsJson: {},
-    }
-  },
-  computed: {
-  },
-  created() {
-    this.eventBus.subscribe(
-      'uw-config-broadcast',
-      {
-        source: this,
-        function: (config) => this.handleConfigBroadcast(config)
-      }
-    );
-  },
-  mounted() {
-    this.eventBus.sendToTunnel('get-aard-timing');
-    this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500);
-    this.resetSettingsEditor();
-  },
-  destroyed() {
-    this.eventBus.unsubscribeAll(this);
-    clearInterval(this.graphRefreshInterval);
-  },
-  methods: {
-    async openOptionsPage() {
-      BrowserDetect.runtime.openOptionsPage();
-    },
-    setArCheckFrequency(event) {
-      this.settings.active.arDetect.timers.playing = Math.floor(Math.pow(Math.E, event));
-    },
-    refreshGraph() {
-       this.eventBus.sendToTunnel('get-aard-timing');
-    },
-    handleConfigBroadcast(data) {
-      if (data.type === 'aard-performance-data') {
-        this.performanceData = data.performanceData;
-        this.$nextTick( () => this.$forceUpdate() );
-      }
-    },
-    resetSettingsEditor() {
-      this.settingsJson = JSON.parse(JSON.stringify(this.settings?.active.ui.dev.aardDebugOverlay ?? {}));
-    },
-    saveDebugUiSettings() {
-      this.settings.active.ui.dev.aardDebugOverlay = JSON.parse(JSON.stringify(this.settingsJson));
-      this.settings.saveWithoutReload();
-    }
-  },
-
-}
-</script>
-
-<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
-
-<style lang="scss" scoped module>
-@import '../res-common/variables';
-
-// .aard-settings-group {
-//   max-width: 69rem;
-// }
-
-.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

@@ -1,315 +0,0 @@
-<template>
-  <div class="flex flex-row w-full h-full">
-    <div class="flex flex-col w-full">
-
-      <!-- TAB ROW -->
-      <div class="flex flex-row">
-        <div
-          class="tab"
-          :class="{'active': tab === 'siteSettings'}"
-          @click="setTab('siteSettings')"
-        >
-          Current site<br/>
-          <small>{{ site }}</small>
-        </div>
-        <div
-          v-if="hosts"
-          class="tab"
-          :class="{'active': tab === 'embeddedSites'}"
-          @click="setTab(tab = 'embeddedSites')"
-        >
-          Embedded content ({{hosts?.length}} {{hosts?.length === 1 ? 'site' : 'sites'}})
-        </div>
-        <div
-          class="tab"
-          :class="{'active': tab === 'otherSites'}"
-          @click="setTab(tab = 'otherSites')"
-        >
-          Defaults & other sites
-        </div>
-      </div>
-
-      <template v-if="tab === 'siteSettings' && siteSettings">
-        <SiteExtensionSettings
-          v-if="settings"
-          :settings="settings"
-          :siteSettings="siteSettings"
-          :isDefaultConfiguration="false"
-        ></SiteExtensionSettings>
-      </template>
-
-      <template v-if="hosts && tab === 'embeddedSites' && globalSettings">
-        <FrameSiteSettings
-          v-if="settings"
-          :hosts="hosts"
-          :settings="settings"
-        ></FrameSiteSettings>
-      </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><small>Settings import must be done from in-player UI.</small></p>
-        <div class="flex flex-row w-full">
-          <UploadJsonFileButton
-            class="flex-grow"
-            @importedJson="handleImportedSettings"
-            @error="handleSettingsImportError"
-          >
-            Import settings
-          </UploadJsonFileButton>
-          <Popup
-            v-if="importSettingDialogConfig.visible"
-            title="Overwrite existing settings?"
-            message="Importing settings from a file will overwrite existing settings. Continue?"
-            confirmButtonText="Import settings"
-            cancelButtonText="Cancel"
-            @onConfirm="importSettingDialogConfig.confirm"
-            @onCancel="importSettingDialogConfig.reject"
-          >
-          </Popup>
-          <button class="flex-grow" @click="exportSettings()">Export settings</button>
-        </div>
-        <div></div>
-        <ConfirmButton
-          dialogType="danger"
-          @onConfirmed="resetSettings"
-        >
-          Reset settings
-        </ConfirmButton>
-
-        <div v-if="enableSettingsEditor" class="field">
-          <div class="label">Show developer options</div>
-          <input
-            type="checkbox"
-            v-model="settings.active.ui.devMode"
-            @change="settings.saveWithoutReload"
-          >
-        </div>
-      </div>
-    </div>
-    <div v-if="enableSettingsEditor && settings.active.ui.devMode" class="h-full grow">
-      <h2>Settings editor</h2>
-      <div class="flex flex-row w-full">
-        <div class="flex flex-row items-center">
-          <div>Enable save button:</div>
-          <input v-model="allowSettingsEditing" type="checkbox">
-        </div>
-        <div class="grow">
-        </div>
-        <div>
-          <div v-if="editorSaveFinished">Settings saved ...</div>
-          <button v-else
-            class="danger"
-            :class="{'disabled': !allowSettingsEditing}"
-            :disabled="!allowSettingsEditing"
-            @click="() => saveSettingsChanges()"
-          >
-            Save
-          </button>
-        </div>
-        <button @click="resetSettingsEditor">
-          Cancel
-        </button>
-
-      </div>
-      <div>
-        <JsonEditor
-          v-model="settingsJson"
-        >
-        </JsonEditor>
-      </div>
-
-      <h2>Settings snapshots</h2>
-      <div class="flex flex-col">
-        <div v-for="(snapshot, index) of settingsSnapshots" :key="snapshot.createdAt">
-          <small>{{new Date(snapshot.createdAt).toISOString()}}</small>
-          <div class="flex flex-row">
-            <div class="grow">
-              {{snapshot.name}}
-            </div>
-            <div v-if="settings.isAutomatic">(auto)</div>
-            <div v-if="settings.isAutomatic && settings.isProtected">(protected)</div>
-            <div v-if="settings.default">(default)</div>
-          </div>
-          <div>
-            <button @click="() => markDefaultSnapshot(index)"><template v-if="settings.isDefault">Revoke default</template><template v-else>Make default</template></button>
-            <button v-if="settings.isAutomatic" @click="() => toggleSnapshotProtection(index)">Toggle protection</button>
-            <button @click="() => deleteSnapshot(index)">Delete snapshot</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
-import FrameSiteSettings from './PanelComponents/ExtensionSettings/FrameSiteSettings.vue';
-import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
-import Popup from '@csui/src/components/Popup';
-import ConfirmButton from '@csui/src/components/ConfirmButton';
-import UploadJsonFileButton from '@csui/src/components/UploadJsonFileButton';
-import JsonEditor from '@csui/src/components/JsonEditor';
-
-
-
-export default {
-
-  components: {
-    SiteExtensionSettings,
-    OtherSiteSettings,
-    Popup,
-    ConfirmButton,
-    UploadJsonFileButton,
-    JsonEditor,
-    FrameSiteSettings,
-  },
-  mixins: [],
-  props: [
-    'settings',
-    'site',
-    'enableSettingsEditor',
-    'hosts',
-  ],
-  data() {
-    return {
-      tab: 'siteSettings',
-      importSettingDialogConfig: {visible: false},
-      allowSettingsEditing: false,
-      editorSaveFinished: false,
-      settingsJson: {},
-      settingsSnapshots: []
-    }
-  },
-  computed: {
-    globalSettings() {
-      return this.settings?.getSiteSettings('@global') ?? null;
-    },
-    siteSettings() {
-      if (this.site) {
-        return  this.settings?.getSiteSettings(this.site) ?? null;
-      }
-      return null;
-    },
-  },
-  mounted() {
-    this.resetSettingsEditor();
-    this.loadSettingsSnapshots();
-  },
-  methods: {
-    setTab(tab) {
-      this.tab = tab;
-    },
-
-    //#region settings management
-    /**
-     * Exports extension settings into a json file.
-     */
-    exportSettings() {
-      const settingBlob = new Blob(
-        [ JSON.stringify(this.settings.active, null, 2) ],
-        { type: "application/json"}
-      );
-      const url = window.URL.createObjectURL(settingBlob);
-
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = "ultrawidify-settings.json";
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    },
-
-    handleImportedSettings(newSettings) {
-      this.importSettingDialogConfig = {
-        visible: true,
-        confirm: () => {
-          this.settings.active = newSettings;
-          this.settings.saveWithoutReload();
-          this.importSettingDialogConfig = {visible: false};
-          this.resetSettingsEditor();
-        },
-        reject: () => {
-          this.importSettingDialogConfig = {visible: false};
-        }
-      }
-    },
-
-    handleSettingsImportError(error) {
-      console.error('Error importing settings:', error);
-    },
-
-    /**
-     * Resets settings to default
-     */
-    resetSettings() {
-      this.settings.active = JSON.parse(JSON.stringify(this.settings.default));
-      this.settings.saveWithoutReload();
-      this.resetSettingsEditor();
-    },
-
-    async saveSettingsChanges() {
-      if (this.allowSettingsEditing) {
-        const currentVersion = this.settings.active?.version;
-        this.settings.active = this.settingsJson;
-
-        if (currentVersion !== this.settingsJson.version) {
-          await this.settings.save({forcePreserveVersion: true});
-          return;
-        } else {
-          await this.settings.saveWithoutReload();
-        }
-
-        this.resetSettingsEditor();
-        this.editorSaveFinished = true;
-
-        setTimeout(() => {
-          this.editorSaveFinished = false;
-        }, 3000);
-      }
-    },
-
-    resetSettingsEditor() {
-      this.settingsJson = JSON.parse(JSON.stringify(this.settings?.active ?? {}));
-    },
-    //#endregion
-
-    //#region settings snapshot management
-    async loadSettingsSnapshots() {
-      this.settingsSnapshots = await this.settings.snapshotManager.listSnapshots();
-    },
-
-    async markDefaultSnapshot(index) {
-      await this.settings.snapshotManager.setDefaultSnapshot(index, !this.settingsSnapshots[index].isDefault);
-      await this.loadSettingsSnapshots();
-      this.settings.active.dev.loadFromSnapshot = this.settingsSnapshots[index].isDefault;
-      this.saveSettingsChanges();
-    },
-
-    async toggleSnapshotProtection(index) {
-      await this.settings.snapshotManager.setSnapshotAsProtected(index, !this.settingsSnapshots[index].isProtected);
-      await this.loadSettingsSnapshots();
-    },
-
-    async deleteSnapshot(index) {
-      await this.settings.snapshotManager.deleteSnapshot(index);
-      await this.loadSettingsSnapshots();
-    },
-  }
-  //#endregion
-}
-</script>
-
-<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="flex flex-col w-full h-full gap-2">
-    <div class="flex flex-row gap-8 bg-black flex-wrap w-full">
-      <div class="min-w-[400px] max-w-[520px] grow shrink">
-        <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.3.0</h2>
-        <ul>
-          <li>Automatic aspect ratio detection: do not apply negative aspect ratios</li>
-          <li>Keyboard zoom now works</li>
-          <li><code>www.youtube-nocookie.com</code> has been added to the "officially supported" list</li>
-          <li>Fixed the bug where UI would sometimes refuse to stay hidden</li>
-          <li>New experimental zoom options</li>
-          <li>Subdomains now inherit same settings as their parent domain by default</li>
-          <li>Extension attempts to detect embedded content.</li>
-        </ul>
-      </div>
-      <div style="width: 1rem; height: 0px;"></div>
-      <div class="min-w-[400px] max-w-[520px] grow shrink">
-        <h2>Report a problem</h2>
-        <p>
-          Please 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 extension version, whether you installed the extension from, and description of your problem.
-        </p>
-        <p>&nbsp;</p>
-        <p>&nbsp;</p>
-        <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>
-import BrowserDetect from '@src/ext/conf/BrowserDetect';
-
-export default({
-  props: [
-    'settings'
-  ],
-  data() {
-    return {
-      BrowserDetect: BrowserDetect,
-      // 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,
-    }
-  },
-  mounted() {
-    this.settings.active.whatsNewChecked = true;
-    this.settings.saveWithoutReload();
-  }
-});
-</script>
-<style lang="scss" scoped>
-.flex {
-  display: flex;
-}
-.flex-row {
-  flex-direction: row;
-}
-
-.grow {
-  flex-grow: 1;
-}
-
-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

@@ -1,103 +0,0 @@
-<template>
-  <div>
-
-    <div>
-      <h1>{{loggerPanel.title}}<small><br/>{{loggerPanel.subtitle}}</small></h1>
-
-      <div>Logger configuration:</div>
-
-      <JsonEditor
-        v-model="lastSettings"
-      ></JsonEditor>
-
-      <div class="flex flex-row flex-end">
-        <div class="button" @click="getLoggerSettings()">
-          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 { LogAggregator, BLANK_LOGGER_CONFIG } from '@src/ext/lib/logging/LogAggregator';
-import JsonEditor from '@csui/src/components/JsonEditor';
-
-export default {
-  components: {
-    JsonEditor
-  },
-  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.getLoggerSettings();
-  },
-  methods: {
-    loadDefaultConfig() {
-      this.lastSettings = JSON.parse(JSON.stringify(BLANK_LOGGER_CONFIG));
-    },
-    async getLoggerSettings() {
-      this.lastSettings = await LogAggregator.getConfig() || BLANK_LOGGER_CONFIG;
-    },
-    async saveLoggerSettings() {
-      console.log('Saving logger settings', this.lastSettings);
-      await LogAggregator.saveConfig({...this.lastSettings});
-      console.log('[ok] logger settings saved');
-    },
-    async startLogging(){
-      this.logStringified = undefined;
-      await LogAggregator.saveConfig({...this.lastSettings});
-      window.location.reload();
-    },
-  }
-}
-</script>

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

@@ -1,107 +0,0 @@
-<template>
-  <div class="">
-    <template v-if="!selectedSite">
-      <div style="margin: 1rem 0rem" class="w-full">
-        <div class="flex flex-row items-baseline">
-          <div style="margin-right: 1rem">Search for site:</div>
-          <div class="input flex-grow">
-            <input v-model="siteFilter" />
-          </div>
-        </div>
-      </div>
-      <div v-for="host of hosts" :key="host" @click="selectedSite = host" class="flex flex-col container pointer hoverable" style="margin-top: 4px; padding: 0.5rem 1rem;">
-        <SiteListItem
-          :host="host"
-          :settings="settings"
-        ></SiteListItem>
-      </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 === '@global' ? 'default settings' : selectedSite }}
-        </div>
-      </div>
-      <div>
-        <SiteExtensionSettings
-          v-if="selectedSiteSettings"
-          :settings="settings"
-          :siteSettings="selectedSiteSettings"
-          :isDefaultConfiguration="selectedSite === '@global'"
-        ></SiteExtensionSettings>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import SiteExtensionSettings from './SiteExtensionSettings.vue';
-import SiteListItem from './SiteListItem.vue';
-
-export default {
-  components: {
-    SiteExtensionSettings,
-    SiteListItem,
-  },
-  props: [
-    'settings',
-    'hosts',
-  ],
-  data() {
-    return {
-      selectedSite: null,
-      siteFilter: '',
-      filteredSites: []
-    }
-  },
-  computed: {
-    sites() {
-      if (!this.settings?.active?.sites) {
-        return [];
-      } else {
-        const sites = [];
-        for (const siteKey in this.settings.active.sites) {
-          if (!siteKey.startsWith('@') && (!this.siteFilter.trim() || siteKey.includes(this.siteFilter))) {
-            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: {
-
-  }
-}
-</script>
-
-<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
-<style lang="scss" scoped>
-.hoverable {
-  border: 1px solid #333;
-
-  &:hover {
-    border: 1px solid #fa6;
-    color: rgb(255, 231, 212);
-    background-color: rgba(#fa6, 0.125);
-  }
-}
-
-</style>

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

@@ -1,172 +0,0 @@
-<template>
-  <div class="">
-    <template v-if="!selectedSite">
-
-      <div class="flex flex-col container pointer hoverable" style="margin-top: 1rem; padding: 0.5rem 1rem;" @click="selectedSite = '@global'" >
-        <div class="flex flex-row">
-          <div class="flex-grow pointer">
-            <b style="color: #fa6">Default settings</b>
-            <!-- <span :style="getSiteTypeColor('@global')"> -->
-              <!-- (config: {{site.type ?? 'unknown'}}) -->
-            <!-- </span> -->
-          </div>
-          <div>Edit</div>
-        </div>
-        <div class="flex flex-row">
-          <small>
-            <span style="text-transform: uppercase; font-size: 0.9rem">Enable extension: <span style="font-size: 0.9rem;" :style="getSiteEnabledColor('@global', 'enable')">{{ getSiteEnabledModes('@global', 'enable') }}</span></span>&nbsp;<br/>
-            Autodetection: <span :style="getSiteEnabledColor('@global', 'enableAard')"><small>{{ getSiteEnabledModes('@global', 'enableAard') }}</small></span>;&nbsp;
-            Keyboard shortcuts: <span :style="getSiteEnabledColor('@global', 'enableKeyboard')"><small>{{ getSiteEnabledModes('@global', 'enableKeyboard') }}</small></span>;
-            In-player UI: <span :style="getSiteEnabledColor('@global', 'enableUI')"><small>{{ getSiteEnabledModes('@global', 'enableUI') }}</small></span>;
-          </small>
-        </div>
-      </div>
-
-      <div style="margin-top: 1rem; margin-bottom: 1rem;">
-        <div  class="info" style="float: none">
-          <b>NOTE:</b> Sites not on this list use default extension settings.
-        </div>
-      </div>
-      <div class="w-full text-center" style="margin-bottom: -1.25rem">
-        <b>Other sites</b>
-      </div>
-      <div style="margin: 1rem 0rem" class="w-full">
-        <div class="flex flex-row items-baseline">
-          <div style="margin-right: 1rem">Search for site:</div>
-          <div class="input flex-grow">
-            <input v-model="siteFilter" />
-          </div>
-        </div>
-      </div>
-      <div v-for="site of sites" :key="site.key" @click="selectedSite = site.key" class="flex flex-col container pointer hoverable" 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>
-            UI: <span :style="getSiteEnabledColor(site.key, 'enableUI')"><small>{{ getSiteEnabledModes(site.key, 'enableUI') }}</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 === '@global' ? 'default settings' : selectedSite }}
-        </div>
-      </div>
-      <div>
-        <SiteExtensionSettings
-          v-if="selectedSiteSettings"
-          :settings="settings"
-          :siteSettings="selectedSiteSettings"
-          :isDefaultConfiguration="selectedSite === '@global'"
-        ></SiteExtensionSettings>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
-import SiteExtensionSettings from './SiteExtensionSettings.vue';
-
-export default {
-  data() {
-    return {
-      selectedSite: null,
-      siteFilter: '',
-      filteredSites: []
-    }
-  },
-  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('@') && (!this.siteFilter.trim() || siteKey.includes(this.siteFilter))) {
-            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="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
-<style lang="scss" scoped>
-.hoverable {
-  border: 1px solid #333;
-
-  &:hover {
-    border: 1px solid #fa6;
-    color: rgb(255, 231, 212);
-    background-color: rgba(#fa6, 0.125);
-  }
-}
-
-</style>

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

@@ -1,607 +0,0 @@
-<template>
-  <div>
-    <!-- Enable extension -->
-    <div class="field">
-      <div class="label">
-        Enable <span class="color-emphasis">extension</span>
-        <span class="sub-label"><br/>under the following conditions:</span>
-      </div>
-      <div class="select">
-        <select
-          :value="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 by default
-            </option>
-          </template>
-          <template v-else>
-            <option value="default">
-              Use default ({{simpleDefaultSettings.enable}})
-            </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>
-
-    <!-- The rest of the menu is disabled when extension is disabled -->
-    <div :class="{disabled: simpleEffectiveSettings.enable === 'disabled' && !isDefaultConfiguration}">
-      <!-- Enable AARD -->
-      <div class="field">
-        <div class="label">
-          Enable <span class="color-emphasis">automatic aspect ratio detection</span>
-          <span class="sub-label"><br/>under the following conditions:</span>
-        </div>
-        <div class="select">
-          <select
-            :value="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 by default
-              </option>
-            </template>
-            <template v-else>
-              <option value="default">
-                Use default ({{simpleDefaultSettings.enableAard}})
-              </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 <span class="color-emphasis">keyboard shortcuts</span>
-          <span class="sub-label"><br/>under the following conditions:</span>
-        </div>
-        <div class="select">
-          <select
-            :value="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 by default
-              </option>
-            </template>
-            <template v-else>
-              <option value="default">
-                Use default ({{simpleDefaultSettings.enableKeyboard}})
-              </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 UI -->
-      <div class="field">
-        <div class="label">
-          Enable <span class="color-emphasis">in-player UI</span>
-          <span class="sub-label"><br/>under the following conditions:</span>
-        </div>
-        <div class="select">
-          <select
-            :value="simpleExtensionSettings.enableUI"
-            @click="setExtensionMode('enableUI', $event)"
-          >
-            <template v-if="isDefaultConfiguration">
-              <option value="disabled">
-                Disabled by default
-              </option>
-            </template>
-            <template v-else>
-              <option value="default">
-                Use default ({{simpleDefaultSettings.enableUI}})
-              </option>
-              <option value="disabled">
-                Never
-              </option>
-            </template>
-            <option value="fs">
-              Fullscreen only
-            </option>
-            <option value="theater">
-              Always where possible
-            </option>
-          </select>
-        </div>
-      </div>
-
-      <!-- Default crop -->
-      <div class="field">
-        <div class="label">Default crop:</div>
-        <div class="select">
-          <select
-            :value="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>
-      <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>
-
-      <!-- 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>
-  </div>
-</template>
-
-<script>
-import ExtensionMode from '@src/common/enums/ExtensionMode.enum';
-import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
-import CropModePersistence from '@src/common/enums/CropModePersistence.enum';
-
-export default {
-  data() {
-    return {
-      CropModePersistence: CropModePersistence,
-      ExtensionMode,
-      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'),
-        enableUI: this.compileSimpleSettings('enableUI')
-      }
-    },
-    simpleEffectiveSettings() {
-      return {
-        enable: this.compileSimpleSettings('enable', 'site-effective'),
-        enableAard: this.compileSimpleSettings('enableAard', 'site-effective'),
-        enableKeyboard: this.compileSimpleSettings('enableKeyboard', 'site-effective'),
-        enableUI: this.compileSimpleSettings('enableUI', 'site-effective')
-      }
-    },
-    simpleDefaultSettings() {
-      return {
-        enable: this.getDefaultOptionLabel('enable'),
-        enableAard: this.getDefaultOptionLabel('enableAard'),
-        enableKeyboard: this.getDefaultOptionLabel('enableKeyboard'),
-        enableUI: this.getDefaultOptionLabel('enableUI')
-      };
-    },
-    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 '??';
-    }
-  },
-  mounted() {
-    this.forceRefreshPage();
-  },
-  methods: {
-    /**
-     * Compiles our extension settings into more user-friendly options
-     */
-    compileSimpleSettings(component, getFor = 'site') {
-
-      let settingsData;
-      switch (getFor) {
-        case 'site':
-          settingsData = this.siteSettings?.raw;
-          break;
-        case 'site-effective':
-          settingsData = this.siteSettings?.data;
-          break;
-        case 'default':
-          settingsData = this.settings.active.sites['@global'];
-          break;
-      }
-
-      // console.log('getting data from:', settingsData);
-
-      try {
-        if (
-          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
-          && settingsData?.[component]?.theater    === ExtensionMode.Disabled
-          && settingsData?.[component]?.fullscreen === ExtensionMode.Disabled
-        ) {
-          return 'disabled';
-        }
-        if (
-          (  settingsData?.[component]?.normal     === ExtensionMode.Default || component === 'enableUI')
-          && settingsData?.[component]?.theater    === ExtensionMode.Default
-          && settingsData?.[component]?.fullscreen === ExtensionMode.Default
-        ) {
-          // console.log(
-          //   component, 'is set to default because:\n',
-          //   `\nsettingsData[${component}].normal: ${settingsData?.[component]?.normal} || component is enableUI?`, component,
-          //   `\nsettingsData[${component}].theater: ${settingsData?.[component]?.normal}`,
-          //   `\nsettingsData[${component}].fullscreen: ${settingsData?.[component]?.normal}`,
-
-          //   `\n\n(expected values:`, ExtensionMode.Default
-          // )
-          return 'default';
-        }
-        if (
-          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
-          && settingsData?.[component]?.theater    === ExtensionMode.Disabled
-          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
-        ) {
-          return 'fs';
-        }
-        if (
-          (  settingsData?.[component]?.normal     === ExtensionMode.Disabled  || component === 'enableUI')
-          && settingsData?.[component]?.theater    === ExtensionMode.Enabled
-          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
-        ) {
-          return 'theater';
-        }
-        if (
-          (  settingsData?.[component]?.normal     === ExtensionMode.Enabled || component === 'enableUI')
-          && settingsData?.[component]?.theater    === ExtensionMode.Enabled
-          && settingsData?.[component]?.fullscreen === ExtensionMode.Enabled
-        ) {
-          return 'enabled';
-        }
-
-        return 'complex';
-      } catch (e) {
-        return 'loading';
-      }
-    },
-
-    getDefaultOptionLabel(component) {
-      const componentValue = this.compileSimpleSettings(component, 'default');
-
-      if (componentValue === 'loading') {
-        return componentValue;
-      }
-      if (component === 'enableUI') {
-        switch (componentValue) {
-          case 'fs':
-            return 'fullscreen only';
-          case 'enabled':
-          case 'theater':
-            return 'where possible';
-          case 'disabled':
-            return 'disabled';
-        }
-      }
-      switch (componentValue) {
-        case 'fs':
-          return 'Fullscreen only';
-        case 'theater':
-          return 'theater & FS';
-        case 'enabled':
-          return 'always';
-        case 'disabled':
-          return 'disabled';
-        case 'default':
-          return 'complex'
-      }
-    },
-
-    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, {reload: false});
-
-      // we also need to force re-compute all watchers, otherwise UI will lag behind
-      // actual state of settings until reload
-      this.forceRefreshPage();
-    },
-    forceRefreshPage() {
-      this._computedWatchers?.simpleExtensionSettings?.run();
-      this._computedWatchers?.simpleDefaultSettings?.run();
-      this._computedWatchers?.siteDefaultCrop?.run();
-      this._computedWatchers?.siteDefaultStretch?.run();
-      this._computedWatchers?.siteDefaultAlignment?.run();
-      this._computedWatchers?.siteDefaultCropPersistence?.run();
-      this._computedWatchers?.defaultPersistanceLabel?.run();
-
-      this.$nextTick( () => this.$forceUpdate());
-    },
-
-    setExtensionMode(component, event) {
-      const option = event.target.value;
-
-      console.log('SET EXTENSION MODE — OPTIONS:', option);
-
-      if (option === 'complex') {
-        return;
-      }
-
-      if (component === 'enable' && !this.isDefaultConfiguration) {
-        this.setExtensionMode('enableAard', event);
-        this.setExtensionMode('enableKeyboard', event);
-
-        // in enableUI, 'enabled' is unused and 'theater' uses its place
-        if (option === 'enabled') {
-          this.setExtensionMode('enableUI', {target: {value: 'theater'}});
-        } else {
-          this.setExtensionMode('enableUI', event);
-        }
-      }
-
-      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="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
-<style scoped>
-.button-hover:hover {
-  color: #fa6;
-}
-</style>

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

@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <div class="flex flex-row">
-      <div class="flex-grow pointer">
-        <b>{{ host }}</b>
-        <span :style="getSiteTypeColor(siteSettings?.data?.type)">
-          (config: {{siteSettings?.data?.type ?? 'unknown'}})
-        </span>
-      </div>
-      <div>Edit</div>
-    </div>
-    <div v-if="this.siteSettings?.usesSettingsFor">
-      <div v-if="this.siteSettings.usesSettingsFor === '@global'">Uses default settings</div>
-      <div v-else>Uses settings for: {{this.siteSettings.usesSettingsFor}}</div>
-    </div>
-    <div class="flex flex-row">
-      <small>
-        Enabled: <span :style="getSiteEnabledColor(host, 'enable')"><small>{{ getSiteEnabledModes(host, 'enable') }}</small></span>;&nbsp;
-        Aard <span :style="getSiteEnabledColor(host, 'enableAard')"><small>{{ getSiteEnabledModes(host, 'enableAard') }}</small></span>;&nbsp;
-        kbd: <span :style="getSiteEnabledColor(host, 'enableKeyboard')"><small>{{ getSiteEnabledModes(host, 'enableKeyboard') }}</small></span>
-        UI: <span :style="getSiteEnabledColor(host, 'enableUI')"><small>{{ getSiteEnabledModes(host, 'enableUI') }}</small></span>
-      </small>
-    </div>
-  </div>
-</template>
-<script>
-import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
-
-export default {
-  data() {
-    return {
-      siteSettings: undefined,
-      supportType: undefined
-    }
-  },
-  props: [
-    'settings',
-    'host',
-  ],
-  created() {
-    this.siteSettings = this.settings.getSiteSettings(this.host);
-  },
-  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.siteSettings?.normal === ExtensionMode.Enabled) {
-        return 'always';
-      }
-      if (this.siteSettings?.data[component]?.theater === ExtensionMode.Enabled) {
-        return 'T + FS';
-      }
-      if (this.siteSettings?.data[component]?.fullscreen === ExtensionMode.Enabled) {
-        return 'fullscreen';
-      }
-      return 'disabled';
-    }
-  }
-}
-</script>

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

@@ -1,250 +0,0 @@
-<template>
-  <div class="sub-panel-content flex flex-row flex-wrap">
-
-    <ShortcutButton
-      v-for="(command, index) of settings?.active.commands.crop"
-      class="flex button"
-      :class="{
-        active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command),
-        'b3-compact': compact,
-        b3: !compact
-      }"
-      :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>
-        <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 class="field">
-          <div class="label">
-            Label:
-          </div>
-          <div class="input">
-            <input v-model="editModeOptions.crop.selected.label">
-          </div>
-        </div>
-        <div class="hint">
-          Label for the button. You can make it say something other than ratio.
-        </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>
-      <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 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 && allowSettingSiteDefault" 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 '@csui/src/components/ShortcutButton.vue';
-import EditShortcutButton from '@csui/src/components/EditShortcutButton';
-import EditModeMixin from '@csui/src/utils/EditModeMixin';
-import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
-import CommsMixin from '@csui/src/utils/CommsMixin';
-import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
-
-export default {
-  components: {
-    ShortcutButton,
-    EditShortcutButton,
-  },
-  mixins: [
-    // ComputeActionsMixin,
-    EditModeMixin,
-    KeyboardShortcutParserMixin,
-    CommsMixin
-  ],
-  data() {
-    return {
-      AspectRatioType: AspectRatioType,
-
-      // TODO: this should be mixin?
-      resizerConfig: {
-        crop: null,
-        stretch: null,
-        zoom: null,
-        pan: null
-      }
-    }
-  },
-  props: [
-    'settings',      // required for buttons and actions, which are global
-    'siteSettings',
-    'eventBus',
-    'isEditing',
-    'allowSettingSiteDefault',
-    'compact',
-  ],
-  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="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

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

@@ -1,254 +0,0 @@
-<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),
-        'b3-compact': compact,
-        b3: !compact
-      }"
-      :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>
-        <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>
-      </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>
-        <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 class="field">
-          <div class="label">
-            Label:
-          </div>
-          <div class="input">
-            <input v-model="editModeOptions.stretch.selected.label">
-          </div>
-        </div>
-        <div class="hint">
-          Label for the button. You can make it say something other than ratio.
-        </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>
-      <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 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 && allowSettingSiteDefault" 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',
-    'allowSettingSiteDefault',
-    'compact',
-  ],
-  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="@csui/res/css/flex.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>

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

@@ -1,313 +0,0 @@
-<template>
-  <div class="flex flex-col">
-
-    <div class="sub-panel-content flex flex-row flex-wrap">
-
-      <ShortcutButton
-        v-for="(command, index) of settings?.active.commands.zoom"
-        class="flex button"
-        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command),
-          'b3-compact': compact,
-          b3: !compact
-        }"
-        :key="index"
-        :label="command.label"
-        :shortcut="getKeyboardShortcutLabel(command)"
-        @click="editMode ? editAction(command, index, 'zoom') : 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-zoom', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
-          null,
-          'zoom'
-        )"
-      ></ShortcutButton>
-    </div>
-
-    <template v-if="isEditing">
-      <div v-if="editMode && editModeOptions?.zoom?.selected" class="sub-panel-content">
-        <div class="edit-action-area-header">
-          <span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.zoom?.selected?.label}}</b>&nbsp;
-          <template v-if="editModeOptions?.zoom?.selectedIndex === null && editModeOptions?.zoom?.selected?.label !== 'New aspect ratio'">(New ratio)</template>
-        </div>
-        <div class="edit-action-area">
-          <!-- Some options are only shown for type 4 (fixed) zooms -->
-          <template v-if="editModeOptions?.zoom?.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.zoom.selected.arguments.ratio"
-                  @blur="editModeOptions.zoom.selected.label === 'New aspect ratio' ? editModeOptions.zoom.selected.label = editModeOptions.zoom.selected.arguments.ratio : null"
-                >
-              </div>
-            </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 class="field">
-              <div class="label">
-                Label:
-              </div>
-              <div class="input">
-                <input v-model="editModeOptions.zoom.selected.label">
-              </div>
-            </div>
-            <div class="hint">
-              Label for the button. You can make it say something other than ratio.
-            </div>
-          </template>
-
-          <!-- editing keyboard shortcuts is always allowed -->
-          <div class="field">
-            <div class="label">Shortcut:</div>
-            <div class="">
-              <EditShortcutButton
-                :shortcut="editModeOptions?.zoom?.selected?.shortcut"
-                @shortcutChanged="updateSelectedShortcut($event, 'zoom')"
-              >
-              </EditShortcutButton>
-            </div>
-          </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 class="flex flex-row flex-end">
-            <div
-              v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed && editModeOptions?.zoom?.selectedIndex !== null"
-              class="button"
-              @click="deleteAction('zoom')"
-            >
-              <mdicon name="delete"></mdicon> Delete
-            </div>
-            <div class="flex-grow"></div>
-            <div class="button" @click="cancelEdit('zoom')">Cancel</div>
-            <div class="button" @click="saveShortcut('zoom')">
-              <mdicon name="floppy"></mdicon>
-              &nbsp;
-              <template v-if="editModeOptions?.zoom?.selectedIndex === null">Add</template>
-              <template v-else>Save</template>
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <!--
-        min, max and value need to be implemented in js as this slider
-        should use logarithmic scale
-      -->
-      <div class="flex flex-row w-full" style="margin-top: 0.66rem">
-        <div style="position:relative;" class="grow">
-          <template v-if="zoomAspectRatioLocked">
-            <div class="slider-label">
-              Zoom: {{getZoomForDisplay('x')}}
-            </div>
-            <input id="_input_zoom_slider"
-                    class="input-slider"
-                    type="range"
-                    step="any"
-                    min="-1"
-                    max="3"
-                    :value="zoom.x"
-                    @input="changeZoom($event.target.value)"
-                    />
-          </template>
-          <template v-else>
-            <div class="slider-label">Horizontal zoom: {{getZoomForDisplay('x')}}</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 class="slider-label">Vertical zoom: {{getZoomForDisplay('y')}}</div>
-            <input id="_input_zoom_slider_2"
-                    class="input-slider"
-                    type="range"
-                    step="any"
-                    min="-1"
-                    max="3"
-                    :value="zoom.y"
-                    @input="changeZoom($event.target.value, 'y')"
-            />
-          </template>
-        </div>
-
-        <div class="flex flex-row items-center justify-center" style="padding-left: 1rem">
-          <Button
-            v-if="zoomAspectRatioLocked"
-            icon="lock"
-            :iconSize="16"
-            :fixedWidth="true"
-            :noPad="true"
-            @click="toggleZoomAr()"
-          >
-          </Button>
-          <Button
-            v-else
-            icon="lock-open-variant"
-            :iconSize="16"
-            :fixedWidth="true"
-            :noPad="true"
-            @click="toggleZoomAr()"
-          >
-          </Button>
-          <Button
-            icon="restore"
-            :iconSize="16"
-            :noPad="true"
-            @click="resetZoom()"
-          ></Button>
-        </div>
-      </div>
-
-    </template>
-  </div>
-</template>
-
-<script>
-import Button from '@csui/src/components/Button.vue';
-import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
-import EditShortcutButton from '@csui/src/components/EditShortcutButton';
-import EditModeMixin from '@csui/src/utils/EditModeMixin';
-import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
-import CommsMixin from '@csui/src/utils/CommsMixin';
-import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
-
-export default {
-  components: {
-    Button,
-    ShortcutButton,
-    EditShortcutButton,
-  },
-  mixins: [
-    // ComputeActionsMixin,
-    EditModeMixin,
-    KeyboardShortcutParserMixin,
-    CommsMixin
-  ],
-  props: [
-    'settings',      // required for buttons and actions, which are global
-    'siteSettings',
-    'eventBus',
-    'isEditing',
-    'compact',
-  ],
-  data() {
-    return {
-      AspectRatioType,
-
-      zoomAspectRatioLocked: true,
-      zoom: {
-        x: 0,
-        y: 0
-      },
-
-      // TODO: this should be mixin?
-      resizerConfig: {
-        crop: null,
-        stretch: null,
-        zoom: null,
-        pan: null
-      }
-    }
-  },
-  created() {
-    if (this.isEditing) {
-      this.enableEditMode();
-    }
-  },
-  watch: {
-    isEditing(newValue, oldValue) {
-      if (newValue) {
-        this.enableEditMode();
-      } else {
-        this.disableEditMode();
-      }
-    }
-  },
-  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});
-    },
-    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});
-      } else {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: {[axis ?? 'x']: newZoom}});
-      }
-    },
-    isActiveZoom(command) {
-      return false;
-    }
-  }
-}
-
-</script>
-
-<style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
-<style lang="scss" scoped>
-.input-slider {
-  width: 100%;
-  box-sizing:border-box;
-  margin-right: 1rem;
-  margin-left: 0rem;
-}
-.slider-label {
-  margin-bottom: -0.5rem;
-  color: #aaa;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-}
-</style>

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -1,691 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div class="flex flex-row">
-      <h1>Video player options</h1>
-    </div>
-    <div class="flex flex-row">
-      <div style="width: 48%">
-        NEW PLAYER SELECTOR
-        <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 be highlighted with golden outline. Player should be the first element that covers the video player on the page.
-          </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>
-      <div style="width: 48%">
-        <div>EXAMPLE <small style="opacity: 0.5"><br/>ps: i know this ui is shit, no need to tell me</small></div>
-        <div class="demo-images">
-          <div class="fig1">
-            <img src="/res/img/player-select-demo/uw_player_select___too_little.webp" />
-            <div>If you see this when hovering over the element, you need to select further down the list.</div>
-          </div>
-          <div class="fig2">
-            <div>
-              <p>
-                If you see this when hovering over the element, you're hovering over the correct element.
-              </p>
-              <p>
-                In case there's more than one element that covers the entire player and nothing more, select the option that's closest to the top of the list, otherwise in-player UI could break.
-              </p>
-              <p>
-                If in-player UI breaks, you can make the settings window appear from the extension popup.
-              </p>
-              </div>
-            <img src="/res/img/player-select-demo/uw_player_select___just-right.webp" />
-          </div>
-          <div class="fig1">
-            <img src="/res/img/player-select-demo/uw_player_select___too_much.webp" />
-            <div>If you see this when hovering over the element, you need to select an element closer to the top of the list.</div>
-          </div>
-        </div>
-      </div>
-      <div style="width: 48%" v-if="false">
-        <h2>Legacy advanced settings</h2>
-
-        <div class="">
-          <h3>Player element</h3>
-          <div class="field">
-            <div class="label">Manually specify player</div>
-            <input type="checkbox" />
-          </div>
-          <div class="field">
-            <div class="label">Select player by/as:</div>
-            <div class="select">
-              <select>
-                <option>n-th parent of video</option>
-                <option>Query selectors</option>
-              </select>
-            </div>
-          </div>
-          <div class="field">
-            <div class="label">Player is n-th parent of video</div>
-            <div class="range-input">
-              <input type="range" min="0" max="100" />
-              <input />
-            </div>
-          </div>
-          <div class="field">
-            <div class="label">Query selector for player element</div>
-            <div class="input">
-              <input />
-            </div>
-          </div>
-          <div class="field">
-            <div class="label">In full screen, calculate crop based on monitor resolution</div>
-            <input type="checkbox" />
-          </div>
-
-          <h3>Video element</h3>
-          <div class="field">
-            <div class="label">Select video element automatically</div>
-            <input type="checkbox">
-          </div>
-          <div class="field">
-            <div class="label">Query selectors</div>
-            <div class="input">
-              <input>
-            </div>
-          </div>
-          <div class="field">
-            <div class="label">Additional styles for video element</div>
-            <div class="input">
-              <textarea></textarea>
-            </div>
-          </div>
-
-          <h3>Additional css for this page</h3>
-          <div class="field">
-            <div class="label">Additional CSS for this page</div>
-            <textarea></textarea>
-          </div>
-
-        </div>
-      </div>
-
-      <!-- <div class="sub-panel-content">
-        <h2>Advanced settings</h2>
-      </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',
-      {
-        source: this,
-        function: (config) => this.handleElementStack(config)
-      }
-    );
-  },
-  mounted() {
-    this.getPlayerTree();
-  },
-  destroyed() {
-    this.eventBus.unsubscribeAll(this);
-  },
-  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" src="../../res/css/flex.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
-<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%;
-}
-
-.demo-images {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  padding-top: 2rem;
-
-  .fig1, .fig2 {
-    margin-top: -2rem;
-    max-height: 18rem;
-    width: 100%;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .fig1 {
-    align-self: start;
-  }
-  .fig2 {
-    align-self: end;
-  }
-
-  img {
-    max-width: 32rem;
-  }
-}
-</style>

src/csui/src/PlayerUiPanels/PlayerUiSettings.vue

@@ -1,296 +0,0 @@
-<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 v-if="!siteSettings.data.enableUI.fullscreen">
-          UI is disabled for this site.
-        </div>
-
-        <div
-          class="flex flex-col field-group compact-form"
-          :class="{disabled: !siteSettings.data.enableUI.fullscreen}"
-        >
-          <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
-            </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
-                style="margin-right: 0.6rem;"
-                :value="ghettoComputed.minEnabledWidth"
-                @input="(event) => setPlayerRestrictions('minEnabledWidth', event.target.value, true)"
-                @change="(event) => saveSettings(true)"
-              >
-              <div class="unit">% of screen</div>
-            </div>
-          </div>
-
-          <div class="field">
-            <div class="label">
-              Do not show in-player UI when video player is shorter than
-            </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
-                style="margin-right: 0.6rem;"
-                :value="ghettoComputed.minEnabledHeight"
-                @input="(event) => setPlayerRestrictions('minEnabledHeight', event.target.value, true)"
-                @change="(event) => saveSettings(true)"
-              >
-              <div class="unit">% of screen</div>
-            </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>
-
-        <!-- ZOOM OPTIONS -->
-        <div>
-          <div class="flex flex-row">
-            <h3 class="mth3">ZOOM OPTIONS</h3>
-          </div>
-
-          <ZoomOptionsPanel
-            :settings="settings"
-            :eventBus="eventBus"
-            :isEditing="true"
-          ></ZoomOptionsPanel>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-import Button from '@csui/src/components/Button.vue'
-import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
-import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'
-import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
-
-export default {
-  components: {
-    Button,
-    CropOptionsPanel,
-    StretchOptionsPanel,
-    ZoomOptionsPanel,
-  },
-  data() {
-    return {
-      ghettoComputed: { }
-    }
-  },
-  mixins: [
-  ],
-  props: [
-    'settings',      // required for buttons and actions, which are global
-    'siteSettings',
-    '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="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/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;
-}
-
-.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(33% - 0.5rem);
-  }
-}
-
-.mt2r {
-  margin-top: 2rem;
-  margin-bottom: 0.5rem;
-}
-.mth3 {
-  margin-top: 1.5rem;
-}
-</style>

src/csui/src/PlayerUiPanels/ResetBackupPanel.vue

@@ -1,30 +0,0 @@
-<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="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/PlayerUiPanels/ResizerDebugPanelComponent.vue

@@ -1,157 +0,0 @@
-<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/VideoSettings.vue

@@ -1,159 +0,0 @@
-<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="16" />
-            <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>
-  </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',
-      {
-        source: this,
-        function: (config) => this.handleConfigBroadcast(config)
-      }
-    );
-  },
-  mounted() {
-    this.eventBus.sendToTunnel('get-ar');
-  },
-  destroyed() {
-    this.eventBus.unsubscribeAll(this);
-  },
-  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="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/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

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

src/csui/src/components/Button.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="button center-text"
-       :class="{
-          'setting-selected': selected,
-          'no-pad': noPad,
-        }"
-  >
-    <mdicon v-if="icon" :name="icon" :size="iconSize ?? 24"></mdicon>
-    <div class="label">
-      {{label}}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    fixedWidth: Boolean,
-    selected: Boolean,
-    label: String,
-    icon: String,
-    iconSize: Number,
-    noPad: Boolean
-  }
-}
-</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;
-  }
-
-}
-.no-pad {
-  padding: 0.5rem 1rem !important;
-}
-</style>

src/csui/src/components/ConfirmButton.vue

@@ -1,108 +0,0 @@
-<template>
-  <div v-if="popupVisible" class="popup">
-    <div class="popup-window">
-      <div
-        class="header"
-        :class="{
-          'danger': dialogType === 'danger',
-          'warning': dialogType === 'warning',
-          'info': dialogType === 'info',
-          'normal': dialogType === 'normal'
-        }"
-      >
-        {{ dialogText || 'Confirm action' }}
-      </div>
-      <div class="body">
-        {{ dialogText || 'Are you sure you want to do that?' }}
-      </div>
-      <div class="footer">
-        <button
-          class="button confirm"
-          :class="{
-            'danger': dialogType === 'danger',
-            'warning': dialogType === 'warning',
-            'info': dialogType === 'info',
-            'normal': dialogType === 'normal'
-          }"
-          @click="confirmAction"
-        >
-          {{ confirmText || 'Confirm' }}
-        </button>
-        <button class="button" @click="popupVisible = false">{{ cancelText  || 'Cancel' }}</button>
-      </div>
-    </div>
-  </div>
-  <button
-    :class="[
-      {
-        'danger': dialogType === 'danger',
-        'warning': dialogType === 'warning',
-      },
-      btnClass
-    ]"
-    @click="popupVisible = true"
-  >
-    <slot></slot>
-  </button>
-</template>
-
-<script>
-
-export default {
-  data() {
-    return {
-      popupVisible: false,
-    }
-  },
-  props: [
-    'btnClass',
-    'dialogTitle',
-    'dialogText',
-    'confirmText',
-    'cancelText',
-    'dialogType'
-  ],
-  methods: {
-    confirmAction() {
-      this.popupVisible = false;
-      this.$emit('onConfirmed');
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  width: 100%;
-  height: 100%;
-
-  // background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
-  z-index: 99999;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  .header {
-    font-size: 1.33rem;
-
-    color: #fff;
-
-    &.danger {
-      color: rgb(251, 107, 63);
-      font-weight: bold;
-    }
-  }
-  .body {
-    min-height: 5rem;
-  }
-}
-</style>

src/csui/src/components/EditShortcutButton.vue

@@ -1,191 +0,0 @@
-<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="@csui/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

@@ -1,119 +0,0 @@
-<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.75);
-  backdrop-filter: blur(16px) saturate(120%);
-
-  white-space: nowrap;
-  &:hover {
-    background-color: rgba(255, 128, 64, 0.95);
-  }
-
-  &.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

@@ -1,46 +0,0 @@
-<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 {
-  position: relative;
-  font-size: .95rem;
-  font-family: 'Overpass';
-  padding: 1rem 1.6rem;
-  background-color: rgba(0, 0, 0, 0.75);
-  backdrop-filter: blur(16px) saturate(120%);
-
-  white-space: nowrap;
-
-  &.can-hover:hover {
-    background-color: rgba(0,0,0,0.98);
-    border-bottom: 1px solid #fa6;
-  }
-
-  display: flex;
-  flex-direction: column;
-}
-
-
-</style>

src/csui/src/components/GhettoContextMenuOption.vue

@@ -1,26 +0,0 @@
-<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.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="flex flex-row w-full">
-    <button
-      v-if="editorMode === 'tree'"
-      @click="() => setEditorMode('text')"
-    >
-      Edit as text
-    </button>
-    <button
-      v-else
-      @click="() => setEditorMode('tree')"
-    >
-      Show as tree
-    </button>
-  </div>
-  <div ref="refContainer" class="w-full h-full"></div>
-</template>
-
-<script>
-import { createJSONEditor, Mode } from "vanilla-jsoneditor";
-
-export default {
-  props: {
-    modelValue: Object // v-model binding
-  },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      refContainer: null,
-      editor: null,
-      editorMode: Mode.tree,
-    };
-  },
-  watch: {
-    modelValue: {
-      deep: true,
-      handler(newValue) {
-        if (this.editor) {
-          this.editor.updateProps({ content: { json: newValue || {} } });
-        }
-      }
-    }
-  },
-  mounted() {
-    if (this.$refs.refContainer) {
-      this.editor = createJSONEditor({
-        target: this.$refs.refContainer,
-        props: {
-          mode: Mode.tree,
-          content: { json: this.modelValue || {} },
-          onChange: (updatedContent) => {
-            this.$emit("update:modelValue", updatedContent.json);
-          },
-          onRenderContextMenu: false,
-          navigationBar: false,
-          statusBar: false,
-          mainMenuBar: false
-        }
-      });
-    }
-  },
-  methods: {
-    setEditorMode(mode) {
-      this.editorMode = mode
-      this.editor.updateProps({ mode });
-    }
-  },
-  beforeUnmount() {
-    if (this.editor) {
-      this.editor.destroy();
-      this.editor = null;
-    }
-  }
-};
-</script>
-<style lang="scss">
-:root {
-  --jse-panel-background: #111;
-  --jse-background-color: #000;
-  --jse-text-color: #ccc;
-  --jse-key-color: #8c8bef;
-  --jse-selection-background-color: rgba(255, 171, 102, 0.177);
-  --jse-context-menu-pointer-background: rgba(255, 171, 102, 0.177);
-  --jse-delimiter-color: #fa6;
-  --jse-value-color-boolean: rgb(132, 132, 137);
-}
-
-.jse-boolean-toggle[role="checkbox"] {
-  &[aria-checked="true"] {
-    color: rgb(218, 244, 238);
-  }
-
-  &[aria-checked="false"] {
-    border: 0px transparent;
-    outline: 0px transparent;
-    color: rgb(241, 107, 25);
-    background-color: rgb(241, 107, 25);
-
-    position: relative;
-
-    &:after {
-      position: absolute;
-
-      content: '×';
-
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-
-      color: black;
-
-      text-align: center;
-      font-weight: bold;
-
-    }
-  }
-}
-
-</style>

src/csui/src/components/Popup.vue

@@ -1,105 +0,0 @@
-<template>
-  <div
-    v-if="message"
-    class="popup-overlay"
-    :class="{'dim': dimOverlay}"
-  >
-    <div class="popup-content" >
-      <div v-if="title" class="header" :class="type">
-        {{title}}
-      </div>
-      <p>
-        {{ message }}
-      </p>
-      <div class="flex flex-row justify-end">
-        <button
-          class="primary"
-          v-if="confirmButtonText"
-          :class="type"
-          @click="$emit('onConfirm')"
-        >
-          {{ confirmButtonText }}
-        </button>
-        <button
-          :class="type"
-          @click="$emit('onCancel')"
-        >
-          {{ cancelButtonText }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    // onConfirm: {
-    //   type: Function,
-    //   required: false
-    // },
-    // onCancel: {
-    //   type: Function,
-    //   default: () => this.$emit('close')
-    // },
-    title: {
-      type: String,
-      required: false
-    },
-    message: {
-      type: String,
-      required: false, // technically prolly should be true, but we don't have to guard against skill issue
-    },
-    dimOverlay: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String,
-      default: 'info'
-    },
-    confirmButtonText: {
-      type: String,
-      required: false,
-    },
-    cancelButtonText: {
-      type: String,
-      default: 'Cancel'
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  width: 100%;
-  height: 100%;
-
-  // background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: saturate(50%) brightness(50%) blur(1rem);
-  z-index: 99999;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  .header {
-    font-size: 1.33rem;
-
-    color: #fff;
-
-    &.danger {
-      color: rgb(251, 107, 63);
-      font-weight: bold;
-    }
-  }
-  .body {
-    min-height: 5rem;
-  }
-}
-</style>

src/csui/src/components/QsElement.vue

@@ -1,53 +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>
-.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/csui/src/components/SupportLevelIndicator.vue

@@ -1,148 +0,0 @@
-<template>
-  <div v-if="siteSupportLevel === 'official'" class="site-support official" :style="supportLevelStyle">
-    <mdicon name="check-decagram" />
-    <div v-if="!small">Verified</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Verified&nbsp;—&nbsp;</template>
-      The extension is being tested and should work on this site.
-    </div>
-  </div>
-  <div v-if="siteSupportLevel === 'community'" class="site-support community" :style="supportLevelStyle">
-    <mdicon name="account-group" />
-    <div v-if="!small">Community</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Community&nbsp;—&nbsp;</template>
-      People say extension works on this site (or have provided help getting the extension to work if it didn't).<br/><br/>
-      Tamius (the dev) does not test the extension on this site, probably because it requires a subscription or
-      is geoblocked.
-    </div>
-  </div>
-  <div v-if="siteSupportLevel === 'no-support' || siteSupportLevel === 'unknown'" class="site-support no-support" :style="supportLevelStyle">
-    <mdicon name="help-circle-outline" />
-    <div v-if="!small">Unknown</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Unknown&nbsp;—&nbsp;</template>
-      Not officially supported. Extension will try to fix things, but no promises.<br/><br/>
-      Tamius (the dev) does not test the extension on this site for various reasons
-      (unaware, not using the site, language barrier, geoblocking, paid services Tam doesn't use).
-    </div>
-  </div>
-  <div v-if="siteSupportLevel === 'user-added' || siteSupportLevel === 'user-defined'" class="site-support user-added" :style="supportLevelStyle">
-    <mdicon name="account" />
-    <div v-if="!small">Modified by you</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Modified by you&nbsp;—&nbsp;</template>
-      You have manually changed settings for this site. The extension is doing what you told it to do.
-    </div>
-  </div>
-  <div v-if="siteSupportLevel === 'officially-disabled'" class="site-support officially-disabled" :style="supportLevelStyle">
-    <mdicon  class="site-support no-support" name="checkbox-marked-circle" />
-    <div v-if="!small">Not supported</div>
-    <div class="tooltip" :style="tooltipStyle">
-      <template v-if="small">Not supported&nbsp;—&nbsp;</template>
-      Extension is known to not work with this site.
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    siteSupportLevel: String,
-    small: Boolean,
-    supportLevelStyle: String,
-    tooltipStyle: String,
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-
-  .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;
-      z-index: 99999 !important;
-
-      white-space: normal;
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      word-break: break-word;
-    }
-    &: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;
-      }
-    }
-
-    &.officially-disabled {
-      background-color: rgb(132, 24, 40);
-      color: #eee;
-
-      .mdi {
-        fill: #eee !important;
-      }
-    }
-
-    &.no-support {
-      background-color: rgb(83, 76, 77);
-      color: #eee;
-
-      .mdi {
-        fill: #eee !important;
-      }
-    }
-
-    &.user-added {
-      border: 1px solid #ff0;
-
-      color: #ff0;
-
-      .mdi {
-        fill: #ff0 !important;
-      }
-    }
-  }
-
-
-</style>

src/csui/src/components/TriggerZoneEditor.vue

@@ -1,471 +0,0 @@
-<template>
-
-  <!-- Preview + editor -->
-  <div
-    v-if="settings?.active?.ui"
-    class="active-trigger-area uw-clickable"
-    :style="triggerZoneStyles"
-  >
-    <div class="trigger-zone-editor"
-      @mousedown="(event) => handleMouseDown('offset', event)"
-    >
-      <div
-        class="uw-clickable corner tl"
-        @mousedown.stop="(event) => handleMouseDown('tl', event)"
-      >
-      </div>
-      <div
-        class="uw-clickable corner tr"
-        @mousedown.stop="(event) => handleMouseDown('tr', event)"
-      >
-      </div>
-      <div
-        class="uw-clickable corner bl"
-        @mousedown.stop="(event) => handleMouseDown('bl', event)"
-      >
-      </div>
-      <div
-        class="uw-clickable corner br"
-        @mousedown.stop="(event) => handleMouseDown('br', event)"
-      >
-      </div>
-    </div>
-  </div>
-
-  <!-- Sliders -->
-  <div
-    class="trigger-zone-editor-sliders-container"
-  >
-    <div class="panel uw-clickable">
-      <div class="trigger-zone-editor-window">
-        <div class="heading">
-          <h2>Trigger zone editor</h2>
-        </div>
-        <div>
-          <p>
-            Trigger zone is represented by this very obvious gold grid. Ultrawidify menu button will only show when mouse enters the area marked by the grid.
-          </p>
-          <p>
-            Note that interacting with the grid area is slightly broken. The distance dragged doesn't correspond with the amount of resizing. I don't plan on
-            fixing that because the amount of effort required to get it working perfectly doesn't correspond with the amount of utility this part of the UI will
-            see. Like, it works well enough and I want to enjoy some of my end-of-year PTO.
-          </p>
-          <p>
-            Sliders work as they should.
-          </p>
-        </div>
-        <div class="field">
-          <div class="label">Trigger zone width:</div>
-          <div class="input range-input">
-            <input
-              :value="settings.active.ui.inPlayer.triggerZoneDimensions.width"
-              class="slider"
-              type="range"
-              min="0.1"
-              max="1"
-              step="0.01"
-              @input="(event) => setValue('width', event.target.value)"
-              @change="(event) => updateSettings(true)"
-            >
-            <input
-              :value="ghettoComputed.width"
-              @input="(event) => setValue('width', event.target.value, true)"
-              @change="(event) => updateSettings(true)"
-            >
-          </div>
-        </div>
-        <div class="hint">
-          Width of the trigger zone (% of player area).
-        </div>
-
-        <div class="field">
-          <div class="label">Trigger zone height:</div>
-          <div class="input range-input">
-            <input
-              :value="settings.active.ui.inPlayer.triggerZoneDimensions.height"
-              type="range"
-              min="0.1"
-              max="1"
-              step="0.01"
-              @input="(event) => setValue('height', event.target.value)"
-              @change="(event) => updateSettings(true)"
-            >
-            <input
-              :value="ghettoComputed.height"
-              @input="(event) => setValue('height', event.target.value, true)"
-              @change="(event) => updateSettings(true)"
-            >
-          </div>
-        </div>
-        <div class="hint">
-          Height of the trigger zone (% of player area).
-        </div>
-
-        <div class="field">
-          <div class="label">Trigger zone horizontal offset:</div>
-          <div class="input range-input">
-            <input
-              v-model="settings.active.ui.inPlayer.triggerZoneDimensions.offsetX"
-              type="range"
-              min="-100"
-              max="100"
-              @input="(event) => setValue('offsetX', event.target.value)"
-              @change="(event) => updateSettings(true)"
-            >
-            <input
-              :value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetX"
-              @input="(event) => setValue('offsetX', event.target.value)"
-              @change="(event) => updateSettings(true)"
-            >
-          </div>
-        </div>
-        <div class="hint">
-          By default, trigger zone is centered around the button. This option moves trigger zone left and right.
-        </div>
-
-        <div class="field">
-          <div class="label">Trigger zone vertical offset:</div>
-          <div class="input range-input">
-            <input
-              v-model="settings.active.ui.inPlayer.triggerZoneDimensions.offsetY"
-              type="range"
-              min="-100"
-              max="100"
-              @input="(event) => setValue('offsetY', event.target.value)"
-              @change="(event) => updateSettings(true)"
-            >
-            <input
-              :value="settings.active.ui.inPlayer.triggerZoneDimensions.offsetY"
-              @input="(event) => setValue('offsetY', event.target.value)"
-              @change="(event) => updateSettings(true)"
-            >
-          </div>
-        </div>
-        <div class="hint">
-          By default, trigger zone is centered around the button. This option moves trigger zone up and down.
-        </div>
-
-        <div class="action-row">
-          <button @click="finishTriggerZoneEdit">Finish editing</button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-
-export default {
-  props: [
-    'settings',
-    'eventBus',
-    'playerDimensions',
-  ],
-  watch: {
-    playerDimensions(newVal, oldVal) {
-      this.updateTriggerZones();
-    }
-  },
-  data() {
-    return {
-      triggerZoneStyles: {},
-      activeCornerDrag: undefined,
-      dragStartPosition: undefined,
-      dragStartConfiguration: undefined,
-      ghettoComputed: { }
-    }
-  },
-  created() {
-    document.addEventListener("mouseup", this.handleMouseUp);
-    document.addEventListener("mousemove", this.handleMouseMove);
-    this.ghettoComputed = {
-      width: this.optionalToFixed(this.settings.active.ui.inPlayer.triggerZoneDimensions.width * 100, 0),
-      height: this.optionalToFixed(this.settings.active.ui.inPlayer.triggerZoneDimensions.height * 100, 0)
-    };
-    this.updateTriggerZones(false);
-  },
-  methods: {
-    optionalToFixed(v, n) {
-      try {
-        if ((`${v}`.split('.')[1]?.length ?? 0) > n) {
-          return v.toFixed(n);
-        }
-      } catch (e) {
-
-      }
-      return v;
-    },
-    updateTriggerZones(forceRefresh = true) {
-      if (this.playerDimensions && this.settings?.active?.ui?.inPlayer?.triggerZoneDimensions) {
-        this.triggerZoneStyles = {
-          width: `${Math.round(this.playerDimensions.width * this.settings.active.ui.inPlayer.triggerZoneDimensions.width)}px`,
-          height: `${Math.round(this.playerDimensions.height * this.settings.active.ui.inPlayer.triggerZoneDimensions.height)}px`,
-          transform: `translate(${(this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetX)}%, ${this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetY}%)`,
-        };
-      }
-      // if (forceRefresh) {
-      //   this.$forceUpdate();
-      // }
-    },
-    handleMouseDown(corner, event) {
-      this.activeCornerDrag = corner;
-
-      // we need to save this because we don't know the location of the player element,
-      // just its dimensions ... that means we need to
-      this.dragStartPosition = {
-        x: event.clientX,
-        y: event.clientY
-      };
-      this.dragStartConfiguration = JSON.parse(JSON.stringify(this.settings.active.ui.inPlayer.triggerZoneDimensions));
-    },
-    handleMouseUp(event) {
-      if (!this.activeCornerDrag) {
-        return;
-      }
-      this.activeCornerDrag = undefined;
-      this.settings.saveWithoutReload();
-    },
-    handleMouseMove(event) {
-      if (!this.activeCornerDrag) {
-        return;
-      }
-
-      if (this.activeCornerDrag === 'offset') {
-        this.handleMove(event);
-      } else {
-        this.handleResize(event);
-      }
-
-      this.updateTriggerZones();
-    },
-    handleResize(event) {
-       // drag distance in px
-      const dx = event.clientX - this.dragStartPosition.x;
-      const dy = event.clientY - this.dragStartPosition.y;
-
-      // convert drag distance to % of current width:
-      const dxr = dx / this.playerDimensions.width * 2;
-      const dyr = dy / this.playerDimensions.height * 2;
-
-      // // update settings:
-      let nw, nh;
-      switch (this.activeCornerDrag) {
-        case 'tl':
-          nw = this.dragStartConfiguration.width - dxr;
-          nh = this.dragStartConfiguration.height - dyr;
-          break;
-        case 'tr':
-          nw = this.dragStartConfiguration.width + dxr;
-          nh = this.dragStartConfiguration.height - dyr;
-          break;
-        case 'bl':
-          nw = this.dragStartConfiguration.width - dxr;
-          nh = this.dragStartConfiguration.height + dyr;
-          break;
-        case 'br':
-          nw = this.dragStartConfiguration.width + dxr;
-          nh = this.dragStartConfiguration.height + dyr;
-          break;
-      }
-
-      // ensure everything is properly limited
-      const cw = Math.min(1, Math.max(0.125, nw));
-      const ch = Math.min(1, Math.max(0.125, nh));
-
-      // // update properties
-      this.settings.active.ui.inPlayer.triggerZoneDimensions.width = cw;
-      this.settings.active.ui.inPlayer.triggerZoneDimensions.height = ch;
-    },
-    handleMove(event) {
-      const dx = event.clientX - this.dragStartPosition.x;
-      const dy = event.clientY - this.dragStartPosition.y;
-
-      // convert drag distance to % of current width:
-      const dxr = dx / this.playerDimensions.width;
-      const dyr = dy / this.playerDimensions.height;
-
-      // const [min, max] = this.settings.active.ui.inPlayer.popupAlignment === 'right' ? [5, 90] : [-90, -5];
-      // const [minCrossAxis, maxCrossAxis] = [-90, 90];
-      const min = -90;
-      const max = -5;
-      const minCrossAxis = -90;
-      const maxCrossAxis = 90;
-
-      const cx = Math.min(max, Math.max(min, this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetX + dxr));
-      const cy = Math.min(maxCrossAxis, Math.max(minCrossAxis, this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetY + dyr));
-
-      this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetX = cx;
-      this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetY = cy;
-    },
-
-    //#region slider window
-    forceNumber(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, '');
-    },
-    setValue(key, originalValue, isTextInput) {
-      let value = originalValue;
-      if (isTextInput) {
-        value = (+this.forceNumber(value) / 100);
-      } else {
-        value = +this.forceNumber(value);
-      }
-
-      if (isNaN(+value)) {
-        value = 0.5;
-      }
-
-      this.settings.active.ui.inPlayer.triggerZoneDimensions[key] = value;
-      if (isTextInput) {
-        this.ghettoComputed[key] = this.optionalToFixed(originalValue, 0);
-      } else {
-        this.ghettoComputed[key] = this.optionalToFixed(originalValue * 100, 0);
-      }
-      this.updateSettings();
-    },
-
-    updateSettings(forceRefresh) {
-      this.settings.saveWithoutReload();
-      this.updateTriggerZones();
-
-      if (forceRefresh) {
-        this.$nextTick( () => this.$forceUpdate() );
-      }
-    },
-
-    //#endregion
-    finishTriggerZoneEdit() {
-      this.eventBus.send('finish-trigger-zone-edit');
-    },
-
-  }
-}
-
-</script>
-
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>
-<style lang="scss" scoped>
-.active-trigger-area {
-  background-image: url('/res/img/grid_512.webp');
-  background-position: center;
-  background-attachment: fixed;
-}
-
-.trigger-zone-editor {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  > .corner {
-    position: absolute;
-    width: 32px;
-    height: 32px;
-    background-color: #000;
-    background-image: url('/res/img/corner-marker_64.webp');
-    background-size: cover;
-
-  }
-  .tr, .tl {
-    top: 0;
-  }
-  .br, .bl {
-    bottom: 0;
-  }
-  .tl, .bl {
-    left: 0;
-  }
-  .tr, .br {
-    right: 0;
-  }
-  .br {
-    transform: rotate(90deg);
-  }
-  .bl {
-    transform: rotate(180deg);
-  }
-  .tl {
-    transform: rotate(-90deg);
-  }
-}
-
-.trigger-zone-editor-window {
-  max-width: 69rem;
-}
-
-.trigger-zone-editor-sliders-container {
-  position: fixed;
-  width: 100dvw;
-  height: 100dvh;
-  top: 0;
-  left: 0;
-  z-index: 2000;
-
-  pointer-events: none;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .panel {
-    backdrop-filter: blur(0.5rem) brightness(0.5);
-    color: #ccc;
-    pointer-events: all;
-
-    padding: 1rem;
-  }
-
-  .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 {
-    padding-bottom: 2rem;
-
-    .field {
-      margin-bottom: -1em;
-    }
-  }
-}
-
-.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;
-  }
-}
-
-.action-row {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}
-</style>

src/csui/src/components/UploadJsonFileButton.vue

@@ -1,77 +0,0 @@
-<template>
-  <button
-    class="button drop-zone"
-    :class="[{'drag-over': isDragOver}, className]"
-    @click="onClick"
-    @dragover="isDragOver = true"
-    @dragleave="isDragOver = false"
-    @drop="onDrop"
-  >
-    <slot></slot>
-    <input type="file" ref="fileInput" @change="onFileChange" accept=".json" />
-  </button>
-
-</template>
-<script>
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      isDragOver: false
-    };
-  },
-  methods: {
-    onClick() {
-      this.$refs.fileInput.click();
-    },
-    onDrop(event) {
-      event.preventDefault();
-      this.isDragOver = false;
-
-      if (event.dataTransfer.files.length > 0) {
-        this.handleFile(event.dataTransfer.files[0]);
-      }
-    },
-    onFileChange(event) {
-      if (event.target.files.length > 0) {
-        this.handleFile(event.target.files[0]);
-      }
-    },
-    handleFile(file) {
-      if (file.type !== "application/json") {
-        this.$emit('error', 'NOT_JSON_FILE');
-        return;
-      }
-
-      const reader = new FileReader();
-      reader.onload = async (event) => {
-        try {
-          const importedData = JSON.parse(event.target.result);
-          this.$emit('importedJson', importedData);
-        } catch (error) {
-          this.$emit('error', 'INVALID_JSON');
-        }
-      };
-      reader.readAsText(file);
-    },
-  }
-}
-
-</script>
-<style lang="scss" scoped>
-input {
-  display: none;
-}
-.drop-zone {
-  &.drag-over {
-    background-color: #fa6;
-    color: black;
-  }
-}
-</style>

src/csui/src/mixins/ComputeActionsMixin.js

@@ -1,6 +0,0 @@
-export default {
-  // computed: {
-  //   aspectRatioActions: this.settings?.active.commands.crop,
-  //   stretchActions: this.settings?.active.commands.stretch
-  // }
-}

src/csui/src/popup/panels/PopupVideoSettings.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="flex flex-col relative h-full" style="padding-bottom: 20px">
-    <!--
-      Extension is disabled for a given site when it's disabled in full screen, since
-      current settings do not allow the extension to only be disabled while in full screen
-     -->
-    <template v-if="siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Disabled && !enabledHosts?.length">
-      <div class="h-full flex flex-col items-center justify-center" style="margin-top: 8rem">
-        <div class="info">
-          Extension is not enabled for this site.
-        </div>
-        <div>
-          Please enable extension for this site.
-        </div>
-        <div>
-          <button
-            class="flex flex-row items-center"
-            style="background-color: transparent; padding: 0.25rem 0.5rem; margin-top: 1rem;"
-            @click="openSettings()"
-          >
-            Open settings <mdicon style="margin-left: 0.5rem;" name="open-in-new" size="16"></mdicon>
-          </button>
-        </div>
-
-      </div>
-    </template>
-    <template v-else>
-      <div
-        v-if="siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Disabled"
-        class="warning-compact"
-      >
-        <div class="w-full flex flex-row">
-          <div class="grow">
-            <b>Extension is disabled for this site.</b>
-          </div>
-          <div>
-            <button
-              class="flex flex-row items-center"
-              style="border: 1px solid black; background-color: transparent; color: black; padding: 0.25rem 0.5rem; margin-top: -0.25rem; margin-right: -0.5rem;"
-              @click="openSettings()"
-            >
-              Open settings <mdicon style="margin-left: 0.5rem;" name="open-in-new" size="16"></mdicon>
-            </button>
-          </div>
-        </div>
-        <small>Controls will only work on content embedded from the following sites:</small><br/>
-        <div class="w-full flex flex-row justify-center">
-          <span v-for="host of enabledHosts" :key="host" class="website-name">{{host}}</span>
-        </div>
-      </div>
-
-      <div class="flex flex-row">
-        <mdicon name="crop" :size="16" />&nbsp;&nbsp;
-        <span>CROP</span>
-      </div>
-      <div
-        style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
-      >
-        <CropOptionsPanel
-          :settings="settings"
-          :eventBus="eventBus"
-          :siteSettings="siteSettings"
-          :isEditing="false"
-          :compact="true"
-        >
-        </CropOptionsPanel>
-      </div>
-
-      <div class="flex flex-row">
-        <mdicon name="crop" :size="16" />&nbsp;&nbsp;
-        <span>STRETCH</span>
-      </div>
-      <div
-        style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
-      >
-        <StretchOptionsPanel
-          :settings="settings"
-          :eventBus="eventBus"
-          :siteSettings="siteSettings"
-          :isEditing="false"
-          :compact="true"
-        ></StretchOptionsPanel>
-      </div>
-
-      <div class="flex flex-row">
-        <mdicon name="crop" :size="16" />&nbsp;&nbsp;
-        <span>ZOOM</span>
-      </div>
-      <div
-        style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
-      >
-        <ZoomOptionsPanel
-          :settings="settings"
-          :eventBus="eventBus"
-          :siteSettings="siteSettings"
-          :isEditing="false"
-          :compact="true"
-        >
-        </ZoomOptionsPanel>
-      </div>
-
-      <div class="flex flex-row">
-        <mdicon name="crop" :size="16" />&nbsp;&nbsp;
-        <span>ALIGN</span>
-      </div>
-      <div
-        style="margin-bottom: 0.88rem;"
-      >
-        <AlignmentOptionsControlComponent
-          :eventBus="eventBus"
-          :large="true"
-        > </AlignmentOptionsControlComponent>
-      </div>
-    </template>
-
-  </div>
-
-</template>
-
-<script>
-import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
-import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
-import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
-import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
-import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
-import { SiteSettings } from '../../../../ext/lib/settings/SiteSettings';
-
-export default {
-  components: {
-    CropOptionsPanel,
-    StretchOptionsPanel,
-    ZoomOptionsPanel,
-    AlignmentOptionsControlComponent
-  },
-  mixins: [
-
-  ],
-  props: [
-    'site',
-    'settings',
-    'siteSettings',
-    'eventBus',
-    'hosts'
-  ],
-  data() {
-    return {
-      exec: null,
-      ExtensionMode: ExtensionMode,
-      enabledHosts: [],
-    };
-  },
-  watch: {
-    hosts(val) {
-      this.filterActiveSites(val);
-    }
-  },
-  created() {
-    this.eventBus.subscribe(
-      'uw-config-broadcast',
-      {
-        source: this,
-        function: (config) => this.handleConfigBroadcast(config)
-      }
-    );
-    this.filterActiveSites(this.hosts);
-  },
-  mounted() {
-    this.eventBus.sendToTunnel('get-ar');
-  },
-  destroyed() {
-    this.eventBus.unsubscribeAll(this);
-  },
-  methods: {
-    filterActiveSites(val) {
-      this.enabledHosts = [];
-
-      for (const host of val) {
-        const siteSettings = new SiteSettings(this.settings, host);
-
-        if (siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Enabled) {
-          this.enabledHosts.push(host);
-        }
-      }
-    },
-    openSettings() {
-      this.eventBus.send('open-popup-settings', {tab: 'extensionSettings'})
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.warning-compact {
-  background-color: #d6ba4a;
-  color: #000;
-  padding: 0.5rem 1rem;
-  margin-top: -0.5rem;
-  margin-bottom: 0.5rem;
-
-  .website-name {
-    font-size: 0.85rem;
-
-    &:not(:last-of-type)::after {
-      content: ','
-    }
-  }
-}
-</style>

src/csui/src/popup/player-menu/ZoomControl.vue

@@ -1,215 +0,0 @@
-<template>
-  <div class="flex flex-row" style="width: 250px;">
-    <div class="flex-grow">
-      Custom zoom
-    </div>
-    <div class="flex flex-row">
-      <Button
-        v-if="zoomAspectRatioLocked"
-        icon="lock"
-        :iconSize="16"
-        :fixedWidth="true"
-        :noPad="true"
-        @click="toggleZoomAr()"
-      >
-      </Button>
-      <Button
-        v-else
-        icon="lock-open-variant"
-        :iconSize="16"
-        :fixedWidth="true"
-        :noPad="true"
-        @click="toggleZoomAr()"
-      >
-      </Button>
-      <Button
-        icon="restore"
-        :iconSize="16"
-        :noPad="true"
-        @click="resetZoom()"
-      ></Button>
-    </div>
-  </div>
-
-  <template v-if="zoomAspectRatioLocked">
-    <div class="input range-input no-bg">
-      <input
-        type="range"
-        class="slider"
-        min="-1"
-        max="3"
-        step="0.01"
-        :value="zoom.x"
-        @input="changeZoom($event.target.value)"
-      />
-      <input
-        class="disabled"
-        style="width: 2rem;"
-        :value="getZoomForDisplay('x')"
-      />
-    </div>
-
-  </template>
-  <template v-else>
-    <div class="top-label">Horizontal zoom:</div>
-    <div class="input range-input no-bg">
-      <input
-        type="range"
-        class="slider"
-        min="-1"
-        max="3"
-        step="0.01"
-        :value="zoom.x"
-        @input="changeZoom($event.target.value, 'x')"
-      />
-      <input
-        class="disabled"
-        style="width: 2rem;"
-        :value="getZoomForDisplay('x')"
-      />
-    </div>
-    <div class="top-label">Vertical zoom:</div>
-    <div class="input range-input no-bg">
-      <input
-        type="range"
-        class="slider"
-        min="-1"
-        max="3"
-        step="0.01"
-        :value="zoom.y"
-        @input="changeZoom($event.target.value, 'y')"
-      />
-      <input
-        class="disabled"
-        style="width: 2rem;"
-        :value="getZoomForDisplay('y')"
-      />
-    </div>
-  </template>
-</template>
-
-<script>
-import Button from '@csui/src/components/Button.vue';
-import * as _ from 'lodash';
-
-export default {
-  components: {
-    Button,
-
-  },
-  mixins: [
-
-  ],
-  props: [
-    'settings',      // required for buttons and actions, which are global
-    'eventBus'
-  ],
-  data() {
-    return {
-      zoomAspectRatioLocked: true,
-      zoom: {
-        x: 0,
-        y: 0
-      },
-
-      // TODO: this should be mixin?
-      resizerConfig: {
-        crop: null,
-        stretch: null,
-        zoom: null,
-        pan: null
-      },
-      pollingInterval: undefined,
-      debouncedGetEffectiveZoom: undefined,
-    }
-  },
-  created() {
-    this.eventBus?.subscribeMulti(
-      {
-        'announce-zoom': {
-          function: (data) => {
-            this.zoom = {
-              x: Math.log2(data.x),
-              y: Math.log2(data.y)
-            };
-          }
-        }
-      },
-      this
-    );
-    this.debouncedGetEffectiveZoom = _.debounce(
-      () => {
-        this.getEffectiveZoom();
-      },
-      250
-    ),
-    this.getEffectiveZoom();
-    this.pollingInterval = setInterval(this.debouncedGetEffectiveZoom, 2000);
-  },
-  destroyed() {
-    this.eventBus.unsubscribe(this);
-    clearInterval(this.pollingInterval);
-  },
-  methods: {
-    getEffectiveZoom() {
-      this.eventBus?.sendToTunnel('get-effective-zoom', {});
-    },
-    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});
-    },
-    changeZoom(newZoom, axis, isLinear) {
-      if (isNaN(+newZoom)) {
-        return;
-      }
-
-      let logZoom, linZoom;
-      if (isLinear) {
-        newZoom /= 100;
-        logZoom = Math.log2(newZoom);
-        linZoom = newZoom;
-      } else {
-        logZoom = newZoom;
-        linZoom = Math.pow(2, newZoom);
-      }
-
-      // we store zoom logarithmically on this component
-      if (!axis) {
-        this.zoom.x = logZoom;
-      } else {
-        this.zoom[axis] = logZoom;
-      }
-
-      // we do not use logarithmic zoom elsewhere, therefore we need to convert
-
-      if (this.zoomAspectRatioLocked) {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: linZoom});
-      } else {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: {[axis ?? 'x']: linZoom}});
-      }
-    },
-  }
-}
-
-</script>
-
-<style lang="scss" src="@csui/res/css/flex.scss" scoped></style>
-<style lang="scss" src="@csui/src/res-common/panels.scss" scoped module></style>
-<style lang="scss" src="@csui/src/res-common/common.scss" scoped module></style>

src/csui/src/res-common/_variables.scss

@@ -1,9 +0,0 @@
-$warning-color: #d6ba4a;
-
-$primary: rgb(255, 147, 85);
-$primaryBrighter: rgb(255, 174, 127);
-$primaryBg: rgba(54, 31, 21, 0.5);
-
-$blackBg: rgb(11,11,11);
-$normalTransparentOpacity: 0.5;
-$hoverTransparentOpacity: 0.9;

src/csui/src/res-common/common.scss

@@ -1,264 +0,0 @@
-@import './_variables.scss';
-
-div, p, span {
-  font-size: 16px;
-}
-
-.disabled {
-  pointer-events: none;
-  /* color: #666; */
-  filter: contrast(50%) brightness(40%) grayscale(100%);
-}
-
-.warning-box {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  border: 1px solid $warning-color;
-  color: $warning-color;
-  margin: 0px 16px;
-  padding: 16px;
-
-  font-size: 16;
-
-  border-radius: 2px;
-
-  *:not(:first-child) {
-    margin-left: 24px;
-  }
-}
-
-h1, h2, h3 {
-  font-family: 'Overpass' !important;
-  font-weight: 100 !important;
-  margin: 0;
-  padding: 0;
-}
-
-button, .button {
-  background-color: rgba($blackBg, $normalTransparentOpacity);
-
-  padding: 0.5rem 2rem;
-  margin: 3px;
-
-  color: #aaa;
-  border: 1px solid transparent;
-  user-select: none !important;
-
-  &:hover {
-    color: #fff;
-    background-color: rgba($blackBg, $hoverTransparentOpacity);
-    border-bottom: 1px solid rgba($primary, 0.5);
-  }
-
-  &.active {
-    color: $primary;
-    background-color: $primaryBg;
-    border-color: rgba($primary, .5);
-  }
-
-
-  &.primary {
-    background-color: #fa6;
-    color: #000;
-  }
-
-  &.danger {
-    background-color: #ff2211 !important;
-    color:#000;
-  }
-  &.disabled {
-    filter: saturate(0%);
-  }
-}
-.b3 {
-  margin: 0.25rem;
-  padding: 0.5rem 2rem;
-}
-
-.input, .range-input {
-  background-color: rgba($blackBg, $normalTransparentOpacity);
-  border: 1px solid transparent;
-  border-bottom: 1px solid rgba(255,255,255,0.5);
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  position: relative;
-
-  &:active, &:focus, &:focus-within {
-    border-bottom: 1px solid rgba($primary, 0.5);
-  }
-
-  &.no-bg {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-
-  input {
-    width: 100%;
-    outline: none;
-    border: 1px solid transparent;
-    background-color: transparent;
-    color: #fff;
-  }
-
-  .unit {
-    position: absolute;
-    right: 0px;
-    pointer-events: none;
-    opacity: 0.69;
-    font-size: 0.8rem;
-    top: 0;
-    transform: translateY(69%);
-  }
-}
-
-.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;
-  }
-}
-
-.field {
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  padding-top: 0.5rem;
-
-  align-items: center;
-
-  &.l2 {
-    margin-left: 4rem;
-  }
-
-  .label {
-    flex: 0 0 25%;
-    min-width: 16rem;
-    text-align: right;
-    padding-right: 1rem;
-
-    .color-emphasis {
-      color: #fa6;
-    }
-    .sub-label {
-      font-size: 0.9em;
-      opacity: 0.69;
-    }
-  }
-
-  .input, .range-input {
-    flex-grow: 1;
-    flex-shrink: 1;
-    max-width: 24rem;
-    min-width: 16rem;
-  }
-
-  .has-hint {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .select {
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    min-width: 12px;
-    max-width: 24rem;
-
-    select {
-      background: rgba($blackBg, $hoverTransparentOpacity);
-
-      min-width: 12px;
-      max-width: 100%;
-
-      color: #fff;
-      // border: 0px solid transparent;
-      border: 1px solid rgba(255, 171, 102, 0.42);
-
-      padding: 0.5rem 1rem 0.25rem;
-      outline: none;
-
-      font: inherit;
-      font-size: inherit;
-    }
-  }
-}
-.hint {
-  font-size: 0.8rem;
-  opacity: 0.7;
-  margin-top: 0.25rem;
-  margin-bottom: 0.75rem;
-  margin-left: 5rem;
-  // width: 100%;
-  box-sizing:border-box;
-}
-
-.options-bar {
-  position: absolute;
-  width: calc(100% - 4rem);
-  top: 0;
-
-  margin: 1rem;
-  padding: 1rem;
-
-  &.isEditing {
-    background-color: $primary;
-    position: relative;
-    color: #000;
-  }
-}
-.b3 {
-  width: 9rem;
-  padding-left: 0.33rem;
-  padding-right: 0.33rem;
-}
-.b3-compact {
-  width: 7rem;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-// .input-slider {
-//   width: 480px;
-// }
-.warning-lite {
-  padding-right: 16px;
-  padding-bottom: 16px;
-  padding-top: 8px;
-}
-
-.edit-action-area {
-  background-color: rgba($blackBg,0.5);
-  padding: 0.5rem;
-  margin-bottom: 2rem;
-}
-.edit-action-area-header {
-  background-color: $primary;
-  color: #000;
-  padding: 0.25rem 0.5rem;
-  padding-top: 0.5rem;
-}
-
-.pointer {
-  cursor: pointer;
-  user-select: none;
-}