Open in-player settings window, get player selection to somewhat work
This commit is contained in:
parent
2cb6a88c5e
commit
e1dd0f9c04
@ -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)
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user