From ca926c4dfbdb2f35d37973bd4ea3fbdbc7b56012 Mon Sep 17 00:00:00 2001
From: Pablo Ferreiro <pferreiromero@gmail.com>
Date: Thu, 6 Jan 2022 00:55:24 +0100
Subject: [PATCH] Better GIF loading

---
 scripts/feed.js             | 27 ++++++++-------------------
 styles/feed.css             | 24 ++++++++++++++++++------
 views/components/feed.latte | 10 ++++++----
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/scripts/feed.js b/scripts/feed.js
index 7a051f9..6e64f72 100644
--- a/scripts/feed.js
+++ b/scripts/feed.js
@@ -4,6 +4,7 @@ const audio = document.getElementById('audio')
 const audio_title = document.getElementById('audio_title')
 const modal = document.getElementById('modal')
 const download_button = document.getElementById('download_button')
+const gifs = document.getElementsByClassName("img-background")
 
 // -- HELPERS -- //
 const getHash = () => window.location.hash.substring(1)
@@ -101,32 +102,20 @@ const hashChange = () => {
   }
 }
 
-const swapImages = (e, mode) => {
-  if (mode === 'gif') {
-    const a = e.target
-    const img = a.children[0]
-    const gif = a.children[1]
-    img.classList.add('hidden')
-    gif.classList.remove('hidden')
-  } else if (mode === 'img') {
-    const gif = e.target
-    const img = e.target.parentElement.children[0]
-    img.classList.remove('hidden')
-    gif.classList.add('hidden')
+const swapImages = e => {
+  if (!e.target.src) {
+    e.target.src = e.target.dataset.src
   }
 }
 
-document.getElementById('modal-background').addEventListener('click', hideModel, false)
-document.getElementById('modal-close').addEventListener('click', hideModel, false)
+document.getElementById('modal-background').addEventListener('click', hideModel)
+document.getElementById('modal-close').addEventListener('click', hideModel)
 document.getElementById('back-button').addEventListener('click', () => moveVideo(false))
 document.getElementById('next-button').addEventListener('click', () => moveVideo(true))
 window.addEventListener('hashchange', hashChange, false)
 
 // Image hover
-const images = document.getElementsByClassName("clickable-img")
-for (let i = 0; i < images.length; i++) {
-  images[i].addEventListener('mouseenter', e => swapImages(e, 'gif'), false)
-  images[i].addEventListener('mouseout', e => swapImages(e, 'img'), false)
+for (let i = 0; i < gifs.length; i++) {
+  gifs[i].addEventListener('mouseenter', swapImages, false)
 }
-
 hashChange()
diff --git a/styles/feed.css b/styles/feed.css
index da41ca8..cbfdf22 100644
--- a/styles/feed.css
+++ b/styles/feed.css
@@ -1,14 +1,26 @@
 #video {
-  height: 100%;
-  overflow: hidden;
+	height: 100%;
+	overflow: hidden;
 }
 
-.hidden {
-	display: none;
+figure {
+	position: relative;
+	display: inline-block;
 }
 
-/* Make gifs take all available space */
-.clickable-img img {
+.img-background {
 	width: 100%;
 	height: 100%;
 }
+
+figure .img-background {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 99;
+}
+
+figure:hover .img-background {
+	display: inline;
+}
diff --git a/views/components/feed.latte b/views/components/feed.latte
index 3336a27..0bac1b6 100644
--- a/views/components/feed.latte
+++ b/views/components/feed.latte
@@ -2,8 +2,8 @@
 <section class="section">
   <div class="columns is-multiline is-vcentered">
 		{foreach $feed->items as $item}
-    <div class="column is-one-quarter">
-			<a class="clickable-img" id="{$item->id}" href="#{$item->id}"
+    <div class="column is-one-quarter clickable-img">
+			<a id="{$item->id}" href="#{$item->id}"
 				data-video_url="{path('stream?url=' . urlencode($item->video->playAddr))}"
 				data-video_download="{path('stream?url=' . urlencode($item->video->playAddr) . '&download=1')}"
         data-desc="{$item->desc}"
@@ -11,8 +11,10 @@
         data-video_height="{$item->video->height}"
         data-music_title="{$item->music->title}"
         data-music_url="{path('stream?url=' . urlencode($item->music->playUrl))}">
-        <img loading="lazy" src="{path('stream?url=' . urlencode($item->video->originCover))}" />
-				<img class="hidden" loading="lazy" src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
+				<figure>
+        	<img class="img-main" loading="lazy" src="{path('stream?url=' . urlencode($item->video->originCover))}" />
+					<img class="img-background" loading="lazy" data-src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
+				</figure>
       </a>
     </div>
     {/foreach}