Add very rudimentary context menu

src/csui/PlayerOverlay.vue

@@ -6,10 +6,61 @@
     :style="uwTriggerRegionConf"
     @mouseenter="showUwWindow"
   >
-    <h1>Aspect ratio controls</h1>
+    <!-- <h1>Aspect ratio controls</h1>
-    <div>Hover to activate</div>
+    <div>Hover to activate</div> -->
+    [ |> ]
+
   </div>
 
+  <div class="context-spawn uw-clickable">
+
+    <GhettoContextMenu alignment="right">
+      <template v-slot:activator>
+        <div class="context-item">
+          Ultrawidify
+        </div>
+        </template>
+      <slot>
+        <div class="menu-width">
+        <GhettoContextMenu alignment="right">
+          <template v-slot:activator>
+            <div class="context-item">
+              Crop
+            </div>
+          </template>
+          <slot>
+            <div>MEnu item 1</div>
+            <div>Menu item 2</div>
+            <div>Menu item 3</div>
+          </slot>
+        </GhettoContextMenu>
+        <GhettoContextMenu alignment="right">
+          <template v-slot:activator>
+            <div class="context-item">
+              Stretch
+            </div>
+          </template>
+          <slot>
+            <div>Menu item 4</div>
+            <div>Menu item 5</div>
+            <div>Menu item 6</div>
+          </slot>
+        </GhettoContextMenu>
+        <GhettoContextMenu alignment="right">
+          <template v-slot:activator>
+            <div class="context-item">
+              Align
+            </div>
+          </template>
+        </GhettoContextMenu>
+        <button @click="showUiWindow()">Extension settings</button>
+        <button @click="showUiWindow()">Not working?</button>
+        </div>
+      </slot>
+    </GhettoContextMenu>
+  </div>
+
+
   <div
     v-if="settingsInitialized && uwWindowVisible"
     class="uw-window flex flex-col uw-clickable"
@@ -30,7 +81,8 @@
 </template>
 
 <script>
-import PlayerUIWindow from './src/PlayerUIWindow.vue'
+import PlayerUIWindow from './src/PlayerUIWindow.vue';
+import GhettoContextMenu from './src/components/GhettoContextMenu.vue';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import Logger from '../ext/lib/Logger';
 import Settings from '../ext/lib/Settings';
@@ -39,7 +91,8 @@ import UIProbeMixin from './src/utils/UIProbeMixin';
 
 export default {
   components: {
-    PlayerUIWindow
+    PlayerUIWindow,
+    GhettoContextMenu
   },
   mixins: [
     UIProbeMixin
@@ -302,7 +355,6 @@ export default {
 
 .uw-hover {
   position: absolute;
-
   z-index: 999999999999999999;
 }
 
@@ -342,4 +394,31 @@ export default {
   }
 }
 
+
+.context-spawn {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  // width: 100%;
+  // height: 100%;
+
+  padding: 2rem;
+
+  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;
+  }
+}
+
 </style>

src/csui/src/components/GhettoContextMenu.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="context-container" @mouseleave="hideContextMenu()">
+    <div class="activator"
+      @click="showContextMenu()"
+      @mouseenter="showContextMenu()"
+    >
+      <slot name="activator"></slot>
+    </div>
+      <div
+        v-if="contextMenuVisible"
+        class="context-menu"
+        :class="{
+          'menu-left': alignment === 'left',
+          'menu-right': alignment !== 'left'
+        }"
+        @mouseleave="hideContextMenu()"
+      >
+        <slot></slot>
+      </div>
+  </div>
+
+</template>
+<script>
+
+export default {
+  props: {
+    alignment: String,
+  },
+  data() {
+    return {
+      contextMenuVisible: false,
+      contextMenuHideTimeout: undefined,
+    }
+  },
+  methods: {
+    showContextMenu() {
+      console.log('will show context menu.')
+      this.contextMenuVisible = true;
+    },
+    hideContextMenu() {
+      this.contextMenuHideTimeout = setTimeout( () => {
+        this.contextMenuVisible = false;
+      }, 250);
+    }
+  }
+}
+</script>
+<style>
+.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>