Improve UI in advanced settings

src/popup/App.vue

@@ -8,7 +8,7 @@
     non-firefox builds of this extension and be done with it. No need to complicate things
     further than that.
   -->
-  <div v-if="settingsInitialized" 
+  <div v-if="settingsInitialized"
        class="popup flex flex-column no-overflow"
        :class="{'popup-chrome': ! BrowserDetect.firefox}"
   >
@@ -20,7 +20,7 @@
         Build channel: {{BrowserDetect.processEnvChannel}}
       </div>
     </div>
-    <div 
+    <div
       v-if="narrowPopup"
       class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
       @click="toggleSideMenu()"
@@ -160,7 +160,7 @@
       </div>
 
       <!-- PANELS/CONTENT -->
-      <div id="tab-content" 
+      <div id="tab-content"
            v-show="!(narrowPopup && sideMenuVisible)"
            class="flex-grow h100 overflow-y-auto"
            :class="{'narrow-content': narrowPopup}"
@@ -184,7 +184,7 @@
                               :settings="settings"
                               :site="selectedSite"
         />
-        <PerformancePanel v-if="selectedTab === 'performance-metrics'" 
+        <PerformancePanel v-if="selectedTab === 'performance-metrics'"
                           :performance="performance" />
         <WhatsNewPanel v-if="selectedTab === 'whats-new'" />
         <AboutPanel v-if="selectedTab === 'about'" />
@@ -279,7 +279,7 @@ export default {
 
       }
       await this.sleep(5000);
-    } 
+    }
   },
   async updated() {
     const body = document.getElementsByTagName('body')[0];
@@ -287,7 +287,7 @@ export default {
     // ensure that narrowPopup only gets set the first time the popup renders
     // if popup was rendered before, we don't do anything because otherwise
     // we'll be causing an unwanted re-render
-    // 
+    //
     // another thing worth noting — the popup gets first initialized with
     // offsetWidth set to 0. This means proper popup will be displayed as a
     // mini popup if we don't check for that.
@@ -695,7 +695,7 @@ html {
   non-firefox builds of this extension and be done with it. No need to complicate things
   further than that.
 
-  It also seems that Chrome doesn't like if we set the width of the popup all the way to 
+  It also seems that Chrome doesn't like if we set the width of the popup all the way to
   800px (probably something something scrollbar), so let's just take away a few px.
  */
 .popup-chrome {

src/popup/panels/SiteDetailsPanel.vue

@@ -6,7 +6,7 @@
         If extension doesn't detect player correctly, you can override it.
         <small>(NOTE: this currently doesn't work for embedded videos)</small>
       </div>
-      
+
       <div>Meaning of outlines:</div>
 
       <div class="flex flex-row flex-wrap">
@@ -44,50 +44,59 @@
       <div class="">
         <input :checked="playerManualQs"
                 @change="togglePlayerManualQs"
-                type="checkbox" 
+                type="checkbox"
         /> Manually specify player
+        <span v-if="playerManualQs" class="small-samecolor">
+          &nbsp;
+          <a
+            v-if="playerByNodeIndex"
+            @click="toggleByNodeIndex"
+          >(show advanced options)</a>
+          <a
+            v-if="!playerByNodeIndex"
+            @click="toggleByNodeIndex"
+          >(hide advanced options)</a>
+        </span>
       </div>
 
-      <div class="flex flex-column">
+      <div v-if="playerManualQs">
-        <div class="">Query selectors for player:</div>
+        <div v-if="!playerByNodeIndex" class="flex flex-column">
-        <input type="text"
+          <div class="">Query selectors for player:</div>
-               v-model="playerQs"
+          <input type="text"
-               @change="updatePlayerQuerySelector"
+                v-model="playerQs"
-               @blur="updatePlayerQuerySelector"
+                @change="updatePlayerQuerySelector"
-               :disabled="playerByNodeIndex || !playerManualQs"
+                @blur="updatePlayerQuerySelector"
-        />
+                :disabled="playerByNodeIndex || !playerManualQs"
-      </div>
+          />
-
+        </div>
-      <div class="flex flex-row">
+
-        <input :checked="playerByNodeIndex"
+        <div v-if="playerByNodeIndex" class="flex flex-row">
-               :disabled="!playerManualQs"
+          <div>
-                @change="toggleByNodeIndex"
+            Player is n-th parent of video:
-                type="checkbox" 
+          </div>
-        />
+          <input v-model="playerParentNodeIndex"
-        <div>
+                  :disabled="!playerManualQs"
-          Player is n-th parent of video:
+                  @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.
+            The correct value for n-th player value should normally between 1-10 (depends on the site). If none of these
+            values works, then the site probably has a different issue.
+            Note that you need to save settings and reload the page every time you change the number.
+          </small>
         </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" 
+                type="checkbox"
         />
         <div>
           Do not use monitor AR in fullscreen
@@ -116,7 +125,7 @@
         >
         </textarea>
     </div>
-    
+
     <div class="label">
       Video detection settings<br/><small>for {{site}}</small>
     </div>
@@ -125,7 +134,7 @@
       <div class="">
         <input :checked="!videoManualQs"
                 @change="toggleVideoManualQs"
-                type="checkbox" 
+                type="checkbox"
         /> Detect automatically
       </div>
       <div class="flex flex-column">
@@ -161,7 +170,7 @@
           <div class="flex label-secondary form-label">
             <input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"
                   @change="setMitigation(['zoomLimit', 'enabled'], $event.target.checked)"
-                  type="checkbox" 
+                  type="checkbox"
             /> Limit zoom.
           </div>
           <div class="flex flex-row">
@@ -181,7 +190,7 @@
             <input :checked="settings?.active?.mitigations?.zoomLimit?.fullscreenOnly"
                   @change="setMitigation(['zoomLimit', 'fullscreenOnly'], $event.target.checked)"
                   :disabled="!settings?.active?.mitigations?.zoomLimit?.enabled"
-                  type="checkbox" 
+                  type="checkbox"
             /> Limit zoom only while in fullscreen
           </div>
           <div class="description">
@@ -235,7 +244,7 @@ export default {
       playerManualQs: false,
       playerQs: '',
       playerCss: '',
-      playerByNodeIndex: false,
+      playerByNodeIndex: true,
       playerParentNodeIndex: undefined,
       usePlayerAr: false,
       BrowserDetect
@@ -253,7 +262,7 @@ export default {
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
     }
-    
+
     try {
       this.playerManualQs = this.settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
       this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors;
@@ -278,7 +287,7 @@ export default {
       const saveButtonBait = document.getElementById('save-banner-observer-bait');
       const saveButton = document.getElementById('save-banner');
 
-      const observer = new IntersectionObserver( 
+      const observer = new IntersectionObserver(
         ([e]) => {
           // console.log('observer triggered. intersection ratio?', e.intersectionRatio)
           saveButton.classList.toggle('floating', e.intersectionRatio < 0.95);
@@ -380,7 +389,7 @@ export default {
         }
 
         currentMitigationsParent[mitigation[mitigation.length - 1]] = value;
-      
+
       } else {
         this.settings.active.mitigations[mitigation] = value;
       }
@@ -434,4 +443,8 @@ export default {
     box-shadow: 0 2rem 3rem 1rem $selected-color;
   }
 }
+
+.small-samecolor {
+  font-size: 0.8em;
+}
 </style>