push the popup thing a bit further

src/csui/PlayerUiComponent.vue

@@ -2,31 +2,74 @@
   <div class="uw-hover uv-hover-trigger-region">
     TEST CONTENT
   </div>
-  <div class="popup-panel flex flex-row">
+  <div class="popup-panel flex flex-column">
-    <div class="tab-row flex flex-column">
+    <div>
-      <div class="tab">
+      <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
-        todo: icon<br/>
+      <div class="">
-        Video options
+        Site: {{site}}
-      </div>
+        <div v-if="siteSupportLevel === 'supported'" class="site-support supported">
-      <div class="tab">
+          <mdicon name="check-decagram" />
-        Autodetection options
+          <div>Officially supported</div>
-      </div>
+        </div>
-      <div class="tab">
+        <div v-if="siteSupportLevel === 'community'" class="site-support community">
-        Advanced options
+          <mdicon name="handshake" />
-      </div>
+          <div>Supported through contributions from community.</div>
-      <div class="tab">
+        </div>
-        Debugging
+        <div v-if="siteSupportLevel === 'community'" class="site-support no-support">
+          <mdicon name="help-circle-outline" />
+          <div>Not officially supported. Extension will try to fix things, but no promises.</div>
+        </div>
+        <div v-if="siteSupportLevel === 'user-added'" class="site-support user-added">
+          <mdicon name="account" />
+          <div>Extension follows your personal configuration for this site.</div>
+        </div>
+        <mdicon v-if="siteSupportLevel === 'community'" class="site-support supported" name="checkbox-marked-circle" />
       </div>
     </div>
