UI fixes, re-implemented zoom
This commit is contained in:
parent
7a6ecb96bb
commit
3ff00e629d
@ -101,7 +101,7 @@ var ActionList = {
|
||||
page: true
|
||||
}
|
||||
},
|
||||
'set-zoom': {
|
||||
'change-zoom': {
|
||||
name: 'Zoom',
|
||||
args: [{
|
||||
name: 'Zoom level increase/decrease',
|
||||
@ -112,6 +112,17 @@ var ActionList = {
|
||||
page: true,
|
||||
}
|
||||
},
|
||||
'set-zoom': {
|
||||
name: 'Set zoom level',
|
||||
args: [{
|
||||
name: 'Zoom level increase/decrease',
|
||||
customArg: true,
|
||||
hintHTML: '<small>Examples: 0.5 sets zoom to 50%, 1 sets zoom to 100%, 2 sets zoom to 200%. Don\'t use negative values unless you want to experience Australian youtube.</small>'
|
||||
}],
|
||||
scopes: {
|
||||
page: true,
|
||||
}
|
||||
},
|
||||
'set-extension-mode': {
|
||||
name: 'Set extension mode',
|
||||
args: [{
|
||||
|
||||
@ -329,7 +329,7 @@ var ExtensionConf = {
|
||||
name: 'Zoom in',
|
||||
label: 'Zoom',
|
||||
cmd: [{
|
||||
action: 'set-zoom',
|
||||
action: 'change-zoom',
|
||||
arg: 0.1
|
||||
}],
|
||||
scopes: {
|
||||
@ -353,7 +353,7 @@ var ExtensionConf = {
|
||||
name: 'Zoom out',
|
||||
label: 'Unzoom',
|
||||
cmd: [{
|
||||
action: 'set-zoom',
|
||||
action: 'change-zoom',
|
||||
arg: -0.1
|
||||
}],
|
||||
scopes: {
|
||||
|
||||
@ -184,8 +184,10 @@ class ActionHandler {
|
||||
if (action.scope === 'page') {
|
||||
if (cmd.action === "set-ar") {
|
||||
this.pageInfo.setAr(cmd.arg);
|
||||
} else if (cmd.action === "set-zoom") {
|
||||
} else if (cmd.action === "change-zoom") {
|
||||
this.pageInfo.zoomStep(cmd.arg);
|
||||
} else if (cmd.action === "set-zoom") {
|
||||
this.pageInfo.setZoom(cmd.arg);
|
||||
} else if (cmd.action === "set-stretch") {
|
||||
this.pageInfo.setStretchMode(cmd.arg);
|
||||
} else if (cmd.action === "toggle-pan") {
|
||||
|
||||
@ -84,7 +84,9 @@ class CommsClient {
|
||||
// todo: autoArStatus
|
||||
this.pageInfo.resumeProcessing(message.autoArStatus, message.playing);
|
||||
} else if (message.cmd === 'set-zoom') {
|
||||
this.pageInfo.setZoom(message.zoom, true, message.playing);
|
||||
this.pageInfo.setZoom(message.arg, true, message.playing);
|
||||
} else if (message.cmd === 'change-zoom') {
|
||||
this.pageInfo.zoomStep(message.arg, message.playing);
|
||||
} else if (message.cmd === 'mark-player') {
|
||||
this.pageInfo.markPlayer(message.name, message.color);
|
||||
} else if (message.cmd === 'unmark-player') {
|
||||
|
||||
@ -39,10 +39,14 @@ class Zoom {
|
||||
}
|
||||
|
||||
setZoom(scale, no_announce){
|
||||
if (Debug.debug) {
|
||||
console.log("[Zoom::setZoom] Setting zoom to", scale, "!");
|
||||
}
|
||||
|
||||
// NOTE: SCALE IS NOT LOGARITHMIC
|
||||
if(scale < Math.pow(this.minScale)) {
|
||||
if(scale < Math.pow(2, this.minScale)) {
|
||||
scale = this.minScale;
|
||||
} else if (scale > Math.pow(this.maxScale)) {
|
||||
} else if (scale > Math.pow(2, this.maxScale)) {
|
||||
scale = this.maxScale;
|
||||
}
|
||||
|
||||
@ -55,8 +59,16 @@ class Zoom {
|
||||
}
|
||||
|
||||
applyZoom(stretchFactors){
|
||||
if (Debug.debug) {
|
||||
console.log("[Zoom::setZoom] Applying zoom. Stretch factors pre:", stretchFactors, " —> scale:", this.scale);
|
||||
}
|
||||
|
||||
stretchFactors.xFactor *= this.scale;
|
||||
stretchFactors.yFactor *= this.scale;
|
||||
|
||||
if (Debug.debug) {
|
||||
console.log("[Zoom::setZoom] Applying zoom. Stretch factors post:", stretchFactors);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
</div>
|
||||
<template v-for="(action, index) of settings.active.actions">
|
||||
<ActionAlt v-if="action.cmd.length === 1 && (
|
||||
action.cmd[0].action === 'change-zoom' ||
|
||||
action.cmd[0].action === 'set-zoom' ||
|
||||
action.cmd[0].action === 'set-pan' ||
|
||||
action.cmd[0].action === 'pan' ||
|
||||
@ -59,6 +60,7 @@
|
||||
</div>
|
||||
<template v-for="(action, index) of settings.active.actions">
|
||||
<ActionAlt v-if="action.cmd.length > 1 || (
|
||||
action.cmd[0].action !== 'change-zoom' &&
|
||||
action.cmd[0].action !== 'set-zoom' &&
|
||||
action.cmd[0].action !== 'set-pan' &&
|
||||
action.cmd[0].action !== 'pan' &&
|
||||
|
||||
@ -6,14 +6,70 @@
|
||||
|
||||
<!-- TABS/SIDEBAR -->
|
||||
<div id="tablist" class="left-side">
|
||||
<div class="menu-item"
|
||||
:class="{'selected-tab': selectedTab === 'extension'}"
|
||||
@click="selectTab('extension')"
|
||||
>
|
||||
<div class="">
|
||||
Extension settings
|
||||
</div>
|
||||
<div class="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item"
|
||||
:class="{'selected-tab': selectedTab === 'site'}"
|
||||
@click="selectTab('site')"
|
||||
>
|
||||
<div class="">
|
||||
Site settings
|
||||
</div>
|
||||
<div class="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item"
|
||||
:class="{'selected-tab': selectedTab === 'video'}"
|
||||
@click="selectTab('video')"
|
||||
>
|
||||
<div class="">
|
||||
Video settings
|
||||
</div>
|
||||
<div class="">
|
||||
</div>
|
||||
<div class="">
|
||||
<div v-for="frame of activeFrames">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item"
|
||||
:class="{'selected-tab': selectedTab === 'about'}"
|
||||
@click="selectTab('about')"
|
||||
>
|
||||
<div class="">
|
||||
About
|
||||
</div>
|
||||
<div class="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item"
|
||||
:class="{'selected-tab': selectedTab === 'beggathon'}"
|
||||
@click="selectTab('beggathon')"
|
||||
>
|
||||
<div class="">
|
||||
Donate
|
||||
</div>
|
||||
<div class="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PANELS/CONTENT -->
|
||||
<div id="tab-content" class="right-side">
|
||||
<VideoPanel v-if="settings && settings.active && true"
|
||||
<VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
|
||||
class=""
|
||||
:settings="settings"
|
||||
:frame="selectedFrame"
|
||||
:zoom="currentZoom"
|
||||
@zoom-change="updateZoom($event)"
|
||||
>
|
||||
</VideoPanel>
|
||||
</div>
|
||||
@ -21,6 +77,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Debug from '../ext/conf/Debug';
|
||||
import BrowserDetect from '../ext/conf/BrowserDetect';
|
||||
import Comms from '../ext/lib/comms/Comms';
|
||||
import VideoPanel from './panels/VideoPanel';
|
||||
import Settings from '../ext/lib/Settings';
|
||||
|
||||
@ -30,21 +89,162 @@ export default {
|
||||
selectedTab: 'video',
|
||||
selectedFrame: '__all',
|
||||
settings: {},
|
||||
activeFrames: [],
|
||||
port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
|
||||
comms: new Comms(),
|
||||
frameStore: {},
|
||||
frameStoreCount: 0,
|
||||
site: null,
|
||||
currentZoom: 1,
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const ns = new Settings();
|
||||
const ns = new Settings(undefined, () => this.updateConfig());
|
||||
await ns.init();
|
||||
this.settings = ns;
|
||||
this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
|
||||
},
|
||||
components: {
|
||||
VideoPanel,
|
||||
},
|
||||
methods: {
|
||||
selectTab(tab) {
|
||||
this.selectedTab = tab;
|
||||
},
|
||||
selectFrame(frame) {
|
||||
this.selectedFrame = frame;
|
||||
},
|
||||
processReceivedMessage(message, port) {
|
||||
if (Debug.debug) {
|
||||
console.log("[popup.js] received message", message);
|
||||
}
|
||||
|
||||
if(message.cmd === 'set-current-site'){
|
||||
if (this.site) {
|
||||
if (!site.host) {
|
||||
// dunno why this fix is needed, but sometimes it is
|
||||
this.site.host = site.tabHostname;
|
||||
}
|
||||
}
|
||||
if (!this.site || this.site.host !== message.site.host) {
|
||||
this.port.postMessage({cmd: 'get-current-zoom'});
|
||||
}
|
||||
this.site = message.site;
|
||||
// loadConfig(site.host);
|
||||
// loadFrames(site);
|
||||
} else if (message.cmd === 'set-current-zoom') {
|
||||
setCurrentZoom(message.zoom);
|
||||
}
|
||||
},
|
||||
getRandomColor() {
|
||||
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
|
||||
},
|
||||
setCurrentZoom(nz) {
|
||||
this.currentZoom = nz;
|
||||
},
|
||||
updateZoom(nz){
|
||||
this.currentZoom = nz;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="../res/css/font/overpass.css"></style>
|
||||
<style src="../res/css/font/overpass-mono.css"></style>
|
||||
<style src="../res/css/flex.css"></style>
|
||||
<style src="../res/css/common.scss"></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
font-size: 20px;
|
||||
html, body {
|
||||
width: 780px !important;
|
||||
max-width: 800px !important;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #7f1416;
|
||||
color: #fff;
|
||||
margin: 0px;
|
||||
margin-top: 0px;
|
||||
padding-top: 8px;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 1px;
|
||||
font-size: 2.7em;
|
||||
}
|
||||
|
||||
.menu-item-inline-desc{
|
||||
font-size: 0.60em;
|
||||
font-weight: 300;
|
||||
font-variant: normal;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
display: inline-block;
|
||||
width: 39%;
|
||||
float: left;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding-left: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-variant: small-caps;
|
||||
border-left: transparent 5px solid;
|
||||
}
|
||||
|
||||
.suboption {
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 20px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
|
||||
#no-videos-display {
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
.tabitem-container {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.selected-tab {
|
||||
background-color: initial;
|
||||
border-left: #f18810 5px solid;
|
||||
}
|
||||
|
||||
.tabitem {
|
||||
font-variant: normal;
|
||||
font-size: 0.69em;
|
||||
margin-left: 1em;
|
||||
border-left: transparent 3px solid;
|
||||
padding-left: 12px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.tabitem-selected {
|
||||
color: #fff !important;
|
||||
background-color: initial;
|
||||
border-left: #f0c089 3px solid !important;
|
||||
}
|
||||
.tabitem-selected::before {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.tabitem-iframe::after {
|
||||
content: "</>";
|
||||
padding-left: 0.33em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div>
|
||||
<div v-if="true">
|
||||
<div class="label">Cropping mode:</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<template v-for="action of settings.active.actions">
|
||||
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-ar'"
|
||||
class=""
|
||||
class="flex b3 button"
|
||||
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
|
||||
:shortcut="parseShortcut(action)"
|
||||
@click.native="execAction(action)"
|
||||
@ -25,10 +25,14 @@
|
||||
<input id="_input_zoom_slider" class="w100"
|
||||
type="range"
|
||||
step="any"
|
||||
min="-1"
|
||||
max="4"
|
||||
:value="logarithmicZoom"
|
||||
@input="changeZoom($event.target.value)"
|
||||
/>
|
||||
<div style="overflow: auto">
|
||||
<div class="inline-block float-left medium-small x-pad-1em">
|
||||
Zoom: <span id="_label_zoom_level">100</span>%
|
||||
Zoom: {{(zoom * 100).toFixed()}}%
|
||||
</div>
|
||||
<div class="inline-block float-right medium-small">
|
||||
<a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
|
||||
@ -46,10 +50,10 @@
|
||||
|
||||
<div v-if="true">
|
||||
<div class="label">Stretching mode:</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<template v-for="action of settings.active.actions">
|
||||
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
|
||||
class=""
|
||||
class="flex b3 button"
|
||||
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
|
||||
:shortcut="parseShortcut(action)"
|
||||
@click.native="execAction(action)"
|
||||
@ -61,10 +65,10 @@
|
||||
|
||||
<div v-if="true">
|
||||
<div class="label">Video alignment:</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<template v-for="action of settings.active.actions">
|
||||
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
|
||||
class=""
|
||||
class="flex b3 button"
|
||||
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
|
||||
:shortcut="parseShortcut(action)"
|
||||
@click.native="execAction(action)"
|
||||
@ -76,10 +80,10 @@
|
||||
|
||||
<div v-if="true">
|
||||
<div class="label">Multi-command actions:</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-row flex-wrap">
|
||||
<template v-for="action of settings.active.actions">
|
||||
<ShortcutButton v-if="action.scopes.page && action.scopes.page.show && action.cmd.length > 1"
|
||||
class=""
|
||||
class="flex b3 button"
|
||||
:label="(action.scopes.page && action.scopes.page.label) ? action.scopes.page.label : action.label"
|
||||
:shortcut="parseShortcut(action)"
|
||||
@click.native="execAction(action)"
|
||||
@ -99,11 +103,13 @@ import ShortcutButton from '../../common/components/shortcut-button'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { }
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'settings',
|
||||
'frame'
|
||||
'frame',
|
||||
'zoom'
|
||||
],
|
||||
created() {
|
||||
this.exec = new ExecAction(this.settings);
|
||||
@ -111,6 +117,11 @@ export default {
|
||||
components: {
|
||||
ShortcutButton,
|
||||
},
|
||||
computed: {
|
||||
logarithmicZoom: function(){
|
||||
return Math.log2(this.zoom);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
execAction(action) {
|
||||
this.exec.exec(action, 'page', this.frame);
|
||||
@ -122,12 +133,25 @@ export default {
|
||||
return KeyboardShortcutParser.parseShortcut(action.scopes.page.shortcut[0]);
|
||||
},
|
||||
resetZoom() {
|
||||
|
||||
this.zoom = 1;
|
||||
},
|
||||
changeZoom(nz) {
|
||||
nz = Math.pow(2, nz);
|
||||
this.$emit('zoom-change', nz);
|
||||
this.exec.exec(
|
||||
{cmd: [{action: 'set-zoom', arg: nz}]},
|
||||
'page',
|
||||
this.frame
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.b3 {
|
||||
width: 9rem;
|
||||
padding-left: 0.33rem;
|
||||
padding-right: 0.33rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -214,10 +214,10 @@ small {
|
||||
|
||||
.button {
|
||||
/* display: inline-block; */
|
||||
padding-top: 8px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
// padding-top: 8px;
|
||||
// padding-bottom: 3px;
|
||||
// padding-left: 20px;
|
||||
// padding-right: 20px;
|
||||
border: 1px solid #444;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
@ -17,3 +17,7 @@
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ var site = undefined;
|
||||
// aside from hostname, this can have two additional values:
|
||||
// __playing — commands get sent to all frames with videos of status 'playing'
|
||||
// __all — commands get sent to all frames
|
||||
var selectedFrame = '__playing';
|
||||
var selectedFrame = '__all';
|
||||
|
||||
var port = browser.runtime.connect({name: 'popup-port'});
|
||||
port.onMessage.addListener( (m,p) => processReceivedMessage(m,p));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user