mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-18 06:24:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

soon

Browse Source
This commit is contained in:
David Ralph
2021-01-16 22:43:46 +00:00
parent 0a735384df
commit 3ec5a2c199
32 changed files with 530 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/widgets/background/Background.jsx
View File

@@ -27,33 +27,46 @@ export default class Background extends React.PureComponent {
localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
}
}
const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url})`;
// Brightness
let brightness = localStorage.getItem('brightness');
if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) brightness = 75;
if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) {
brightness = 75;
}
document.querySelector('#backgroundImage').setAttribute(
'style',
`${background}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
);
if (credit === 'false' && document.querySelector('#credits')) document.querySelector('#credits').style.display = 'none'; // Hide the credit
if (credit === 'false' && document.querySelector('#credits')) {
document.querySelector('#credits').style.display = 'none'; // Hide the credit
}
}
setCredit(photographer, unsplash, url) {
let credit = photographer;
if (unsplash) credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
document.querySelector('#photographer').insertAdjacentHTML("beforeend", ` ${credit}`); // Append credit
if (unsplash){
credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
}
document.querySelector('#photographer').insertAdjacentHTML('beforeend', ` ${credit}`); // Append credit
document.getElementById('credit').textContent = credit;
document.getElementById('photographerCard').textContent = credit;
}
doOffline() { // Handles setting the background if the user is offline
const offlineImages = require('./offline_images.json');
const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
const randomImage = offlineImages[photographer].photo[
Math.floor(Math.random() * offlineImages[photographer].photo.length)
]; // Select a random image
const url = `../offline-images/${randomImage}.jpg`;
this.setBackground(url);
@@ -66,38 +79,54 @@ export default class Background extends React.PureComponent {
const offlineMode = localStorage.getItem('offlineMode');
const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
const customBackgroundColour = localStorage.getItem('customBackgroundColour');
const customBackground = localStorage.getItem('customBackground');
const favourited = JSON.parse(localStorage.getItem('favourite'));
if (favourited) {
if (offlineMode === 'true') return this.doOffline();
if (offlineMode === 'true') {
return this.doOffline();
}
this.setBackground(favourited.url, null, 'true');
this.setCredit(favourited.credit);
document.getElementById('location').textContent = favourited.location;
} else if (photoPack) {
if (offlineMode === 'true') return this.doOffline();
if (offlineMode === 'true') {
return this.doOffline();
}
const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)];
this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer);
this.setCredit(randomPhoto.photographer);
document.getElementById('location').textContent = randomPhoto.location;
}
else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false');
else if (customBackground !== '') {
} else if (customBackgroundColour) {
this.setBackground(null, customBackgroundColour, 'false');
} else if (customBackground !== '') {
if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
document.getElementById('backgroundImage').innerHTML = `
<video autoplay muted loop id='backgroundVideo'>
<source src='${customBackground}'/>
</video>`;
} else this.setBackground(customBackground, null, 'false'); // Local
} else {
this.setBackground(customBackground, null, 'false'); // Local
}
} else { // Online
if (offlineMode === 'true') return this.doOffline();
if (offlineMode === 'true') {
return this.doOffline();
}
try { // First we try and get an image from the API...
const enabled = localStorage.getItem('webp');
let requestURL;
switch (localStorage.getItem('backgroundAPI')) {
case 'unsplash': requestURL = `${Constants.UNSPLASH_URL}/getImage`; break;
case 'unsplash':
requestURL = `${Constants.UNSPLASH_URL}/getImage`;
break;
default: // Defaults to Mue
if (localStorage.getItem('supportswebp') === 'true' && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`;
else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`;
@@ -106,16 +135,24 @@ export default class Background extends React.PureComponent {
const data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL
if (data.statusCode === 429) this.doOffline(); // If we hit the rate limit, fallback to local images
else { // Otherwise, set the background and credit from remote data
if (data.statusCode === 429) {
this.doOffline(); // If we hit the rate limit, fallback to local images
} else { // Otherwise, set the background and credit from remote data
this.setBackground(data.file);
if (localStorage.getItem('backgroundAPI') === 'unsplash') return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
if (localStorage.getItem('backgroundAPI') === 'unsplash') {
return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
}
this.setCredit(data.photographer);
document.getElementById('camera').textContent = data.camera || 'N/A';
document.getElementById('resolution').textContent = data.resolution || 'N/A';
}
if (data.location.replace(/[null]+/g, '') === ' ') return document.querySelector('#backgroundCredits').style.display = 'none';
if (data.location.replace(/[null]+/g, '') === ' ') {
return document.querySelector('#backgroundCredits').style.display = 'none';
}
document.getElementById('location').innerText = `${data.location.replace('null', '')}`; // Set the location tooltip
} catch (e) { // ..and if that fails we load one locally
this.doOffline();
@@ -124,8 +161,14 @@ export default class Background extends React.PureComponent {
}
componentDidMount() {
if (localStorage.getItem('background') === 'false') return document.querySelector('#credits').style.display = 'none'; // Hide the credit
if (localStorage.getItem('animations') === 'true') document.querySelector('#backgroundImage').classList.add('fade-in');
if (localStorage.getItem('background') === 'false') {
return document.querySelector('#credits').style.display = 'none'; // Hide the credit
}
if (localStorage.getItem('animations') === 'true') {
document.querySelector('#backgroundImage').classList.add('fade-in');
}
this.determineMode();
}