ultrawidify/src/popup/App.vue

378 lines
9.9 KiB
Vue
Raw Normal View History

<template>
2019-01-17 22:16:55 +01:00
<div class="popup">
<div class="header">
<span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
</div>
2019-01-17 22:16:55 +01:00
<div class="flex flex-row">
<!-- TABS/SIDEBAR -->
<div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'global'}"
@click="selectTab('global')"
2019-01-17 22:16:55 +01:00
>
<div class="">
Extension settings
</div>
<div class="">
2019-01-03 02:07:16 +01:00
</div>
</div>
2019-01-17 22:16:55 +01:00
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'site'}"
@click="selectTab('site')"
>
<div class="">
Site settings
</div>
<div class="">
</div>
2019-01-03 02:07:16 +01:00
</div>
2019-01-17 22:16:55 +01:00
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'video'}"
@click="selectTab('video')"
>
<div class="">
Video settings
2019-01-17 22:16:55 +01:00
</div>
2019-01-20 21:12:26 +01:00
<div v-if="selectedTab === 'video' && this.activeFrames.length > 0"
class=""
>
<small>Select embedded frame to control:</small>
<div class="">
<div v-for="frame of activeFrames"
class="tabitem"
:class="{'tabitem-selected': selectedFrame === frame.id}"
:key="frame.id"
@click="selectFrame(frame.id)"
>
{{frame.label}} <span v-if="frame.name !== undefined && frame.color" :style="{'background-color': frame.color}">[{{frame.name}}]</span>
</div>
2019-01-17 22:16:55 +01:00
</div>
</div>
2019-01-03 02:07:16 +01:00
</div>
2019-02-16 01:19:29 +01:00
2019-01-17 22:16:55 +01:00
<div class="menu-item"
:class="{'selected-tab': selectedTab === 'about'}"
@click="selectTab('about')"
>
2019-01-03 02:07:16 +01:00
<div class="">
2019-01-17 22:16:55 +01:00
About
</div>
<div class="">
</div>
2019-01-03 02:07:16 +01:00
</div>
2019-01-17 22:16:55 +01:00
<div class="menu-item"
2019-06-03 00:34:42 +02:00
:class="{'selected-tab': selectedTab === 'donate'}"
@click="selectTab('donate')"
2019-01-17 22:16:55 +01:00
>
<div class="">
Donate
</div>
<div class="">
</div>
2019-01-03 02:07:16 +01:00
</div>
</div>
2019-01-17 22:16:55 +01:00
<!-- PANELS/CONTENT -->
<div id="tab-content" class="flex-grow" style="max-width: 480px !important;">
<VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
class=""
:settings="settings"
:frame="selectedFrame"
:zoom="currentZoom"
@zoom-change="updateZoom($event)"
/>
<DefaultSettingsPanel v-if="settings && settings.active && (selectedTab === 'site' || selectedTab === 'global')"
class=""
:settings="settings"
:scope="selectedTab"
2019-04-13 03:09:29 +02:00
:site="site && site.host"
/>
2019-02-16 01:19:29 +01:00
<PerformancePanel v-if="selectedTab === 'performance-metrics'"
:performance="performance" />
2019-04-13 03:09:29 +02:00
<AboutPanel v-if="selectedTab === 'about'" />
2019-06-03 00:34:42 +02:00
<Donate v-if="selectedTab === 'donate'" />
2019-01-17 22:16:55 +01:00
</div>
</div>
</div>
</template>
<script>
2019-06-03 00:34:42 +02:00
import Donate from '../common/misc/Donate.vue';
2019-01-03 02:07:16 +01:00
import Debug from '../ext/conf/Debug';
import BrowserDetect from '../ext/conf/BrowserDetect';
import Comms from '../ext/lib/comms/Comms';
import VideoPanel from './panels/VideoPanel';
2019-02-16 01:19:29 +01:00
import PerformancePanel from './panels/PerformancePanel';
import Settings from '../ext/lib/Settings';
2019-01-17 22:16:55 +01:00
import ExecAction from './js/ExecAction.js';
import DefaultSettingsPanel from './panels/DefaultSettingsPanel';
import AboutPanel from './panels/AboutPanel';
export default {
data () {
return {
selectedTab: 'video',
selectedFrame: '__all',
2019-01-03 02:07:16 +01:00
activeFrames: [],
port: BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
comms: new Comms(),
frameStore: {},
frameStoreCount: 0,
2019-02-16 01:19:29 +01:00
performance: {},
2019-01-03 02:07:16 +01:00
site: null,
currentZoom: 1,
2019-01-17 22:16:55 +01:00
execAction: new ExecAction(),
settings: new Settings(undefined, () => this.updateConfig()),
}
},
async created() {
2019-02-13 23:58:19 +01:00
await this.settings.init();
2019-01-03 02:07:16 +01:00
this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
2019-01-17 22:16:55 +01:00
this.execAction.setSettings(this.settings);
2019-01-18 00:26:15 +01:00
// ensure we'll clean player markings on popup close
window.addEventListener("unload", () => {
2019-04-13 03:09:29 +02:00
this.port.postMessage({
2019-01-18 00:26:15 +01:00
cmd: 'unmark-player',
2019-04-13 03:09:29 +02:00
forwardToAll: true,
2019-01-18 00:26:15 +01:00
});
});
2019-04-13 03:09:29 +02:00
// get info about current site from background script
while (true) {
try {
this.getSite();
} catch (e) {
}
await this.sleep(5000);
}
},
components: {
VideoPanel,
DefaultSettingsPanel,
2019-02-16 01:19:29 +01:00
PerformancePanel,
Debug,
AboutPanel,
2019-06-03 00:34:42 +02:00
Donate,
2019-01-03 02:07:16 +01:00
},
methods: {
2019-01-18 00:26:15 +01:00
async sleep(t) {
return new Promise( (resolve,reject) => {
setTimeout(() => resolve(), t);
});
},
toObject(obj) {
return JSON.parse(JSON.stringify(obj));
},
getSite() {
try {
if (Debug.debug) {
console.log("[popup.js] requesting current site");
}
this.port.postMessage({cmd: 'get-current-site'});
} catch (e) {
if (Debug.debug) {
console.log("[popup::getSite] sending get-current-site failed for some reason. Reason:", e)
}
}
},
getRandomColor() {
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
},
2019-01-03 02:07:16 +01:00
selectTab(tab) {
this.selectedTab = tab;
},
selectFrame(frame) {
this.selectedFrame = frame;
2019-01-17 22:16:55 +01:00
},
async updateConfig() {
2019-01-03 02:07:16 +01:00
},
processReceivedMessage(message, port) {
if (Debug.debug) {
2019-01-18 00:26:15 +01:00
console.log("[popup.js] received message set-c", message);
console.log("[popup.js] message cloned set-c", JSON.parse(JSON.stringify(message)));
2019-01-03 02:07:16 +01:00
}
if(message.cmd === 'set-current-site'){
if (this.site) {
if (!this.site.host) {
2019-01-03 02:07:16 +01:00
// 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;
2019-01-18 00:26:15 +01:00
// loadConfig(site.host); TODO
this.loadFrames(this.site);
2019-01-03 02:07:16 +01:00
} else if (message.cmd === 'set-current-zoom') {
2019-01-18 00:26:15 +01:00
this.setCurrentZoom(message.zoom);
2019-02-16 01:19:29 +01:00
} else if (message.cmd === 'performance-update') {
for (let key in message.message) {
this.performance[key] = message.message[key];
}
2019-01-18 00:26:15 +01:00
}
2019-05-09 21:10:26 +02:00
return true;
2019-01-18 00:26:15 +01:00
},
loadFrames(videoTab) {
if (videoTab.selected) {
this.selectedSubitem = videoTab.selected;
// selectedSubitemLoaded = true;
}
this.activeFrames = [];
if (videoTab.frames.length < 2 || Object.keys(videoTab.frames).length < 2) {
2019-01-18 00:26:15 +01:00
this.selectedFrame = '__all';
return;
}
for (const frame in videoTab.frames) {
2019-01-18 00:26:15 +01:00
if (frame && !this.frameStore[frame]) {
const fs = {
name: this.frameStoreCount++,
color: this.getRandomColor()
}
2019-01-18 00:26:15 +01:00
this.frameStore[frame] = fs;
2019-01-18 00:26:15 +01:00
this.port.postMessage({
cmd: 'mark-player',
2019-04-13 03:09:29 +02:00
forwardToContentScript: true,
targetTab: videoTab.id,
targetFrame: frame,
name: fs.name,
color: fs.color
});
2019-01-18 00:26:15 +01:00
}
}
this.activeFrames = [{id: '__all', label: 'All'},{id: '__playing', label: 'Currently playing'}];
for (const frame in videoTab.frames) {
this.activeFrames.push({
id: `${this.site.id}-${frame}`,
label: videoTab.frames[frame].host,
...this.frameStore[frame],
})
2019-01-03 02:07:16 +01:00
}
},
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;
},
selectFrame(id){
this.selectedFrame = id;
2019-01-03 02:07:16 +01:00
}
}
}
</script>
2019-01-03 02:07:16 +01:00
<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>
2019-01-03 02:07:16 +01:00
html, body {
2019-01-17 22:16:55 +01:00
width: 800px !important;
2019-01-03 02:07:16 +01:00
max-width: 800px !important;
padding: 0px;
margin: 0px;
}
2019-01-17 22:16:55 +01:00
#tablist {
min-width: 275px;
}
2019-01-03 02:07:16 +01:00
.header {
2019-01-17 22:16:55 +01:00
overflow: hidden;
2019-01-03 02:07:16 +01:00
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;
}
.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;
2019-01-20 21:12:26 +01:00
// font-size: 0.69em;
2019-01-03 02:07:16 +01:00
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;
}
2019-01-17 22:16:55 +01:00
.popup {
max-width: 780px;
// width: 800px;
height: 600px;
}
</style>