19 changed files with 237 additions and 296 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -13,7 +13,6 @@
    "com",
    "comms",
    "csui",
    "cycleable",
    "decycle",
    "dinked",
    "dinks",
@ -47,7 +46,6 @@
    "reddit",
    "rescan",
    "resizer",
    "resizers",
    "scrollbar",
    "shitiness",
    "smallcaps",
--- a/src/common/interfaces/ArInterface.ts
+++ b/src/common/interfaces/ArInterface.ts
@ -8,6 +8,5 @@ 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" style="height: 100vh">
+  <div class="popup-panel">
    <!--
      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,7 +10,6 @@
      further than that.
    -->
    <div v-if="settingsInitialized"
        style="height: 100vh"
        class="popup flex flex-col no-overflow"
        :class="{'popup-chrome': ! BrowserDetect?.firefox}"
    >
@ -79,7 +78,7 @@
        </div>
        <!-- CONTENT -->
-        <div class="scrollable window-content" style="flex: 7 7; padding: 1rem;">
+        <div class="scrollable" style="flex: 7 7; padding: 1rem;">
          <template v-if="settings && siteSettings">
            <PopupVideoSettings
              v-if="selectedTab === 'videoSettings'"
@ -87,6 +86,14 @@
              :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"
@ -603,10 +610,4 @@ 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; height: 600px">
+<html lang="en" style="position: relative">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
@ -10,9 +10,9 @@
  <% } %>
 </head>
 <body
-  style="width: 100%; height: 100vh; overflow-x: hidden; min-width: 750px;"
+  style="width: 100%; height: 100%; overflow-x: hidden; min-width: 750px"
 >
-  <div id="app" style="max-height: 100vh;">
+  <div id="app">
  </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" :class="{large: large}">
+  <div class="alignment-box">
    <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,14 +89,6 @@ 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 w-full">
+    <div class="flex flex-col">
      <!-- TAB ROW -->
      <div class="flex flex-row">
--- a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
+++ b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
@ -11,7 +11,6 @@
          <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,12 +3,8 @@
    <ShortcutButton
      v-for="(command, index) of settings?.active.commands.crop"
-      class="flex button"
+      class="flex b3 button"
-      :class="{
+      :class="{active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command)}"
        active: editMode ? index === editModeOptions?.crop?.selectedIndex : isActiveCrop(command),
        'b3-compact': compact,
        b3: !compact
      }"
      :key="index"
      :label="command.label"
      :shortcut="getKeyboardShortcutLabel(command)"
@ -174,8 +170,7 @@ 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,10 +3,7 @@
    <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)"
@ -187,8 +184,7 @@ 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,11 +5,8 @@
      <ShortcutButton
        v-for="(command, index) of settings?.active.commands.zoom"
-        class="flex button"
+        class="flex b3 button"
-        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command),
+        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}"
          'b3-compact': compact,
          b3: !compact
        }"
        :key="index"
        :label="command.label"
        :shortcut="getKeyboardShortcutLabel(command)"
@ -134,12 +131,25 @@
        min, max and value need to be implemented in js as this slider
        should use logarithmic scale
      -->
-      <div class="flex flex-row w-full" style="margin-top: 0.66rem">
+      <div class="flex flex-row flex-end">
-        <div style="position:relative;" class="grow">
+        <Button
-          <template v-if="zoomAspectRatioLocked">
+          v-if="zoomAspectRatioLocked"
-            <div class="slider-label">
+          label="Unlock aspect ratio"
-              Zoom: {{getZoomForDisplay('x')}}
+          icon="lock-open"
          :fixedWidth="true"
          @click="toggleZoomAr()"
        >
        </Button>
        <Button
          v-else
          label="Lock aspect ratio"
          icon="lock"
          :fixedWidth="true"
          @click="toggleZoomAr()"
        >
        </Button>
      </div>
      <template v-if="zoomAspectRatioLocked">
        <input id="_input_zoom_slider"
                class="input-slider"
                type="range"
@ -149,9 +159,17 @@
                :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 class="slider-label">Horizontal zoom: {{getZoomForDisplay('x')}}</div>
+        <div>Horizontal zoom</div>
        <input id="_input_zoom_slider"
                class="input-slider"
                type="range"
@ -162,8 +180,8 @@
                @input="changeZoom($event.target.value, 'x')"
        />
-            <div class="slider-label">Vertical zoom: {{getZoomForDisplay('y')}}</div>
+        <div>Vertical zoom</div>
-            <input id="_input_zoom_slider_2"
+        <input id="_input_zoom_slider"
                class="input-slider"
                type="range"
                step="any"
