From 3721067ccacc2054f20df97070914e9bc37a93c0 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:21:39 +0100
Subject: [PATCH] fix intersection on unloaded images (define other dimension)

---
 app/src/components/VideoScroll.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index df874a6..9dffc18 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -13,10 +13,12 @@
       <!--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`,
              width: `${Math.round(definition.width)}px`,
+             height: `${Math.round(definition.height)}px`,
            }"
       />
     </template>
@@ -33,10 +35,12 @@
       <!--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>
@@ -75,6 +79,11 @@ export default defineComponent({
             element.classList.add("visible");
             if (!element.src) {
               element.src = element.dataset.src!;
+              if (element.dataset.direction == "left" || element.dataset.direction == "right") {
+                element.style.height = "auto";
+              } else {
+                element.style.width = "auto";
+              }
               element.onload = () => {
                 element.classList.add("loaded");
               };