Update popup appearance

2025-04-26 23:27:09 +02:00 · 2025-04-26 23:27:09 +02:00 · adedfec1d0
commit adedfec1d0
parent b974111eb4
12 changed files with 225 additions and 139 deletions
--- a/src/csui/Popup.vue
+++ b/src/csui/Popup.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="popup-panel">
+  <div class="popup-panel" style="height: 100vh">
    <!--
      NOTE — the code that makes ultrawidify popup work in firefox regardless of whether the
      extension is being displayed in a normal or a small/overflow popup breaks the popup
@ -10,6 +10,7 @@
      further than that.
    -->
    <div v-if="settingsInitialized"
+        style="height: 100vh"
        class="popup flex flex-col no-overflow"
        :class="{'popup-chrome': ! BrowserDetect?.firefox}"
    >
@ -78,7 +79,7 @@
        </div>

        <!-- CONTENT -->
-        <div class="scrollable" style="flex: 7 7; padding: 1rem;">
+        <div class="scrollable window-content" style="flex: 7 7; padding: 1rem;">
          <template v-if="settings && siteSettings">
            <PopupVideoSettings
              v-if="selectedTab === 'videoSettings'"
@ -86,14 +87,6 @@
              :eventBus="eventBus"
              :siteSettings="siteSettings"
            ></PopupVideoSettings>
-            <!-- <PlayerDetectionPanel
-              v-if="selectedTab === 'playerDetection'"
-              :settings="settings"
-              :eventBus="eventBus"
-              :siteSettings="siteSettings"
-              :site="site.host"
-            >
-            </PlayerDetectionPanel> -->
            <BaseExtensionSettings
              v-if="selectedTab === 'extensionSettings'"
              :settings="settings"
@ -610,4 +603,10 @@ pre {
 h1 {
  margin: 0; padding: 0; font-weight: 400; font-size:24px;
 }
+
+.window-content {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
 </style>
--- a/src/csui/csui-popup.html
+++ b/src/csui/csui-popup.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="position: relative">
+<html lang="en" style="position: relative; height: 600px">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
@ -10,9 +10,9 @@
  <% } %>
 </head>
 <body
-  style="width: 100%; height: 100%; overflow-x: hidden; min-width: 750px"
+  style="width: 100%; height: 100vh; overflow-x: hidden; min-width: 750px;"
 >
-  <div id="app">
+  <div id="app" style="max-height: 100vh;">

  </div>
  <script src="csui-popup.js"></script>
--- a/src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
+++ b/src/csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="alignment-box">
+  <div class="alignment-box" :class="{large: large}">
    <div
      class="col top left"
      @click="align(VideoAlignment.Left, VideoAlignment.Top)"
@ -60,10 +60,10 @@
 <script>
 import VideoAlignmentType from '../../../common/enums/VideoAlignmentType.enum';

-
 export default {
  props: [
-    'eventBus'
+    'eventBus',
+    'large',
  ],
  data() {
    return {
@ -89,6 +89,14 @@ export default {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;

+  &.large {
+    max-width: 15rem;
+
+    .col {
+      width: 4rem;
+      height: 4rem;
+    }
+  }

  .col {
    display: flex;
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@ -1,6 +1,6 @@
 <template>
  <div class="flex flex-row w-full h-full">
-    <div class="flex flex-col">
+    <div class="flex flex-col w-full">

      <!-- TAB ROW -->
      <div class="flex flex-row">
--- a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
+++ b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
@ -11,6 +11,7 @@
          <li>Keyboard zoom now works</li>
          <li><code>www.youtube-nocookie.com</code> has been added to the "officially supported" list</li>
          <li>Fixed the bug where UI would sometimes refuse to stay hidden</li>
+          <li>New experimental zoom options</li>
        </ul>
      </div>
      <div style="width: 1rem; height: 0px;"></div>
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
@ -3,8 +3,12 @@

    <ShortcutButton
      v-for="(command, index) of settings?.active.commands.crop"
-      class="flex b3 button"
-      :class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
+      class="flex button"
+      :class="{
+        active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command),
+        'b3-compact': compact,
+        b3: !compact
+      }"
      :key="index"
      :label="command.label"
      :shortcut="getKeyboardShortcutLabel(command)"
@ -170,7 +174,8 @@ export default {
    'siteSettings',
    'eventBus',
    'isEditing',
-    'allowSettingSiteDefault'
+    'allowSettingSiteDefault',
+    'compact',
  ],
  computed: {
    siteDefaultCrop()  {
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
@ -3,7 +3,10 @@
    <ShortcutButton
      v-for="(command, index) of settings?.active.commands.stretch"
      class="b3 button"
-      :class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command)}"
+      :class="{active: editMode ? index === editModeOptions?.stretch?.selectedIndex : isActiveStretch(command),
+        'b3-compact': compact,
+        b3: !compact
+      }"
      :key="index"
      :label="command.label"
      :shortcut="getKeyboardShortcutLabel(command)"
@ -184,7 +187,8 @@ export default {
    'siteSettings',
    'eventBus',
    'isEditing',
-    'allowSettingSiteDefault'
+    'allowSettingSiteDefault',
+    'compact',
  ],
  components: {
    ShortcutButton,
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
@ -5,8 +5,11 @@

      <ShortcutButton
        v-for="(command, index) of settings?.active.commands.zoom"
-        class="flex b3 button"
-        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}"
+        class="flex button"
+        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command),
+          'b3-compact': compact,
+          b3: !compact
+        }"
        :key="index"
        :label="command.label"
        :shortcut="getKeyboardShortcutLabel(command)"
@ -131,80 +134,81 @@
        min, max and value need to be implemented in js as this slider
        should use logarithmic scale
      -->
-      <div class="flex flex-row flex-end">
-        <Button
-          v-if="zoomAspectRatioLocked"
-          label="Unlock aspect ratio"
-          icon="lock-open"
-          :fixedWidth="true"
-          @click="toggleZoomAr()"
-        >
-        </Button>
-        <Button
-          v-else
-          label="Lock aspect ratio"
-          icon="lock"
-          :fixedWidth="true"
-          @click="toggleZoomAr()"
-        >
-        </Button>
+      <div class="flex flex-row w-full" style="margin-top: 0.66rem">
+        <div style="position:relative;" class="grow">
+          <template v-if="zoomAspectRatioLocked">
+            <div class="slider-label">
+              Zoom: {{getZoomForDisplay('x')}}
+            </div>
+            <input id="_input_zoom_slider"
+                    class="input-slider"
+                    type="range"
+                    step="any"
+                    min="-1"
+                    max="3"
+                    :value="zoom.x"
+                    @input="changeZoom($event.target.value)"
+                    />
+          </template>
+          <template v-else>
+            <div class="slider-label">Horizontal zoom: {{getZoomForDisplay('x')}}</div>
+            <input id="_input_zoom_slider"
+                    class="input-slider"
+                    type="range"
+                    step="any"
+                    min="-1"
+                    max="4"
+                    :value="zoom.x"
+                    @input="changeZoom($event.target.value, 'x')"
+            />
+
+            <div class="slider-label">Vertical zoom: {{getZoomForDisplay('y')}}</div>
+            <input id="_input_zoom_slider_2"
+                    class="input-slider"
+                    type="range"
+                    step="any"
+                    min="-1"
+                    max="3"
+                    :value="zoom.y"
+                    @input="changeZoom($event.target.value, 'y')"
+            />
+          </template>
+        </div>
+
+        <div class="flex flex-row items-center justify-center" style="padding-left: 1rem">
+          <Button
+            v-if="zoomAspectRatioLocked"
+            icon="lock"
+            :iconSize="16"
+            :fixedWidth="true"
+            :noPad="true"
+            @click="toggleZoomAr()"
+          >
+          </Button>
+          <Button
+            v-else
+            icon="lock-open-variant"
+            :iconSize="16"
+            :fixedWidth="true"
+            :noPad="true"
+            @click="toggleZoomAr()"
+          >
+          </Button>
+          <Button
+            icon="restore"
+            :iconSize="16"
+            :noPad="true"
+            @click="resetZoom()"
+          ></Button>
+        </div>
      </div>
-      <template v-if="zoomAspectRatioLocked">
-        <input id="_input_zoom_slider"
-                class="input-slider"
-                type="range"
-                step="any"
-                min="-1"
-                max="3"
-                :value="zoom.x"
-                @input="changeZoom($event.target.value)"
-                />
-        <div style="overflow: auto" class="flex flex-row">
-          <div class="flex flex-grow medium-small x-pad-1em">
-            Zoom: {{getZoomForDisplay('x')}}
-          </div>
-          <div class="flex flex-nogrow flex-noshrink medium-small">
-            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <div>Horizontal zoom</div>
-        <input id="_input_zoom_slider"
-                class="input-slider"
-                type="range"
-                step="any"
-                min="-1"
-                max="4"
-                :value="zoom.x"
-                @input="changeZoom($event.target.value, 'x')"
-        />

-        <div>Vertical zoom</div>
-        <input id="_input_zoom_slider"
-                class="input-slider"
-                type="range"
-                step="any"
-                min="-1"
-                max="3"
-                :value="zoom.y"
-                @input="changeZoom($event.target.value, 'y')"
-        />
-
-        <div style="overflow: auto" class="flex flex-row">
-          <div class="flex flex-grow medium-small x-pad-1em">
-            Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
-          </div>
-          <div class="flex flex-nogrow flex-noshrink medium-small">
-            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
-          </div>
-        </div>
-      </template>
    </template>
  </div>
 </template>

 <script>
+import Button from '@csui/src/components/Button.vue';
 import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
 import EditShortcutButton from '@csui/src/components/EditShortcutButton';
 import EditModeMixin from '@csui/src/utils/EditModeMixin';
@ -214,6 +218,7 @@ import AspectRatioType from '@src/common/enums/AspectRatioType.enum';

 export default {
  components: {
+    Button,
    ShortcutButton,
    EditShortcutButton,
  },
@ -246,7 +251,8 @@ export default {
    'settings',      // required for buttons and actions, which are global
    'siteSettings',
    'eventBus',
-    'isEditing'
+    'isEditing',
+    'compact',
  ],
  created() {
    if (this.isEditing) {
@ -282,8 +288,7 @@ export default {
      // this.eventBus.send('set-zoom', {zoom: 1, axis: 'y'});
      // this.eventBus.send('set-zoom', {zoom: 1, axis: 'x'});

-      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'y'});
-      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'x'});
+      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1});
    },
    changeZoom(newZoom, axis) {
      // we store zoom logarithmically on this compnent
@ -297,10 +302,9 @@ export default {
      newZoom = Math.pow(2, newZoom);

      if (this.zoomAspectRatioLocked) {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'y'});
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'x'});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom});
      } else {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: {[axis ?? 'x']: newZoom}});
      }
    },
    isActiveZoom(command) {
@ -314,3 +318,17 @@ export default {
 <style lang="scss" src="../../../../res/css/flex.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/panels.scss" scoped></style>
 <style lang="scss" src="@csui/src/res-common/common.scss" scoped></style>
+<style lang="scss" scoped>
+.input-slider {
+  width: 100%;
+  box-sizing:border-box;
+  margin-right: 1rem;
+  margin-left: 0rem;
+}
+.slider-label {
+  margin-bottom: -0.5rem;
+  color: #aaa;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+</style>
--- a/src/csui/src/PlayerUiPanels/VideoSettings.vue
+++ b/src/csui/src/PlayerUiPanels/VideoSettings.vue
@ -38,7 +38,7 @@
        <!-- CROP OPTIONS -->
        <div v-if="settings" class="sub-panel">
          <div class="flex flex-row">
-            <mdicon name="crop" :size="32" />
+            <mdicon name="crop" :size="16" />
            <h1>Crop video:</h1>
          </div>

--- a/src/csui/src/components/Button.vue
+++ b/src/csui/src/components/Button.vue
@ -1,7 +1,11 @@
 <template>
  <div class="button center-text"
-       :class="{'setting-selected': selected }"
+       :class="{
+          'setting-selected': selected,
+          'no-pad': noPad,
+        }"
  >
+    <mdicon v-if="icon" :name="icon" :size="iconSize ?? 24"></mdicon>
    <div class="label">
      {{label}}
    </div>
@ -15,6 +19,8 @@ export default {
    selected: Boolean,
    label: String,
    icon: String,
+    iconSize: Number,
+    noPad: Boolean
  }
 }
 </script>
@ -40,4 +46,7 @@ export default {
  }

 }
