turn <img> in VideoScroll into its own component

app/src/components/VideoScroll.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="video-scroll" ref="root">
-    <img class="visible loaded"
+    <VideoScrollImage :definition="{fullres: definition.files[0]}"
-         :src="definition.files[0]"
+                      :style="{
-         :style="{
+                        top: `${Math.round(definition.top)}px`,
-              top: `${Math.round(definition.top)}px`,
+                        left: `${Math.round(definition.left)}px`,
-              left: `${Math.round(definition.left)}px`,
+                        width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
-              width: isHorizontal ? `${Math.round(definition.width)}px` : 'auto',
+                        height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
-              height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
+                        rotate: `${definition.angle}deg`
-              rotate: `${definition.angle}deg`
+                      }"
-            }"
+                      :visible="true"
     />
 
     <!--suppress RequiredAttributes -->
-    <img v-for="file in dynamicFiles"
+    <VideoScrollImage v-for="file in dynamicFiles"
-         :data-src="file.src"
+                      :data-idx="file.idx"
-         :style="{
+                      :definition="file.image"
-             top: `${Math.round(file.top)}px`,
+                      :style="{
-             left: `${Math.round(file.left)}px`,
+                         top: `${Math.round(file.top)}px`,
-             width: `${Math.round(definition.width)}px`,
+                         left: `${Math.round(file.left)}px`,
-             height: `${Math.round(definition.height)}px`,
+                         width: `${Math.round(definition.width)}px`,
-             rotate: `${definition.angle}deg`
+                         height: `${Math.round(definition.height)}px`,
-           }"
+                         rotate: `${definition.angle}deg`
+                       }"
+                      :visible="imageVisibility[file.idx] || false"
     />
   </div>
 </template>
@@ -28,9 +30,16 @@
 <script lang="ts">
 import {defineComponent, PropType} from "vue";
 import {rotate} from "@/utils";
+import VideoScrollImage, {VideoScrollImageDef} from "@/components/VideoScrollImage.vue";
 
 export default defineComponent({
   name: "VideoScroll",
+  components: {VideoScrollImage},
+  data: () => {
+    return {
+      imageVisibility: [] as Boolean[]
+    };
+  },
   props: {
     definition: {
       type: Object as PropType<VideoScrollDef>,
@@ -38,14 +47,14 @@ export default defineComponent({
     }
   },
   computed: {
-    dynamicFiles(): { top: number, left: number, src: string }[] {
+    dynamicFiles(): { idx: number, image: VideoScrollImageDef, top: number, left: number }[] {
       return this.definition.files.slice(1).map((src: string, idx: number) => {
         const cy = this.definition.top +
             (this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
         const cx = this.definition.left +
             (this.isHorizontal ? (this.definition.width * (idx + 1) * this.horizontalDirection) : 0);
         const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
-        return {top, left, src};
+        return {idx: idx + 1, top, left, image: {fullres: src}};
       });
     },
     isHorizontal(): boolean {
@@ -69,26 +78,7 @@ export default defineComponent({
     const observer = new IntersectionObserver((entries, _) => {
       entries.forEach((entry) => {
         const element = entry.target as HTMLImageElement;
-        if (entry.isIntersecting) {
+        this.imageVisibility[parseInt(element.dataset.idx as string)] = entry.isIntersecting;
-          if (!element.src) {
-            console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
-            element.src = element.dataset.src!;
-            const grayTimeout = setTimeout(() => {
-              element.classList.add("visible");
-              element.style.background = "grey";
-            }, 3000);
-            element.onload = () => {
-              clearTimeout(grayTimeout);
-              element.classList.add("visible");
-              element.style.background = "none";
-              if (this.isHorizontal) {
-                element.style.height = "auto";
-              } else {
-                element.style.width = "auto";
-              }
-            };
-          }
-        }
       });
     });
     Array.from((this.$refs.root as Element).children).forEach((el) => {
@@ -118,15 +108,4 @@ export interface VideoScrollDef {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.video-scroll img {
-  position: absolute;
-  image-rendering: optimizeSpeed;
-  opacity: 0;
-  transition: opacity .5s;
-}
-
-.visible {
-  opacity: 1 !important;
-}
-
 </style>

app/src/components/VideoScrollImage.vue

@@ -0,0 +1,72 @@
+<template>
+  <img ref="img" :src="currentSrc" class="video-scroll-image"/>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType, ref, Ref} from "vue";
+
+export default defineComponent({
+  name: "VideoScrollImage",
+  props: {
+    definition: {
+      type: Object as PropType<VideoScrollImageDef>,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      required: true
+    }
+  },
+  watch: {
+    visible() {
+      if (!this.img || !this.visible) {
+        return;
+      }
+      console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
+      this.currentSrc = this.definition.fullres;
+      const grayTimeout = setTimeout(() => {
+        this.img!.classList.add("visible");
+        this.img!.style.background = "grey";
+      }, 3000);
+      this.img.onload = () => {
+        clearTimeout(grayTimeout);
+        this.img!.classList.add("visible");
+        this.img!.style.background = "none";
+        // if (this.isHorizontal) {
+        //   this.img!.style.height = "auto";
+        // } else {
+        //   this.img!.style.width = "auto";
+        // }
+      };
+    }
+  },
+  setup(props) {
+    const img = ref<HTMLImageElement | null>(null);
+    const currentSrc: Ref<string | undefined> = ref(undefined);
+
+    return {
+      img,
+      currentSrc
+    };
+  }
+});
+
+export interface VideoScrollImageDef {
+  fullres: string
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+.video-scroll-image {
+  position: absolute;
+  image-rendering: optimizeSpeed;
+  opacity: 0;
+  transition: opacity .5s;
+}
+
+.video-scroll-image.visible {
+  opacity: 1 !important;
+}
+</style>