@@ -50,24 +50,18 @@
-
+ >
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
-
Player UI options
-
Menu options and keyboard shortcuts
-
- Click 'add new' to add a new option. Click a button to edit or remove the keyboard shortcut.
-
-
-
-
-
-
CROP OPTIONS
-
-
-
-
-
-
-
-
-
-
STRETCH OPTIONS
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/ui/components/VideoSettings/components/ShortcutButton.vue b/src/ui/components/VideoSettings/components/ShortcutButton.vue
new file mode 100644
index 0000000..63a8fcf
--- /dev/null
+++ b/src/ui/components/VideoSettings/components/ShortcutButton.vue
@@ -0,0 +1,22 @@
+
+
+
+ {{label}}
+
+
+ {{shortcut ? `(${shortcut})` : ''}}
+
+
+
+
+
diff --git a/src/ui/components/common/mixins/CommsMixin.vue b/src/ui/components/common/mixins/CommsMixin.vue
new file mode 100644
index 0000000..1bf410c
--- /dev/null
+++ b/src/ui/components/common/mixins/CommsMixin.vue
@@ -0,0 +1,22 @@
+
diff --git a/src/ui/components/common/mixins/KeyboardShortcutParserMixin.ts b/src/ui/components/common/mixins/KeyboardShortcutParserMixin.vue
similarity index 92%
rename from src/ui/components/common/mixins/KeyboardShortcutParserMixin.ts
rename to src/ui/components/common/mixins/KeyboardShortcutParserMixin.vue
index a9856a7..42f9a38 100644
--- a/src/ui/components/common/mixins/KeyboardShortcutParserMixin.ts
+++ b/src/ui/components/common/mixins/KeyboardShortcutParserMixin.vue
@@ -1,3 +1,4 @@
+
diff --git a/src/ui/pages/popup/index.html b/src/ui/pages/popup/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/ui/pages/popup/popup.js b/src/ui/pages/popup/popup.js
new file mode 100644
index 0000000..6a1afed
--- /dev/null
+++ b/src/ui/pages/popup/popup.js
@@ -0,0 +1,30 @@
+import EventBus from '../../../ext/lib/EventBus';
+import { ComponentLogger } from '../../../ext/lib/logging/ComponentLogger';
+import { LogAggregator } from '../../../ext/lib/logging/LogAggregator';
+import Settings from '../../../ext/lib/settings/Settings';
+
+const loadedTabs = [
+ 'videoSettings',
+ 'extensionSettings',
+ 'changelog',
+ 'about',
+];
+
+async function load() {
+ const _uw_data = {
+ eventBus: new EventBus(),
+ settings: {},
+ settingsInitialized: false,
+ logAggregator: undefined,
+ logger: undefined,
+ site: undefined,
+ siteSettings: undefined,
+ comms: undefined,
+ };
+
+ _uw_data.logAggregator = new LogAggregator('🔵ext-popup🔵');
+ _uw_data.logger = new ComponentLogger(_uw_data.logAggregator, 'Popup');
+ _uw_data.settings = new Settings({logAggregator: _uw_data.logAggregator});
+
+ _uw_data.
+}
diff --git a/src/ui/pages/settings/App.vue b/src/ui/pages/settings/App.vue
index 8405966..429d7a8 100644
--- a/src/ui/pages/settings/App.vue
+++ b/src/ui/pages/settings/App.vue
@@ -1,16 +1,20 @@
-
+
-
-
Ultrawidify settings
+
+
Ultrawidify settings
Loading settings...
this.updateConfig()
- });
await this.settings.init();
this.settingsInitialized = true;
},
@@ -55,6 +72,140 @@ export default defineComponent({
updateConfig() {
this.settings.init();
this.$nextTick( () => this.$forceUpdate());
+ },
+
+ /**
+ * Initializes page when it's being loaded from the settings
+ */
+ async setupSettingsPage() {
+ this.role = 'settings';
+
+ this.logAggregator = new LogAggregator('');
+ this.logger = new ComponentLogger(this.logAggregator, 'App.vue');
+
+ this.settings = new Settings({
+ logAggregator: this.logAggregator,
+ onSettingsChanged: () => this.updateConfig()
+ });
+ },
+
+ /**
+ * Initializes page when it's being loaded as extension popup
+ */
+ async setupPopup() {
+ this.role = 'popup';
+ 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) => {
+ 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({site: 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)
+ }
+ },
+
+ /**
+ * Initializes page when it's being loaded as in-page settings window
+ */
+ async setupIframe() {
+ this.role='ui-window';
+
+ this.logAggregator = new LogAggregator('settings-page');
+ this.logger = new ComponentLogger(this.logAggregator, 'SettingsPage');
+
+ this.settings = new Settings({
+ logAggregator: this.logAggregator,
+ onSettingsChanged: () => this.updateConfig()
+ });
+
+ if (this.defaultTab) {
+ this.selectedTab = this.defaultTab;
+ }
+ this.siteSettings = this.settings.getSiteSettings({site: 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
+ }
+ },
+ }
+ )
}
}
});
diff --git a/src/ui/res/img/alignment-indicators.svg b/src/ui/res/img/alignment-indicators.svg
new file mode 100644
index 0000000..02db377
--- /dev/null
+++ b/src/ui/res/img/alignment-indicators.svg
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/ui/utils/video-alignment-indicator-handling.ts b/src/ui/utils/video-alignment-indicator-handling.ts
new file mode 100644
index 0000000..7f42d6b
--- /dev/null
+++ b/src/ui/utils/video-alignment-indicator-handling.ts
@@ -0,0 +1,68 @@
+import VideoAlignmentType from '@src/common/enums/VideoAlignmentType.enum';
+
+const positionMap: Record = {
+ [VideoAlignmentType.Left]: 'left',
+ [VideoAlignmentType.Center]: 'center',
+ [VideoAlignmentType.Right]: 'right',
+ [VideoAlignmentType.Top]: 'top',
+ [VideoAlignmentType.Bottom]: 'bottom',
+ [VideoAlignmentType.Default]: ''
+};
+
+const location2enum: Record = {
+ left: VideoAlignmentType.Left,
+ center: VideoAlignmentType.Center,
+ right: VideoAlignmentType.Right,
+ top: VideoAlignmentType.Top,
+ bottom: VideoAlignmentType.Bottom
+};
+
+
+/**
+ * Sets alignment indicator state of the video alignment SVG
+ * @param svg SVG element
+ * @param x horizontal alignment
+ * @param y vertical alignment
+ * @returns
+ */
+export function setVideoAlignmentIndicatorState(
+ svg: SVGSVGElement,
+ x: VideoAlignmentType,
+ y: VideoAlignmentType
+) {
+ // reset all indicators
+ svg.querySelectorAll('g').forEach(g => g.classList.remove('selected'));
+
+ // select the appropriate square
+ if (x === VideoAlignmentType.Default || y === VideoAlignmentType.Default) {
+ return;
+ }
+
+ const gId = `${positionMap[y]}-${positionMap[x]}`;
+ const selected = svg.getElementById(gId);
+ if (selected) selected.classList.add('selected');
+}
+
+/**
+ * Sets up interaction for the video alignment SVG
+ * @param svg SVG element
+ * @param callback function to be called, with x and y alignment (VideoAlignmentType)
+ */
+export function setupVideoAlignmentIndicatorInteraction(
+ svg: SVGSVGElement,
+ callback: (x: VideoAlignmentType, y: VideoAlignmentType) => void
+) {
+ svg.querySelectorAll('g').forEach(g => {
+ g.addEventListener('click', () => {
+ const [y, x] = g.id.split('-');
+
+ if (!x || !y)
+ return;
+
+ callback(
+ location2enum[x],
+ location2enum[y]
+ )
+ });
+ });
+}