From 35bb5b477b9ed1ca5fcf0aa9ead02d56c2c088d3 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Thu, 15 Jan 2026 02:33:21 +0100 Subject: [PATCH] Finalize menu position settings, replace eventBus.sendToTunnel() with eventBus.send() --- .../interfaces/ClientUiMenu.interface.ts | 2 +- src/common/interfaces/SettingsInterface.ts | 7 +- src/ext/conf/ExtensionConf.ts | 4 +- src/ext/module/uwui/ClientMenu.ts | 30 +++- src/ext/module/uwui/UI.ts | 32 ++++- .../AutodetectionSettings.vue | 6 +- .../Panels/PlayerSelectorSimple.vue | 8 +- .../PlayerElementWindow.vue | 8 +- .../segments/UISettings/UISettings.vue | 132 +++++++++++++----- .../segments/VideoSettings/VideoSettings.vue | 10 +- src/ui/res/styles/player-menu.css | 21 ++- src/ui/utils/mixins/CommsMixin.vue | 2 +- 12 files changed, 188 insertions(+), 74 deletions(-) diff --git a/src/common/interfaces/ClientUiMenu.interface.ts b/src/common/interfaces/ClientUiMenu.interface.ts index e5f7ddb..3495ff8 100644 --- a/src/common/interfaces/ClientUiMenu.interface.ts +++ b/src/common/interfaces/ClientUiMenu.interface.ts @@ -23,6 +23,6 @@ export enum MenuPosition { export interface MenuConfig { isGlobal?: boolean; ui: InPlayerUIOptions; - menuPosition: MenuPosition; + options?: {forceShow?: boolean}; items: MenuItemConfig[]; } diff --git a/src/common/interfaces/SettingsInterface.ts b/src/common/interfaces/SettingsInterface.ts index 87258b0..e298dc2 100644 --- a/src/common/interfaces/SettingsInterface.ts +++ b/src/common/interfaces/SettingsInterface.ts @@ -9,6 +9,7 @@ import StretchType from '@src/common/enums/StretchType.enum' import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum' import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum'; import { InputHandlingMode } from '@src/common/enums/InputHandlingMode.enum'; +import { MenuPosition } from '@src/common/interfaces/ClientUiMenu.interface'; export enum ExtensionEnvironment { Normal = ExtensionMode.All, @@ -309,14 +310,14 @@ interface DevSettings { } export interface InPlayerUIOptions { - activatorAlignment: 'left' | 'right', + activatorAlignment: MenuPosition, minEnabledWidth: number, // don't show UI if player is narrower than % of screen width minEnabledHeight: number, // don't show UI if player is narrower than % of screen height activation: 'player' | 'player-ctrl' | 'trigger-zone' | 'distance' | 'none', // what needs to be hovered in order for UI to be visible activationDistance: number, activationDistanceUnits: '%' | 'px', - activatorPadding: 10, - activatorPaddingUnit: '%' | 'px', + activatorPadding: {x: number, y: number} + activatorPaddingUnit: {x: '%' | 'px', y: '%' | 'px'}, triggerZoneDimensions: { // how large the trigger zone is (relative to player size) width: number height: number, diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts index 3f9cb67..437d66b 100644 --- a/src/ext/conf/ExtensionConf.ts +++ b/src/ext/conf/ExtensionConf.ts @@ -267,8 +267,8 @@ const ExtensionConf: SettingsInterface = { activationDistance: 100, activationDistanceUnits: '%', activatorAlignment: 'left', - activatorPadding: 10, - activatorPaddingUnit: '%', + activatorPadding: {x: 16, y: 16}, + activatorPaddingUnit: {x: 'px', y: 'px'}, triggerZoneDimensions: { width: 0.5, height: 0.5, diff --git a/src/ext/module/uwui/ClientMenu.ts b/src/ext/module/uwui/ClientMenu.ts index fc946e7..eebc3fe 100644 --- a/src/ext/module/uwui/ClientMenu.ts +++ b/src/ext/module/uwui/ClientMenu.ts @@ -19,6 +19,7 @@ export class ClientMenu { private isHovered = false; + private forceShow = false; private isWithinActivation = false; private lastMouseMove = performance.now(); private idleTimer?: number; @@ -29,7 +30,11 @@ export class ClientMenu { private onDocumentMouseLeave?: () => void; private idleIntervalId?: number; - constructor(private config: MenuConfig) {} + constructor(private config: MenuConfig) { + if (config.options?.forceShow !== undefined) { + this.forceShow = config.options.forceShow; + } + } mount(anchorElement: HTMLElement) { this.buildMenuPositionClassList(); @@ -173,7 +178,8 @@ export class ClientMenu { */ private buildMenuPositionClassList() { let classList; - switch (this.config.menuPosition) { + console.log('BUILDING MENU POS:', MenuPosition[this.config.ui.activatorAlignment]); + switch (this.config.ui.activatorAlignment) { case MenuPosition.TopLeft: classList = ['uw-menu-left','uw-menu-top']; break; @@ -209,10 +215,14 @@ export class ClientMenu { private createMenu() { this.root = document.createElement('div'); this.root.className = 'uw-menu-root uw-hidden'; + this.root.setAttribute( + 'style', + `padding: ${this.config.ui.activatorPadding.y ?? 16}${this.config.ui.activatorPaddingUnit.y ?? 'px'} ${this.config.ui.activatorPadding.x ?? 16}${this.config.ui.activatorPaddingUnit.x ?? 'px'}` + ); + const trigger = document.createElement('div'); trigger.classList = 'uw-menu-trigger uw-trigger'; - trigger.style = `margin: ${this.config.ui.activatorPadding ?? 10} ${this.config.ui.activatorPaddingUnit ?? '%'}`; trigger.textContent = 'Ultrawidify'; this.trigger = trigger; @@ -364,7 +374,7 @@ export class ClientMenu { } } - private show() { + show(options?: {forceShow?: boolean}) { this.lastMouseMove = performance.now(); if (!this.visible) { @@ -372,10 +382,18 @@ export class ClientMenu { this.root.classList.add('uw-visible'); this.root.classList.remove('uw-hidden'); } + + if (options?.forceShow !== undefined) { + this.forceShow = options.forceShow; + } } - private hide() { - if (this.visible) { + hide(options?: {forceShow?: boolean}) { + if (options?.forceShow !== undefined) { + this.forceShow = options.forceShow; + } + + if (this.visible && !this.forceShow) { this.visible = false; this.root.classList.remove('uw-visible'); this.root.classList.add('uw-hidden'); diff --git a/src/ext/module/uwui/UI.ts b/src/ext/module/uwui/UI.ts index bbd305b..e666eca 100644 --- a/src/ext/module/uwui/UI.ts +++ b/src/ext/module/uwui/UI.ts @@ -68,6 +68,24 @@ class UI { // UI will be initialized when setUiVisibility is called if (!this.isGlobal) { this.init(); + + this.eventBus.subscribeMulti({ + 'reload-menu': { + function: () => { + this.createExtensionMenu({forceShow: true}); + this.extensionMenu.show({forceShow: true}); + } + }, + 'force-menu-activator-state': { + function: (commandData) => { + if (commandData.visibility) { + this.extensionMenu.show({forceShow: true}); + } else { + this.extensionMenu.show({forceShow: false}); + } + } + } + }); } } @@ -164,7 +182,7 @@ class UI { } } - createExtensionMenu() { + createExtensionMenu(options?: {forceShow?: boolean}) { if (+this.siteSettings?.data.enableUI === ExtensionMode.Disabled || this.isGlobal) { return; // don't } @@ -185,6 +203,7 @@ class UI { const menuConfig = { isGlobal: this.isGlobal, ui: this.settings.active.ui.inPlayer, + options, items: [ { customClassList: 'uw-site-info', @@ -339,7 +358,7 @@ class UI { action: () => this.createSettingsWindow('about'), } ] - } + }; this.extensionMenu = new ClientMenu(menuConfig); this.extensionMenu.mount(this.uiConfig.parentElement); @@ -347,10 +366,13 @@ class UI { * SETUP MENU INTERACTIONS * ——————————————————————————————————— * Interactions are needed for the following things: - * 0. [ ] both sliders. Needs to read the state of the sliders and update the labels - * 1. [ ] lock X/Y button — needs to update icon state of the button and the linked bar - * 2. [ ] reset button — just needs to reset, no icon changes necessary + * 0. [X] both sliders. Needs to read the state of the sliders and update the labels + * 1. [X] lock X/Y button — needs to update icon state of the button and the linked bar + * 2. [X] reset button — just needs to reset, no icon changes necessary * 3. [X] alignment indicator — also needs to update indicator state + * A + * | + * (yay done!) */ const menuElement = this.extensionMenu.root; diff --git a/src/ui/components/segments/AutodetectionSettings/AutodetectionSettings.vue b/src/ui/components/segments/AutodetectionSettings/AutodetectionSettings.vue index 1472f92..94edb82 100644 --- a/src/ui/components/segments/AutodetectionSettings/AutodetectionSettings.vue +++ b/src/ui/components/segments/AutodetectionSettings/AutodetectionSettings.vue @@ -206,7 +206,7 @@
- +
Show debug overlay on startup
@@ -277,7 +277,7 @@ export default defineComponent({ ); }, mounted() { - this.eventBus?.sendToTunnel('get-aard-timing'); + this.eventBus?.send('get-aard-timing'); // this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500); this.resetSettingsEditor(); }, @@ -302,7 +302,7 @@ export default defineComponent({ this.settings.saveWithoutReload(); }, refreshGraph() { - this.eventBus.sendToTunnel('get-aard-timing'); + this.eventBus.send('get-aard-timing'); }, handleConfigBroadcast(data) { if (data.type === 'aard-performance-data') { diff --git a/src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorSimple.vue b/src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorSimple.vue index 5d8df1b..4e8e9a4 100644 --- a/src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorSimple.vue +++ b/src/ui/components/segments/PlayerElementSelection/Panels/PlayerSelectorSimple.vue @@ -183,11 +183,7 @@ export default defineComponent({ this.tutorialStep = 0; }, getPlayerTree() { - if (this.isPopup) { - this.eventBus.send('get-player-tree'); - } else { - this.eventBus.sendToTunnel('get-player-tree'); - } + this.eventBus.send('get-player-tree'); }, handleElementStack(configBroadcast) { if (configBroadcast.type === 'player-tree') { @@ -196,7 +192,7 @@ export default defineComponent({ } }, markElement(parentIndex, enable) { - this.eventBus.sendToTunnel('set-mark-element', {parentIndex, enable}); + this.eventBus.send('set-mark-element', {parentIndex, enable}); }, async setPlayer(index) { // yup. diff --git a/src/ui/components/segments/PlayerElementSelection/PlayerElementWindow.vue b/src/ui/components/segments/PlayerElementSelection/PlayerElementWindow.vue index 9689a50..bc9f1e3 100644 --- a/src/ui/components/segments/PlayerElementSelection/PlayerElementWindow.vue +++ b/src/ui/components/segments/PlayerElementSelection/PlayerElementWindow.vue @@ -139,11 +139,7 @@ export default({ this.tutorialStep = 0; }, getPlayerTree() { - if (this.isPopup) { - this.eventBus.send('get-player-tree'); - } else { - this.eventBus.sendToTunnel('get-player-tree'); - } + this.eventBus.send('get-player-tree'); }, handleElementStack(configBroadcast) { if (configBroadcast.type === 'player-tree') { @@ -152,7 +148,7 @@ export default({ } }, markElement(parentIndex, enable) { - this.eventBus.sendToTunnel('set-mark-element', {parentIndex, enable}); + this.eventBus.send('set-mark-element', {parentIndex, enable}); }, async setPlayer(index) { // yup. diff --git a/src/ui/components/segments/UISettings/UISettings.vue b/src/ui/components/segments/UISettings/UISettings.vue index 697f144..431d4a2 100644 --- a/src/ui/components/segments/UISettings/UISettings.vue +++ b/src/ui/components/segments/UISettings/UISettings.vue @@ -9,35 +9,6 @@
-
-
- Popup activator position: -
-
- -
-
- -
-
- Popup activator padding: -
-
- -
-
@@ -99,6 +70,92 @@
+
+
+ Menu activator position: +
+
+ +
+
+ +
+
+ Menu activator horizontal padding: +
+
+ + + +
+
+ +
+
+ Menu activator vertical padding: +
+
+ + + +
+
+
Do not show in-player UI when video player is narrower than @@ -159,6 +216,7 @@