Remove orphan components, update dictionary

Update popup appearance
Fix zoom
2025-04-26 23:28:17 +02:00 · 2025-04-26 23:27:09 +02:00 · 2025-04-26 23:24:57 +02:00
19 changed files with 296 additions and 237 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -13,6 +13,7 @@
    "com",
    "comms",
    "csui",
+    "cycleable",
    "decycle",
    "dinked",
    "dinks",
@ -46,6 +47,7 @@
    "reddit",
    "rescan",
    "resizer",
+    "resizers",
    "scrollbar",
    "shitiness",
    "smallcaps",
--- a/src/common/interfaces/ArInterface.ts
+++ b/src/common/interfaces/ArInterface.ts
@ -8,5 +8,6 @@ export enum ArVariant {
 export interface Ar {
  type: AspectRatioType,
  ratio?: number,
-  variant?: ArVariant
+  variant?: ArVariant,
+  offset?: number,
 }
--- 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/SiteSettings.vue
+++ b/src/csui/src/PlayerUiPanels/SiteSettings.vue
@ -1,9 +0,0 @@
-<template>
-  <div class="flex flex-col">
-
-
-    <div class="">
-
-    </div>
-  </div>
-</template>
--- 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/popup/panels/WhatsNewPanel.vue
+++ b/src/csui/src/popup/panels/WhatsNewPanel.vue
@ -1,58 +0,0 @@
-<template>
-  <div>
-    <h2>What's new</h2>
-    <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
-    <p class="label">6.0.0</p>
-    <ul>
-      <li>Fixed laginess in Chromium-based browsers on Windows. Details in <a href="https://github.com/tamius-han/ultrawidify/issues/199#issuecomment-1221383134" target="blank">#199</a>.</li>
-    </ul>
-    <p class="label">5.1.2</p>
-    <ul>
-      <li>
-        <b>In-player UI.</b><br/>
-        This one took major effort to pull off. Required some changes under the hood, required me to de-spaghettify some code. The UI will only show
-        if the video takes up sufficient amount of space (currently determined as 960 pixels wide).
-      </li>
-      <li>
-        By default, Ultrawidify will not kick in on "small videos". You have to be either in full screen or theater mode. Ultrawidify assumes that any
-        video that takes up more than 85% of the window width is being viewed in theater mode. This value may be tweaked later on. This feature can be
-        configured (or turned off entirely) via 'Advanced options' menu on the in-player UI.
-      </li>
-      <li>
-        The in-player extension UI will do a better job differentiating between the various level of support: "official" for the sites that Tam can check
-        on his own, "fingers crossed" for sites that Tam can't check because my load-bearing credit card can't support the weight of a dozen subscription
-        services, and "community support" for sites that enjoy support through the helping hand of people willing to help.
-      </li>
-      <li>
-        The in-player UI now displays a warning whenever Ultrawidify detects automatic aspect ratio detection isn't happening because the site uses DRM.
-      </li>
-      <li>
-        Made the UI for fixing problems with Ultrawidify not working a bit more intuitive.
-      </li>
-      <li>
-        Better zooming. The slider is back, baby.
-      </li>
-      <li>
-        New alignment options. Video can be aligned vertically as well as horizontally.
-      </li>
-      <li>
-        Panning option that's a bit more intuitive.
-      </li>
-    </ul>
-  </div>
-</template>
-<script>
-import BrowserDetect from '../../ext/conf/BrowserDetect';
-
-export default {
-  data () {
-    return {
-      BrowserDetect: BrowserDetect
-    }
-  },
-}
-</script>
-
-<style>
-
-</style>
--- 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;
--- a/src/ext/lib/aard/Aard.ts
+++ b/src/ext/lib/aard/Aard.ts
@ -227,6 +227,7 @@ export class Aard {
  private siteSettings: SiteSettings;
  private eventBus: EventBus;
  private arid: string;
+  private arVariant: ArVariant;

  private eventBusCommands = {
    'uw-environment-change': {
@ -415,10 +416,11 @@ export class Aard {
   * Checks whether autodetection can run
   */
  startCheck(arVariant?: ArVariant) {
-    console.log('aard - starting checks')
+    this.arVariant = arVariant;
+
    if (!this.videoData.player) {
-      console.warn('Player not detected!');
-      console.log('--- video data: ---\n', this.videoData);
+      // console.warn('Player not detected!');
+      // console.log('--- video data: ---\n', this.videoData);
      return;
    }
    if (this.siteSettings.data.enableAard[this.videoData.player.environment] === ExtensionMode.Enabled) {
@ -707,7 +709,7 @@ export class Aard {
      }
    } catch (e) {
      console.warn('[Ultrawidify] Aspect ratio autodetection crashed for some reason.\n\nsome reason:', e);
-      this.videoData.resizer.setAr({type: AspectRatioType.AutomaticUpdate, ratio: this.defaultAr});
+      this.videoData.resizer.setAr({type: AspectRatioType.AutomaticUpdate, ratio: this.defaultAr, variant: this.arVariant});
    }
  }

@ -2036,7 +2038,8 @@ export class Aard {
      this.videoData.resizer.updateAr({
        type: AspectRatioType.AutomaticUpdate,
        ratio: this.getAr(),
-        offset: this.testResults.letterboxOffset
+        offset: this.testResults.letterboxOffset,
+        variant: this.arVariant
      });
      this.testResults.activeAspectRatio = ar;
    }
--- a/src/ext/lib/video-transform/Resizer.ts
+++ b/src/ext/lib/video-transform/Resizer.ts
@ -141,7 +141,7 @@ class Resizer {
      }
    }],
    'set-zoom': [{
-      function: (config: any) => this.setZoom(config.zoom, config.axis, config.noAnnounce)
+      function: (config: any) => this.setZoom(config.zoom)
    }],
    'change-zoom': [{
      function: (config: any) => this.zoomStep(config.zoom)
@ -285,7 +285,7 @@ class Resizer {
    return ar;
  }

-  updateAr(ar) {
+  updateAr(ar: Ar) {
    if (!ar) {
      return;
    }
@ -602,9 +602,36 @@ class Resizer {
    }
  }

-  setZoom(zoomLevel: number, axis?: 'x' | 'y', noAnnounce?) {
+  private _setZoomTimeout;
+  private _latestSetZoomArgs: any | undefined;
+  private _SET_ZOOM_RATE_LIMIT_MS = 50;
+  /**
+   * Sets zoom level. This function is rate limited, because slider may spam the fuck out of this function call
+   * @param zoomLevel
+   * @param axis
+   * @param noAnnounce
+   * @returns
+   */
+  setZoom(zoomLevel: number | {x: number, y: number}, noAnnounce?) {
+    if (this._setZoomTimeout) {
+      this._latestSetZoomArgs = {zoomLevel, noAnnounce};
+      return;
+    }
    this.manualZoom = true;
-    this.zoom.setZoom(zoomLevel, axis, noAnnounce);
+    this.zoom.setZoom(zoomLevel);
+
+    this._setZoomTimeout = setTimeout(
+      () => {
+        clearTimeout(this._setZoomTimeout);
+        this._setZoomTimeout = undefined;
+
+        if (this._latestSetZoomArgs) {
+          this.setZoom(this._latestSetZoomArgs.zoomLevel);
+        }
+        this._latestSetZoomArgs = undefined;
+      },
+      this._SET_ZOOM_RATE_LIMIT_MS
+    );
  }

  zoomStep(step){
--- a/src/ext/lib/video-transform/Zoom.ts
+++ b/src/ext/lib/video-transform/Zoom.ts
@ -2,9 +2,14 @@ import Debug from '../../conf/Debug';
 import Logger from '../Logger';
 import VideoData from '../video-data/VideoData';

-// računa približevanje ter računa/popravlja odmike videa
 // calculates zooming and video offsets/panning

+const MIN_SCALE = 0.5;
+const MAX_SCALE = 8;
+const LOG_MAX_SCALE = Math.log2(MAX_SCALE);
+const LOG_MIN_SCALE = Math.log2(MIN_SCALE);
+
+
 class Zoom {
  //#region flags

@ -21,8 +26,10 @@ class Zoom {
  logScale: number = 0;
  logScaleY: number = 0;
  scaleStep: number = 0.1;
-  minScale: number = -1;    // 50% (log2(0.5) = -1)
-  maxScale: number = 3;     // 800% (log2(8) = 3)
+  logMinScale: number = -1;    // 50% (log2(0.5) = -1)
+  logMaxScale: number = 3;     // 800% (log2(8) = 3)
+  minScale = 0.5;
+  maxScale = 8;
  //#endregion


@ -33,7 +40,9 @@ class Zoom {

  reset(){
    this.scale = 1;
+    this.scaleY = 1;
    this.logScale = 0;
+    this.logScaleY = 0;
  }

  /**
@ -45,7 +54,7 @@ class Zoom {
  zoomStep(amount: number, axis?: 'x' | 'y') {
    let newLog = axis === 'y' ? this.logScaleY : this.logScale;
    newLog += amount;
-    newLog = Math.min(Math.max(newLog, this.minScale), this.maxScale);
+    newLog = Math.min(Math.max(newLog, LOG_MIN_SCALE), LOG_MAX_SCALE);

    // if axis is undefined, both of this statements should trigger)
    if (axis !== 'y') {
@ -62,25 +71,23 @@ class Zoom {
    this.processZoom();
  }

-  setZoom(scale: number, axis?: 'x' |'y', noAnnounce?){
+  /**
+   * Sets zoom to specific value
+   * @param scale
+   */
+  setZoom(scale: number | {x: number, y: number}){
    // NOTE: SCALE IS NOT LOGARITHMIC
-    if(scale < Math.pow(2, this.minScale)) {
-      scale = this.minScale;
-    } else if (scale > Math.pow(2, this.maxScale)) {
-      scale = this.maxScale;
-    }
+    const scaleIn = (typeof scale === 'number') ?
+      {
+        x: scale,
+        y: scale
+      } : {
+        x: scale.x ?? this.scale,
+        y: scale.y ?? this.scaleY
+      };

-    switch (axis) {
-      case 'x':
-        this.scale = scale;
-        break;
-      case 'y':
-        this.scaleY = scale;
-        break;
-      default:
-        this.scale = scale;
-        this.scaleY = scale;
-    }
+    this.scale  = Math.min(Math.max(scaleIn.x, MIN_SCALE), MAX_SCALE);
+    this.scaleY = Math.min(Math.max(scaleIn.y, MIN_SCALE), MAX_SCALE);

    this.processZoom();
  }
Author	SHA1	Message	Date
Tamius Han	fe8436179f	Remove orphan components, update dictionary	2025-04-26 23:28:17 +02:00
Tamius Han	adedfec1d0	Update popup appearance	2025-04-26 23:27:09 +02:00
Tamius Han	b974111eb4	Fix zoom	2025-04-26 23:24:57 +02:00