@ -172,43 +190,21 @@
                :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>
        </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>
  </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';
@ -218,7 +214,6 @@ import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
 export default {
  components: {
    Button,
    ShortcutButton,
    EditShortcutButton,
  },
@ -251,8 +246,7 @@ export default {
    'settings',      // required for buttons and actions, which are global
    'siteSettings',
    'eventBus',
-    'isEditing',
+    'isEditing'
    'compact',
  ],
  created() {
    if (this.isEditing) {
@ -288,7 +282,8 @@ 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});
+      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'y'});
      this.eventBus?.sendToTunnel('set-zoom', {zoom: 1, axis: 'x'});
    },
    changeZoom(newZoom, axis) {
      // we store zoom logarithmically on this compnent
@ -302,9 +297,10 @@ export default {
      newZoom = Math.pow(2, newZoom);
      if (this.zoomAspectRatioLocked) {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'y'});
        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: 'x'});
      } else {
-        this.eventBus?.sendToTunnel('set-zoom', {zoom: {[axis ?? 'x']: newZoom}});
+        this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
      }
    },
    isActiveZoom(command) {
@ -318,17 +314,3 @@ 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
@ -0,0 +1,9 @@
 <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="16" />
+            <mdicon name="crop" :size="32" />
            <h1>Crop video:</h1>
          </div>
--- a/src/csui/src/components/Button.vue
+++ b/src/csui/src/components/Button.vue
@ -1,11 +1,7 @@
 <template>
  <div class="button center-text"
-       :class="{
+       :class="{'setting-selected': selected }"
          'setting-selected': selected,
          'no-pad': noPad,
        }"
  >
    <mdicon v-if="icon" :name="icon" :size="iconSize ?? 24"></mdicon>
    <div class="label">
      {{label}}
    </div>
@ -19,8 +15,6 @@ export default {
    selected: Boolean,
    label: String,
    icon: String,
    iconSize: Number,
    noPad: Boolean
  }
 }
 </script>
@ -46,7 +40,4 @@ 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,86 +12,61 @@
    </template>
    <div class="flex flex-row">
-      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <span>CROP</span>
+      <h1>Crop video:</h1>
    </div>
-    <div
+
      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
    >
    <CropOptionsPanel
      style="margin-top: -2rem"
      :settings="settings"
      :eventBus="eventBus"
      :siteSettings="siteSettings"
      :isEditing="false"
        :compact="true"
    >
    </CropOptionsPanel>
    </div>
    <div class="flex flex-row">
-      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <span>STRETCH</span>
+      <h1>Stretch video:</h1>
    </div>
-    <div
+
      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
    >
    <StretchOptionsPanel
      style="margin-top: -2rem"
      :settings="settings"
      :eventBus="eventBus"
      :siteSettings="siteSettings"
      :isEditing="false"
        :compact="true"
    ></StretchOptionsPanel>
    </div>
    <div class="flex flex-row">
-      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
+      <mdicon name="crop" :size="24" />&nbsp;&nbsp;
-      <span>ZOOM</span>
+      <h1>Zoom:</h1>
    </div>
-    <div
+
      style="margin-top: -0.69rem; margin-bottom: 0.88rem;"
    >
    <ZoomOptionsPanel
      :settings="settings"
      :eventBus="eventBus"
      :siteSettings="siteSettings"
      :isEditing="false"
        :compact="true"
    >
    </ZoomOptionsPanel>
    </div>
    <div class="flex flex-row">
      <mdicon name="crop" :size="16" />&nbsp;&nbsp;
      <span>ALIGN</span>
    </div>
    <div
      style="margin-bottom: 0.88rem;"
    >
      <AlignmentOptionsControlComponent
        :eventBus="eventBus"
        :large="true"
      > </AlignmentOptionsControlComponent>
    </div>
  </div>
 </template>
 <script>
