Fix player detector panel

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -10,6 +10,7 @@
         <div class="flex flex-row">
           <h1><mdicon name="television-play" :size="32" /> Player element</h1>
         </div>
+        <div class="flex flex-row">
           <div class="sub-panel-content">
             <p>
               You're probably on this page because Ultrawidify doesn't crop the player correctly.
@@ -18,13 +19,16 @@
               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.
             </p>
-
             <p>
+              You need to reload the page for changes to take effect.
+            </p>
+
+            <!-- <p>
               <a @click="showAdvancedOptions = !showAdvancedOptions">
                 <template v-if="showAdvancedOptions">Hide advanced options</template>
                 <template v-else>Show advanced options</template>
               </a>
-          </p>
+            </p> -->
 
             <div v-if="showAdvancedOptions" style="display: flex; flex-direction: row">
               <div style="display: flex; flex-direction: column">
@@ -72,7 +76,7 @@
                         </div>
                       </th>
                       <th>Element</th>
-                    <th>Actions</th>
+                      <!-- <th>Actions</th> -->
                       <!-- <th>Quick fixes</th> -->
                     </tr>
                   </thead>
@@ -336,6 +340,11 @@
               </div> -->
             </div>
           </div>
+
+          <!-- <div class="sub-panel-content">
+            <h2>Advanced settings</h2>
+          </div> -->
+        </div>
       </div>
     </div>
   </div>
@@ -450,6 +459,10 @@ export default({
 </script>
 
 <style lang="scss" scoped>
+p {
+  font-size: 1rem;
+}
+
 .element-tree {
   .element-row {
     // display: flex;

src/ext/lib/settings/SiteSettings.ts

@@ -256,6 +256,12 @@ export class SiteSettings {
 
   //#region get
   /**
+   * TODO: check what this function is really doing — implementation didn't make sense
+   * and didn't quite agree with the comment.
+   *
+   * specifically, this function used to always return currentDOMConfig, and the stuff
+   * done inside if block appeared to not be affected. It is also only used in one spot.
+   *
    * Gets DOMConfig. If DOMConfig with given name doesn't exist, we create a new one.
    * @param configName We want to fetch this DOM config
    * @param copyFrom If DOMConfig data doesn't exist, we copy things from DOMConfig with
@@ -264,10 +270,34 @@ export class SiteSettings {
    * @returns Current DOMConfig object for this site
    */
   getDOMConfig(configName: string, copyFrom?: string) {
+    // NOTE: this was added because
+    // there are no DOMConfig objects for this site
+    if (!this.data.DOMConfig) {
+      this.data.DOMConfig = {
+        'original': {
+          type: undefined,
+          elements: {
+            player: undefined,
+            video: undefined,
+            other: undefined,
+          },
+        },
+        'modified': {
+          type: undefined,
+          elements: {
+            player: undefined,
+            video: undefined,
+            other: undefined,
+          },
+        },
+      };
+    }
+
+    // TODO: check what's with that and if this can be removed? This if looks rather useless
     if (! this.data.DOMConfig[configName]) {
       this.data.DOMConfig[configName] = _cp(this.data.DOMConfig[copyFrom ?? this.data.activeDOMConfig ?? 'original']);
     }
-    return this.data.currentDOMConfig[configName];
+    return this.data.DOMConfig[configName];
   }
   //#endregion