Try to recreate some UI in popup
This commit is contained in:
parent
b9b021f466
commit
d558717152
@ -27,6 +27,14 @@
|
|||||||
<div class="">
|
<div class="">
|
||||||
side menu
|
side menu
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<PopupVideoSettings
|
||||||
|
:settings="settings"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
:site="site"
|
||||||
|
:frame="site.frame[0]"
|
||||||
|
></PopupVideoSettings>
|
||||||
|
</div>
|
||||||
<pre>
|
<pre>
|
||||||
---- site:
|
---- site:
|
||||||
{{site}}
|
{{site}}
|
||||||
|
|||||||
@ -1,85 +0,0 @@
|
|||||||
import { browser } from '../../../node_modules/webextension-polyfill-ts/lib/index';
|
|
||||||
import Settings from '../../ext/lib/Settings';
|
|
||||||
|
|
||||||
class ExecAction {
|
|
||||||
settings: Settings;
|
|
||||||
site: any;
|
|
||||||
|
|
||||||
constructor(settings, site) {
|
|
||||||
this.settings = settings;
|
|
||||||
this.site = site;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSettings(settings) {
|
|
||||||
this.settings = settings;
|
|
||||||
}
|
|
||||||
setSite(site) {
|
|
||||||
this.site = site;
|
|
||||||
}
|
|
||||||
|
|
||||||
async exec(action, scope, frame) {
|
|
||||||
for (var cmd of action.cmd) {
|
|
||||||
if (scope === 'page') {
|
|
||||||
const message = {
|
|
||||||
forwardToContentScript: true,
|
|
||||||
targetFrame: frame,
|
|
||||||
frame: frame,
|
|
||||||
cmd: cmd.action,
|
|
||||||
arg: cmd.arg,
|
|
||||||
customArg: cmd.customArg
|
|
||||||
}
|
|
||||||
browser.runtime.sendMessage(message);
|
|
||||||
} else {
|
|
||||||
|
|
||||||
// set-ar-persistence sends stuff to content scripts as well (!)
|
|
||||||
// it's important to do that BEFORE the save step
|
|
||||||
if (cmd.action === 'set-ar-persistence') {
|
|
||||||
// even when setting global defaults, we only send message to the current tab in
|
|
||||||
// order to avoid problems related to
|
|
||||||
const message = {
|
|
||||||
forwardToActive: true,
|
|
||||||
targetFrame: frame,
|
|
||||||
frame: frame,
|
|
||||||
cmd: cmd.action,
|
|
||||||
arg: cmd.arg,
|
|
||||||
}
|
|
||||||
// this hopefully delays settings.save() until current crops are saved on the site
|
|
||||||
// and thus avoid any fucky-wuckies
|
|
||||||
await browser.runtime.sendMessage(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
let site = this.site;
|
|
||||||
if (scope === 'global') {
|
|
||||||
site = '@global';
|
|
||||||
} else if (!this.site) {
|
|
||||||
site = window.location.hostname;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (scope === 'site' && !this.settings.active.sites[site]) {
|
|
||||||
this.settings.active.sites[site] = this.settings.getDefaultOption();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cmd.action === "set-stretch") {
|
|
||||||
this.settings.active.sites[site].stretch = cmd.arg;
|
|
||||||
} else if (cmd.action === "set-alignment") {
|
|
||||||
this.settings.active.sites[site].videoAlignment = cmd.arg;
|
|
||||||
} else if (cmd.action === "set-extension-mode") {
|
|
||||||
this.settings.active.sites[site].mode = cmd.arg;
|
|
||||||
} else if (cmd.action === "set-autoar-mode") {
|
|
||||||
this.settings.active.sites[site].autoar = cmd.arg;
|
|
||||||
} else if (cmd.action === 'set-keyboard') {
|
|
||||||
this.settings.active.sites[site].keyboardShortcutsEnabled = cmd.arg;
|
|
||||||
} else if (cmd.action === 'set-ar-persistence') {
|
|
||||||
this.settings.active.sites[site]['cropModePersistence'] = cmd.arg;
|
|
||||||
this.settings.saveWithoutReload();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cmd.action !== 'set-ar-persistence') {
|
|
||||||
this.settings.save();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ExecAction;
|
|
||||||
@ -1,74 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
|
<div class="flex flex-column" style="padding-bottom: 20px">
|
||||||
|
<div class="flex flex-row">
|
||||||
<div v-if="settings" class="sub-panel">
|
<mdicon name="crop" :size="32" />
|
||||||
<div class="flex flex-row">
|
<h1>Crop video:</h1>
|
||||||
<mdicon name="crop" :size="32" />
|
|
||||||
<h1>Crop video:</h1>
|
|
||||||
</div>
|
|
||||||
<div class="sub-panel-content flex flex-row flex-wrap">
|
|
||||||
<ShortcutButton
|
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
|
||||||
class="flex b3 button"
|
|
||||||
:class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
|
|
||||||
:key="index"
|
|
||||||
:label="command.label"
|
|
||||||
:shortcut="getKeyboardShortcutLabel(command)"
|
|
||||||
@click="editMode ? editAction(command, index, 'crop') : execAction(command)"
|
|
||||||
>
|
|
||||||
</ShortcutButton>
|
|
||||||
|
|
||||||
<!-- "Add new" button -->
|
|
||||||
<ShortcutButton
|
|
||||||
v-if="editMode"
|
|
||||||
class="button b3"
|
|
||||||
:class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
|
|
||||||
label="Add new"
|
|
||||||
@click="editAction(
|
|
||||||
{action: 'set-ar', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
|
|
||||||
null,
|
|
||||||
'crop'
|
|
||||||
)"
|
|
||||||
></ShortcutButton>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="edit-action-area">
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Default for this site</div>
|
|
||||||
<div class="select">
|
|
||||||
<select
|
|
||||||
:value="siteDefaultCrop"
|
|
||||||
@click="setDefaultCrop($event, 'site')"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="label">Extension default</div>
|
|
||||||
<div class="select">
|
|
||||||
<select
|
|
||||||
:value="extensionDefaultCrop"
|
|
||||||
@click="setDefaultCrop($event, 'global')"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(command, index) of settings?.active.commands.crop"
|
|
||||||
:key="index"
|
|
||||||
:value="JSON.stringify(command.arguments)"
|
|
||||||
>
|
|
||||||
{{command.label}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<CropOptionsPanel
|
||||||
|
:settings="settings"
|
||||||
|
:frame="frame"
|
||||||
|
:exec="exec"
|
||||||
|
:eventBus="eventBus"
|
||||||
|
:site="site"
|
||||||
|
:isEditing="false"
|
||||||
|
>
|
||||||
|
</CropOptionsPanel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ExecAction from '../../csui/src/ui-libs/ExecAction';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
exec: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mixins: [
|
||||||
|
|
||||||
|
],
|
||||||
|
props: [
|
||||||
|
'settings',
|
||||||
|
'frame',
|
||||||
|
'eventBus',
|
||||||
|
'site'
|
||||||
|
],
|
||||||
|
created() {
|
||||||
|
this.exec = new ExecAction(this.settings, window.location.hostname);
|
||||||
|
this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.eventBus.sendToTunnel('get-ar');
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user