-    <div>
+    <div class="flex flex-row">
-      <!-- Panel section -->
+      <div class="tab-row flex flex-column">
-      <template v-if="settingsInitialized">
+        <div class="tab">
-        <VideoSettings
+          <mdicon name="crop" />
-          :settings="settings"
+          Video options
-        ></VideoSettings>
+        </div>
-        <ResizerDebugPanel :debugData="debugData">
+        <div class="tab">
-        </ResizerDebugPanel>
+          Autodetection options
-      </template>
+        </div>
+        <div class="tab">
+          <mdicon name="cogs" />
+          Advanced options
+        </div>
+        <div class="tab">
+          <mdicon name="bug-outline" />
+          Debugging
+        </div>
+      </div>
+      <div class="content flex flex-column">
+        <!-- autodetection warning -->
+
+        <div 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
+              extension from automatically detecting aspect ratio. You will have to adjust aspect ratio manually.
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-row">
+          <!-- Panel section -->
+          <template v-if="settingsInitialized">
+            <VideoSettings
+              :settings="settings"
+            ></VideoSettings>
+            <!-- <ResizerDebugPanel :debugData="debugData">
+            </ResizerDebugPanel> -->
+          </template>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -50,6 +93,7 @@ export default {
     return {
       // component properties
       settings: {},
+      BrowserDetect: BrowserDetect,
       settingsInitialized: false,
       execAction: new ExecAction(),
       logger: null,
@@ -125,6 +169,7 @@ export default {
 
 <style lang="scss" src="../res/css/uwui-base.scss" scoped></style>
 <style lang="scss" src="../res/css/flex.scss" scoped></style>
+<style lang="scss" src="./res-common/common.scss" scoped></style>
 <style lang="scss" scoped>
 @import '../res/css/uwui-base.scss';
 @import '../res/css/colors.scss';
@@ -169,11 +214,17 @@ export default {
 
     pointer-events: all !important;
 
-    background-color: rgba(0,0,0,0.69);
+    background-color: rgba(0,0,0,0.50);
     color: #fff;
 
     overflow-y: auto;
 
+    backdrop-filter: blur(16px) saturate(120%);
+
+    .popup-title, .popup-title h1 {
+      font-size: 48px !important;
+    }
+
     .tab {
       display: block;
       height: 42px;

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-row flex-wrap" style="padding-bottom: 20px">
     <div class="sub-panel">
-      <h1>Crop video:</h1>
+      <div class="flex flex-row">
+        <mdicon name="crop" :size="32" />
+        <h1>Crop video:</h1>
+      </div>
       <div class="sub-panel-content flex flex-row flex-wrap">
         <ShortcutButton v-for="(action, index) of aspectRatioActions"
                         class="flex b3 flex-grow button"
@@ -14,7 +17,10 @@
       </div>
     </div>
     <div class="sub-panel">
-      <h1>Stretch video:</h1>
+      <div class="flex flex-row">
+        <mdicon name="stretch-to-page-outline" :size="32" />
+        <h1>Stretch video:</h1>
+      </div>
       <div class="flex flex-row flex-wrap">
         <ShortcutButton v-for="(action, index) of stretchActions"
                         class="flex b3 flex-grow button"
@@ -27,13 +33,69 @@
       </div>
     </div>
     <div class="sub-panel">
-      <h1>Manual zoom:</h1>
+      <div class="flex flex-row">
-      <div class="flex flex-row flex-wrap">
+        <mdicon name="magnify-plus-outline" :size="32" />
+        <h1>Manual zoom:</h1>
+      </div>
+      <div class="flex flex-column">
+        <!--
+          min, max and value need to be implemented in js as this slider
+          should use logarithmic scale
+        -->
+        <div class="flex flex-row">
+          <ShortcutButton
+            class="flex b3 flex-grow button"
+            label="-5 %"
+          >
+          </ShortcutButton>
+          <ShortcutButton
+            class="flex b3 flex-grow button"
+            label="-1 %"
+          >
+          </ShortcutButton>
+          <div class="flex-grow"></div>
+          <ShortcutButton
+            class="flex b3 flex-grow button"
+            label="+1 %"
+          >
+          </ShortcutButton>
+          <ShortcutButton
+            class="flex b3 flex-grow button"
+            label="+5 %"
+          >
+          </ShortcutButton>
+        </div>
+        <input id="_input_zoom_slider"
+                class="input-slider"
+                type="range"
+                step="any"
+                min="-1"
+                max="4"
+                :value="logarithmicZoom"
+                @input="changeZoom($event.target.value)"
+                />
+        <div style="overflow: auto" class="flex flex-row">
+          <div class="flex flex-grow medium-small x-pad-1em">
+            Zoom: {{(zoom * 100).toFixed()}}%
+          </div>
+          <div class="flex flex-nogrow flex-noshrink medium-small">
+            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+          </div>
+        </div>
 
+        <div class="m-t-0-33em display-block">
+          <input id="_input_zoom_site_allow_pan"
+                  type="checkbox"
+                  />
+          Pan with mouse
+        </div>
       </div>
     </div>
     <div class="sub-panel">
-      <h1>Video alignment:</h1>
+      <div class="flex flex-row">
+        <mdicon name="align-horizontal-center" :size="32" />
+        <h1>Video alignment:</h1>
+      </div>
       <div class="flex flex-row flex-wrap">
 
       </div>
@@ -68,15 +130,15 @@ export default {
     'cropModePersistence',
   ],
   created() {
-    this.exec = new ExecAction(this.settings, window.location.hostname, window.ultrawidify);
+    this.exec = new ExecAction(this.settings, window.location.hostname);
   },
   components: {
     ShortcutButton,
   },
   computed: {
-    // logarithmicZoom: function(){
+    logarithmicZoom: function(){
-    //   return Math.log2(this.zoom);
+      return Math.log2(this.zoom || 1);
-    // }
+    }
   },
   methods: {
     async openOptionsPage() {
@@ -100,21 +162,26 @@ export default {
     resetZoom() {
       this.zoom = 1;
     },
-    changeZoom(nz) {
+    changeZoom(newZoom) {
-      nz = Math.pow(2, nz);
+      newZoom = Math.pow(2, newZoom);
-      this.$emit('zoom-change', nz);
+
-      // this.exec.exec(
+      this.exec.exec(
-      //   {cmd: [{action: 'set-zoom', arg: nz}]},
+        {
-      //   'page',
+          cmd: [{action: 'set-zoom', arg: newZoom}]
-      //   this.frame
+        },
-      // );
+        'page',
+        this.frame,
+        true
+      );
     },
   }
 }
 </script>
 
 <style lang="scss" src="../../res/css/flex.scss" scoped></style>
-<style lang="scss" src="../res-common/panels.scss"></style>
+<style lang="scss" src="../res-common/panels.scss" scoped></style>
+<style lang="scss" src="../res-common/common.scss" scoped></style>
+
 <style lang="scss" scoped>
 .b3 {
   width: 9rem;

src/csui/res-common/_variables.scss

@@ -0,0 +1 @@
+$warning-color: #d6ba4a;

src/csui/res-common/common.scss

@@ -0,0 +1,33 @@
+@import './_variables.scss';
+
+.uw-ultrawidify-container-root {
+
+  div, p, span {
+    font-size: 16px;
+  }
+
+  .warning-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    border: 1px solid $warning-color;
+    color: $warning-color;
+    margin: 0px 16px;
+    padding: 16px;
+
+    font-size: 16;
+
+    border-radius: 2px;
+
+    *:not(:first-child) {
+      margin-left: 24px;
+    }
+  }
+
+  h1, h2, h3 {
+    font-family: 'Overpass' !important;
+    font-weight: 100 !important;
+  }
+
+}

src/csui/res-common/panels.scss

@@ -1,6 +1,10 @@
 .sub-panel {
   max-width: 52rem;
   margin: 2rem;
+
+  h1:not(:first-child) {
+    margin-left: 16px;
+  }
 }
 .sub-panel-content {
   margin-top: 1.5rem;