From fba6a8d6049ff3e28e3541e16d8855a7b5a8dd52 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 11 May 2021 22:45:08 +0200
Subject: [PATCH] Additional details in the popup

---
 src/popup/panels/SiteDetailsPanel.vue | 58 +++++++++++++++++++++------
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/popup/panels/SiteDetailsPanel.vue b/src/popup/panels/SiteDetailsPanel.vue
index 6ad73ee..9b6c1d2 100644
--- a/src/popup/panels/SiteDetailsPanel.vue
+++ b/src/popup/panels/SiteDetailsPanel.vue
@@ -38,18 +38,18 @@
       Player detection settings<br/><small>for {{site}}</small>
     </div>
     <div class="description">
-      Player is the frame around the video. Extension crops/stretches the video to fit the player.
+      If extension doesn't work, you can help a little by telling it where to look for the player.<br/>
     </div>
     <div class="">
       <div class="">
-        <input :checked="!playerManualQs"
+        <input :checked="playerManualQs"
                 @change="togglePlayerManualQs"
                 type="checkbox" 
-        /> Detect automatically
+        /> Manually specify player
       </div>
 
       <div class="flex flex-column">
-        <div class="">Query selectors:</div>
+        <div class="">Query selectors for player:</div>
         <input type="text"
                v-model="playerQs"
                @change="updatePlayerQuerySelector"
@@ -58,24 +58,48 @@
         />
       </div>
 
-      <div class="">
+      <div class="flex flex-row">
         <input :checked="playerByNodeIndex"
                :disabled="!playerManualQs"
                 @change="toggleByNodeIndex"
                 type="checkbox" 
-        /> Specify player node parent index instead
-      </div>
-
-      <div class="flex flex-column">
-        <div class="">Player node parent index:</div>
-         <input v-model="playerParentNodeIndex"
+        />
+        <div>
+          Player is n-th parent of video:
+        </div>
+        <input v-model="playerParentNodeIndex"
                 :disabled="!playerByNodeIndex || !playerManualQs"
                 @change="updatePlayerParentNodeIndex"
                 @blur="updatePlayerParentNodeIndex"
                 type="number" 
-         />
+        />
+      </div>
+
+      <div class="description">
+        <small>
+          <b>Hint:</b> Player is a HTML element that represents the portion of the page you expect the video to play in.
+          You can provide player's query selector, or you can tick the 'player is the n-th parent of video'
+          checkbox and try entering values 1-12ish and see if anything works. Note that you need to save
+          settings and reload the page every time you change the number.
+        </small>
+      </div>
+
+      <div class="flex flex-row">
+        <input :checked="usePlayerAr"
+                @change="toggleUsePlayerAr"
+                type="checkbox" 
+        />
+        <div>
+          Do not use monitor AR in fullscreen
+        </div>
+      </div>
+
+      <div class="description">
+        <small>
+          <b>Hint:</b> When in full screen, the extension will assume that player element is as big as your screen.
+          You generally want to keep this option off, unless you like to browse in fullscreen a lot.
+        </small>
       </div>
-      
     </div>
 
     <div class="label">
@@ -213,6 +237,7 @@ export default {
       playerCss: '',
       playerByNodeIndex: false,
       playerParentNodeIndex: undefined,
+      usePlayerAr: false,
       BrowserDetect
     };
   },
@@ -234,6 +259,7 @@ export default {
       this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors;
       this.playerByNodeIndex = this.settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex;
       this.playerParentNodeIndex = this.settings.active.sites[this.site].DOM.player.videoAncestor;
+      this.usePlayerAr = this.settings.active.sites[this.site].usePlayerArInFullscreen;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
     }
@@ -330,6 +356,12 @@ export default {
       this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex;
       this.settings.save();
     },
+    toggleUsePlayerAr() {
+      this.ensureSettings('player');
+      this.usePlayerAr = !this.usePlayerAr;
+      this.settings.active.sites[this.site].usePlayerArInFullscreen = this.usePlayerAr;
+      this.settings.save();
+    },
     setMitigation(mitigation, value) {
       // ensure mitigations object exists.
       // it may not exist in the settings on first load