From 452cb267fb1902ba2c81f478dd6b12e881483525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 11 Jan 2021 19:29:35 +0100
Subject: [PATCH] shorten VideoScroll.vue

---
 app/src/components/VideoScroll.vue | 58 +++++++++++-------------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index 9dffc18..09181c6 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -1,49 +1,28 @@
 <template>
   <div class="video-scroll" ref="root">
-    <template v-if="definition.direction === 'left' || definition.direction === 'right'">
-      <img class="visible loaded"
-           :src="definition.files[0]"
-           :style="{
+    <img class="visible loaded"
+         :src="definition.files[0]"
+         :style="{
               top: `${Math.round(definition.top)}px`,
               left: `${Math.round(definition.left)}px`,
-              width: `${Math.round(definition.width)}px`,
+              width: isHorizontal(definition) ? `${Math.round(definition.width)}px` : 'auto',
+              height: isHorizontal(definition) ? 'auto' : `${Math.round(definition.height)}px`,
             }"
-      />
+    />
 
-      <!--suppress RequiredAttributes -->
-      <img v-for="(file, idx) in definition.files.slice(1)"
-           :data-src="file"
-           :data-direction="definition.direction"
-           :style="{
-             top: `${Math.round(definition.top)}px`,
-             left: `${Math.round(definition.left) + (definition.width * (idx + 1) * directionSign)}px`,
+    <!--suppress RequiredAttributes -->
+    <img v-for="(file, idx) in definition.files.slice(1)"
+         :data-src="file"
+         :data-direction="definition.direction"
+         :style="{
+             top: `${Math.round(definition.top) +
+                   (isHorizontal(definition) ? 0 : (definition.height * (idx + 1) * directionSign))}px`,
+             left: `${Math.round(definition.left) +
+                   (isHorizontal(definition) ? (definition.width * (idx + 1) * directionSign) : 0)}px`,
              width: `${Math.round(definition.width)}px`,
              height: `${Math.round(definition.height)}px`,
            }"
-      />
-    </template>
-    <template v-else>
-      <img class="visible loaded"
-           :src="definition.files[0]"
-           :style="{
-              top: `${Math.round(definition.top)}px`,
-              left: `${Math.round(definition.left)}px`,
-              height: `${Math.round(definition.height)}px`,
-            }"
-      />
-
-      <!--suppress RequiredAttributes -->
-      <img v-for="(file, idx) in definition.files.slice(1)"
-           :data-src="file"
-           :data-direction="definition.direction"
-           :style="{
-             top: `${Math.round(definition.top) + (definition.height * (idx + 1) * directionSign)}px`,
-             left: `${Math.round(definition.left)}px`,
-             height: `${Math.round(definition.height)}px`,
-             width: `${Math.round(definition.width)}px`,
-           }"
-      />
-    </template>
+    />
   </div>
 </template>
 
@@ -68,6 +47,11 @@ export default defineComponent({
       }
     }
   },
+  methods: {
+    isHorizontal(definition: VideoScrollDef): boolean {
+      return definition.direction === "left" || definition.direction === "right";
+    }
+  },
   setup(props) {
     const root = ref<Element | null>(null);