From 18a07f3902a206b24af5d4934a4eb28329a69697 Mon Sep 17 00:00:00 2001
From: Redume <Danilivasenko09@gmail.com>
Date: Sat, 8 Oct 2022 10:58:23 +0300
Subject: [PATCH] placeholder made

---
 web/static/image/placeholder.png | Bin 0 -> 6146 bytes
 web/static/scripts/gallery.js    |  59 +++++++++++++++++++++----------
 2 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 web/static/image/placeholder.png

diff --git a/web/static/image/placeholder.png b/web/static/image/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf1d31046f6bb3ca7699ba3bc40b953380d1b754
GIT binary patch
literal 6146
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
bOZa=5ECsvRPtgOVfAL0oX1c{_EdIX$Go=nF

literal 0
HcmV?d00001

diff --git a/web/static/scripts/gallery.js b/web/static/scripts/gallery.js
index 146f7f0..7fe1281 100644
--- a/web/static/scripts/gallery.js
+++ b/web/static/scripts/gallery.js
@@ -39,11 +39,6 @@ $(document).ready(function() {
     });
 });
 
-const myModal = new bootstrap.Modal('#Wallpaper', {
-    keyboard: false
-});
-myModal.show();
-
 function wallpaper(data) {
     $(".preloader").hide();
     data = data.reverse();
@@ -51,32 +46,52 @@ function wallpaper(data) {
     for (let i = 0; i < data.length; i++, id++) {
         ids.push(data[i]);
 
-        if (ids.filter((item) => item.url === data[i].url).length > 1) {
+        if (ids.filter((item) => item['url'] === data[i]['url']).length > 1) {
             continue;
         }
 
+        let image = new Image();
+        image.src = ids[id]['media_type'] === "video" ?
+            `https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg` :
+            ids[id]['url'];
+
+        image.onload = function() {
+            if(image.width+image.height !== 210) {
+                $(`img[data-src="${image.src}"]`).attr("src", `${image.src}`);
+            }
+        }
+
         if (ids[id]['media_type'] === "image") {
             $(".header-row").append(`
                 <div class="card">
                     <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
-                        <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" idi="${id}">
+                        <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img-top" id="${id}">
                     </a>
                 </div>
         `);
         } else {
             $(".header-row").append(`
-                <div class="card">
-                    <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
-                        <img src="https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg" alt="${ids[id]['title']}" class="card-img-top" idi="${id}">
-                    </a>
-                </div>
-            `);
+            <div class="card">
+                <a data-bs-toggle="modal" href="#WallpaperModal" role="button">
+                    <img src="http://localhost:4662/static/image/placeholder.png" 
+                        data-src="https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg"
+                        alt="${ids[id]['title']}" 
+                        class="card-img-top" 
+                        id="${id}"> 
+                </a>
+            </div>
+        `);
         }
     }
 
+
     let button_modal = document.querySelector(".header-row");
     button_modal.addEventListener("click", function (event) {
-        let id = event.target.getAttribute("idi");
+        if (event.target === button_modal) {
+            return;
+        }
+
+        let id = event.target.getAttribute("id");
         let img = document.querySelector(".modal-body");
         let title = document.querySelector(".w-modal-title");
 
@@ -87,6 +102,7 @@ function wallpaper(data) {
         ids[id]['copyright'] = ids[id]['copyright'] === undefined ? "NASA" : ids[id]['copyright'];
 
         if (ids[id]['media_type'] === "image") {
+            title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             img.innerHTML = `
                 <img src="${ids[id]['url']}" alt="${ids[id]['title']}" class="card-img">
                 <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
@@ -94,27 +110,32 @@ function wallpaper(data) {
                 <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
             `;
 
-            title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             setWallpaper.addEventListener("click", function () {
                 wallpaperUpdate(ids[id]['hdurl']);
             });
         } else {
+            title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             img.innerHTML = `
-                <iframe width="460" height="315" src="${ids[id]['url']}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+                <iframe width="460" 
+                height="315" 
+                src="${ids[id]['url']}" 
+                title="YouTube video player" 
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                allowFullScreen></iframe>
+                
                 <p><strong>Author:</strong> ${ids[id]['copyright']}</p>
                 <p><strong>Date of publication:</strong> ${ids[id]['date']}</p>
                 <p><strong>Explanation:</strong> ${ids[id]['explanation']}</p>
             `;
 
-            title.innerHTML = `<h5 class="modal-title">${ids[id]['title']}</h5>`;
             setWallpaper.addEventListener("click", function () {
-                wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30,41)}/maxresdefault.jpg`);
+                wallpaperUpdate(`https://img.youtube.com/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg`);
             });
         }
     });
 
     $(window).scroll(function () {
-        if (($(window).scrollTop() >  $(document).height() - $(window).height() - 100)) {
+        if (($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
             $(".preloader").show();
             $(window).off("scroll");