+.no-pad {
+  padding: 0.5rem 1rem !important;
+}
 </style>
--- a/src/csui/src/popup/panels/PopupVideoSettings.vue
+++ b/src/csui/src/popup/panels/PopupVideoSettings.vue
@ -12,61 +12,86 @@
    </template>

    <div class="flex flex-row">
-      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <h1>Crop video:</h1>
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>CROP</span>
    </div>
-
-    <CropOptionsPanel
-      style="margin-top: -2rem"
-      :settings="settings"
-      :eventBus="eventBus"
-      :siteSettings="siteSettings"
-      :isEditing="false"
+    <div
+      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
    >
-    </CropOptionsPanel>
+      <CropOptionsPanel
+        :settings="settings"
+        :eventBus="eventBus"
+        :siteSettings="siteSettings"
+        :isEditing="false"
+        :compact="true"
+      >
+      </CropOptionsPanel>
+    </div>

    <div class="flex flex-row">
-      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <h1>Stretch video:</h1>
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>STRETCH</span>
+    </div>
+    <div
+      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
+    >
+      <StretchOptionsPanel
+        :settings="settings"
+        :eventBus="eventBus"
+        :siteSettings="siteSettings"
+        :isEditing="false"
+        :compact="true"
+      ></StretchOptionsPanel>
    </div>
