Add illustrations to the player picker

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -1,23 +1,17 @@
 <template>
-  <div class="flex flex-col tab-root">
-    <!-- ADD ANY OPTION BARS HERE -->
-
-    <!-- The rest of the tab -->
-    <div class="flex flex-row flex-wrap">
-
-      <!-- Player element picker -->
-      <div class="sub-panel">
+  <div class="flex flex-col">
     <div class="flex flex-row">
-          <h1><mdicon name="television-play" :size="32" /> Player element</h1>
+      <h1>Video player options</h1>
     </div>
     <div class="flex flex-row">
+      <div style="width: 48%">
+        NEW PLAYER SELECTOR
         <div class="sub-panel-content">
           <p>
             You're probably on this page because Ultrawidify doesn't crop the player correctly.
           </p>
           <p>
-              If you hover over the boxes below, the corresponding element will change (sepia filter + higher brightness + reduced contrast + it gets an outline). Player element
-              should be the closest element to the video element, for which the sepia/brightness effect covers the area you expect the video will cover.
+            If you hover over the boxes below, the corresponding element will be highlighted with golden outline. Player should be the first element that covers the video player on the page.
           </p>
           <p>
             You need to reload the page for changes to take effect.
@@ -340,14 +334,102 @@
             </div> -->
           </div>
         </div>
+      </div>
+      <div style="width: 48%">
+        <div>EXAMPLE <small style="opacity: 0.5"><br/>ps: i know this ui is shit, no need to tell me</small></div>
+        <div class="demo-images">
+          <div class="fig1">
+            <img src="/res/img/player-select-demo/uw_player_select___too_little.webp" />
+            <div>If you see this when hovering over the element, you need to select further down the list.</div>
+          </div>
+          <div class="fig2">
+            <div>
+              <p>
+                If you see this when hovering over the element, you're hovering over the correct element.
+              </p>
+              <p>
+                In case there's more than one element that covers the entire player and nothing more, select the option that's closest to the top of the list, otherwise in-player UI could break.
+              </p>
+              <p>
+                If in-player UI breaks, you can make the settings window appear from the extension popup.
+              </p>
+              </div>
+            <img src="/res/img/player-select-demo/uw_player_select___just-right.webp" />
+          </div>
+          <div class="fig1">
+            <img src="/res/img/player-select-demo/uw_player_select___too_much.webp" />
+            <div>If you see this when hovering over the element, you need to select an element closer to the top of the list.</div>
+          </div>
+        </div>
+      </div>
+      <div style="width: 48%" v-if="false">
+        <h2>Legacy advanced settings</h2>
+
+        <div class="">
+          <h3>Player element</h3>
+          <div class="field">
+            <div class="label">Manually specify player</div>
+            <input type="checkbox" />
+          </div>
+          <div class="field">
+            <div class="label">Select player by/as:</div>
+            <div class="select">
+              <select>
+                <option>n-th parent of video</option>
+                <option>Query selectors</option>
+              </select>
+            </div>
+          </div>
+          <div class="field">
+            <div class="label">Player is n-th parent of video</div>
+            <div class="range-input">
+              <input type="range" min="0" max="100" />
+              <input />
+            </div>
+          </div>
+          <div class="field">
+            <div class="label">Query selector for player element</div>
+            <div class="input">
+              <input />
+            </div>
+          </div>
+          <div class="field">
+            <div class="label">In full screen, calculate crop based on monitor resolution</div>
+            <input type="checkbox" />
+          </div>
+
+          <h3>Video element</h3>
+          <div class="field">
+            <div class="label">Select video element automatically</div>
+            <input type="checkbox">
+          </div>
+          <div class="field">
+            <div class="label">Query selectors</div>
+            <div class="input">
+              <input>
+            </div>
+          </div>
+          <div class="field">
+            <div class="label">Additional styles for video element</div>
+            <div class="input">
+              <textarea></textarea>
+            </div>
+          </div>
+
+          <h3>Additional css for this page</h3>
+          <div class="field">
+            <div class="label">Additional CSS for this page</div>
+            <textarea></textarea>
+          </div>
+
+        </div>
+      </div>
 
       <!-- <div class="sub-panel-content">
         <h2>Advanced settings</h2>
       </div> -->
     </div>
   </div>
-    </div>
-  </div>
 </template>
 <script>
 
@@ -467,6 +549,9 @@ export default({
 })
 </script>
 
+<style lang="scss" src="../../res/css/flex.scss" scoped module></style>
+<style lang="scss" src="../res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../res-common/common.scss" scoped module></style>
 <style lang="scss" scoped>
 p {
   font-size: 1rem;
@@ -575,4 +660,32 @@ p {
 .tab-root {
   width: 100%;
 }
+
+.demo-images {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  padding-top: 2rem;
+
+  .fig1, .fig2 {
+    margin-top: -2rem;
+    max-height: 18rem;
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .fig1 {
+    align-self: start;
+  }
+  .fig2 {
+    align-self: end;
+  }
+
+  img {
+    max-width: 32rem;
+  }
+}
 </style>

src/ext/lib/Settings.ts

@@ -183,6 +183,7 @@ class Settings {
     }
 
     // apply all remaining patches
+    try {
       this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`);
       while (index < patches.length) {
         const updateFn = patches[index].updateFn;
@@ -204,6 +205,10 @@ class Settings {
 
         index++;
       }
+    } catch (e) {
+      this.setActive(this.getDefaultSettings());
+      this.save();
+    }
   }
 
   async init() {

src/ext/lib/video-data/PlayerData.ts

@@ -89,6 +89,7 @@ class PlayerData {
   private observer: ResizeObserver;
 
   private trackChangesTimeout: any;
+  private markedElement: HTMLElement;
 
   private ui: UI;
 
@@ -741,8 +742,37 @@ class PlayerData {
   }
 
   private markElement(data: {parentIndex: number, enable: boolean}) {
-    this.elementStack[data.parentIndex].element.style.outline = data.enable ? '5px dashed #fa6' : null;
-    this.elementStack[data.parentIndex].element.style.filter = data.enable ? 'sepia(1) brightness(2) contrast(0.5)' : null;
+    if (data.enable === false) {
+      this.markedElement.remove();
+      return;
+    }
+
+
+    if (this.markedElement) {
+      this.markedElement.remove();
+    }
+
+    const elementBB = this.elementStack[data.parentIndex].element.getBoundingClientRect();
+
+    // console.log('element bounding box:', elementBB);
+
+    const div = document.createElement('div');
+    div.style.position = 'fixed';
+    div.style.top = `${elementBB.top}px`;
+    div.style.left = `${elementBB.left}px`;
+    div.style.width = `${elementBB.width}px`;
+    div.style.height = `${elementBB.height}px`;
+    div.style.zIndex = '100';
+    div.style.border = '5px dashed #fa6';
+    div.style.pointerEvents = 'none';
+    div.style.boxSizing = 'border-box';
+    div.style.backgroundColor = 'rgba(255, 128, 64, 0.25)';
+
+    document.body.insertBefore(div, document.body.firstChild);
+    this.markedElement = div;
+
+    // this.elementStack[data.parentIndex].element.style.outline = data.enable ? '5px dashed #fa6' : null;
+    // this.elementStack[data.parentIndex].element.style.filter = data.enable ? 'sepia(1) brightness(2) contrast(0.5)' : null;
   }
 
   forceRefreshPlayerElement() {

src/options/about.vue

@@ -63,7 +63,7 @@ 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}`;
+    // this.redditLink = `https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=${messageTemplate}`;
   }
 }
 </script>