From 74ef8288b17e8d57c7143f0d2a399c945a507689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 16 Jan 2021 22:32:25 +0100
Subject: [PATCH] rework classes to be more semantic, images outside of
 viewport are hidden

---
 app/src/components/SVGContent.vue  |  6 +++---
 app/src/components/VideoScroll.vue | 28 +++++++++++++++++++---------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue
index c76d22f..90d4b3a 100644
--- a/app/src/components/SVGContent.vue
+++ b/app/src/components/SVGContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="svg-content">
-    <div :class="['loading', {loaded: loadedPercent === 100}]">
+    <div :class="['loading-screen', {loaded: loadedPercent === 100}]">
       <div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div>
     </div>
     <div class="content" ref="root">
@@ -451,7 +451,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
   visibility: hidden;
 }
 
-.loading {
+.loading-screen {
   position: fixed;
   top: 0;
   left: 0;
@@ -462,7 +462,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
   opacity: 1;
 }
 
-.loaded {
+.loading-screen.loaded {
   opacity: 0 !important;
 }
 
diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index 511366b..4f0f996 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="video-scroll" ref="root">
-    <img class="visible loaded"
+    <img class="visible displayed loaded"
          :src="definition.files[0]"
          :style="{
               top: `${Math.round(definition.top)}px`,
@@ -70,17 +70,16 @@ export default defineComponent({
       entries.forEach((entry) => {
         const element = entry.target as HTMLImageElement;
         if (entry.isIntersecting) {
+          element.classList.add("visible");
           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";
+            setTimeout(() => {
+              element.classList.add("displayed");
             }, 3000);
             element.onload = () => {
-              clearTimeout(grayTimeout);
-              element.classList.add("visible");
-              element.style.background = "none";
+              element.classList.add("displayed");
+              element.classList.add("loaded");
               if (this.isHorizontal) {
                 element.style.height = "auto";
               } else {
@@ -88,6 +87,8 @@ export default defineComponent({
               }
             };
           }
+        } else {
+          element.classList.remove("visible");
         }
       });
     });
@@ -117,16 +118,25 @@ export interface VideoScrollDef {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style>
 .video-scroll img {
   position: absolute;
   image-rendering: optimizeSpeed;
+  background: grey;
+  visibility: hidden;
   opacity: 0;
   transition: opacity .5s;
 }
 
-.visible {
+.video-scroll img.visible {
+  visibility: visible !important;
+}
+
+.video-scroll img.displayed {
   opacity: 1 !important;
 }
 
+.video-scroll img.loaded {
+  background: transparent !important;
+}
 </style>