UI for manual zoom and video alignment

src/common/components/Button.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="button center-text flex" 
+  <div class="button center-text"
-       :class="{'setting-selected': selected, 'w24': fixedWidth, 'flex-auto': !fixedWidth }"
+       :class="{'setting-selected': selected }"
-       >
+  >
-    {{label}}
+    <mdicon v-if="icon" :name="icon" class="icon" />
+    <div class="label">
+      {{label}}
+    </div>
   </div>
 </template>
 
@@ -12,6 +15,30 @@ export default {
     fixedWidth: Boolean,
     selected: Boolean,
     label: String,
+    icon: String,
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.button {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: none;
+
+  align-items: center;
+
+  .icon {
+    margin-right: 8px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .label {
+    text-align: center;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+}
+</style>

src/common/enums/VideoAlignmentType.enum.ts

@@ -2,6 +2,8 @@ enum VideoAlignmentType {
   Left = 0,
   Center = 1,
   Right = 2,
+  Top = 3,
+  Bottom = 4,
   Default = -1
 };
 

src/csui/PlayerUiPanels/AlignmentOptionsControlComponent.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="alignment-box">
+    <div class="row">
+      <div
+        class="col top left"
+        @click="align(VideoAlignment.Left, VideoAlignment.Top)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+      <div
+        class="col top center"
+        @click="align(VideoAlignment.Center, VideoAlignment.Top)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+      <div
+        class="col top right"
+        @click="align(VideoAlignment.Right, VideoAlignment.Top)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+    </div>
+    <div class="row">
+      <div
+        class="col ycenter left"
+        @click="align(VideoAlignment.Left, VideoAlignment.Center)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+      <div
+        class="col ycenter center"
+        @click="align(VideoAlignment.Center, VideoAlignment.Center)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+      <div
+        class="col ycenter right"
+        @click="align(VideoAlignment.Right, VideoAlignment.Center)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+    </div>
+    <div class="row">
+      <div
+        class="col bottom left"
+        @click="align(VideoAlignment.Left, VideoAlignment.Bottom)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+      <div
+        class="col bottom center"
+        @click="align(VideoAlignment.Center, VideoAlignment.Bottom)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+      <div
+        class="col bottom right"
+        @click="align(VideoAlignment.Right, VideoAlignment.Bottom)"
+      >
+        <div class="alignment-ui"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VideoAlignmentType from '../../common/enums/VideoAlignmentType.enum';
+
+
+export default {
+  data() {
+    return {
+      VideoAlignment: VideoAlignmentType
+    }
+  },
+  methods: {
+    align() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.alignment-box {
+  aspect-ratio: 1;
+  width: 100%;
+  min-width: 40px;
+  max-width: 80px;
+
+  display: flex;
+  flex-direction: column;
+
+  .row {
+    flex: 0 0 33%;
+
+    display: flex;
+    flex-direction: row;
+  }
+
+  .col {
+    flex: 0 0 33%;
+
+    display: flex;
+
+    .alignment-ui {
+      width: 50%;
+      height: 50%;
+    }
+
+    align-items: center;
+    justify-content: center;
+
+    &.top  {
+      align-items: flex-start;
+
+      .alignment-ui {
+        border-top: 3px solid #fff;
+      }
+    }
+    &.bottom  {
+      align-items: flex-end;
+
+      .alignment-ui {
+        border-bottom: 3px solid #fff;
+      }
+    }
+    &.left {
+      justify-content: flex-start;
+
+      .alignment-ui {
+        border-left: 3px solid #fff;
+      }
+    }
+    &.right {
+      justify-content: flex-end;
+
+      .alignment-ui {
+        border-right: 3px solid #fff;
+      }
+    }
+
+    &.center.ycenter {
+
+      .alignment-ui {
+        width: 25%;
+        height: 25%;
+        background-color: #fff;
+      }
+    }
+  }
+}
+</style>

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -42,53 +42,144 @@
           min, max and value need to be implemented in js as this slider
           should use logarithmic scale
         -->
-        <div class="flex flex-row">
+        <div class="flex flex-row flex-end">
-          <ShortcutButton
+          <Button
-            class="flex b3 flex-grow button"
+            v-if="zoomAspectRatioLocked"
-            label="-5 %"
+            label="Unlock aspect ratio"
+            icon="lock-open"
+            :fixedWidth="true"
+            @click="toggleZoomAr()"
           >
-          </ShortcutButton>
+          </Button>
-          <ShortcutButton
+          <Button
-            class="flex b3 flex-grow button"
+            v-else
-            label="-1 %"
+            label="Lock aspect ratio"
+            icon="lock"
+            :fixedWidth="true"
+            @click="toggleZoomAr()"
           >
-          </ShortcutButton>
+          </Button>
-          <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"
+        <template v-if="zoomAspectRatioLocked">
-                class="input-slider"
+          <div class="flex flex-row">
-                type="range"
+            <ShortcutButton
-                step="any"
+              class="flex b3 flex-grow button"
-                min="-1"
+              label="-5 %"
-                max="4"
+            >
-                :value="logarithmicZoom"
+            </ShortcutButton>
-                @input="changeZoom($event.target.value)"
+            <ShortcutButton
-                />
+              class="flex b3 flex-grow button"
-        <div style="overflow: auto" class="flex flex-row">
+              label="-1 %"
-          <div class="flex flex-grow medium-small x-pad-1em">
+            >
-            Zoom: {{(zoom * 100).toFixed()}}%
+            </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>
-          <div class="flex flex-nogrow flex-noshrink medium-small">
+          <input id="_input_zoom_slider"
-            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+                  class="input-slider"
-          </div>
+                  type="range"
-        </div>
+                  step="any"
-
+                  min="-1"
-        <div class="m-t-0-33em display-block">
+                  max="4"
-          <input id="_input_zoom_site_allow_pan"
+                  :value="logarithmicZoom"
-                  type="checkbox"
+                  @input="changeZoom($event.target.value)"
                   />
-          Pan with mouse
+          <div style="overflow: auto" class="flex flex-row">
-        </div>
+            <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>
+        </template>
+        <template v-else>
+          <div>Horizontal zoom</div>
+          <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>Vertical zoom</div>
+          <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: {{(zoomX * 100).toFixed()}}% x {{(zoomY * 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>
+        </template>
       </div>
     </div>
     <div class="sub-panel">
@@ -96,14 +187,26 @@
         <mdicon name="align-horizontal-center" :size="32" />
         <h1>Video alignment:</h1>
       </div>
-      <div class="flex flex-row flex-wrap">
 
+      <div class="flex flex-row">
+        <alignment-options-control-component>
+        </alignment-options-control-component>
+      </div>
+
+      <div class="flex flex-row flex-wrap">
+         <div class="m-t-0-33em display-block">
+          <input id="_input_zoom_site_allow_pan"
+                  type="checkbox"
+                  />
+          Pan with mouse
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Button from '../../common/components/Button.vue'
 import KeyboardShortcutParser from '../../common/js/KeyboardShortcutParser';
 import ShortcutButton from '../../common/components/ShortcutButton';
 import ComputeActionsMixin from '../../common/mixins/ComputeActionsMixin';
@@ -111,6 +214,7 @@ import ExecAction from '../ui-libs/ExecAction';
 import BrowserDetect from '../../ext/conf/BrowserDetect';
 import AspectRatioType from '../../common/enums/AspectRatioType.enum';
 import CropModePersistence from '../../common/enums/CropModePersistence.enum';
+import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
 
 export default {
   data() {
@@ -118,6 +222,7 @@ export default {
       exec: null,
       scope: 'page',
       CropModePersistence: CropModePersistence,
+      zoomAspectRatioLocked: true
     }
   },
   mixins: [
@@ -134,6 +239,8 @@ export default {
   },
   components: {
     ShortcutButton,
+    Button,
+    AlignmentOptionsControlComponent
   },
   computed: {
     logarithmicZoom: function(){
@@ -159,10 +266,15 @@ export default {
       }
       return KeyboardShortcutParser.parseShortcut(action.scopes.page.shortcut[0]);
     },
+
+    toggleZoomAr() {
+      this.zoomAspectRatioLocked = !this.zoomAspectRatioLocked;
+    },
+
     resetZoom() {
       this.zoom = 1;
     },
-    changeZoom(newZoom) {
+    changeZoom(newZoom, axis) {
       newZoom = Math.pow(2, newZoom);
 
       this.exec.exec(