Add update screen
This commit is contained in:
parent
c0c29759fa
commit
f5e308c5b4
@ -4,21 +4,29 @@
|
||||
Ultrawidify has been updated.
|
||||
</div>
|
||||
<div class="body flex-grow">
|
||||
<h1>Where do you want to use Ultrawidify?</h1>
|
||||
<h1>Where should Ultrawidify run by default</h1>
|
||||
<div class="flex flex-row">
|
||||
<div class=""
|
||||
@click="() => {}"
|
||||
@click="() => {}"
|
||||
>
|
||||
All sites<br/>
|
||||
<small>(Some sites are disabled by default. Requires access to all sites)</small>
|
||||
All websites<br/>
|
||||
<small>(Some sites are disabled by default.)</small>
|
||||
</div>
|
||||
<div>
|
||||
Default sites and sites I explicitly allow
|
||||
On sites that people say are working<br/>
|
||||
<small>(And the sites I explicitly allow)</small>
|
||||
</div>
|
||||
<div>
|
||||
Officially supported sites*<br/>
|
||||
<small>(And the sites I explicitly allow)</small>
|
||||
</div>
|
||||
<div>
|
||||
Only the sites I explicitly allow
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
*Ultrawidify still needs access to all websites for technical and historical technical reasons.
|
||||
</div>
|
||||
|
||||
<h1>Try to automatically detect aspect ratio?</h1>
|
||||
<div class="flex flex-row">
|
||||
|
||||
@ -1,86 +1,76 @@
|
||||
<template>
|
||||
<div class="flex flex-col h100">
|
||||
<div class="header flex-nogrow flex-noshrink">
|
||||
Thank you for installing Ultrawidify.
|
||||
</div>
|
||||
<div class="body flex-grow">
|
||||
<p>Before we're ready to go, there are three quick questions. You will be able to change these later.</p>
|
||||
<h1>Where do you want to use Ultrawidify?</h1>
|
||||
<div class="flex flex-row">
|
||||
<div class=""
|
||||
@click="() => {}"
|
||||
>
|
||||
All sites<br/>
|
||||
<small>(Some sites are disabled by default. Requires access to all sites)</small>
|
||||
<div class="flex flex-col h100 justify-center items-center">
|
||||
<template v-if="!settingsInitialized">Please wait ...</template>
|
||||
<template v-else>
|
||||
<div class="body flex-grow">
|
||||
<h1>Ultrawidify has been updated</h1>
|
||||
<br/>
|
||||
<p>This update introduces some new experimental features:</p>
|
||||
<b>
|
||||
What do you want to if there are subtitles in the video?
|
||||
</b>
|
||||
<div class="select">
|
||||
<select v-model="placeholderSubtitleCrop">
|
||||
<option :value="AardSubtitleCropMode.ResetAR">Reset aspect ratio while subtitles are visible</option>
|
||||
<option :value="AardSubtitleCropMode.ResetAndDisable">Reset aspect ratio and stop autodetection for the video</option>
|
||||
<option :value="AardSubtitleCropMode.CropSubtitles">Crop subtitles</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
Default sites and sites I explicitly allow
|
||||
|
||||
<br/>
|
||||
<b>Use experimental aspect ratio detection?</b>
|
||||
<div class="select">
|
||||
<select v-model="settings.active.aard.useLegacy">
|
||||
<option :value="true">Use legacy detection</option>
|
||||
<option :value="false">Use experimental detection</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
Only the sites I explicitly allow
|
||||
<p>Experimental aspect ratio detection should be more accurate, but it hasn't been extensively tested yet.</p>
|
||||
<p>If you enable experimental mode, please consider reporting problems <a href="https://github.com/tamius-han/ultrawidify/issues/291" target="_blank">in this thread</a> on Github.</p>
|
||||
<p>Experimental detection will become the default in 2026 unless people report issues.</p>
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="flex flex-row w-full justify-center items-center">
|
||||
<button v-if="!settingsSaved" class="button primary" @click="saveSettings">
|
||||
Save preferences
|
||||
</button>
|
||||
<template v-else>Your settings have been saved.</template>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<p>You can always change your settings later.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Should Ultrawidify automatically detect aspect ratio where possible?</h1>
|
||||
<div class="flex flex-row">
|
||||
<div class="">
|
||||
Yes
|
||||
</div>
|
||||
<div>
|
||||
Only on sites I allow
|
||||
</div>
|
||||
<div class="">
|
||||
Never
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Do you want to see update notes when extension receives updates?</h1>
|
||||
<p>Update notes will open a new tab, just like this one.</p>
|
||||
<div class="flex flex-row">
|
||||
<div class="">
|
||||
Yes, even for the tiniest changes
|
||||
</div>
|
||||
<div class="">
|
||||
Yes, but only for the big/important ones
|
||||
</div>
|
||||
<div class="">
|
||||
No, never.
|
||||
</div>
|
||||
<div class="footer flex-nogrow flex-noshrink">
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer flex-nogrow flex-noshrink">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BrowserDetect from '../../ext/conf/BrowserDetect';
|
||||
import BrowserDetect from '@src/ext/conf/BrowserDetect';
|
||||
import { LogAggregator } from '@src/ext/lib/logging/LogAggregator';
|
||||
import { ComponentLogger } from '@src/ext/lib/logging/ComponentLogger';
|
||||
import Settings from '@src/ext/lib/settings/Settings';
|
||||
import { AardSubtitleCropMode } from '@src/ext/lib/aard/enums/aard-subtitle-crop-mode.enum';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectedTab: 'video',
|
||||
selectedFrame: '__all',
|
||||
selectedSite: '',
|
||||
activeFrames: [],
|
||||
activeSites: [],
|
||||
port: BrowserDetect.firefox ? chrome.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'}),
|
||||
comms: new Comms(),
|
||||
frameStore: {},
|
||||
frameStoreCount: 0,
|
||||
performance: {},
|
||||
site: null,
|
||||
currentZoom: 1,
|
||||
AardSubtitleCropMode,
|
||||
settings: {},
|
||||
settingsInitialized: false,
|
||||
logAggregator: {},
|
||||
logger: {},
|
||||
siteTabDisabled: false,
|
||||
videoTabDisabled: false,
|
||||
canShowVideoTab: {canShow: true, warning: true},
|
||||
showWhatsNew: false,
|
||||
placeholderSubtitleCrop: AardSubtitleCropMode.ResetAR,
|
||||
settingsSaved: false
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
@ -89,26 +79,36 @@ export default {
|
||||
|
||||
this.settings = new Settings({updateCallback: () => this.updateConfig(), logAggregator: this.logAggregator});
|
||||
await this.settings.init();
|
||||
this.placeholderSubtitleCrop = (this.settings.active.aard.useLegacy ? this.settings.active.aardLegacy.subtitles?.subtitleCropMode : this.settings.active.aard.subtitles?.subtitleCropMode) ?? AardSubtitleCropMode.ResetAR;
|
||||
this.settingsInitialized = true;
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
updateConfig() {
|
||||
this.settings.init();
|
||||
async updateConfig() {
|
||||
await this.settings.init();
|
||||
this.$nextTick( () => this.$forceUpdate());
|
||||
},
|
||||
saveSettings() {
|
||||
this.settings.active[this.settings.active.aard.useLegacy ? 'aardLegacy' : 'aard'].subtitles.subtitleCropMode = this.placeholderSubtitleCrop;
|
||||
this.settings.save();
|
||||
this.settingsSaved = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="../../res/css/font/overpass.css"></style>
|
||||
<style src="../../res/css/font/overpass-mono.css"></style>
|
||||
<style src="../../res/css/flex.scss"></style>
|
||||
<style src="../../res/css/common.scss"></style>
|
||||
<style src="@csui/res/css/font/overpass.css"></style>
|
||||
<style src="@csui/res/css/font/overpass-mono.css"></style>
|
||||
<style src="@csui/res/css/flex.scss"></style>
|
||||
<style src="@csui/res/css/common.scss"></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
html, body {
|
||||
p {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 800px !important;
|
||||
max-width: 800px !important;
|
||||
padding: 0px;
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
|
||||
<% if (NODE_ENV === 'development') { %>
|
||||
<!-- Load some resources only in development environment -->
|
||||
<% } %>
|
||||
</head>
|
||||
<body style="width: 800px; height: 600px; overflow: hidden !important">
|
||||
<div id="app">
|
||||
|
||||
</div>
|
||||
<script src="first-time.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,11 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
|
||||
// global.browser = require('webextension-polyfill')
|
||||
// Vue.prototype.$browser = global.browser
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
13
src/install/updated/updated.html
Normal file
13
src/install/updated/updated.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ultrawidify updated</title>
|
||||
</head>
|
||||
<body style="width: 100dvw; height: 100dvh">
|
||||
<div id="app">
|
||||
app should load here
|
||||
</div>
|
||||
<script src="updated.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
13
src/install/updated/updated.js
Normal file
13
src/install/updated/updated.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App';
|
||||
import mdiVue from 'mdi-vue/v3';
|
||||
import * as mdijs from '@mdi/js';
|
||||
|
||||
// import '@src/res-common/common.scss';
|
||||
|
||||
// NOTE — this is in-player interface for ultrawidify
|
||||
// it is injected into the page in UI.init()
|
||||
|
||||
createApp(App)
|
||||
.use(mdiVue, {icons: mdijs})
|
||||
.mount('#app');
|
||||
@ -2,7 +2,7 @@
|
||||
"manifest_version": 3,
|
||||
"name": "Ultrawidify",
|
||||
"description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
|
||||
"version": "6.3.97",
|
||||
"version": "6.3.990",
|
||||
"icons": {
|
||||
"32":"res/icons/uw-32.png",
|
||||
"64":"res/icons/uw-64.png"
|
||||
@ -41,7 +41,8 @@
|
||||
"res/img/settings/about-bg.png",
|
||||
"res/icons/*",
|
||||
"res/img/*",
|
||||
"csui/*"
|
||||
"csui/*",
|
||||
"install/*"
|
||||
],
|
||||
"matches": [
|
||||
"*://*/*"
|
||||
|
||||
@ -12,3 +12,12 @@ var BgVars = {
|
||||
}
|
||||
|
||||
const server = new UWServer();
|
||||
|
||||
// add update listener
|
||||
chrome.runtime.onInstalled.addListener((details) => {
|
||||
if (details.reason === "update") {
|
||||
chrome.tabs.create({
|
||||
url: chrome.runtime.getURL("install/updated/updated.html")
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -20,6 +20,7 @@ const config = {
|
||||
'csui/csui-popup': './csui/csui-popup.js',
|
||||
'csui/csui': './csui/csui.js',
|
||||
// 'install/first-time/first-time':'./install/first-time/first-time.js',
|
||||
'install/updated/updated': './install/updated/updated.js',
|
||||
},
|
||||
output: {
|
||||
path: __dirname + `/dist-${process.env.BROWSER == 'firefox' ? 'ff' : process.env.BROWSER}`,
|
||||
@ -125,6 +126,7 @@ const config = {
|
||||
{ from: 'res', to: 'res', ignore: ['css', 'css/**']},
|
||||
{ from: 'ext', to: 'ext', ignore: ['conf/*', 'lib/**']},
|
||||
{ from: 'csui', to: 'csui', ignore: ['src']},
|
||||
{ from: 'install', to: 'install' },
|
||||
|
||||
// we need to get webextension-polyfill and put it in common/lib
|
||||
{ from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
|
||||
@ -138,6 +140,7 @@ const config = {
|
||||
{ from: 'csui/csui-overlay-dark.html', to: 'csui/csui-dark.html', transform: transformHtml },
|
||||
{ from: 'csui/csui-overlay-light.html', to: 'csui/csui-light.html', transform: transformHtml },
|
||||
// { from: 'install/first-time/first-time.html', to: 'install/first-time/first-time.html', transform: transformHtml},
|
||||
{ from: 'install/updated/updated.html', to: 'install/updated/updated.html', transform: transformHtml },
|
||||
{
|
||||
from: 'manifest.json',
|
||||
to: 'manifest.json',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user