mirror of
https://github.com/Starlio-app/StarlioX
synced 2024-11-05 06:03:57 +03:00
Code refactoring. Added web-push. Made interface more minimalistic
This commit is contained in:
commit
fe6d976a00
1 changed files with 179 additions and 0 deletions
179
interface/static/scripts/gallery.js
Normal file
179
interface/static/scripts/gallery.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue