From 16df5bc255f37530b5a0c841cba8f698c4421e6a Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 22 Apr 2023 10:29:57 +0000
Subject: [PATCH] Optimise loading and reduce image size

---
 onlylegs/static/js/index.js                  |  8 +++++---
 onlylegs/static/sass/animations.sass         | 10 +++++++++-
 onlylegs/static/sass/components/gallery.sass | 13 -------------
 onlylegs/templates/group.html                | 15 +++++++++++++--
 onlylegs/templates/image.html                |  9 +++++++--
 onlylegs/templates/index.html                |  9 ++++++++-
 onlylegs/templates/list.html                 |  9 ++++++++-
 onlylegs/templates/profile.html              |  9 ++++++++-
 onlylegs/utils/generate_image.py             |  2 +-
 9 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/onlylegs/static/js/index.js b/onlylegs/static/js/index.js
index d9d0aa5..8ce7f6d 100644
--- a/onlylegs/static/js/index.js
+++ b/onlylegs/static/js/index.js
@@ -1,7 +1,9 @@
 // fade in images
-function imgFade(obj, time = 250) {
-    obj.style.transition = `opacity ${time}ms`;
-    obj.style.opacity = 1;
+function imgFade(obj, time = 200) {
+    obj.style.opacity = null;
+    obj.style.animation = `imgFadeIn ${time}ms`;
+
+    setTimeout(() => { obj.style.animation = null; }, time);
 }
 // Lazy load images when they are in view
 function loadOnView() {
diff --git a/onlylegs/static/sass/animations.sass b/onlylegs/static/sass/animations.sass
index 9fc623e..d85be1b 100644
--- a/onlylegs/static/sass/animations.sass
+++ b/onlylegs/static/sass/animations.sass
@@ -8,4 +8,12 @@
     0%
         left: -100%
     100%
-        left: 100%
\ No newline at end of file
+        left: 100%
+
+@keyframes imgFadeIn
+    0%
+        opacity: 0
+        // filter: blur(0.5rem)
+    100%
+        opacity: 1
+        // filter: blur(0)
diff --git a/onlylegs/static/sass/components/gallery.sass b/onlylegs/static/sass/components/gallery.sass
index 9b980ce..cd33fdd 100644
--- a/onlylegs/static/sass/components/gallery.sass
+++ b/onlylegs/static/sass/components/gallery.sass
@@ -88,15 +88,8 @@
         object-position: center
 
         background-color: RGB($bg-bright)
-        filter: blur(0.5rem)
-        opacity: 0
-
         transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
 
-        &.loaded
-            filter: blur(0)
-            opacity: 1
-
     &:after
         content: ""
         display: block
@@ -187,15 +180,9 @@
             background-color: RGB($bg-bright)
             border-radius: $rad-inner
             box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
-            filter: blur(0.5rem)
-            opacity: 0
 
             transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
 
-            &.loaded
-                filter: blur(0)
-                opacity: 1
-
         &.size-1
             .data-1
                 transform: scale(0.8) rotate(3deg)
diff --git a/onlylegs/templates/group.html b/onlylegs/templates/group.html
index 50b3474..3a5b651 100644
--- a/onlylegs/templates/group.html
+++ b/onlylegs/templates/group.html
@@ -224,7 +224,12 @@
 {% block content %}
     {% if images %}
         <div class="banner">
-            <img src="{{ url_for('media_api.media', path='uploads/' + images.0.filename ) }}?r=prev" onload="imgFade(this)" style="opacity:0;" alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"/>
+            <img
+                src="{{ url_for('media_api.media', path='uploads/' + images.0.filename ) }}?r=prev"
+                onload="imgFade(this)"
+                style="opacity:0;"
+                alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
+            />
             <span class="banner-filter"></span>
             <div class="banner-content">
                 <p class="banner-info"><a href="{{ url_for('profile.profile', id=group.author.id) }}" class="link">By {{ group.author.username }}</a></p>
@@ -270,7 +275,13 @@
                     <div class="image-filter">
                         <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                     </div>
-                    <img alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}" data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
+                    <img
+                        alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
+                        data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
+                        onload="imgFade(this)"
+                        style="opacity:0;"
+                        id="lazy-load"
+                    />
                 </a>
             {% endfor %}
         </div>
diff --git a/onlylegs/templates/image.html b/onlylegs/templates/image.html
index 36790fa..32831fa 100644
--- a/onlylegs/templates/image.html
+++ b/onlylegs/templates/image.html
@@ -84,7 +84,12 @@
 {% endblock %}
 {% block content %}
     <div class="background">
-        <img src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev" alt="{{ image.alt }}" onload="imgFade(this)" style="opacity:0;"/>
+        <img
+            src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
+            alt="{{ image.alt }}"
+            onload="imgFade(this)"
+            style="opacity:0;"
+        />
         <span></span>
     </div>
     <div class="image-grid">
@@ -94,7 +99,7 @@
                     src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
                     alt="{{ image.alt }}"
                     onload="imgFade(this)"
-                    style="opacity: 0;"
+                    style="opacity:0;"
                     onerror="this.src='{{ url_for('static', filename='error.png')}}'"
                     {% if "File" in image.exif %}
                         width="{{ image.exif.File.Width.raw }}"
diff --git a/onlylegs/templates/index.html b/onlylegs/templates/index.html
index 41add45..2abd025 100644
--- a/onlylegs/templates/index.html
+++ b/onlylegs/templates/index.html
@@ -40,7 +40,14 @@
                     <div class="image-filter">
                         <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                     </div>
-                    <img fetchpriority="low" alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}" data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
+                    <img
+                        fetchpriority="low"
+                        alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
+                        data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
+                        onload="imgFade(this)"
+                        style="opacity:0;"
+                        id="lazy-load"
+                    />
                 </a>
             {% endfor %}
         </div>
