Add changelog, about panel

src/csui/PlayerOverlay.vue

@@ -97,14 +97,6 @@ export default {
 
       saveState: {},
 
-      tabs: [
-        {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
-        {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
-        {id: 'extensionSettings', label: 'Extension options', icon: 'cogs' },
-        {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
-        {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
-        {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
-      ],
       selectedTab: 'videoSettings',
     };
   },

src/csui/src/PlayerUIWindow.vue

@@ -62,16 +62,20 @@
     </div>
 
     <div class="tab-main flex flex-row">
-      <div class="tab-row flex flex-column">
+      <div class="tab-row flex flex-column grow-0 shrink-0">
         <div
           v-for="tab of tabs"
           :key="tab.id"
           class="tab"
-          :class="{'active': tab.id === selectedTab}"
+          :class="{
+            'active': tab.id === selectedTab,
+            'highlight-tab': tab.hasChanges,
+          }"
           @click="selectTab(tab.id)"
         >
           <div class="icon-container">
             <mdicon
+              v-if="tab.icon"
               :name="tab.icon"
               :size="32"
             />
@@ -135,6 +139,10 @@
             :eventBus="eventBus"
             :site="site"
           ></DebugPanel>
+          <AboutPanel
+            v-if="selectedTab === 'about'"
+          >
+          </AboutPanel>
         </div>
       </div>
     </div>
@@ -147,6 +155,7 @@ import BaseExtensionSettings from './PlayerUiPanels/BaseExtensionSettings.vue'
 import PlayerDetectionPanel from './PlayerUiPanels/PlayerDetectionPanel.vue'
 import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import BrowserDetect from '../../ext/conf/BrowserDetect'
+import AboutPanel from './PlayerUiPanels/AboutPanel.vue'
 
 export default {
   components: {
@@ -154,7 +163,8 @@ export default {
     PlayerDetectionPanel,
     BaseExtensionSettings,
     AutodetectionSettingsPanel,
-    DebugPanel
+    DebugPanel,
+    AboutPanel
   },
   mixins: [],
   data() {
@@ -167,9 +177,11 @@ export default {
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
-        {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
+        // {id: 'autodetectionSettings', label: 'Autodetection options', icon: ''},
         // {id: 'advancedOptions', label: 'Advanced options', icon: 'cogs' },
-        {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
+        // {id: 'debugging', label: 'Debugging', icon: 'bug-outline' }
+        {id: 'changelog', label: 'What\'s new', icon: 'information-box-outline' },
+        {id: 'about', label: 'About', icon: ''}
       ],
       selectedTab: 'videoSettings',
       BrowserDetect: BrowserDetect,
@@ -447,6 +459,14 @@ export default {
         flex-shrink: 1;
         padding: 0 !important;
       }
+
+      &.highlight-tab {
+        color: #eee;
+
+        .label {
+          color: rgb(255, 174, 107);
+        }
+      }
     }
   }
 

src/csui/src/PlayerUiPanels/AboutPanel.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="flex flex-column w-full h-full gap-2">
+    <h1>About Ultrawidify</h1>
+    <p>
+      Ultrawidify version: <b>{{addonVersion}}</b><br>
+      Install source: <b>{{addonSource}}</b>
+    </p>
+
+    <div class="flex flex-row gap-2 bg-black">
+      <div class="w-[1/2]">
+        <h2>Report a problem</h2>
+        <p>
+          You may report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
+        </p>
+        <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>
+        </ul>
+        <p>
+          When reporting bugs, please include the following information:
+        </p>
+        <ul>
+          <li>Extension version</li>
+          <li>Which browser you're using¹</li>
+          <li>Which extension store you installed extension from (install source)²</li>
+          <li>Which site you're having the issue on (preferably link. For issues with autodetection, please also include a timestamp)</li>
+          <li>What do I need to do in order to make the issue happen</li>
+          <li>Please include a screenshot of the problem. It usually helps.</li>
+        </ul>
+        <p>
+          <small>
+            [1] If using anything other than Firefox, Chrome, or Edge, please check if issue also happens in Chrome or Edge. Bugs affecting Opera will only get fixed if they also affect Chrome, because <a href="https://stuff.tamius.net/sacred-texts/2024/06/08/why-im-boycotting-opera/">I'm salty</a>.<br/>
+            [2] It is recommended that users of Microsoft Edge install Ultrawidify from the Microsoft Edge Addons source
+          </small>
+        </p>
+      </div>
+
+      <div class="w-[1/2]">
+        <h2>Thank you monies</h2>
+        <p>
+          If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.
+        </p>
+        <p class="text-center">
+          <a class="donate" href="https://www.paypal.com/paypalme/tamius">Donate on Paypal</a>
+        </p>
+        <h2>Fun stuff</h2>
+        <p>
+          This is probably a bad idea if you're attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6., you can get buy me an ice-cream in person.
+          (Or just go and compliment the mini(s) I painted, I'll take any validation I can get). Club Amulet D20 will probably have a stand at the event. Barring
+          any unforseen circumstances, I'll be nearby. Maybe even in a cosplay, if I feel like having a heat stroke. No promises.
+        </p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import BrowserDetect from '../../../ext/conf/BrowserDetect';
+
+export default {
+  components: {
+    BrowserDetect,
+ },
+  data() {
+    return {
+      // reminder — webextension-polyfill doesn't seem to work in vue!
+      addonVersion: BrowserDetect.firefox ? chrome.runtime.getManifest().version : chrome.runtime.getManifest().version,
+      addonSource: BrowserDetect.processEnvVersion,
+      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}`;
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+.flex-row {
+  flex-direction: row;
+}
+
+p, li {
+  font-size: 1rem;
+}
+small {
+  opacity: 0.5;
+  font-size: 0.8em;
+}
+a {
+  color: #fa6;
+}
+.text-center {
+  text-align: center;
+}
+.donate {
+  margin: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  background-color: #fa6;
+  color: #000;
+}
+</style>

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -0,0 +1,65 @@
+<template>
+  <h1>What's new</h1>
+  <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
+
+  <h2>6.0.0</h2>
+  <p>
+    I don't think I need to write a changelog for this one.
+  </p>
+  <ul>
+    <li><b>Manifest v3</b>. Bit late, but still.</li>
+    <li>
+      <b>In-player UI.</b><br/>
+      This one took major effort to pull off. Required some changes under the hood, required me to de-spaghettify some code. The UI will only show
+      if the video takes up sufficient amount of space (currently determined as 960 pixels wide).
+    </li>
+    <li>
+      <b>New alignment options.</b> Video can be aligned vertically as well as horizontally.
+    </li>
+    <!-- <li>
+      By default, Ultrawidify will not kick in on "small videos". You have to be either in full screen or theater mode. Ultrawidify assumes that any
+      video that takes up more than 85% of the window width is being viewed in theater mode. This value may be tweaked later on. This feature can be
+      configured (or turned off entirely) via 'Advanced options' menu on the in-player UI.
+    </li> -->
+    <li>
+      The in-player extension UI will do a better job differentiating between the various level of support: "official" for the sites that Tam can check
+      on his own, "fingers crossed" for sites that Tam can't check because my load-bearing credit card can't support the weight of a dozen subscription
+      services, and "community support" for sites that enjoy support through the helping hand of people willing to help.
+    </li>
+    <li>
+      The in-player UI should now display a warning whenever Ultrawidify detects automatic aspect ratio detection isn't happening because the site uses DRM.
+    </li>
+    <li>
+      Better zooming. The slider is back, baby.
+    </li>
+    <li>
+      Panning option that's a bit more intuitive.
+    </li>
+  </ul>
+  <h3>Unbaked features</h3>
+  <ul>
+    <li>
+      <b>Player UI settings</b>. Ultrawidify doesn't always correctly identify which area the video should fill, especially when not in full screen mode.
+      Version 6.0.0 was intended to come with UI that makes it easier for you to "help" ultrawidify by identifying the correct player element. Alas, I was
+      busier than expected and manifest v3 deadline came faster than expected.
+    </li>
+    <li>
+      <b>Disabling Ultrawidify UI trigger zone, or otherwise changing target area size and position, is not possible</b>.
+    </li>
+  </ul>
+  <h3>Regressions</h3>
+  <ul>
+    <li>
+      Due to major changes under the hood, custom settings from older versions may not have been migrated.
+    </li>
+    <li>
+      It is unclear how extension acts on sites with more than one video.
+    </li>
+    <li>
+      Extension lost the ability to discriminate between iframes. Actions taken through the popup will be affect <b>all</b> iframes.
+    </li>
+  </ul>
+
+</template>
+<script>
+</script>

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

@@ -8,7 +8,6 @@
       <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>
 
@@ -75,7 +74,6 @@ Browser-related stuff (please ensure this section is correct):
 `
       );
     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) {