Try to recreate some UI in popup
This commit is contained in:
parent
b9b021f466
commit
d558717152
@ -27,6 +27,14 @@
|
||||
<div class="">
|
||||
side menu
|
||||
</div>
|
||||
<div>
|
||||
<PopupVideoSettings
|
||||
:settings="settings"
|
||||
:eventBus="eventBus"
|
||||
:site="site"
|
||||
:frame="site.frame[0]"
|
||||
></PopupVideoSettings>
|
||||
</div>
|
||||
<pre>
|
||||
---- 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>
|
||||
<div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
|
||||
|
||||
<div v-if="settings" class="sub-panel">
|
||||
<div class="flex flex-row">
|
||||
<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 class="flex flex-column" style="padding-bottom: 20px">
|
||||
<div class="flex flex-row">
|
||||
<mdicon name="crop" :size="32" />
|
||||
<h1>Crop video:</h1>
|
||||
</div>
|
||||
|
||||
<CropOptionsPanel
|
||||
:settings="settings"
|
||||
:frame="frame"
|
||||
:exec="exec"
|
||||
:eventBus="eventBus"
|
||||
:site="site"
|
||||
:isEditing="false"
|
||||
>
|
||||
</CropOptionsPanel>
|
||||
</div>
|
||||
|
||||
</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