Add more styling, choose few quick actions

src/csui/PlayerUiBase.vue

@@ -51,8 +51,9 @@
         </div>
         <mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
       </div>
+      <div><a @click="uwWindowFadeOutDisabled = !uwWindowFadeOutDisabled">{{uwWindowFadeOutDisabled ? 'allow auto-close' : 'prevent auto-close'}}</a></div>
     </div>
-    <div class="flex flex-row">
+    <div class="tab-main flex flex-row">
       <div class="tab-row flex flex-column">
         <div
           v-for="tab of tabs"
@@ -64,7 +65,7 @@
           <div class="icon-container">
             <mdicon
               :name="tab.icon"
-              :size="48"
+              :size="32"
             />
           </div>
           <div class="label">
@@ -75,19 +76,31 @@
       <div class="content flex flex-column">
         <!-- autodetection warning -->
 
+        <div class="warning-area">
+          <div class="warning-box">
+            <div class="icon-container">
+              <mdicon name="alert" :size="32" />
+            </div>
+            <div>
+              DRM warnings will appear in this box<br/>
+              <a>Learn more ...</a>
+            </div>
+          </div>
+        </div>
+
         <div v-if="ultrawidify?.videoData?.hasDrm" class="warning-area">
           <div class="warning-box">
             <div>
               <mdicon name="alert" :size="42" />
             </div>
             <div>
-              This site uses <a href="https://en.wikipedia.org/wiki/Digital_rights_management" target="_blank">digital rights management</a> solutions that prevent this
+              This site is blocking automatic aspect ratio detection. You will have to adjust aspect ratio manually.<br/>
-              extension from automatically detecting aspect ratio. You will have to adjust aspect ratio manually.
+              <a>Learn more ...</a>
             </div>
           </div>
         </div>
 
-        <div class="flex flex-row">
+        <div class="flex flex-row panel-content">
           <!-- Panel section -->
           <template v-if="settingsInitialized">
             <VideoSettings
@@ -144,6 +157,7 @@ export default {
         maxHeight: "13.37rem",
       },
 
+      uwWindowFadeOutDisabled: false,
       uwWindowFadeOut: false,
       uwWindowCloseTimeout: undefined,
       uwWindowVisible: false,
@@ -335,6 +349,9 @@ export default {
     },
 
     hideUwWindow() {
+      if (this.uwWindowFadeOutDisabled) {
+        return;
+      }
       this.uwWindowCloseTimeout = setTimeout(() => this.uwWindowVisible = false, 1100);
       this.uwWindowFadeOut = true;
     },
