ultrawidify/src/csui/src/popup/panels/AboutPanel.vue

109 lines
4.2 KiB
Vue

<template>
<div class="flex flex-column h100">
<div class="row">
<span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
</div>
<div class="row">
<span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
<ul>
<li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
<li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
<li>PM me on <a target="_blank" :href="redditLink">reddit</a><br/></li>
</ul>
</div>
<div class="flex-grow"></div>
<div class="row">
<span class="label">Swatter mode (logging)</span><br/>
</div>
<div v-if="showEasterEgg" class="center"><small>You've made plenty of marks, all in the wrong places!</small></div>
<div class="flex flex-row">
<ShortcutButton class="flex flex-grow button"
label="Show logger"
:active="loggingEnabled"
@click.native="showLogger()"
></ShortcutButton>
<ShortcutButton class="flex flex-grow button"
label="Make a mark"
@click.native="sendMark()"
></ShortcutButton>
<ShortcutButton class="flex flex-grow button"
label="Hide logger"
@click.native="hideLogger()"
></ShortcutButton>
</div>
</div>
</template>
<script>
import Comms from '../../ext/lib/comms/Comms';
import ShortcutButton from '../../common/components/ShortcutButton';
import BrowserDetect from '../../ext/conf/BrowserDetect';
export default {
components: {
ShortcutButton,
},
data() {
return {
// reminder — webextension-polyfill doesn't seem to work in vue!
addonVersion: BrowserDetect.firefox ? browser.runtime.getManifest().version : chrome.runtime.getManifest().version,
loggingEnabled: false,
loggerSettings: '',
loggerSettingsError: false,
lastLoadedLoggerSettings: undefined,
mailtoLink: '',
redditLink: '',
showEasterEgg: false,
}
},
async created() {
const messageTemplate = encodeURIComponent(
`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.
Extension info (AUTOGENERATED — DO NOT CHANGE OR REMOVE):
* Build: ${BrowserDetect.processEnvBrowser}-${this.addonVersion}-stable
Browser-related stuff (please ensure this section is correct):
* User Agent string: ${window.navigator.userAgent}
* vendor: ${window.navigator.vendor}
* Operating system: ${window.navigator.platform}
`
);
this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
this.redditLink = `https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=${messageTemplate}`;
},
methods: {
async updateLoggerSettings(allowLogging) {
// this.loggingEnabled = allowLogging;
// if (allowLogging) {
// const parsedSettings = JSON.parse(this.loggerSettings);
// Logger.saveConfig({
// allowLogging: allowLogging,
// timeout: parsedSettings.timeout || undefined,
// fileOptions: parsedSettings.fileOptions || {},
// consoleOptions: parsedSettings.consoleOptions || {},
// });
// } else {
// // we need to save logger settings because logging is triggered by allow logging
// Logger.saveConfig({allowLogging: allowLogging, ...lastLoadedLoggerSettings});
// }
},
showLogger() {
Comms.sendMessage({cmd: 'show-logger', forwardToActive: true});
},
sendMark() {
this.showEasterEgg = !this.showEasterEgg;
},
hideLogger() {
Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
}
}
}
</script>