Make the context menu slightly less rudimentary

src/csui/PlayerOverlay.vue

@@ -1,18 +1,10 @@
 <template>
-
   <div
-    v-if="settingsInitialized && uwTriggerZoneVisible && !isGlobal"
+    v-if="contextMenuActive || settingsInitialized && uwTriggerZoneVisible && !isGlobal"
-    class="uw-hover uv-hover-trigger-region uw-clickable"
+    class="context-spawn uw-clickable"
-    :style="uwTriggerRegionConf"
+    @mouseenter="preventContextMenuHide()"
-    @mouseenter="showUwWindow"
+    @mouseleave="allowContextMenuHide()"
   >
-    <!-- <h1>Aspect ratio controls</h1>
-    <div>Hover to activate</div> -->
-    [ |> ]
-
-  </div>
-
-  <div class="context-spawn uw-clickable">
 
     <GhettoContextMenu alignment="right">
       <template v-slot:activator>
@@ -22,28 +14,43 @@
         </template>
       <slot>
         <div class="menu-width">
+        <GhettoContextMenuItem :disableHover="true" :css="{'ard-blocked': true}">
+          <div v-if="statusFlags.hasDrm || true" class="smallcaps text-center">
+            <b>NOTE:</b><br/>
+            <b>Autodetection<br/>blocked by website</b>
+          </div>
+          <div>
+
+          </div>
+        </GhettoContextMenuItem>
         <GhettoContextMenu alignment="right">
           <template v-slot:activator>
-            <div class="context-item">
+            Crop
-              Crop
-            </div>
           </template>
           <slot>
-            <div>MEnu item 1</div>
+            <GhettoContextMenuOption
-            <div>Menu item 2</div>
+              v-for="(command, index) of settings?.active.commands.crop"
-            <div>Menu item 3</div>
+              :key="index"
+              :label="command.label"
+              :shortcut="getKeyboardShortcutLabel(command)"
+              @click="execAction(command)"
+            >
+            </GhettoContextMenuOption>
           </slot>
         </GhettoContextMenu>
         <GhettoContextMenu alignment="right">
           <template v-slot:activator>
-            <div class="context-item">
+            Stretch
-              Stretch
-            </div>
           </template>
           <slot>
-            <div>Menu item 4</div>
+            <GhettoContextMenuOption
-            <div>Menu item 5</div>
+              v-for="(command, index) of settings?.active.commands.stretch"
-            <div>Menu item 6</div>
+              :key="index"
+              :label="command.label"
+              :shortcut="getKeyboardShortcutLabel(command)"
+              @click="execAction(command)"
+            >
+            </GhettoContextMenuOption>
           </slot>
         </GhettoContextMenu>
         <GhettoContextMenu alignment="right">
@@ -52,9 +59,21 @@
               Align
             </div>
           </template>
+          <slot>
+            <GhettoContextMenuItem :disableHover="true" :css="{'reduced-padding': true}">
+              <AlignmentOptionsControlComponent
+                :eventBus="eventBus"
+              >
+              </AlignmentOptionsControlComponent>
+            </GhettoContextMenuItem>
+          </slot>
         </GhettoContextMenu>
-        <button @click="showUiWindow()">Extension settings</button>
+        <GhettoContextMenuOption
-        <button @click="showUiWindow()">Not working?</button>
+          @click="showUwWindow()"
+          label="Extension settings"
+        >
+        </GhettoContextMenuOption>
+        <button @click="showUwWindow()">Not working?</button>
         </div>
       </slot>
     </GhettoContextMenu>
@@ -65,8 +84,6 @@
     v-if="settingsInitialized && uwWindowVisible"
     class="uw-window flex flex-col uw-clickable"
     :class="{'fade-out': uwWindowFadeOut}"
-    @mouseenter="cancelUwWindowHide"
-    @mouseleave="hideUwWindow()"
   >
     <PlayerUIWindow
       :settings="settings"
@@ -83,19 +100,29 @@
 <script>
 import PlayerUIWindow from './src/PlayerUIWindow.vue';
 import GhettoContextMenu from './src/components/GhettoContextMenu.vue';
