2022-04-20 09:34:34 +00:00
|
|
|
/* eslint-disable no-unused-expressions */
|
2021-07-18 11:20:35 +00:00
|
|
|
// todo: rewrite this mess
|
2021-09-29 18:19:03 +00:00
|
|
|
import variables from 'modules/variables';
|
2021-08-11 12:06:02 +00:00
|
|
|
import { PureComponent } from 'react';
|
2021-01-17 18:07:26 +00:00
|
|
|
|
2021-08-15 21:28:37 +00:00
|
|
|
import PhotoInformation from './PhotoInformation';
|
|
|
|
|
2021-08-28 14:34:12 +00:00
|
|
|
import EventBus from 'modules/helpers/eventbus';
|
2022-04-08 13:48:36 +00:00
|
|
|
import {
|
|
|
|
videoCheck,
|
|
|
|
offlineBackground,
|
|
|
|
getGradient,
|
|
|
|
randomColourStyleBuilder,
|
|
|
|
} from 'modules/helpers/background/widget';
|
2021-04-13 17:25:55 +00:00
|
|
|
|
2020-11-29 14:32:08 +00:00
|
|
|
import './scss/index.scss';
|
2020-04-22 14:22:22 +00:00
|
|
|
|
2021-08-11 12:06:02 +00:00
|
|
|
export default class Background extends PureComponent {
|
2021-03-23 13:10:34 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
2021-03-20 12:05:14 +00:00
|
|
|
this.state = {
|
|
|
|
style: '',
|
|
|
|
url: '',
|
2021-04-13 17:25:55 +00:00
|
|
|
currentAPI: '',
|
2022-09-11 10:40:13 +00:00
|
|
|
firstTime: false,
|
2021-03-20 12:05:14 +00:00
|
|
|
photoInfo: {
|
2021-04-27 13:52:04 +00:00
|
|
|
hidden: false,
|
|
|
|
offline: false,
|
|
|
|
photographerURL: '',
|
2022-04-08 13:48:36 +00:00
|
|
|
photoURL: '',
|
|
|
|
},
|
2021-03-20 12:05:14 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-04-08 21:25:36 +00:00
|
|
|
setBackground() {
|
2021-04-21 13:52:05 +00:00
|
|
|
const backgroundImage = document.getElementById('backgroundImage');
|
2021-04-14 11:51:11 +00:00
|
|
|
|
2021-04-08 21:25:36 +00:00
|
|
|
if (this.state.url !== '') {
|
2021-11-11 14:26:25 +00:00
|
|
|
let url = this.state.url;
|
2022-04-08 13:48:36 +00:00
|
|
|
if (
|
|
|
|
localStorage.getItem('ddgProxy') === 'true' &&
|
|
|
|
this.state.photoInfo.offline !== true &&
|
|
|
|
!this.state.url.startsWith('data:')
|
|
|
|
) {
|
2021-11-11 14:26:25 +00:00
|
|
|
url = variables.constants.DDG_IMAGE_PROXY + this.state.url;
|
|
|
|
}
|
|
|
|
|
2021-04-12 10:45:33 +00:00
|
|
|
const photoInformation = document.querySelector('.photoInformation');
|
2021-04-11 19:17:23 +00:00
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// just set the background
|
2021-04-11 19:17:23 +00:00
|
|
|
if (localStorage.getItem('bgtransition') === 'false') {
|
2022-09-07 15:04:06 +00:00
|
|
|
photoInformation?.[(photoInformation.style.display = 'flex')];
|
2022-04-08 13:48:36 +00:00
|
|
|
return (backgroundImage.style.background = `url(${url})`);
|
2021-04-11 19:17:23 +00:00
|
|
|
}
|
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// firstly we set the background as hidden and make sure there is no background set currently
|
2021-04-10 21:32:46 +00:00
|
|
|
backgroundImage.classList.add('backgroundPreload');
|
2021-04-22 13:20:51 +00:00
|
|
|
backgroundImage.style.background = null;
|
2021-04-14 11:51:11 +00:00
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// same with photo information if not using custom background
|
2021-11-11 14:26:25 +00:00
|
|
|
photoInformation?.classList.add('backgroundPreload');
|
2021-04-10 21:32:46 +00:00
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
// preloader for background transition, required, so it loads in nice
|
2021-04-27 20:51:22 +00:00
|
|
|
const preloader = document.createElement('img');
|
2021-04-10 21:32:46 +00:00
|
|
|
preloader.src = url;
|
2021-04-11 10:17:09 +00:00
|
|
|
|
|
|
|
// once image has loaded, add the fade-in transition
|
2021-04-10 21:32:46 +00:00
|
|
|
preloader.addEventListener('load', () => {
|
|
|
|
backgroundImage.classList.remove('backgroundPreload');
|
|
|
|
backgroundImage.classList.add('fade-in');
|
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
backgroundImage.style.background = `url(${url})`;
|
|
|
|
// remove the preloader element we created earlier
|
2021-04-14 11:51:11 +00:00
|
|
|
preloader.remove();
|
2021-04-11 10:17:09 +00:00
|
|
|
|
2021-04-14 11:51:11 +00:00
|
|
|
if (photoInformation) {
|
2021-04-12 10:45:33 +00:00
|
|
|
photoInformation.classList.remove('backgroundPreload');
|
2021-04-14 11:51:11 +00:00
|
|
|
photoInformation.classList.add('fade-in');
|
2021-04-11 10:17:09 +00:00
|
|
|
}
|
2021-04-10 21:32:46 +00:00
|
|
|
});
|
2021-04-08 21:25:36 +00:00
|
|
|
} else {
|
2021-05-02 11:11:07 +00:00
|
|
|
// custom colour
|
2021-04-22 13:20:51 +00:00
|
|
|
backgroundImage.setAttribute('style', this.state.style);
|
2021-04-08 21:25:36 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-20 12:05:14 +00:00
|
|
|
// Main background getting function
|
|
|
|
async getBackground() {
|
2022-04-08 13:48:36 +00:00
|
|
|
let offline = localStorage.getItem('offlineMode') === 'true';
|
2021-07-02 20:29:33 +00:00
|
|
|
if (localStorage.getItem('showWelcome') === 'true') {
|
|
|
|
offline = true;
|
|
|
|
}
|
2021-03-17 13:01:53 +00:00
|
|
|
|
2021-11-11 20:43:33 +00:00
|
|
|
const setFavourited = ({ type, url, credit, location, camera }) => {
|
2022-04-08 13:48:36 +00:00
|
|
|
if (type === 'random_colour' || type === 'random_gradient') {
|
|
|
|
return this.setState({
|
2021-11-11 20:43:33 +00:00
|
|
|
type: 'colour',
|
2022-04-08 13:48:36 +00:00
|
|
|
style: `background:${url}`,
|
2021-11-11 20:43:33 +00:00
|
|
|
});
|
|
|
|
}
|
2021-08-22 14:00:05 +00:00
|
|
|
this.setState({
|
2021-11-11 20:43:33 +00:00
|
|
|
url,
|
2021-08-22 14:00:05 +00:00
|
|
|
photoInfo: {
|
2021-11-11 20:43:33 +00:00
|
|
|
credit,
|
|
|
|
location,
|
2022-04-08 13:48:36 +00:00
|
|
|
camera,
|
|
|
|
},
|
2021-08-22 14:00:05 +00:00
|
|
|
});
|
2022-04-08 13:48:36 +00:00
|
|
|
};
|
2021-08-22 14:00:05 +00:00
|
|
|
|
2021-11-11 20:43:33 +00:00
|
|
|
const favourited = JSON.parse(localStorage.getItem('favourite'));
|
|
|
|
if (favourited) {
|
|
|
|
return setFavourited(favourited);
|
|
|
|
}
|
|
|
|
|
2021-09-17 18:40:22 +00:00
|
|
|
const type = localStorage.getItem('backgroundType');
|
|
|
|
switch (type) {
|
2021-03-24 12:02:30 +00:00
|
|
|
case 'api':
|
2021-04-10 15:22:37 +00:00
|
|
|
if (offline) {
|
2022-09-07 10:22:00 +00:00
|
|
|
return this.setState(offlineBackground('api'));
|
2021-04-10 15:22:37 +00:00
|
|
|
}
|
|
|
|
|
2021-03-24 12:02:30 +00:00
|
|
|
// API background
|
|
|
|
const backgroundAPI = localStorage.getItem('backgroundAPI');
|
2021-04-11 19:17:23 +00:00
|
|
|
const apiCategory = localStorage.getItem('apiCategory');
|
2021-06-13 15:36:43 +00:00
|
|
|
const apiQuality = localStorage.getItem('apiQuality');
|
2022-04-08 13:48:36 +00:00
|
|
|
const photoMap = localStorage.getItem('photoMap') === 'true';
|
2021-03-24 12:02:30 +00:00
|
|
|
|
|
|
|
let requestURL, data;
|
|
|
|
switch (backgroundAPI) {
|
|
|
|
case 'unsplash':
|
2021-11-11 20:43:33 +00:00
|
|
|
requestURL = `${variables.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}&map=${photoMap}`;
|
2021-04-08 18:17:40 +00:00
|
|
|
break;
|
2021-04-30 21:49:04 +00:00
|
|
|
case 'pexels':
|
2021-09-28 22:04:04 +00:00
|
|
|
requestURL = `${variables.constants.PROXY_URL}/images/pexels?quality=${apiQuality}`;
|
2021-04-30 21:49:04 +00:00
|
|
|
break;
|
2021-03-24 12:02:30 +00:00
|
|
|
// Defaults to Mue
|
|
|
|
default:
|
2021-09-28 22:04:04 +00:00
|
|
|
requestURL = `${variables.constants.API_URL}/images/random?category=${apiCategory}&quality=${apiQuality}`;
|
2021-03-24 12:02:30 +00:00
|
|
|
break;
|
2021-03-20 12:05:14 +00:00
|
|
|
}
|
2021-01-16 22:43:46 +00:00
|
|
|
|
2021-03-24 12:02:30 +00:00
|
|
|
try {
|
|
|
|
data = await (await fetch(requestURL)).json();
|
|
|
|
} catch (e) {
|
|
|
|
// if requesting to the API fails, we get an offline image
|
2022-09-07 10:22:00 +00:00
|
|
|
return this.setState(offlineBackground('api'));
|
2021-08-11 12:06:02 +00:00
|
|
|
}
|
2021-01-16 22:43:46 +00:00
|
|
|
|
2021-07-19 09:20:00 +00:00
|
|
|
let photoURL, photographerURL;
|
2021-05-06 16:30:13 +00:00
|
|
|
|
2021-11-11 20:43:33 +00:00
|
|
|
if (backgroundAPI === 'unsplash' || backgroundAPI === 'pexels') {
|
2021-05-06 16:30:13 +00:00
|
|
|
photoURL = data.photo_page;
|
|
|
|
photographerURL = data.photographer_page;
|
2021-05-05 14:44:39 +00:00
|
|
|
}
|
|
|
|
|
2021-07-17 18:38:00 +00:00
|
|
|
const object = {
|
2021-03-24 12:02:30 +00:00
|
|
|
url: data.file,
|
2021-04-13 17:25:55 +00:00
|
|
|
type: 'api',
|
|
|
|
currentAPI: backgroundAPI,
|
2021-03-20 12:05:14 +00:00
|
|
|
photoInfo: {
|
2021-04-21 13:52:05 +00:00
|
|
|
hidden: false,
|
2021-11-11 20:43:33 +00:00
|
|
|
credit: data.photographer,
|
2021-05-24 21:00:43 +00:00
|
|
|
location: data.location,
|
2021-04-14 11:51:11 +00:00
|
|
|
camera: data.camera,
|
2021-04-27 13:52:04 +00:00
|
|
|
url: data.file,
|
2021-11-11 20:43:33 +00:00
|
|
|
photographerURL,
|
|
|
|
photoURL,
|
2021-09-06 18:35:31 +00:00
|
|
|
latitude: data.latitude || null,
|
|
|
|
longitude: data.longitude || null,
|
2021-09-07 19:42:56 +00:00
|
|
|
// location map token from mapbox
|
2022-04-08 13:48:36 +00:00
|
|
|
maptoken: data.maptoken || null,
|
|
|
|
views: data.views || null,
|
|
|
|
downloads: data.downloads || null,
|
|
|
|
},
|
2021-08-21 10:11:00 +00:00
|
|
|
};
|
|
|
|
|
2021-07-17 18:38:00 +00:00
|
|
|
this.setState(object);
|
|
|
|
|
|
|
|
localStorage.setItem('currentBackground', JSON.stringify(object));
|
2021-11-11 20:43:33 +00:00
|
|
|
break;
|
2021-03-24 12:02:30 +00:00
|
|
|
|
|
|
|
case 'colour':
|
2021-11-11 20:43:33 +00:00
|
|
|
const gradient = getGradient();
|
|
|
|
if (gradient) {
|
|
|
|
this.setState(gradient);
|
2021-03-24 12:02:30 +00:00
|
|
|
}
|
2021-11-11 20:43:33 +00:00
|
|
|
break;
|
2021-03-24 12:02:30 +00:00
|
|
|
|
2021-09-17 18:40:22 +00:00
|
|
|
case 'random_colour':
|
|
|
|
case 'random_gradient':
|
|
|
|
this.setState(randomColourStyleBuilder(type));
|
2021-11-11 20:43:33 +00:00
|
|
|
break;
|
2021-03-24 12:02:30 +00:00
|
|
|
case 'custom':
|
2022-01-07 15:12:06 +00:00
|
|
|
let customBackground = [];
|
|
|
|
const customSaved = localStorage.getItem('customBackground');
|
2021-09-08 19:58:07 +00:00
|
|
|
try {
|
2022-01-07 15:12:06 +00:00
|
|
|
customBackground = JSON.parse(customSaved);
|
2021-09-08 19:58:07 +00:00
|
|
|
} catch (e) {
|
2022-01-07 15:12:06 +00:00
|
|
|
if (customSaved !== '') {
|
|
|
|
// move to new format
|
|
|
|
customBackground = [customSaved];
|
|
|
|
}
|
2021-09-08 19:58:07 +00:00
|
|
|
localStorage.setItem('customBackground', JSON.stringify(customBackground));
|
|
|
|
}
|
|
|
|
|
|
|
|
// pick random
|
|
|
|
customBackground = customBackground[Math.floor(Math.random() * customBackground.length)];
|
2021-04-10 15:22:37 +00:00
|
|
|
|
|
|
|
// allow users to use offline images
|
|
|
|
if (offline && !customBackground.startsWith('data:')) {
|
2022-09-07 10:22:00 +00:00
|
|
|
return this.setState(offlineBackground('custom'));
|
2021-04-10 15:22:37 +00:00
|
|
|
}
|
|
|
|
|
2022-04-08 13:48:36 +00:00
|
|
|
if (
|
|
|
|
customBackground !== '' &&
|
|
|
|
customBackground !== 'undefined' &&
|
|
|
|
customBackground !== undefined
|
|
|
|
) {
|
2021-09-19 19:10:22 +00:00
|
|
|
const object = {
|
2021-03-24 12:02:30 +00:00
|
|
|
url: customBackground,
|
2021-04-13 17:25:55 +00:00
|
|
|
type: 'custom',
|
2021-08-19 15:32:10 +00:00
|
|
|
video: videoCheck(customBackground),
|
2021-03-24 12:02:30 +00:00
|
|
|
photoInfo: {
|
2022-04-08 13:48:36 +00:00
|
|
|
hidden: true,
|
|
|
|
},
|
2021-09-19 19:10:22 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.setState(object);
|
|
|
|
|
|
|
|
localStorage.setItem('currentBackground', JSON.stringify(object));
|
2021-03-24 12:02:30 +00:00
|
|
|
}
|
2021-11-11 20:43:33 +00:00
|
|
|
break;
|
2021-03-24 12:02:30 +00:00
|
|
|
|
|
|
|
case 'photo_pack':
|
2021-04-10 15:22:37 +00:00
|
|
|
if (offline) {
|
2022-09-07 10:22:00 +00:00
|
|
|
return this.setState(offlineBackground('photo_pack'));
|
2021-04-10 15:22:37 +00:00
|
|
|
}
|
|
|
|
|
2021-08-22 14:00:05 +00:00
|
|
|
const photofavourited = JSON.parse(localStorage.getItem('favourite'));
|
|
|
|
if (photofavourited) {
|
|
|
|
return setFavourited(photofavourited);
|
|
|
|
}
|
|
|
|
|
2022-08-26 09:45:32 +00:00
|
|
|
const photoPack = [];
|
|
|
|
const installed = JSON.parse(localStorage.getItem('installed'));
|
|
|
|
installed.forEach((item) => {
|
|
|
|
if (item.type === 'photos') {
|
|
|
|
photoPack.push(...item.photos);
|
|
|
|
}
|
|
|
|
});
|
2021-03-24 12:02:30 +00:00
|
|
|
if (photoPack) {
|
2022-10-29 20:28:04 +00:00
|
|
|
const randomNumber = Math.floor(Math.random() * photoPack.length);
|
2022-10-27 19:24:08 +00:00
|
|
|
const randomPhoto = photoPack[randomNumber];
|
|
|
|
if (
|
2022-11-06 11:59:59 +00:00
|
|
|
(localStorage.getItem('backgroundchange') === 'refresh' &&
|
|
|
|
this.state.firstTime === true) ||
|
2022-10-29 20:28:04 +00:00
|
|
|
(localStorage.getItem('backgroundchange') === null && this.state.firstTime === true)
|
2022-10-27 19:24:08 +00:00
|
|
|
) {
|
2022-10-29 20:28:04 +00:00
|
|
|
localStorage.setItem('marketplaceNumber', randomNumber);
|
|
|
|
this.setState({
|
2022-10-29 21:28:17 +00:00
|
|
|
firstTime: false,
|
2022-10-27 19:24:08 +00:00
|
|
|
url: randomPhoto.url.default,
|
|
|
|
type: 'photo_pack',
|
|
|
|
photoInfo: {
|
|
|
|
hidden: false,
|
|
|
|
credit: randomPhoto.photographer,
|
|
|
|
location: randomPhoto.location || 'N/A',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
} else {
|
2022-11-06 11:59:59 +00:00
|
|
|
if (
|
|
|
|
Number(
|
|
|
|
Number(localStorage.getItem('backgroundStartTime')) +
|
|
|
|
Number(localStorage.getItem('backgroundchange')) >=
|
|
|
|
Number(Date.now()),
|
|
|
|
)
|
|
|
|
) {
|
|
|
|
const randomPhoto = photoPack[localStorage.getItem('marketplaceNumber')];
|
|
|
|
if (this.state.firstTime !== true) {
|
|
|
|
this.setState({
|
2022-10-29 20:28:04 +00:00
|
|
|
url: randomPhoto.url.default,
|
|
|
|
type: 'photo_pack',
|
|
|
|
photoInfo: {
|
|
|
|
hidden: false,
|
|
|
|
credit: randomPhoto.photographer,
|
|
|
|
location: randomPhoto.location || 'N/A',
|
|
|
|
},
|
|
|
|
});
|
2022-11-06 11:59:59 +00:00
|
|
|
} else {
|
|
|
|
this.setState({ firstTime: true });
|
2022-10-29 20:28:04 +00:00
|
|
|
}
|
2022-11-06 11:59:59 +00:00
|
|
|
this.setState({ firstTime: true });
|
|
|
|
} else {
|
|
|
|
localStorage.setItem('marketplaceNumber', randomNumber);
|
|
|
|
return this.setState({
|
|
|
|
url: randomPhoto.url.default,
|
|
|
|
type: 'photo_pack',
|
|
|
|
photoInfo: {
|
|
|
|
hidden: false,
|
|
|
|
credit: randomPhoto.photographer,
|
|
|
|
location: randomPhoto.location || 'N/A',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2022-10-27 19:24:08 +00:00
|
|
|
}
|
2021-03-24 12:02:30 +00:00
|
|
|
}
|
2021-11-11 20:43:33 +00:00
|
|
|
break;
|
2021-08-11 12:06:02 +00:00
|
|
|
default:
|
2021-03-26 22:16:44 +00:00
|
|
|
break;
|
|
|
|
}
|
2019-10-20 12:39:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2021-04-21 13:52:05 +00:00
|
|
|
const element = document.getElementById('backgroundImage');
|
2021-01-16 22:43:46 +00:00
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// this resets it so the fade in and getting background all works properly
|
2021-04-14 14:49:07 +00:00
|
|
|
const refresh = () => {
|
|
|
|
element.classList.remove('fade-in');
|
|
|
|
this.setState({
|
|
|
|
url: '',
|
2021-04-22 13:20:51 +00:00
|
|
|
style: '',
|
2021-04-29 08:02:19 +00:00
|
|
|
type: '',
|
2021-04-14 14:49:07 +00:00
|
|
|
video: false,
|
|
|
|
photoInfo: {
|
2022-04-08 13:48:36 +00:00
|
|
|
hidden: true,
|
|
|
|
},
|
2021-04-14 14:49:07 +00:00
|
|
|
});
|
|
|
|
this.getBackground();
|
2021-04-16 11:26:56 +00:00
|
|
|
};
|
2021-04-14 14:49:07 +00:00
|
|
|
|
2021-04-13 17:25:55 +00:00
|
|
|
EventBus.on('refresh', (data) => {
|
2021-07-18 09:59:38 +00:00
|
|
|
if (data === 'welcomeLanguage') {
|
|
|
|
localStorage.setItem('welcomeImage', JSON.stringify(this.state));
|
|
|
|
}
|
|
|
|
|
2021-04-13 17:25:55 +00:00
|
|
|
if (data === 'background') {
|
2021-04-21 13:52:05 +00:00
|
|
|
if (localStorage.getItem('background') === 'false') {
|
2021-05-02 11:11:07 +00:00
|
|
|
// user is using custom colour or image
|
2021-04-21 13:52:05 +00:00
|
|
|
if (this.state.photoInfo.hidden === false) {
|
|
|
|
document.querySelector('.photoInformation').style.display = 'none';
|
|
|
|
}
|
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// video backgrounds
|
2021-04-21 13:52:05 +00:00
|
|
|
if (this.state.video === true) {
|
2022-04-08 13:48:36 +00:00
|
|
|
return (document.getElementById('backgroundVideo').style.display = 'none');
|
2021-04-21 13:52:05 +00:00
|
|
|
} else {
|
2022-04-08 13:48:36 +00:00
|
|
|
return (element.style.display = 'none');
|
2021-04-21 13:52:05 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-11 12:06:02 +00:00
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// video backgrounds
|
2021-04-21 13:52:05 +00:00
|
|
|
if (this.state.video === true) {
|
|
|
|
document.getElementById('backgroundVideo').style.display = 'block';
|
|
|
|
} else {
|
2021-04-28 15:16:27 +00:00
|
|
|
if (this.state.photoInfo.hidden === false) {
|
2021-06-16 11:05:03 +00:00
|
|
|
try {
|
2022-09-07 15:04:06 +00:00
|
|
|
document.querySelector('.photoInformation').style.display = 'flex';
|
2021-07-02 20:29:33 +00:00
|
|
|
} catch (e) {
|
|
|
|
// Disregard exception
|
|
|
|
}
|
2021-04-28 15:16:27 +00:00
|
|
|
}
|
|
|
|
|
2021-04-21 13:52:05 +00:00
|
|
|
element.style.display = 'block';
|
|
|
|
}
|
|
|
|
|
2021-04-14 11:51:11 +00:00
|
|
|
const backgroundType = localStorage.getItem('backgroundType');
|
2021-04-13 17:25:55 +00:00
|
|
|
|
2021-04-27 20:51:22 +00:00
|
|
|
if (this.state.photoInfo.offline !== true) {
|
2021-05-02 11:11:07 +00:00
|
|
|
// basically check to make sure something has changed before we try getting another background
|
2022-04-08 13:48:36 +00:00
|
|
|
if (
|
|
|
|
backgroundType !== this.state.type ||
|
|
|
|
(this.state.type === 'api' &&
|
|
|
|
localStorage.getItem('backgroundAPI') !== this.state.currentAPI) ||
|
|
|
|
(this.state.type === 'custom' &&
|
|
|
|
localStorage.getItem('customBackground') !== this.state.url)
|
|
|
|
) {
|
2021-08-01 14:02:18 +00:00
|
|
|
return refresh();
|
|
|
|
}
|
2021-11-11 20:43:33 +00:00
|
|
|
} else if (backgroundType !== this.state.type) {
|
|
|
|
return refresh();
|
2021-04-13 17:25:55 +00:00
|
|
|
}
|
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// background effects so we don't get another image again
|
2021-11-12 18:34:03 +00:00
|
|
|
const backgroundFilterSetting = localStorage.getItem('backgroundFilter');
|
|
|
|
const backgroundFilter = backgroundFilterSetting && backgroundFilterSetting !== 'none';
|
2021-05-02 12:40:11 +00:00
|
|
|
|
2021-04-14 11:51:11 +00:00
|
|
|
if (this.state.video === true) {
|
2022-04-08 13:48:36 +00:00
|
|
|
document.getElementById(
|
|
|
|
'backgroundVideo',
|
|
|
|
).style.webkitFilter = `blur(${localStorage.getItem(
|
|
|
|
'blur',
|
|
|
|
)}px) brightness(${localStorage.getItem('brightness')}%) ${
|
|
|
|
backgroundFilter
|
|
|
|
? backgroundFilterSetting +
|
|
|
|
'(' +
|
|
|
|
localStorage.getItem('backgroundFilterAmount') +
|
|
|
|
'%)'
|
|
|
|
: ''
|
|
|
|
}`;
|
2021-04-14 11:51:11 +00:00
|
|
|
} else {
|
2022-04-08 13:48:36 +00:00
|
|
|
element.style.webkitFilter = `blur(${localStorage.getItem(
|
|
|
|
'blur',
|
|
|
|
)}px) brightness(${localStorage.getItem('brightness')}%) ${
|
|
|
|
backgroundFilter
|
|
|
|
? backgroundFilterSetting +
|
|
|
|
'(' +
|
|
|
|
localStorage.getItem('backgroundFilterAmount') +
|
|
|
|
'%)'
|
|
|
|
: ''
|
|
|
|
}`;
|
2021-04-14 11:51:11 +00:00
|
|
|
}
|
2021-04-13 17:25:55 +00:00
|
|
|
}
|
2021-04-14 14:49:07 +00:00
|
|
|
|
2021-05-02 11:11:07 +00:00
|
|
|
// uninstall photo pack reverts your background to what you had previously
|
2022-04-08 13:48:36 +00:00
|
|
|
if (
|
|
|
|
data === 'marketplacebackgrounduninstall' ||
|
|
|
|
data === 'backgroundwelcome' ||
|
|
|
|
data === 'backgroundrefresh'
|
|
|
|
) {
|
2021-04-14 14:49:07 +00:00
|
|
|
refresh();
|
|
|
|
}
|
2021-04-13 17:25:55 +00:00
|
|
|
});
|
|
|
|
|
2021-07-18 11:20:35 +00:00
|
|
|
if (localStorage.getItem('welcomeTab')) {
|
|
|
|
return this.setState(JSON.parse(localStorage.getItem('welcomeImage')));
|
|
|
|
}
|
|
|
|
|
2022-09-11 10:45:38 +00:00
|
|
|
if (
|
|
|
|
localStorage.getItem('backgroundchange') === 'refresh' ||
|
2022-10-27 19:24:08 +00:00
|
|
|
localStorage.getItem('backgroundchange') === null
|
2022-09-11 10:45:38 +00:00
|
|
|
) {
|
2022-09-05 07:14:21 +00:00
|
|
|
try {
|
|
|
|
document.getElementById('backgroundImage').classList.remove('fade-in');
|
|
|
|
document.getElementsByClassName('photoInformation')[0].classList.remove('fade-in');
|
|
|
|
} catch (e) {
|
|
|
|
// Disregard exception
|
|
|
|
}
|
|
|
|
this.getBackground();
|
|
|
|
localStorage.setItem('backgroundStartTime', Date.now());
|
|
|
|
}
|
2021-11-11 20:43:33 +00:00
|
|
|
|
2022-09-05 09:13:42 +00:00
|
|
|
const test = localStorage.getItem('backgroundchange');
|
|
|
|
|
2022-09-05 07:14:21 +00:00
|
|
|
this.interval = setInterval(() => {
|
2022-10-27 19:24:08 +00:00
|
|
|
const targetTime = Number(Number(localStorage.getItem('backgroundStartTime')) + Number(test));
|
2022-09-05 07:14:21 +00:00
|
|
|
const currentTime = Number(Date.now());
|
2022-11-06 11:59:59 +00:00
|
|
|
const type = localStorage.getItem('backgroundType');
|
2022-04-08 13:48:36 +00:00
|
|
|
|
2022-10-07 18:36:58 +00:00
|
|
|
if (test !== null && test !== 'refresh') {
|
2022-09-05 09:13:42 +00:00
|
|
|
if (currentTime >= targetTime) {
|
2022-10-07 18:36:58 +00:00
|
|
|
element.classList.remove('fade-in');
|
2022-09-05 09:13:42 +00:00
|
|
|
this.getBackground();
|
|
|
|
localStorage.setItem('backgroundStartTime', Date.now());
|
|
|
|
} else {
|
|
|
|
try {
|
|
|
|
const current = JSON.parse(localStorage.getItem('currentBackground'));
|
|
|
|
if (current.type !== type) {
|
|
|
|
this.getBackground();
|
|
|
|
}
|
|
|
|
const offline = localStorage.getItem('offlineMode');
|
|
|
|
if (current.url.startsWith('http') && offline === 'false') {
|
2022-09-11 10:45:38 +00:00
|
|
|
if (this.state.firstTime !== true) {
|
|
|
|
this.setState(current);
|
|
|
|
}
|
2022-09-05 09:13:42 +00:00
|
|
|
} else if (current.url.startsWith('http')) {
|
|
|
|
this.setState(offlineBackground());
|
|
|
|
}
|
2022-09-11 10:40:13 +00:00
|
|
|
if (this.state.firstTime !== true) {
|
|
|
|
this.setState(current);
|
|
|
|
}
|
2022-09-11 10:45:38 +00:00
|
|
|
this.setState({ firstTime: true });
|
2022-09-05 09:13:42 +00:00
|
|
|
} catch (e) {
|
|
|
|
this.setBackground();
|
2021-08-01 17:20:38 +00:00
|
|
|
}
|
|
|
|
}
|
2021-07-18 11:20:35 +00:00
|
|
|
}
|
2022-09-05 07:14:21 +00:00
|
|
|
});
|
2021-03-20 12:05:14 +00:00
|
|
|
}
|
2021-03-17 13:01:53 +00:00
|
|
|
|
2021-03-20 12:05:14 +00:00
|
|
|
// only set once we've got the info
|
|
|
|
componentDidUpdate() {
|
2021-04-08 21:25:36 +00:00
|
|
|
if (this.state.video === true) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-03-20 12:05:14 +00:00
|
|
|
this.setBackground();
|
2019-10-20 12:39:01 +00:00
|
|
|
}
|
|
|
|
|
2021-08-20 21:06:40 +00:00
|
|
|
componentWillUnmount() {
|
|
|
|
EventBus.off('refresh');
|
2022-09-05 07:14:21 +00:00
|
|
|
clearInterval(this.interval);
|
2021-08-20 21:06:40 +00:00
|
|
|
}
|
|
|
|
|
2019-10-20 12:39:01 +00:00
|
|
|
render() {
|
2021-04-08 21:25:36 +00:00
|
|
|
if (this.state.video === true) {
|
2021-04-10 18:36:58 +00:00
|
|
|
const enabled = (setting) => {
|
2022-04-08 13:48:36 +00:00
|
|
|
return localStorage.getItem(setting) === 'true';
|
2021-04-08 21:25:36 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-04-08 13:48:36 +00:00
|
|
|
<video
|
|
|
|
autoPlay
|
|
|
|
muted={enabled('backgroundVideoMute')}
|
|
|
|
loop={enabled('backgroundVideoLoop')}
|
|
|
|
style={{
|
|
|
|
WebkitFilter: `blur(${localStorage.getItem(
|
|
|
|
'blur',
|
|
|
|
)}px) brightness(${localStorage.getItem('brightness')}%)`,
|
|
|
|
}}
|
|
|
|
id="backgroundVideo"
|
|
|
|
>
|
|
|
|
<source src={this.state.url} />
|
2021-04-08 21:25:36 +00:00
|
|
|
</video>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-05-02 12:40:11 +00:00
|
|
|
const backgroundFilter = localStorage.getItem('backgroundFilter');
|
|
|
|
|
2021-03-20 12:05:14 +00:00
|
|
|
return (
|
2021-04-08 21:25:36 +00:00
|
|
|
<>
|
2022-04-08 13:48:36 +00:00
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
WebkitFilter: `blur(${localStorage.getItem(
|
|
|
|
'blur',
|
|
|
|
)}px) brightness(${localStorage.getItem('brightness')}%) ${
|
|
|
|
backgroundFilter && backgroundFilter !== 'none'
|
|
|
|
? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)'
|
|
|
|
: ''
|
|
|
|
}`,
|
|
|
|
}}
|
|
|
|
id="backgroundImage"
|
|
|
|
/>
|
|
|
|
{this.state.photoInfo.credit !== '' ? (
|
|
|
|
<PhotoInformation
|
|
|
|
info={this.state.photoInfo}
|
|
|
|
api={this.state.currentAPI}
|
|
|
|
url={this.state.url}
|
|
|
|
/>
|
|
|
|
) : null}
|
2021-04-08 21:25:36 +00:00
|
|
|
</>
|
2021-03-20 12:05:14 +00:00
|
|
|
);
|
2019-10-20 12:39:01 +00:00
|
|
|
}
|
2020-08-29 16:47:34 +00:00
|
|
|
}
|