145 lines
4.8 KiB
JavaScript
145 lines
4.8 KiB
JavaScript
// Image Handler
|
|
const baseUrl = "https://api.unsplash.com/photos/random?client_id=[KEY]&orientation=landscape&topics=nature";
|
|
const apiKey = "tYOt7Jo94U7dunVcP5gt-kDKDMjWFOGQNsHuhLDLV8k"; // Take from config
|
|
const fullUrl = baseUrl.replace("[KEY]", apiKey);
|
|
|
|
const showModeImage = "/static/media/showModeLockscreen.jpg"
|
|
|
|
let credits = document.getElementById("credits");
|
|
|
|
let currentImageHandle;
|
|
|
|
// Lock screen or show mode
|
|
let screenState = "lock";
|
|
|
|
function handleImage() {
|
|
if(screenState === "lock") {
|
|
fetch("https://staging.thegreydiamond.de/projects/photoPortfolio/api/getRand.php?uuid=01919dec-b2cd-7adc-8ca2-a071d1169cbc&unsplash=true")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// data = {
|
|
// urls: {
|
|
// regular: "https://imageproxy.thegreydiamond.de/ra5iqxlyve6HpjNvC1tzG50a14oIOgiWP95CxIvbBC8/sm:1/kcr:1/aHR0cHM6Ly9zdGFn/aW5nLnRoZWdyZXlk/aWFtb25kLmRlL3By/b2plY3RzL3Bob3Rv/UG9ydGZvbGlvL2Rl/bW9IaVJlcy9QMTE5/MDgzMC1zY2hpbGQu/anBn.webp"
|
|
// },
|
|
// user: {
|
|
// name: "Sören Oesterwind",
|
|
// links: {
|
|
// html: "https://thegreydiamond.de"
|
|
// }
|
|
// }
|
|
// }
|
|
if(!currentImageHandle) {
|
|
// Create a page filling div which contains the image
|
|
currentImageHandle = document.createElement("div");
|
|
currentImageHandle.style.position = "absolute";
|
|
currentImageHandle.style.top = "0";
|
|
currentImageHandle.style.left = "0";
|
|
currentImageHandle.style.width = "100%";
|
|
currentImageHandle.style.height = "100%";
|
|
currentImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
|
|
currentImageHandle.style.backgroundSize = "cover";
|
|
currentImageHandle.style.opacity = 1;
|
|
} else {
|
|
// Create a new div behind the current one and delete the old one when the new one is loaded
|
|
let newImageHandle = document.createElement("div");
|
|
newImageHandle.style.position = "absolute";
|
|
newImageHandle.style.top = "0";
|
|
newImageHandle.style.left = "0";
|
|
newImageHandle.style.width = "100%";
|
|
newImageHandle.style.height = "100%";
|
|
newImageHandle.style.backgroundImage = `url(${data.urls.regular})`;
|
|
newImageHandle.style.backgroundSize = "cover";
|
|
newImageHandle.style.opacity = 1;
|
|
newImageHandle.style.transition = "1s";
|
|
newImageHandle.style.zIndex = 19999;
|
|
document.body.appendChild(newImageHandle);
|
|
|
|
currentImageHandle.style.opacity = 0;
|
|
setTimeout(() => {
|
|
currentImageHandle.remove();
|
|
newImageHandle.style.zIndex = 200000;
|
|
currentImageHandle = newImageHandle;
|
|
}, 1000);
|
|
|
|
|
|
|
|
// Set the credits
|
|
credits.innerHTML = `Photo by <a href="${data.user.links.html}" target="_blank">${data.user.name}</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>`;
|
|
credits.style.zIndex = 300000;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Error fetching image: ", error);
|
|
});
|
|
} else {
|
|
if(currentImageHandle) {
|
|
// Check if the image is already loaded
|
|
if(currentImageHandle.style.backgroundImage === `url("${showModeImage}")`) {
|
|
return;
|
|
}
|
|
// Create a new div behind the current one and delete the old one when the new one is loaded
|
|
let newImageHandle = document.createElement("div");
|
|
newImageHandle.style.position = "absolute";
|
|
newImageHandle.style.top = "0";
|
|
newImageHandle.style.left = "0";
|
|
newImageHandle.style.width = "100%";
|
|
newImageHandle.style.height = "100%";
|
|
newImageHandle.style.backgroundImage = `url(${showModeImage})`;
|
|
newImageHandle.style.backgroundSize = "cover";
|
|
newImageHandle.style.opacity = 1;
|
|
newImageHandle.style.transition = "1s";
|
|
document.body.appendChild(newImageHandle);
|
|
|
|
setTimeout(() => {
|
|
currentImageHandle.remove();
|
|
currentImageHandle = newImageHandle;
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleTimeAndDate() {
|
|
let time = new Date();
|
|
let hours = time.getHours();
|
|
let minutes = time.getMinutes();
|
|
let day = time.getDate();
|
|
let month = time.getMonth();
|
|
month += 1;
|
|
let year = time.getFullYear();
|
|
|
|
let timeHandle = document.getElementById("time");
|
|
let dateHandle = document.getElementById("date");
|
|
|
|
timeHandle.innerHTML = `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}:${time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()}`;
|
|
// Datum in format Montag, 22.12.2024
|
|
dateHandle.innerHTML = `${getDay(time.getDay())}, ${day < 10 ? "0" + day : day}.${month < 10 ? "0" + month : month}.${year}`;
|
|
}
|
|
|
|
function getDay(day) {
|
|
switch(day) {
|
|
case 0:
|
|
return "Sonntag";
|
|
case 1:
|
|
return "Montag";
|
|
case 2:
|
|
return "Dienstag";
|
|
case 3:
|
|
return "Mittwoch";
|
|
case 4:
|
|
return "Donnerstag";
|
|
case 5:
|
|
return "Freitag";
|
|
case 6:
|
|
return "Samstag";
|
|
}
|
|
}
|
|
|
|
// Set the image handler to run every 10 minutes
|
|
setInterval(handleImage, 60 * 1000 * 10);
|
|
handleImage();
|
|
handleImage()
|
|
|
|
// Set the time and date handler to run every minute
|
|
setInterval(handleTimeAndDate, 500);
|
|
handleTimeAndDate();
|