-
-    <StretchOptionsPanel
-      style="margin-top: -2rem"
-      :settings="settings"
-      :eventBus="eventBus"
-      :siteSettings="siteSettings"
-      :isEditing="false"
-    ></StretchOptionsPanel>

    <div class="flex flex-row">
-      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <h1>Zoom:</h1>
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>ZOOM</span>
+    </div>
+    <div
+      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
+    >
+      <ZoomOptionsPanel
+        :settings="settings"
+        :eventBus="eventBus"
+        :siteSettings="siteSettings"
+        :isEditing="false"
+        :compact="true"
+      >
+      </ZoomOptionsPanel>
    </div>

-    <ZoomOptionsPanel
-      :settings="settings"
-      :eventBus="eventBus"
-      :siteSettings="siteSettings"
-      :isEditing="false"
+    <div class="flex flex-row">
+      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <span>ALIGN</span>
+    </div>
+    <div
+      style="margin-bottom: 0.88rem;"
    >
-    </ZoomOptionsPanel>
+      <AlignmentOptionsControlComponent
+        :eventBus="eventBus"
+        :large="true"
+      > </AlignmentOptionsControlComponent>
+    </div>
+

  </div>

 </template>

 <script>
-import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
-import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
-import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
+import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
+import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
+import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
 import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
+import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';

 export default {
-  data() {
-    return {
-      exec: null,
-      ExtensionMode: ExtensionMode,
-    };
+  components: {
+    CropOptionsPanel,
+    StretchOptionsPanel,
+    ZoomOptionsPanel,
+    AlignmentOptionsControlComponent
  },
  mixins: [

@ -76,8 +101,11 @@ export default {
    'siteSettings',
    'eventBus',
  ],
-  components: {
-    CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel
+  data() {
+    return {
+      exec: null,
+      ExtensionMode: ExtensionMode,
+    };
  },
  created() {
    this.eventBus.subscribe(
--- a/src/csui/src/res-common/common.scss
+++ b/src/csui/src/res-common/common.scss
@ -163,6 +163,7 @@ button, .button {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 24rem;
+    min-width: 16rem;
  }

  .has-hint {
@ -174,8 +175,15 @@ button, .button {
    flex-grow: 1;
    flex-shrink: 1;

+    min-width: 12px;
+    max-width: 24rem;
+
    select {
      background: rgba($blackBg, $hoverTransparentOpacity);
+
+      min-width: 12px;
+      max-width: 100%;
+
      color: #fff;
      // border: 0px solid transparent;
      border: 1px solid rgba(255, 171, 102, 0.42);
@ -217,9 +225,15 @@ button, .button {
  padding-left: 0.33rem;
  padding-right: 0.33rem;
 }
-.input-slider {
-  width: 480px;
+.b3-compact {
+  width: 7rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
+
+// .input-slider {
+//   width: 480px;
+// }
 .warning-lite {
  padding-right: 16px;
  padding-bottom: 16px;