Code refactoring. Added web-push. Made interface more minimalistic

2024-10-05 01:25:58 +03:00 · 2023-05-01 20:42:06 +03:00 · 2023-05-01 20:42:06 +03:00 · fe6d976a00
commit fe6d976a00
1 changed files with 179 additions and 0 deletions
--- a/interface/static/scripts/gallery.js
+++ b/interface/static/scripts/gallery.js
@ -0,0 +1,179 @@
+const startDate = new Date();
+const endDate = new Date();
+
+const ids = [];
+let id = ids.length;
+const apiKEY = "1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et";
+
+function wallpaperLoad(data) {
+    $(".preloader").hide();
+
+    for (let i = 0; id < data.length; i++, id++) {
+        ids.push(data[i]);
+        if (ids.filter((item) => item['url'] === data[i]['url']).length > 1) continue;
+
+        const image = new Image();
+        image.src = ids[id]['media_type'] === "video" ?
+            `https://ytproxy.dc09.ru/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg?host=i.ytimg.com` :
+            ids[id]['url'];
+
+        image.onload = function () {
+            if (image.width + image.height !== 210) {
+                $(`img[data-src="${image.src}"]`)
+                    .attr("src", `${image.src}`)
+                    .removeAttr("data-src");
+            }
+        }
+
+        if (ids[id]['media_type'] === "image") {
+            $(".header-row").append(`
+            <div class=card>
+                <a data-bs-toggle="modal" href="#wallpaper" role="button">
+                    <img src="${ids[id]['url']}" 
+                    title="${ids[id]['title']}" 
+                    alt="${ids[id]['title']}"
+                    class="card-img-top shimmer"
+                    id="${id}">
+                </a>
+            </div>
+        `)
+        } else {
+            $(".header-row").append(`
+            <div class=card>
+                <a data-bs-toggle="modal" href="#wallpaper" role="button">
+                    <img src="/static/assets/placeholder.png" 
+                    data-src="https://ytproxy.dc09.ru/vi/${ids[id]['url'].slice(30, 41)}/maxresdefault.jpg?host=i.ytimg.com"
+                    title="${ids[id]['title']}" 
+                    alt="${ids[id]['title']}"
+                    class="card-img-top shimmer"
+                    id="${id}">
+                </a>
+            </div>
+        `)
+        }
+    }
+
+
+    $(".card-img-top").on("load", function () {
+        $(this).removeClass("shimmer");
+    });
+
+    const button_modal_window = document.querySelector(".header-row");
+
+    button_modal_window.addEventListener("click", function (event) {
+        if (event.target === button_modal_window) return;
+
+        const card_id = event.target.getAttribute("id");
+        const modale_window = document.querySelector(".modal-body");
+        const title = document.querySelector(".w-modal-title");
+        const button = document.querySelector(".modal-footer");
+
+        button.innerHTML = `<lottie-player id="favorite" 
+                                    src="/static/assets/lottie/lf30_rcvcAS.json" 
+                                    background="transparent" 
+                                    speed="1">
+                            </lottie-player>
+                            <button type="button" class="btn btn-primary" id="setWallpaper">Download</button>
+            `;
+
+        const wallpaper_img = $(`img#${id}.card-img-top`);
+        if (wallpaper_img && wallpaper_img.src === "http://localhost:4000/static/assets/placeholder.png") {
+            const button_setWallpaper = document.querySelector("#setWallpaper")
+            button_setWallpaper.disabled = true;
+            button_setWallpaper.style.backgroundColor = "grey";
+            button_setWallpaper.style.color = "white;"
+            button_setWallpaper.style.border = "none";
+        }
+
+        const setWallpaper = document.querySelector("#setWallpaper");
+        const favorite = document.querySelector("#favorite");
+
+        title.innerHTML = `<h5 class="modal-title">${ids[card_id]['title']}</h5>`;
+
+        if (ids[card_id]['media_type'] === "image") {
+            modale_window.innerHTML = `
+                <img src="${ids[card_id]['url']}" alt="${ids[card_id]['title']}" class="card-img">
+                <p id="explanation">${ids[card_id]['explanation']}</p>
+            `;
+
+            setWallpaper.addEventListener("click", function () {
+                updateWallpaper(card_id[card_id]['hdurl']);
+            });
+        } else {
+            const host = new URL(ids[card_id]['url']);
+
+            if (["youtube.com", "youtu.be", "yt.be"].includes(host.hostname.replace("www.", ""))) {
+                ids[card_id]['url'] = `https://yt.dc09.ru${host.pathname}`
+            }
+
+            modale_window.innerHTML = `
+                <iframe style="display: block; margin: auto; border-radius: 13px;"
+                width="440" 
+                height="250"
+                src=${ids[card_id]['url']}
+                allowFullScreen></iframe>
+                <p id="explanation">${ids[card_id]['explanation']}</p>
+            `
+
+            setWallpaper.addEventListener("click", function () {
+                updateWallpaper(`https://ytproxy.dc09.ru/vi/${ids[card_id]['url'].substring(25)}/maxresdefault.jpg?host=i.ytimg.com`)
+            });
+        }
+
+        if (ids[card_id]['copyright'] !== undefined) {
+            return modale_window.innerHTML += `<p>© ${ids[card_id]['copyright']}</p>`;
+        }
+    });
+
+    $(window).scroll(function () {
+        if (($(window).scrollTop() > $(document).height() - $(window).height() - 100)) {
+            $(".preloader").show();
+            $(window).off("scroll");
+
+            startDate.setDate(startDate.getDate() - 1);
+
+            endDate.setDate(endDate.getDate() - 15);
+            endDate.setMonth(endDate.getMonth() - 1);
+
+            $.ajax({
+                url: "https://api.nasa.gov/planetary/apod",
+                data: {
+                    api_key: apiKEY,
+                    start_date: `${endDate.getUTCFullYear()}-${endDate.getUTCMonth() + 1}-${endDate.getUTCDate()}`,
+                    end_date: `${startDate.getUTCFullYear()}-${startDate.getUTCMonth() + 1}-${startDate.getUTCDate()}`,
+                },
+                success: function (data) {
+                    wallpaperLoad(data);
+                    $(window).on("scroll");
+                },
+            });
+        }
+    });
+}
+
+function updateWallpaper(url) {
+    $.ajax({
+        url: "http://localhost:4000/api/update/wallpaper",
+        type: "POST",
+        data: { url: url },
+        success: function (data) {
+            if (data.status) notify(data.message)
+        },
+    });
+}
+
+function notify(message) {
+    if (!("Notification" in window)) return;
+
+    else if (Notification.permission === "granted") {
+        new Notification(message);
+    }
+
+    else if (Notification.permission !== "denied") {
+        Notification.requestPermission(function (permission) {
+            if (permission === "granted") {
+                new Notification(message);
+            }
+        });
+    }
+}