start extension popup rework
This commit is contained in:
parent
36aa226e9c
commit
52b4e48217
@ -20,178 +20,15 @@
|
|||||||
Build channel: {{BrowserDetect.processEnvChannel}}
|
Build channel: {{BrowserDetect.processEnvChannel}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
v-if="narrowPopup"
|
|
||||||
class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
|
|
||||||
@click="toggleSideMenu()"
|
|
||||||
>
|
|
||||||
<!-- <Icon v-if="!sideMenuVisible" icon="list" /> -->
|
|
||||||
<!-- <Icon v-else icon="x" /> -->
|
|
||||||
<div>Menu</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row body no-overflow flex-grow">
|
<div class="flex flex-row body no-overflow flex-grow">
|
||||||
<!-- TABS/SIDEBAR -->
|
|
||||||
<div id="tablist"
|
|
||||||
v-show="!narrowPopup || sideMenuVisible"
|
|
||||||
class="flex flex-column flex-nogrow flex-noshrink h100"
|
|
||||||
:class="{'w100': narrowPopup}"
|
|
||||||
>
|
|
||||||
<div class="menu-item"
|
|
||||||
:class="{'selected-tab': selectedTab === 'global'}"
|
|
||||||
@click="selectTab('global')"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
Extension settings
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="menu-item"
|
|
||||||
:class="{'selected-tab': selectedTab === 'site', 'disabled': siteTabDisabled}"
|
|
||||||
@click="selectTab('site')"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
Site settings
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedTab === 'site' && activeSites.length > 1"
|
|
||||||
class=""
|
|
||||||
>
|
|
||||||
<small>Select site to control:</small>
|
|
||||||
<div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
|
|
||||||
<div v-for="site of activeSites"
|
|
||||||
:key="site.host"
|
|
||||||
class="tabitem ltr"
|
|
||||||
:class="{
|
|
||||||
'tabitem-selected': site.host === selectedSite,
|
|
||||||
'tabitem-disabled': (settings && !settings.canStartExtension(site.host))
|
|
||||||
}"
|
|
||||||
@click="selectSite(site.host)"
|
|
||||||
>
|
|
||||||
{{site.host}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="menu-item"
|
|
||||||
:class="{'selected-tab': selectedTab === 'video', 'disabled': !canShowVideoTab.canShow}"
|
|
||||||
@click="selectTab('video')"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
Video settings <span v-if="canShowVideoTab.canShow && canShowVideoTab.warning" class="warning-color">⚠</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedTab === 'video' && activeFrames.length > 0"
|
|
||||||
class=""
|
|
||||||
>
|
|
||||||
<small>Select embedded frame to control:</small>
|
|
||||||
<div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
|
|
||||||
<div v-for="frame of activeFrames"
|
|
||||||
class="tabitem ltr"
|
|
||||||
:class="{
|
|
||||||
'tabitem-selected': selectedFrame === frame.id,
|
|
||||||
'disabled': !isDefaultFrame(frame.id) && (settings && !settings.canStartExtension(frame.label))
|
|
||||||
}"
|
|
||||||
: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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="menu-item experimental"
|
|
||||||
:class="{'selected-tab': selectedTab === 'site-details'}"
|
|
||||||
@click="selectTab('site-details')"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
Extension settings
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedTab === 'site-details' && activeSites.length > 1"
|
|
||||||
class=""
|
|
||||||
>
|
|
||||||
<small>Select site to control:</small>
|
|
||||||
<div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
|
|
||||||
<div v-for="site of activeSites"
|
|
||||||
:key="site.host"
|
|
||||||
class="tabitem ltr"
|
|
||||||
:class="{'tabitem-selected': site.host === selectedSite}"
|
|
||||||
@click="selectSite(site.host)"
|
|
||||||
>
|
|
||||||
{{site.host}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-grow">
|
|
||||||
<!-- this is spacer -->
|
|
||||||
</div>
|
|
||||||
<div class="menu-item menu-item-darker"
|
|
||||||
:class="{'selected-tab': selectedTab === 'whats-new'}"
|
|
||||||
@click="selectTab('whats-new')"
|
|
||||||
>
|
|
||||||
<div :class="{'new': settings && settings.active && !settings.active.whatsNewChecked}"
|
|
||||||
>
|
|
||||||
What's new?
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="menu-item menu-item-darker"
|
|
||||||
:class="{'selected-tab': selectedTab === 'about'}"
|
|
||||||
@click="selectTab('about')"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
Report a problem
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="menu-item menu-item-darker"
|
|
||||||
:class="{'selected-tab': selectedTab === 'donate'}"
|
|
||||||
@click="selectTab('donate')"
|
|
||||||
>
|
|
||||||
<div class="">
|
|
||||||
Donate
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- PANELS/CONTENT -->
|
|
||||||
<div id="tab-content"
|
|
||||||
v-show="!(narrowPopup && sideMenuVisible)"
|
|
||||||
class="flex-grow h100 overflow-y-auto"
|
|
||||||
:class="{'narrow-content': narrowPopup}"
|
|
||||||
>
|
|
||||||
<VideoPanel v-if="settings?.active && selectedTab === 'video'"
|
|
||||||
class=""
|
|
||||||
:someSitesDisabledWarning="canShowVideoTab.warning"
|
|
||||||
:settings="settings"
|
|
||||||
:frame="selectedFrame"
|
|
||||||
:zoom="currentZoom"
|
|
||||||
@zoom-change="updateZoom($event)"
|
|
||||||
/>
|
|
||||||
<DefaultSettingsPanel v-if="settings?.active && (selectedTab === 'global' || selectedTab === 'site')"
|
|
||||||
class=""
|
|
||||||
:settings="settings"
|
|
||||||
:scope="selectedTab"
|
|
||||||
:site="selectedSite"
|
|
||||||
/>
|
|
||||||
<SiteDetailsPanel v-if="settings && settings.active && selectedTab === 'site-details' "
|
|
||||||
class=""
|
|
||||||
:settings="settings"
|
|
||||||
:site="selectedSite"
|
|
||||||
/>
|
|
||||||
<PerformancePanel v-if="selectedTab === 'performance-metrics'"
|
|
||||||
:performance="performance" />
|
|
||||||
<WhatsNewPanel v-if="selectedTab === 'whats-new'" />
|
|
||||||
<AboutPanel v-if="selectedTab === 'about'" />
|
|
||||||
<Donate v-if="selectedTab === 'donate'" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<pre>
|
||||||
|
---- site:
|
||||||
|
{{site}}
|
||||||
|
|
||||||
|
----
|
||||||
|
</pre>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -215,28 +52,13 @@ import { browser } from 'webextension-polyfill-ts';
|
|||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
selectedTab: 'video',
|
|
||||||
selectedFrame: '__all',
|
|
||||||
selectedSite: '',
|
|
||||||
activeFrames: [],
|
|
||||||
activeSites: [],
|
|
||||||
comms: new Comms(),
|
comms: new Comms(),
|
||||||
frameStore: {},
|
|
||||||
frameStoreCount: 0,
|
|
||||||
performance: {},
|
|
||||||
site: null,
|
|
||||||
currentZoom: 1,
|
|
||||||
execAction: new ExecAction(),
|
|
||||||
settings: {},
|
settings: {},
|
||||||
settingsInitialized: false,
|
settingsInitialized: false,
|
||||||
logger: {},
|
|
||||||
siteTabDisabled: false,
|
|
||||||
videoTabDisabled: false,
|
|
||||||
canShowVideoTab: {canShow: true, warning: true},
|
|
||||||
showWhatsNew: false,
|
|
||||||
BrowserDetect: BrowserDetect,
|
|
||||||
narrowPopup: null,
|
narrowPopup: null,
|
||||||
sideMenuVisible: null,
|
sideMenuVisible: null,
|
||||||
|
logger: undefined,
|
||||||
|
site: undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
@ -249,12 +71,10 @@ export default {
|
|||||||
await this.settings.init();
|
await this.settings.init();
|
||||||
this.settingsInitialized = true;
|
this.settingsInitialized = true;
|
||||||
|
|
||||||
// const port = BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'});
|
|
||||||
const port = browser.runtime.connect({name: 'popup-port'});
|
const port = browser.runtime.connect({name: 'popup-port'});
|
||||||
port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
|
port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
|
||||||
CSM.setProperty('port', port);
|
CSM.setProperty('port', port);
|
||||||
|
|
||||||
this.execAction.setSettings(this.settings);
|
|
||||||
|
|
||||||
// ensure we'll clean player markings on popup close
|
// ensure we'll clean player markings on popup close
|
||||||
window.addEventListener("unload", () => {
|
window.addEventListener("unload", () => {
|
||||||
@ -295,16 +115,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
VideoPanel,
|
|
||||||
DefaultSettingsPanel,
|
|
||||||
PerformancePanel,
|
|
||||||
Debug,
|
Debug,
|
||||||
BrowserDetect,
|
BrowserDetect,
|
||||||
AboutPanel,
|
|
||||||
Donate,
|
|
||||||
SiteDetailsPanel,
|
|
||||||
WhatsNewPanel,
|
|
||||||
// Icon,
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async sleep(t) {
|
async sleep(t) {
|
||||||
@ -326,50 +138,7 @@ export default {
|
|||||||
getRandomColor() {
|
getRandomColor() {
|
||||||
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
|
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
|
||||||
},
|
},
|
||||||
selectTab(tab) {
|
|
||||||
this.selectedTab = tab;
|
|
||||||
if (tab === 'whats-new') {
|
|
||||||
this.settings.active.whatsNewChecked = true;
|
|
||||||
this.settings.save();
|
|
||||||
}
|
|
||||||
this.toggleSideMenu(false);
|
|
||||||
},
|
|
||||||
selectFrame(frame) {
|
|
||||||
this.selectedFrame = frame;
|
|
||||||
},
|
|
||||||
async updateConfig() {
|
|
||||||
// when this runs, a site could have been enabled or disabled
|
|
||||||
// this means we must update canShowVideoTab
|
|
||||||
const settings = this.settings;
|
|
||||||
this.settings = null;
|
|
||||||
this.updateCanShowVideoTab();
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.settings = settings;
|
|
||||||
this.updateCanShowVideoTab();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateCanShowVideoTab() {
|
|
||||||
let canShow = false;
|
|
||||||
let warning = false;
|
|
||||||
let t;
|
|
||||||
|
|
||||||
if (!this.settings) {
|
|
||||||
this.canShowVideoTab = {canShow: true, warning: false};
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const site of this.activeSites) {
|
|
||||||
t = this.settings.canStartExtension(site.host);
|
|
||||||
canShow = canShow || t;
|
|
||||||
warning = warning || !t;
|
|
||||||
}
|
|
||||||
if (t === undefined) {
|
|
||||||
// something isn't the way it should be. Show sites.
|
|
||||||
this.canShowVideoTab = {canShow: true, warning: true};
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.canShowVideoTab = {canShow: canShow, warning: warning};
|
|
||||||
},
|
|
||||||
processReceivedMessage(message, port) {
|
processReceivedMessage(message, port) {
|
||||||
this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
|
this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
|
||||||
|
|
||||||
@ -380,9 +149,6 @@ export default {
|
|||||||
this.site.host = site.tabHostname;
|
this.site.host = site.tabHostname;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!this.site || this.site.host !== message.site.host) {
|
|
||||||
CSM.port.postMessage({cmd: 'get-current-zoom'});
|
|
||||||
}
|
|
||||||
this.site = message.site;
|
this.site = message.site;
|
||||||
|
|
||||||
// update activeSites
|
// update activeSites
|
||||||
@ -395,147 +161,43 @@ export default {
|
|||||||
// });
|
// });
|
||||||
this.selectedSite = this.selectedSite || message.site.host;
|
this.selectedSite = this.selectedSite || message.site.host;
|
||||||
|
|
||||||
// loadConfig(site.host); TODO
|
|
||||||
this.loadFrames(this.site);
|
this.loadFrames(this.site);
|
||||||
this.showFirstTab(this.site);
|
|
||||||
} else if (message.cmd === 'set-current-zoom') {
|
|
||||||
this.setCurrentZoom(message.zoom);
|
|
||||||
} else if (message.cmd === 'performance-update') {
|
|
||||||
for (let key in message.message) {
|
|
||||||
this.performance[key] = message.message[key];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
showFirstTab(videoTab) {
|
|
||||||
// determine which tab to show.
|
|
||||||
// Extension global disabled — show 'extension settings'
|
|
||||||
// Extension site disabled, no embedded videos — show 'site settings'
|
|
||||||
// Extension site disabled, embedded videos from non-blacklisted hosts — show video settings
|
|
||||||
// Extension site enabled — show video settings
|
|
||||||
|
|
||||||
// note: this if statement is ever so slightly unnecessary
|
|
||||||
if (! this.settings.canStartExtension('@global')) {
|
|
||||||
// canStartExtension and getExtensionMode return disabled/false for non-whitelisted
|
|
||||||
// sites, even if extension mode is set to "whitelist only." This is problematic
|
|
||||||
// because in order to whitelist a given site, we need to set extension to global-
|
|
||||||
// enabled, whitelist the site, and then set extension to whitelist only. This makes
|
|
||||||
// for a bad user experience, so let's fix this.
|
|
||||||
if (this.settings.active.sites['@global'].mode === ExtensionMode.Disabled) {
|
|
||||||
if (this.selectedTab === 'video' || this.selectedTab === 'site') {
|
|
||||||
this.selectTab('global');
|
|
||||||
}
|
|
||||||
this.siteTabDisabled = true;
|
|
||||||
this.videoTabDisabled = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.siteTabDisabled = false;;
|
|
||||||
if (! this.settings.canStartExtension(this.site.host)) {
|
|
||||||
if (videoTab.frames.length > 1) {
|
|
||||||
for (const frame of videoTab.frames) {
|
|
||||||
if (this.settings.canStartExtension(frame.host)) {
|
|
||||||
this.videoTabDisabled = false;
|
|
||||||
// video is selected by default, so no need to reselect it
|
|
||||||
// and if video is not selected, the popup would switch to 'video'
|
|
||||||
// tab once every 5 seconds. We don't want that.
|
|
||||||
// this.selectTab('video');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.videoTabDisabled = true;
|
|
||||||
if (this.selectedTab === 'video') {
|
|
||||||
this.selectTab('site');
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.videoTabDisabled = false;
|
|
||||||
},
|
|
||||||
isDefaultFrame(frameId) {
|
isDefaultFrame(frameId) {
|
||||||
return frameId === '__playing' || frameId === '__all';
|
return frameId === '__playing' || frameId === '__all';
|
||||||
},
|
},
|
||||||
loadFrames(videoTab) {
|
loadFrames() {
|
||||||
if (videoTab.selected) {
|
|
||||||
this.selectedSubitem = videoTab.selected;
|
|
||||||
// selectedSubitemLoaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (videoTab.frames.length < 2 || Object.keys(videoTab.frames).length < 2) {
|
|
||||||
this.selectedFrame = '__all';
|
|
||||||
this.activeSites = [{
|
|
||||||
host: this.site.host,
|
|
||||||
isIFrame: false, // not used tho. Maybe one day
|
|
||||||
}];
|
|
||||||
this.updateCanShowVideoTab(); // update whether video tab can be shown
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
for (const frame in videoTab.frames) {
|
|
||||||
|
|
||||||
if (frame && !this.frameStore[frame]) {
|
|
||||||
const fs = {
|
|
||||||
name: this.frameStoreCount++,
|
|
||||||
color: this.getRandomColor()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.frameStore[frame] = fs;
|
|
||||||
|
|
||||||
CSM.port.postMessage({
|
|
||||||
cmd: 'mark-player',
|
|
||||||
forwardToContentScript: true,
|
|
||||||
targetTab: videoTab.id,
|
|
||||||
targetFrame: frame,
|
|
||||||
name: fs.name,
|
|
||||||
color: fs.color
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.activeFrames = [{id: '__all', label: 'All'},{id: '__playing', label: 'Currently playing'}];
|
|
||||||
this.activeSites = [{
|
this.activeSites = [{
|
||||||
host: this.site.host,
|
host: this.site.host,
|
||||||
isIFrame: false, // not used tho. Maybe one day
|
isIFrame: false, // not used tho. Maybe one day
|
||||||
}];
|
}];
|
||||||
this.selectedSite = this.selectedSite || this.site.host;
|
this.selectedSite = this.selectedSite || this.site.host;
|
||||||
|
|
||||||
for (const frame in videoTab.frames) {
|
// for (const frame in videoTab.frames) {
|
||||||
this.activeFrames.push({
|
// this.activeFrames.push({
|
||||||
id: `${this.site.id}-${frame}`,
|
// id: `${this.site.id}-${frame}`,
|
||||||
label: videoTab.frames[frame].host,
|
// label: videoTab.frames[frame].host,
|
||||||
...this.frameStore[frame],
|
// ...this.frameStore[frame],
|
||||||
})
|
// })
|
||||||
|
|
||||||
// only add each host once at most
|
// // only add each host once at most
|
||||||
if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
|
// if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
|
||||||
this.activeSites.push({
|
// this.activeSites.push({
|
||||||
host: videoTab.frames[frame].host,
|
// host: videoTab.frames[frame].host,
|
||||||
isIFrame: undefined // maybe one day
|
// isIFrame: undefined // maybe one day
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// update whether video tab can be shown
|
// update whether video tab can be shown
|
||||||
this.updateCanShowVideoTab();
|
this.updateCanShowVideoTab();
|
||||||
},
|
},
|
||||||
getRandomColor() {
|
getRandomColor() {
|
||||||
return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
|
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;
|
|
||||||
},
|
|
||||||
selectSite(host) {
|
|
||||||
this.selectedSite = host;
|
|
||||||
},
|
|
||||||
toggleSideMenu(visible) {
|
|
||||||
this.sideMenuVisible = visible ?? !this.sideMenuVisible;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user