Add anchor for player UI

src/csui/PlayerUiComponent.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="uw-hover uv-hover-trigger-region">
+    TEST CONTENT
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Icon from '../common/components/Icon';
+
+export default {
+  components: {
+    Icon,
+  },
+  data() {
+    return {
+      uiVisible: true
+    };
+  },
+  computed: {
+    ...mapState([
+      'showUi'
+    ]),
+  },
+  watch: {
+    showUi(visible) {
+      if (visible !== undefined) {
+        this.uiVisible = visible;
+      }
+    }
+  },
+  created() {
+    console.log("created!");
+    console.log("store:", this.$store, this);
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" src="../res/css/uwui-base.scss"></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 {
+  .uw-hover {
+    position: absolute;
+    top: 20%;
+    left: 20%;
+    width: 100px;
+    height: 100px;
+    color: #fff;
+    background-color: #000;
+  }
+  .uw-hover:hover {
+    background-color: #f00;
+  }
+}
+
+
+</style>

src/ext/lib/uwui/PlayerUI.js

@@ -0,0 +1,99 @@
+import UI from './UI';
+import VuexWebExtensions from 'vuex-webextensions';
+import PlayerUiComponent from '../../../csui/PlayerUiComponent.vue';
+
+if (process.env.CHANNEL !== 'stable'){
+  console.info("Loading: PlayerUi");
+}
+
+/**
+ * Class that handles in-player UI
+ */
+class PlayerUi extends UI {
+
+  /**
+   * Creates new in-player UI for ultrawidify
+   * @param {*} playerElement PlayerUI will be created as a child of this element
+   * @param {*} settings Extension settings (instanceof Settings)
+   */
+  constructor (
+    playerElement,
+    settings
+  ) {    
+    super(
+      'ultrawidifyUi',
+      PlayerUi.getStoreConfig(),
+      PlayerUi.getUiConfig(playerElement),
+      PlayerUi.getCommsConfig()
+    );
+
+    this.settings = settings;
+  }
+
+
+  //#region constructor helpers
+  // we will move some things out of the constructor in order to keep things clean
+  static getStoreConfig() {
+    // NOTE: these are sample values and can be deleted. Currently, they're commented out
+    //       so we won't have to look up the documentation in order to get them working
+    return {
+      plugins: [
+        VuexWebExtensions({
+          persistentStates: [
+            'showUi'
+          ],
+        }),
+      ],
+      state: {
+        showUi: true,
+      },
+      mutations: {
+        'uw-toggle-ui'(state) {
+          state['showUi'] = !state['showUi'];
+        },
+        'uw-set-ui-visible'(state, payload) {
+          state['showUi'] = payload;
+        }
+      },
+      actions: {
+        'uw-set-ui-visible'({commit}, payload) {
+          console.log('action!', commit, payload);
+          commit('uw-set-ui-visible', payload);
+        },
+        'uw-toggle-ui'({commit}) {
+          commit('uw-toggle-ui');
+        }
+      }
+    };
+  }
+
+  static getUiConfig(playerElement) {
+    return {
+      parentElement: playerElement,
+      component: PlayerUiComponent
+    }
+  }
+
+  static getCommsConfig() {
+    // NOTE: these are sample values and can be deleted. Currently, they're commented out
+    //       so we won't have to look up the documentation in order to get them working
+    return {
+      handlers: {
+        // 'show-notification': [(message) => this.showNotification(message)],
+      }
+    }
+  }
+  //#endregion
+
+  //#region lifecycle
+  replace(playerElement) {
+    super.replace(this.getUiConfig(playerElement));
+  }
+  //#endregion
+}
+
+if (process.env.CHANNEL !== 'stable'){
+  console.info("PlayerUi loaded");
+}
+
+export default PlayerUi;

src/ext/lib/uwui/UI.js

@@ -42,7 +42,9 @@ class UI {
 
     const rootDiv = document.createElement('div');
 
-    rootDiv.setAttribute('style', `pointer-events: none; position: ${this.uiConfig.style?.position ?? 'absolute'}; width: ${this.uiConfig.style?.width ?? '100%'}; height: ${this.uiConfig.style?.height ?? '100%'}; top: ${this.uiConfig.style?.height ?? '0'}; ${this.uiConfig.additionalStyle ?? ''}`);
+    if (this.uiConfig.additionalStyle) {
+      rootDiv.setAttribute('style', this.uiConfig.additionalStyle);
+    }
     rootDiv.setAttribute('id', uwid);
     rootDiv.classList.add('uw-ultrawidify-container-root');
 

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

@@ -2,6 +2,7 @@ import Debug from '../../conf/Debug';
 import ExtensionMode from '../../../common/enums/extension-mode.enum'
 import AspectRatio from '../../../common/enums/aspect-ratio.enum';
 import PlayerNotificationUi from '../uwui/PlayerNotificationUI';
+import PlayerUi from '../uwui/PlayerUI';
 
 if (process.env.CHANNEL !== 'stable'){
   console.info("Loading: PlayerData.js");
@@ -45,6 +46,7 @@ class PlayerData {
       this.invalid = false;
       this.element = this.getPlayer();
       this.notificationService = new PlayerNotificationUi(this.element, this.settings);
+      this.ui = new PlayerUi(this.element, this.settings);
       this.dimensions = undefined;
       this.overlayNode = undefined;
 

src/res/css/uwui-base.scss

@@ -1,6 +1,27 @@
 .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;
+
+  // Ensure we're display:block
+  display: block;
+
+  // we are click-through by default:
+  pointer-events: none;
+
 }