start extension popup rework
This commit is contained in:
parent
36aa226e9c
commit
52b4e48217
@ -20,178 +20,15 @@
|
||||
Build channel: {{BrowserDetect.processEnvChannel}}
|
||||
</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">
|
||||
<!-- 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>
|
||||
<pre>
|
||||
---- site:
|
||||
{{site}}
|
||||
|
||||
----
|
||||
</pre>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -215,28 +52,13 @@ import { browser } from 'webextension-polyfill-ts';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectedTab: 'video',
|
||||
selectedFrame: '__all',
|
||||
selectedSite: '',
|
||||
activeFrames: [],
|
||||
activeSites: [],
|
||||
comms: new Comms(),
|
||||
frameStore: {},
|
||||
frameStoreCount: 0,
|
||||
performance: {},
|
||||
site: null,
|
||||
currentZoom: 1,
|
||||
execAction: new ExecAction(),
|
||||
settings: {},
|
||||
settingsInitialized: false,
|
||||
logger: {},
|
||||
siteTabDisabled: false,
|
||||
videoTabDisabled: false,
|
||||
canShowVideoTab: {canShow: true, warning: true},
|
||||
showWhatsNew: false,
|
||||
BrowserDetect: BrowserDetect,
|
||||
narrowPopup: null,
|
||||
sideMenuVisible: null,
|
||||
logger: undefined,
|
||||
site: undefined
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
@ -249,12 +71,10 @@ export default {
|
||||
await this.settings.init();
|
||||
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'});
|
||||
port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
|
||||
CSM.setProperty('port', port);
|
||||
|
||||
this.execAction.setSettings(this.settings);
|
||||
|
||||
// ensure we'll clean player markings on popup close
|
||||
window.addEventListener("unload", () => {
|
||||
@ -295,16 +115,8 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VideoPanel,
|
||||
DefaultSettingsPanel,
|
||||
PerformancePanel,
|
||||
Debug,
|
||||
BrowserDetect,
|
||||
AboutPanel,
|
||||
Donate,
|
||||
SiteDetailsPanel,
|
||||
WhatsNewPanel,
|
||||
// Icon,
|
||||
},
|
||||
methods: {
|
||||
async sleep(t) {
|
||||
@ -326,50 +138,7 @@ export default {
|
||||
getRandomColor() {
|
||||
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) {
|
||||
this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
|
||||
|
||||
@ -380,9 +149,6 @@ export default {
|
||||
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;
|
||||
|
||||
// update activeSites
|
||||
@ -395,147 +161,43 @@ export default {
|
||||
// });
|
||||
this.selectedSite = this.selectedSite || message.site.host;
|
||||
|
||||
// loadConfig(site.host); TODO
|
||||
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;
|
||||
},
|
||||
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) {
|
||||
return frameId === '__playing' || frameId === '__all';
|
||||
},
|
||||
loadFrames(videoTab) {
|
||||
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'}];
|
||||
loadFrames() {
|
||||
this.activeSites = [{
|
||||
host: this.site.host,
|
||||
isIFrame: false, // not used tho. Maybe one day
|
||||
}];
|
||||
this.selectedSite = this.selectedSite || this.site.host;
|
||||
|
||||
for (const frame in videoTab.frames) {
|
||||
this.activeFrames.push({
|
||||
id: `${this.site.id}-${frame}`,
|
||||
label: videoTab.frames[frame].host,
|
||||
...this.frameStore[frame],
|
||||
})
|
||||
// for (const frame in videoTab.frames) {
|
||||
// this.activeFrames.push({
|
||||
// id: `${this.site.id}-${frame}`,
|
||||
// label: videoTab.frames[frame].host,
|
||||
// ...this.frameStore[frame],
|
||||
// })
|
||||
|
||||
// only add each host once at most
|
||||
if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
|
||||
this.activeSites.push({
|
||||
host: videoTab.frames[frame].host,
|
||||
isIFrame: undefined // maybe one day
|
||||
});
|
||||
}
|
||||
}
|
||||
// // only add each host once at most
|
||||
// if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
|
||||
// this.activeSites.push({
|
||||
// host: videoTab.frames[frame].host,
|
||||
// isIFrame: undefined // maybe one day
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// update whether video tab can be shown
|
||||
this.updateCanShowVideoTab();
|
||||
},
|
||||
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;
|
||||
},
|
||||
selectSite(host) {
|
||||
this.selectedSite = host;
|
||||
},
|
||||
toggleSideMenu(visible) {
|
||||
this.sideMenuVisible = visible ?? !this.sideMenuVisible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user