+import GhettoContextMenuItem from './src/components/GhettoContextMenuItem.vue';
+import GhettoContextMenuOption from './src/components/GhettoContextMenuOption.vue';
+import AlignmentOptionsControlComponent from './src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import Logger from '../ext/lib/Logger';
 import Settings from '../ext/lib/Settings';
 import EventBus from '../ext/lib/EventBus';
 import UIProbeMixin from './src/utils/UIProbeMixin';
+import KeyboardShortcutParserMixin from './src/utils/KeyboardShortcutParserMixin';
+import CommsMixin from './src/utils/CommsMixin';
 
 export default {
   components: {
     PlayerUIWindow,
-    GhettoContextMenu
+    GhettoContextMenu,
+    GhettoContextMenuItem,
+    GhettoContextMenuOption,
+    AlignmentOptionsControlComponent,
   },
   mixins: [
-    UIProbeMixin
+    UIProbeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
   ],
   data() {
     return {
@@ -132,6 +159,8 @@ export default {
       isGlobal: true,
       disabled: false,
 
+      contextMenuActive: false,
+
       uiVisible: true,
       debugData: {
         resizer: {},
@@ -294,6 +323,15 @@ export default {
       );
     },
 
+    preventContextMenuHide() {
+      console.log('entered context menu ...');
+      this.contextMenuActive = true;
+    },
+    allowContextMenuHide() {
+      console.log('exited context menu ...');
+      this.contextMenuActive = false;
+    },
+
     showUwWindow() {
       this.uwWindowFadeOut = false;
       this.uwWindowVisible = true;
@@ -343,7 +381,12 @@ export default {
   }
 }
 </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" scoped>
 @import 'res/css/uwui-base.scss';
 @import 'res/css/colors.scss';
@@ -352,12 +395,15 @@ export default {
 @import 'res/css/common.scss';
 @import './src/res-common/_variables';
 
-
 .uw-hover {
   position: absolute;
   z-index: 999999999999999999;
 }
 
+.reduced-padding {
+  padding: 1rem !important;
+}
+
 .uv-hover-trigger-region {
   display: flex;
   flex-direction: column;
@@ -394,6 +440,14 @@ export default {
   }
 }
 
+.gib-bg {
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px) saturate(120%);
+
+  width: fit-content;
+  block-size: fit-content;
+}
+
 
 .context-spawn {
   position: absolute;
@@ -411,14 +465,14 @@ export default {
 
   color: #fff;
 
-  .context-item {
+  // .context-item {
-    font-size: .95rem;
+  //   font-size: .95rem;
-    padding: 1rem 1.6rem;
+  //   padding: 1rem 1.6rem;
-    background-color: rgba(0, 0, 0, 0.5);
+  //   background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(16px) saturate(120%);
+  //   backdrop-filter: blur(16px) saturate(120%);
 
-    white-space: nowrap;
+  //   white-space: nowrap;
-  }
+  // }
 }
 
 </style>

src/csui/src/PlayerUIWindow.vue

@@ -105,13 +105,13 @@
 
         <div class="flex flex-row panel-content">
           <!-- Panel section -->
-          <VideoSettings
+          <!-- <VideoSettings
             v-if="selectedTab === 'videoSettings'"
             :settings="settings"
             :siteSettings="siteSettings"
             :eventBus="eventBus"
             :site="site"
-          ></VideoSettings>
+          ></VideoSettings> -->
           <PlayerDetectionPanel
             v-if="selectedTab === 'playerDetection'"
             :siteSettings="siteSettings"
@@ -180,16 +180,16 @@ export default {
       },
 
       tabs: [
-        {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
+        // {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: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         // {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
         // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
         // {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
         {id: 'changelog', label: 'What\'s new', icon: 'information-box-outline' },
         {id: 'about', label: 'About', icon: 'star-four-points-circle'}
       ],
-      selectedTab: 'videoSettings',
+      selectedTab: 'extensionSettings',
       BrowserDetect: BrowserDetect,
       preventClose: false,
       siteSettings: null,

src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue

@@ -1,64 +1,58 @@
 <template>
   <div class="alignment-box">
-    <div class="row">
+    <div
-      <div
+      class="col top left"
-        class="col top left"
+      @click="align(VideoAlignment.Left, VideoAlignment.Top)"
-        @click="align(VideoAlignment.Left, VideoAlignment.Top)"
+    >
-      >
+      <div class="alignment-ui"></div>
-        <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>
-    <div class="row">
+    <div
-      <div
+      class="col top center"
-        class="col ycenter left"
+      @click="align(VideoAlignment.Center, VideoAlignment.Top)"
-        @click="align(VideoAlignment.Left, VideoAlignment.Center)"
+    >
-      >
+      <div class="alignment-ui"></div>
-        <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>
-    <div class="row">
+    <div
-      <div
+      class="col top right"
-        class="col bottom left"
+      @click="align(VideoAlignment.Right, VideoAlignment.Top)"
-        @click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
+    >
-      >
+      <div class="alignment-ui"></div>
-        <div class="alignment-ui"></div>
+    </div>
-      </div>
+    <div
-      <div
+      class="col ycenter left"
-        class="col bottom center"
+      @click="align(VideoAlignment.Left, VideoAlignment.Center)"
-        @click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
+    >
-      >
+      <div class="alignment-ui"></div>
-        <div class="alignment-ui"></div>
+    </div>
-      </div>
+    <div
-      <div
+      class="col ycenter center"
-        class="col bottom right"
+      @click="align(VideoAlignment.Center, VideoAlignment.Center)"
-        @click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
+    >
-      >
+      <div class="alignment-ui"></div>
-        <div class="alignment-ui"></div>
+    </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>
@@ -87,23 +81,16 @@ export default {
 <style lang="scss" scoped module>
 .alignment-box {
   aspect-ratio: 1;
-  width: 100%;
+  // width: 100%;
-  min-width: 40px;
+  // min-width: 40px;
-  max-width: 80px;
+  // max-width: 80px;
 
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
 
-  .row {
-    flex: 0 0 33%;
-
-    display: flex;
-    flex-direction: row;
-  }
 
   .col {
-    flex: 0 0 33%;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -111,7 +98,6 @@ export default {
     background-color: rgba(0,0,0,0.25);
     cursor: pointer;
 
-    margin: 0.125rem;
     padding: 0.5rem;
     width: 1.5rem;
     height: 1.5rem;

src/csui/src/components/GhettoContextMenu.vue

@@ -1,28 +1,37 @@
 <template>
   <div class="context-container" @mouseleave="hideContextMenu()">
-    <div class="activator"
+    <GhettoContextMenuItem
+      class="activator"
+      :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"
+      :class="{
+        'menu-left': alignment === 'left',
+        'menu-right': alignment === 'right'
+      }"
+      @mouseleave="hideContextMenu()"
+    >
+      <slot></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>
+import GhettoContextMenuItem from './GhettoContextMenuItem.vue';
 
 export default {
+  components: {
+    GhettoContextMenuItem,
+  },
   props: {
     alignment: String,
   },
@@ -40,12 +49,12 @@ export default {
     hideContextMenu() {
       this.contextMenuHideTimeout = setTimeout( () => {
         this.contextMenuVisible = false;
-      }, 250);
+      }, 50);
     }
   }
 }
 </script>
-<style>
+<style lang="scss" scoped>
 .context-container {
   position: relative;
 }
@@ -67,5 +76,44 @@ export default {
 .menu-right {
   left: 100%;
 }
-
+</style>
+<style lang="scss">
+.activator {
+  position: relative;
+  padding: 1rem 1.6rem;
+
+  font-size: .95rem;
+  padding: 1rem 1.6rem;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(16px) saturate(120%);
+
+  white-space: nowrap;
+  &:hover {
+    background-color: rgba(255, 128, 64, 0.5);
+  }
+
+  &.expand-left {
+    padding-left: 2.2rem;
+  }
+  &.expand-right {
+    padding-right: 2.2rem;
+  }
+
+  &.expand-left::before,
+  &.expand-right::after {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.88rem;
+  }
+
+  &.expand-left::before {
+    content: '⮜';
+    left: 0.5rem;
+  }
+  &.expand-right::after {
+    content: '⮞';
+    right: 0.5rem;
+  }
+}
 </style>

src/csui/src/components/GhettoContextMenuItem.vue

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

src/csui/src/components/GhettoContextMenuOption.vue

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