Open in-player settings window, get player selection to somewhat work

This commit is contained in:
Tamius Han 2026-01-25 21:47:31 +01:00
parent 2cb6a88c5e
commit e1dd0f9c04
6 changed files with 61 additions and 30 deletions

View File

@ -451,6 +451,18 @@ export class SiteSettings {
return this.site;
}
/**
* Ensures current site has its own separate copy of settings.
*/
async ensureSettings() {
if (!this.settings.active.sites[this._site]) {
this.settings.active.sites[this._site] = _cp(this.data);
this.settings.active.sites[this._site].type = SiteSupportLevel.UserDefined;
await this.settings.saveWithoutReload();
this.raw = this.settings.active.sites[this._site];
}
}
/**
* Sets option value.
* @param optionPath path to value in object notation (dot separated)

View File

@ -321,8 +321,6 @@ export class ClientMenu {
recalculateActivator();
}
const d = Math.hypot(e.clientX - cx, e.clientY - cy);
console.log('activator radius:', activationRadius, 'mouse distance:', d);
this.isWithinActivation = d <= activationRadius;
} else {

View File

@ -84,6 +84,13 @@ class UI {
this.extensionMenu.show({forceShow: false});
}
}
},
'uw-show-settings-window': {
function: (commandData, context) => {
console.warn('received show settings window:', commandData, context, 'is global?', this.isGlobal);
this.createSettingsWindow(commandData?.initialState);
}
}
});
}

View File

@ -86,7 +86,7 @@ export default defineComponent({
},
methods: {
showInPlayerUi() {
this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
this.eventBus.send('uw-show-settings-window', {initialState: '', allFrames: true}, {comms: {forwardTo: 'active'}});
},
openSettingsInTab() {
chrome.runtime.openOptionsPage();

View File

@ -7,11 +7,11 @@
<p>Select the first box that highlights the video player on the page.</p>
</div>
<div class="">
<!-- <div class="">
<div class="flex flex-row gap-4">
<button>How to use</button>
</div>
</div>
</div> -->
<!-- PLAYER ELEMENT SELECTOR FOR DUMMIES -->
<div class="flex flex-col-reverse gap-2">
@ -30,7 +30,7 @@
@mouseover="markElement(elementStack.length - index - 1, true)"
@mouseleave="markElement(elementStack.length - index - 1, false)"
@click="setPlayer(elementStack.length - index - 1)"
@click="setPlayer(element, elementStack.length - index - 1)"
>
<div
v-if="element.heuristics?.autoMatch"
@ -81,6 +81,10 @@
</template>
<script lang="ts">
import { PlayerDetectionMode } from '@src/common/enums/PlayerDetectionMode.enum';
import { SiteSupportLevel } from '@src/common/enums/SiteSupportLevel.enum';
import { SiteDOMSettingsInterface } from '@src/common/interfaces/SettingsInterface';
import { _cp } from '@src/common/utils/_cp';
import { defineComponent } from 'vue';
export default defineComponent({
@ -137,25 +141,35 @@ export default defineComponent({
markElement(parentIndex, enable) {
this.eventBus.send('set-mark-element', {parentIndex, enable});
},
async setPlayer(index) {
// yup.
// this.siteSettings.getDOMConfig('modified', 'original');
// await this.siteSettings.setUpdateFlags(['PlayerData']);
// await this.siteSettings.set('DOMConfig.modified.type', 'modified', {noSave: true});
// await this.siteSettings.set('activeDOMConfig', 'modified', {noSave: true});
/**
* Designates new element as player element. Currently, we only need
* 'index', however at some point we might also set mode according
* to element flags.
*/
async setPlayer(element, index) {
await this.siteSettings.ensureSettings();
// // if user agrees with ultrawidify on what element player should be,
// // we just unset our settings for this site
// if (this.elementStack[index].heuristics?.autoMatch) {
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', false);
// this.getPlayerTree();
// } else {
// // ensure settings exist:
// await this.siteSettings.set('DOMConfig.modified.elements.player.manual', true, {noSave: true});
// await this.siteSettings.set('DOMConfig.modified.elements.player.mode', 'index', {noSave: true});
// await this.siteSettings.set('DOMConfig.modified.elements.player.index', index, true);
// this.getPlayerTree();
// }
let domConfig: SiteDOMSettingsInterface = this.siteSettings.data.currentDOMConfig;
let domConfigName = this.siteSettings.data.activeDOMConfig.startsWith('@') ? 'custom' : this.siteSettings.data.activeDOMConfig;
switch (domConfig?.type) {
case SiteSupportLevel.UserModified:
case SiteSupportLevel.UserDefined:
break;
default:
domConfig = _cp(domConfig ?? this.settings.sites['@empty'].DOMConfig['@empty']);
domConfig.type = SiteSupportLevel.UserModified;
break;
}
domConfig.elements.player.detectionMode = index !== undefined ? PlayerDetectionMode.AncestorIndex : PlayerDetectionMode.Auto;
domConfig.elements.player.ancestorIndex = index;
await this.siteSettings.setUpdateFlags(['PlayerData']);
await this.siteSettings.set(`DOMConfig.${domConfigName}`, domConfig, {noSave: true});
await this.siteSettings.set('activeDOMConfig', domConfigName);
this.getPlayerTree();
},
/**
* Toggles active CSS for element of certain parent index.

View File

@ -186,7 +186,7 @@ export default defineComponent({
this.site.host = config.site.host;
}
}
this.site = config.site;
this.site = {...config.site, from: 'set-current-site, via setupPopup'};
// this.selectedSite = this.selectedSite || config.site.host;
this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
@ -280,7 +280,7 @@ export default defineComponent({
/**
* Subscribe to event bus commands.
* Note that showing and hiding of the settings window is no longer handled by iframe
* Instead, uw-show-ui should be handled by the content-script.
* Instead, uw-show-settings-window should be handled by the content-script.
*/
this.eventBus.subscribeMulti({
'set-current-site': {
@ -294,8 +294,7 @@ export default defineComponent({
this.site.host = config.site.host;
}
}
this.site = config.site;
this.site = {...config.site, from: 'set-current-site, via setup iframe'};
this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
console.log('set-site received:', this.site, this.siteSettings, 'current path:', this.initialPath);
@ -336,6 +335,7 @@ export default defineComponent({
host: config.site,
frames: [],
hostnames: [],
from: 'has-video, via setup iframe. Settings: ' + !!this.settings + '; site settings: ' + !!this.settings.getSiteSettings({site: config.site.host}),
};
this.siteSettings = this.settings.getSiteSettings({site: this.site.host});
@ -350,7 +350,7 @@ export default defineComponent({
console.log('—————————————————————— polling from iframe window!!!!')
this.startSitePolling();
// this.eventBus.subscribe(
// 'uw-show-ui',
// 'uw-show-settings-window',
// {
// source: this,
// function: () => {
@ -376,7 +376,7 @@ export default defineComponent({
//#region EXTENSION POPUP
showInPlayerUi() {
this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
this.eventBus.send('uw-show-settings-window', {initialState: undefined, allFrames: true}, {comms: {forwardTo: 'active'}});
},
async sleep(t) {
return new Promise<void>( (resolve,reject) => {