diff --git a/onlylegs/templates/list.html b/onlylegs/templates/list.html
index af2edaa..40fcb5d 100644
--- a/onlylegs/templates/list.html
+++ b/onlylegs/templates/list.html
@@ -126,7 +126,14 @@
                     <div class="images size-{{ group.images|length }}">
                         {% if group.images|length > 0 %}
                             {% for image in group.images %}
-                                <img data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}" {% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}/>
+                                <img
+                                    data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
+                                    onload="imgFade(this)"
+                                    style="opacity:0;"
+                                    id="lazy-load"
+                                    class="data-{{ loop.index }}"
+                                    {% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}
+                                />
                             {% endfor %}
                         {% else %}
                             <img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>
diff --git a/onlylegs/templates/profile.html b/onlylegs/templates/profile.html
index 638c4d0..dbf4d25 100644
--- a/onlylegs/templates/profile.html
+++ b/onlylegs/templates/profile.html
@@ -75,7 +75,14 @@
                     <div class="image-filter">
                         <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                     </div>
-                    <img fetchpriority="low" alt="{{ image.alt }}" data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb" onload="this.classList.add('loaded');" id="lazy-load"/>
+                    <img
+                        fetchpriority="low"
+                        alt="{{ image.alt }}"
+                        data-src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
+                        onload="imgFade(this)"
+                        style="opacity:0;"
+                        id="lazy-load"
+                    />
                 </a>
             {% endfor %}
         </div>
diff --git a/onlylegs/utils/generate_image.py b/onlylegs/utils/generate_image.py
index 26c0932..20b7b87 100644
--- a/onlylegs/utils/generate_image.py
+++ b/onlylegs/utils/generate_image.py
@@ -33,7 +33,7 @@ def generate_thumbnail(file_path, resolution, ext=None):
     if resolution in ["prev", "preview"]:
         res_x, res_y = (1920, 1080)
     elif resolution in ["thumb", "thumbnail"]:
-        res_x, res_y = (400, 400)
+        res_x, res_y = (300, 300)
     elif resolution in ["pfp", "profile"]:
         res_x, res_y = (150, 150)
     elif resolution in ["icon", "favicon"]: