Revert all the way back before "turn <img> in VideoScroll into its own component"

app/src/components/VideoScroll.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="video-scroll" ref="root">
-    <VideoScrollImage :definition="{fullres: definition.files[0]}"
+    <img class="visible loaded"
+         :src="definition.files[0]"
          :style="{
               top: `${Math.round(definition.top)}px`,
               left: `${Math.round(definition.left)}px`,
@@ -8,14 +9,11 @@
               height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
               rotate: `${definition.angle}deg`
             }"
-                      :visible="true"
     />
 
     <!--suppress RequiredAttributes -->
-    <VideoScrollImage v-for="file in dynamicFiles"
-                      :key="file.idx"
-                      :data-idx="file.idx"
-                      :definition="file.image"
+    <img v-for="file in dynamicFiles"
+         :data-src="file.src"
          :style="{
              top: `${Math.round(file.top)}px`,
              left: `${Math.round(file.left)}px`,
@@ -23,7 +21,6 @@
              height: `${Math.round(definition.height)}px`,
              rotate: `${definition.angle}deg`
            }"
-                      :visible="imageVisibility[file.idx] || false"
     />
   </div>
 </template>
@@ -31,16 +28,9 @@
 <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>,
@@ -48,14 +38,14 @@ export default defineComponent({
     }
   },
   computed: {
-    dynamicFiles(): { idx: number, image: VideoScrollImageDef, top: number, left: number }[] {
+    dynamicFiles(): { top: number, left: number, src: string }[] {
       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 {idx: idx + 1, top, left, image: {fullres: src}};
+        return {top, left, src};
       });
     },
     isHorizontal(): boolean {
@@ -79,7 +69,26 @@ export default defineComponent({
     const observer = new IntersectionObserver((entries, _) => {
       entries.forEach((entry) => {
         const element = entry.target as HTMLImageElement;
-        this.imageVisibility[parseInt(element.dataset.idx as string)] = entry.isIntersecting;
+        if (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) => {
@@ -109,4 +118,15 @@ 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

@@ -1,89 +0,0 @@
-<template>
-  <img ref="img" :class="['video-scroll-image', {visible, displayed, loaded}]" :src="currentSrc"/>
-</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
-    }
-  },
-  data() {
-    return {
-      currentSrc: undefined as undefined | string,
-      displayed: false,
-      loaded: false,
-    };
-  },
-  watch: {
-    visible() {
-      if (!this.img) {
-        return;
-      }
-      if (this.visible && !this.loaded) {
-        console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
-        this.currentSrc = this.definition.fullres;
-        setTimeout(() => {
-          this.displayed = true;
-        }, 3000);
-        this.img.onload = () => {
-          this.displayed = true;
-          this.loaded = true;
-          // 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;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity .5s;
-}
-
-.video-scroll-image.visible {
-  visibility: visible !important;
-}
-
-.video-scroll-image.loaded {
-  background: transparent !important;
-}
-
-.video-scroll-image.displayed {
-  background: gray;
-  opacity: 1 !important;
-}
-</style>