Add update screen

src/install/first-time/App.vue

@@ -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/>
+          All websites<br/>
-          <small>(Some sites are disabled by default. Requires access to all sites)</small>
+          <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">

src/install/updated/App.vue

@@ -1,86 +1,76 @@
 <template>
-  <div class="flex flex-col h100">
+  <div class="flex flex-col h100 justify-center items-center">
-    <div class="header flex-nogrow flex-noshrink">
+    <template v-if="!settingsInitialized">Please wait ...</template>
-      Thank you for installing Ultrawidify.
+    <template v-else>
-    </div>
+      <div class="body flex-grow">
-    <div class="body flex-grow">
+        <h1>Ultrawidify has been updated</h1>
-      <p>Before we're ready to go, there are three quick questions. You will be able to change these later.</p>
+        <br/>
-      <h1>Where do you want to use Ultrawidify?</h1>
+        <p>This update introduces some new experimental features:</p>
-      <div class="flex flex-row">
+        <b>
-        <div class=""
+          What do you want to if there are subtitles in the video?
-             @click="() => {}"
+        </b>
-        >
+        <div class="select">
-          All sites<br/>
+          <select v-model="placeholderSubtitleCrop">
-          <small>(Some sites are disabled by default. Requires access to all sites)</small>
+            <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>
+        <p>Experimental aspect ratio detection should be more accurate, but it hasn't been extensively tested yet.</p>
-          Only the sites I explicitly allow
+        <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>
+      <div class="footer flex-nogrow flex-noshrink">
-      <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>
-    </div>
+    </template>
-    <div class="footer flex-nogrow flex-noshrink">
-    </div>
   </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',
+      AardSubtitleCropMode,
-      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,
       settings: {},
       settingsInitialized: false,
       logAggregator: {},
       logger: {},
-      siteTabDisabled: false,
+      placeholderSubtitleCrop: AardSubtitleCropMode.ResetAR,
-      videoTabDisabled: false,
+      settingsSaved: false
-      canShowVideoTab: {canShow: true, warning: true},
-      showWhatsNew: 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() {
+    async updateConfig() {
-      this.settings.init();
+      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="@csui/res/css/font/overpass.css"></style>
-<style src="../../res/css/font/overpass-mono.css"></style>
+<style src="@csui/res/css/font/overpass-mono.css"></style>
-<style src="../../res/css/flex.scss"></style>
+<style src="@csui/res/css/flex.scss"></style>
-<style src="../../res/css/common.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;

src/install/updated/first-time.html

@@ -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>

src/install/updated/first-time.js

@@ -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)
-})

src/install/updated/updated.html

@@ -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>

src/install/updated/updated.js

@@ -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');

src/manifest.json

@@ -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": [
         "*://*/*"

src/uw-bg.js

@@ -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")
+    });
+  }
+});

webpack.config.js

@@ -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',