@@ -371,6 +388,12 @@ export default {
 //   height: 100%;
 // }
 
+.tab-main {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+}
+
 .site-support-info {
   display: flex;
   flex-direction: row;
@@ -451,6 +474,45 @@ export default {
   }
 }
 
+.content {
+  flex-grow: 1;
+
+  .warning-area {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .panel-content {
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    overflow-y: auto;
+    padding: 1rem;
+  }
+}
+
+.warning-box {
+  background: rgb(255, 174, 107);
+  color: #000;
+  margin: 1rem;
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .icon-container {
+    margin-right: 1rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  a {
+    color: rgba(0,0,0,0.7);
+    cursor: pointer;
+  }
+}
+
 .uw-hover {
   position: absolute;
 

src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column">
+  <div class="flex flex-column tab-root">
     <!-- ADD ANY OPTION BARS HERE -->
 
     <!-- The rest of the tab -->
@@ -88,9 +88,184 @@
                   </div>
                 </div>
                 <div class="css-fixes">
+                  <div><b>Quick fixes:</b></div>
                   <!-- todo: generate buttons with some of the common css lines I always end up adding -->
-                  <div>Width: 100%</div>
+                  <div
-                  <div>Height: 100%</div>
+                    class="ccs-line"
+                    :class="{'active': cssStack[index]?.includes('width: 100%')}"
+                    @click="toggleCssForElement(index, 'width: 100%;')"
+                  >
+                    Width: 100%
+                  </div>
+                  <div
+                    class="css-line"
+                    :class="{'active': cssStack[index]?.includes('height: 100%')}"
+                    @click="toggleCssForElement(index, 'height: 100%')"
+                  >
+                    Height: 100%
+                  </div>
+                  <div
+                    class="css-line"
+                    :class="{'active': cssStack[index]?.includes('display: flex')}"
+                    @click="toggleCssForElement(index, 'display: flex')"
+                  >
+                    Display: flex
+                  </div>
+                  <div class="css-line">
+                    Flex direction:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('flex-direction: row')}"
+                      @click="toggleCssForElement(index, 'flex-direction', 'row')"
+                    >
+                      row
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('flex-direction: column')}"
+                      @click="toggleCssForElement(index, 'flex-direction', 'column')"
+                    >
+                      column
+                    </span>
+                  </div>
+                  <div class="css-line">
+                    Justify content:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('justify-content: start')}"
+                      @click="toggleCssForElement(index, 'justify-content', 'start')"
+                    >
+                      start
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('justify-content: center')}"
+                      @click="toggleCssForElement(index, 'justify-content', 'center')"
+                    >
+                      center
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('justify-content: end')}"
+                      @click="toggleCssForElement(index, 'justify-content', 'end')"
+                    >
+                      end
+                    </span>
+                  </div>
+                  <div class="css-line">
+                    Align items:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('align-items: start')}"
+                      @click="toggleCssForElement(index, 'align-items', 'start')"
+                    >
+                      start
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('align-items: center')}"
+                      @click="toggleCssForElement(index, 'align-items', 'center')"
+                    >
+                      center
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('align-items: end')}"
+                      @click="toggleCssForElement(index, 'align-items', 'end')"
+                    >
+                      end
+                    </span>
+                  </div>
+
+                  <div class="css-line">
+                    Justify self:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('justify-self: start')}"
+                      @click="toggleCssForElement(index, 'justify-self', 'start')"
+                    >
+                      start
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('justify-self: center')}"
+                      @click="toggleCssForElement(index, 'justify-self', 'center')"
+                    >
+                      center
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('justify-self: end')}"
+                      @click="toggleCssForElement(index, 'justify-self', 'end')"
+                    >
+                      end
+                    </span>
+                  </div>
+                  <div class="css-line">
+                    Align self:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('align-self: start')}"
+                      @click="toggleCssForElement(index, 'align-self', 'start')"
+                    >
+                      start
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('align-self: center')}"
+                      @click="toggleCssForElement(index, 'align-self', 'center')"
+                    >
+                      center
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('align-self: end')}"
+                      @click="toggleCssForElement(index, 'align-self', 'end')"
+                    >
+                      end
+                    </span>
+                  </div>
+                  <div class="css-line">
+                    Text-align:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('text-align: left')}"
+                      @click="toggleCssForElement(index, 'align-self', 'start')"
+                    >
+                      left
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('text-align: center')}"
+                      @click="toggleCssForElement(index, 'text-align', 'center')"
+                    >
+                      center
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('text-align: right')}"
+                      @click="toggleCssForElement(index, 'text-align', 'right')"
+                    >
+                      right
+                    </span>
+                  </div>
+                  <div class="css-line">
+                    Position:
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('position: relative')}"
+                      @click="toggleCssForElement(index, 'position', 'relative')"
+                    >
+                      relative
+                    </span> |
+                    <span
+                      class="css-line-suboption"
+                      :class="{'active': cssStack[index]?.includes('position: absolute')}"
+                      @click="toggleCssForElement(index, 'position', 'absolute')"
+                    >
+                      absolute
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -111,7 +286,8 @@ export default({
   },
   data() {
     return {
-      elementStack: []
+      elementStack: [],
+      cssStack: [],
     };
   },
   mixins: [],
@@ -153,6 +329,43 @@ export default({
         await this.settings.save();
         this.eventBus.sendToTunnel('get-player-tree');
       }
+    },
+    /**
+     * Toggles active CSS for element of certain parent index.
+     * cssValue is optional and can be included in cssRule argument
+     */
+    toggleCssForElement(index, cssRule, cssValue) {
+      if (cssValue) {
+        // this is "toggle off" case for calls that put cssRule and cssValue as separate arguments
+        if (this.cssStack[index]?.includes(cssRule) && this.cssStack[index]?.includes(cssValue)) {
+          this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
+
+          //TODO: update settings!
+          return;
+        }
+      }
+
+      // this rule applies to current element — remove it!
+      if (this.cssStack[index]?.includes(cssRule)) {
+        this.cssStack[index] = this.cssStack[index].filter(x => ! x.includes(cssRule));
+
+        // exception: if cssValue is given separately, we aren't removing it
+        // in that case, we're overwriting it
+        if (cssValue) {
+          this.cssStack[index].push(`${cssRule}: ${cssValue};`);
+        }
+      } else {
+        if (!this.cssStack[index]) {
+          this.cssStack[index] = [];
+        }
+        if (cssValue) {
+          this.cssStack[index].push(`${cssRule}: ${cssValue};`);
+        } else {
+          this.cssStack[index].push(cssRule)
+        }
+      }
+
+      //TODO: update settings!
     }
   }
 })
@@ -220,4 +433,8 @@ export default({
     }
   }
 }
+
+.tab-root {
+  width: 100%;
+}
 </style>