-import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
+import CropOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel';
-import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
+import StretchOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue';
-import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
+import ZoomOptionsPanel from '../../PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue';
 import ExtensionMode from '@src/common/enums/ExtensionMode.enum.ts';
 import AlignmentOptionsControlComponent from '@csui/src/PlayerUiPanels/AlignmentOptionsControlComponent.vue';
 export default {
-  components: {
+  data() {
-    CropOptionsPanel,
+    return {
-    StretchOptionsPanel,
+      exec: null,
-    ZoomOptionsPanel,
+      ExtensionMode: ExtensionMode,
-    AlignmentOptionsControlComponent
+    };
  },
  mixins: [
@ -101,11 +76,8 @@ export default {
    'siteSettings',
    'eventBus',
  ],
-  data() {
+  components: {
-    return {
+    CropOptionsPanel, StretchOptionsPanel, ZoomOptionsPanel
      exec: null,
      ExtensionMode: ExtensionMode,
    };
  },
  created() {
    this.eventBus.subscribe(
--- a/src/csui/src/popup/panels/WhatsNewPanel.vue
+++ b/src/csui/src/popup/panels/WhatsNewPanel.vue
@ -0,0 +1,58 @@
 <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,7 +163,6 @@ button, .button {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 24rem;
    min-width: 16rem;
  }
  .has-hint {
@ -175,15 +174,8 @@ 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);
@ -225,15 +217,9 @@ button, .button {
  padding-left: 0.33rem;
  padding-right: 0.33rem;
 }
-.b3-compact {
+.input-slider {
-  width: 7rem;
+  width: 480px;
  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,7 +227,6 @@ export class Aard {
  private siteSettings: SiteSettings;
  private eventBus: EventBus;
  private arid: string;
  private arVariant: ArVariant;
  private eventBusCommands = {
    'uw-environment-change': {
@ -416,11 +415,10 @@ export class Aard {
   * Checks whether autodetection can run
   */
  startCheck(arVariant?: ArVariant) {
-    this.arVariant = arVariant;
+    console.log('aard - starting checks')
    if (!this.videoData.player) {
-      // console.warn('Player not detected!');
+      console.warn('Player not detected!');
-      // console.log('--- video data: ---\n', this.videoData);
+      console.log('--- video data: ---\n', this.videoData);
      return;
    }
    if (this.siteSettings.data.enableAard[this.videoData.player.environment] === ExtensionMode.Enabled) {
@ -709,7 +707,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, variant: this.arVariant});
+      this.videoData.resizer.setAr({type: AspectRatioType.AutomaticUpdate, ratio: this.defaultAr});
    }
  }
@ -2038,8 +2036,7 @@ 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)
+      function: (config: any) => this.setZoom(config.zoom, config.axis, config.noAnnounce)
    }],
    'change-zoom': [{
      function: (config: any) => this.zoomStep(config.zoom)
@ -285,7 +285,7 @@ class Resizer {
    return ar;
  }
-  updateAr(ar: Ar) {
+  updateAr(ar) {
    if (!ar) {
      return;
    }
@ -602,36 +602,9 @@ class Resizer {
    }
  }
-  private _setZoomTimeout;
+  setZoom(zoomLevel: number, axis?: 'x' | 'y', noAnnounce?) {
  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);
+    this.zoom.setZoom(zoomLevel, axis, noAnnounce);
    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,14 +2,9 @@ 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
@ -26,10 +21,8 @@ class Zoom {
  logScale: number = 0;
  logScaleY: number = 0;
  scaleStep: number = 0.1;
-  logMinScale: number = -1;    // 50% (log2(0.5) = -1)
+  minScale: number = -1;    // 50% (log2(0.5) = -1)
-  logMaxScale: number = 3;     // 800% (log2(8) = 3)
+  maxScale: number = 3;     // 800% (log2(8) = 3)
  minScale = 0.5;
  maxScale = 8;
  //#endregion
@ -40,9 +33,7 @@ class Zoom {
  reset(){
    this.scale = 1;
    this.scaleY = 1;
    this.logScale = 0;
    this.logScaleY = 0;
  }
  /**
@ -54,7 +45,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, LOG_MIN_SCALE), LOG_MAX_SCALE);
+    newLog = Math.min(Math.max(newLog, this.minScale), this.maxScale);
    // if axis is undefined, both of this statements should trigger)
    if (axis !== 'y') {
@ -71,23 +62,25 @@ 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
-    const scaleIn = (typeof scale === 'number') ?
+    if(scale < Math.pow(2, this.minScale)) {
-      {
+      scale = this.minScale;
-        x: scale,
+    } else if (scale > Math.pow(2, this.maxScale)) {
-        y: scale
+      scale = this.maxScale;
-      } : {
+    }
        x: scale.x ?? this.scale,
        y: scale.y ?? this.scaleY
      };
-    this.scale  = Math.min(Math.max(scaleIn.x, MIN_SCALE), MAX_SCALE);
+    switch (axis) {
-    this.scaleY = Math.min(Math.max(scaleIn.y, MIN_SCALE), MAX_SCALE);
+      case 'x':
        this.scale = scale;
        break;
      case 'y':
        this.scaleY = scale;
        break;
      default:
        this.scale = scale;
        this.scaleY = scale;
    }
    this.processZoom();
  }