mirror of
https://github.com/mue/mue.git
synced 2026-07-08 21:24:57 +02:00
408 lines
14 KiB
JavaScript
408 lines
14 KiB
JavaScript
// todo: rewrite this mess
|
|
import { PureComponent } from 'react';
|
|
|
|
import PhotoInformation from './PhotoInformation';
|
|
|
|
import EventBus from 'modules/helpers/eventbus';
|
|
import Interval from 'modules/helpers/interval';
|
|
import { videoCheck, offlineBackground, gradientStyleBuilder } from 'modules/helpers/background/widget';
|
|
|
|
import './scss/index.scss';
|
|
|
|
export default class Background extends PureComponent {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
style: '',
|
|
url: '',
|
|
currentAPI: '',
|
|
photoInfo: {
|
|
hidden: false,
|
|
offline: false,
|
|
photographerURL: '',
|
|
photoURL: ''
|
|
}
|
|
};
|
|
}
|
|
|
|
setBackground() {
|
|
const backgroundImage = document.getElementById('backgroundImage');
|
|
|
|
if (this.state.url !== '') {
|
|
const url = (localStorage.getItem('ddgProxy') === 'true' && this.state.photoInfo.offline !== true && !this.state.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + this.state.url : this.state.url;
|
|
const photoInformation = document.querySelector('.photoInformation');
|
|
|
|
// just set the background
|
|
if (localStorage.getItem('bgtransition') === 'false') {
|
|
if (photoInformation) {
|
|
photoInformation.style.display = 'block';
|
|
}
|
|
backgroundImage.style.background = null;
|
|
return backgroundImage.style.background = `url(${url})`;
|
|
}
|
|
|
|
// firstly we set the background as hidden and make sure there is no background set currently
|
|
backgroundImage.classList.add('backgroundPreload');
|
|
backgroundImage.style.background = null;
|
|
|
|
// same with photo information if not using custom background
|
|
if (photoInformation) {
|
|
photoInformation.classList.add('backgroundPreload');
|
|
}
|
|
|
|
// preloader for background transition, required so it loads in nice
|
|
const preloader = document.createElement('img');
|
|
preloader.src = url;
|
|
|
|
// once image has loaded, add the fade-in transition
|
|
preloader.addEventListener('load', () => {
|
|
backgroundImage.classList.remove('backgroundPreload');
|
|
backgroundImage.classList.add('fade-in');
|
|
|
|
backgroundImage.style.background = `url(${url})`;
|
|
// remove the preloader element we created earlier
|
|
preloader.remove();
|
|
|
|
if (photoInformation) {
|
|
photoInformation.classList.remove('backgroundPreload');
|
|
photoInformation.classList.add('fade-in');
|
|
}
|
|
});
|
|
} else {
|
|
// custom colour
|
|
backgroundImage.setAttribute('style', this.state.style);
|
|
}
|
|
}
|
|
|
|
// Main background getting function
|
|
async getBackground() {
|
|
let offline = (localStorage.getItem('offlineMode') === 'true');
|
|
if (localStorage.getItem('showWelcome') === 'true') {
|
|
offline = true;
|
|
}
|
|
|
|
const setFavourited = (favourited) => {
|
|
this.setState({
|
|
url: favourited.url,
|
|
photoInfo: {
|
|
credit: favourited.credit,
|
|
location: favourited.location,
|
|
camera: favourited.camera
|
|
}
|
|
});
|
|
}
|
|
|
|
switch (localStorage.getItem('backgroundType')) {
|
|
case 'api':
|
|
if (offline) {
|
|
return this.setState(offlineBackground());
|
|
}
|
|
|
|
const favourited = JSON.parse(localStorage.getItem('favourite'));
|
|
if (favourited) {
|
|
return setFavourited(favourited);
|
|
}
|
|
|
|
// API background
|
|
const backgroundAPI = localStorage.getItem('backgroundAPI');
|
|
const apiCategory = localStorage.getItem('apiCategory');
|
|
const apiQuality = localStorage.getItem('apiQuality');
|
|
const photoMap = localStorage.getItem('photoMap');
|
|
|
|
let requestURL, data;
|
|
switch (backgroundAPI) {
|
|
case 'unsplash':
|
|
requestURL = `${window.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}&map=${(photoMap === 'true')}`;
|
|
break;
|
|
case 'pexels':
|
|
requestURL = `${window.constants.PROXY_URL}/images/pexels?quality=${apiQuality}`;
|
|
break;
|
|
// Defaults to Mue
|
|
default:
|
|
requestURL = `${window.constants.API_URL}/images/random?category=${apiCategory}&quality=${apiQuality}`;
|
|
break;
|
|
}
|
|
|
|
try {
|
|
data = await (await fetch(requestURL)).json();
|
|
} catch (e) {
|
|
// if requesting to the API fails, we get an offline image
|
|
return this.setState(offlineBackground());
|
|
}
|
|
|
|
let credit = data.photographer;
|
|
let photoURL, photographerURL;
|
|
|
|
if (backgroundAPI === 'unsplash') {
|
|
photoURL = data.photo_page;
|
|
photographerURL = data.photographer_page;
|
|
} else if (backgroundAPI === 'pexels') {
|
|
photoURL = data.photo_page;
|
|
photographerURL = data.photographer_page;
|
|
}
|
|
|
|
const object = {
|
|
url: data.file,
|
|
type: 'api',
|
|
currentAPI: backgroundAPI,
|
|
photoInfo: {
|
|
hidden: false,
|
|
credit: credit,
|
|
location: data.location,
|
|
camera: data.camera,
|
|
url: data.file,
|
|
photographerURL: photographerURL,
|
|
photoURL: photoURL,
|
|
latitude: data.latitude || null,
|
|
longitude: data.longitude || null,
|
|
// location map token from mapbox
|
|
maptoken: data.maptoken || null
|
|
}
|
|
};
|
|
|
|
this.setState(object);
|
|
|
|
localStorage.setItem('currentBackground', JSON.stringify(object));
|
|
break;
|
|
|
|
case 'colour':
|
|
const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
|
|
|
|
let gradientSettings = '';
|
|
try {
|
|
gradientSettings = JSON.parse(customBackgroundColour);
|
|
} catch (e) {
|
|
const hexColorRegex = /#[0-9a-fA-F]{6}/s;
|
|
if (hexColorRegex.exec(customBackgroundColour)) {
|
|
// Colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
|
|
gradientSettings = { 'type': 'linear', 'angle': '180', 'gradient': [{ 'colour': customBackgroundColour, 'stop': 0 }] };
|
|
localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
|
|
}
|
|
}
|
|
|
|
if (typeof gradientSettings === 'object' && gradientSettings !== null) {
|
|
return this.setState(gradientStyleBuilder(gradientSettings));
|
|
}
|
|
break;
|
|
|
|
case 'custom':
|
|
let customBackground;
|
|
try {
|
|
customBackground = JSON.parse(localStorage.getItem('customBackground'));
|
|
} catch (e) {
|
|
// move to new format
|
|
customBackground = [localStorage.getItem('customBackground')];
|
|
localStorage.setItem('customBackground', JSON.stringify(customBackground));
|
|
}
|
|
|
|
// pick random
|
|
customBackground = customBackground[Math.floor(Math.random() * customBackground.length)];
|
|
|
|
// allow users to use offline images
|
|
if (offline && !customBackground.startsWith('data:')) {
|
|
return this.setState(offlineBackground());
|
|
}
|
|
|
|
if (customBackground !== '' && customBackground !== 'undefined' && customBackground !== ['']) {
|
|
this.setState({
|
|
url: customBackground,
|
|
type: 'custom',
|
|
video: videoCheck(customBackground),
|
|
photoInfo: {
|
|
hidden: true
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'photo_pack':
|
|
if (offline) {
|
|
return this.setState(offlineBackground());
|
|
}
|
|
|
|
const photofavourited = JSON.parse(localStorage.getItem('favourite'));
|
|
if (photofavourited) {
|
|
return setFavourited(photofavourited);
|
|
}
|
|
|
|
const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
|
|
if (photoPack) {
|
|
const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)];
|
|
return this.setState({
|
|
url: randomPhoto.url.default,
|
|
type: 'photo_pack',
|
|
photoInfo: {
|
|
hidden: false,
|
|
credit: randomPhoto.photographer,
|
|
location: randomPhoto.location || 'N/A'
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
const element = document.getElementById('backgroundImage');
|
|
|
|
// this resets it so the fade in and getting background all works properly
|
|
const refresh = () => {
|
|
element.classList.remove('fade-in');
|
|
this.setState({
|
|
url: '',
|
|
style: '',
|
|
type: '',
|
|
video: false,
|
|
photoInfo: {
|
|
hidden: true
|
|
}
|
|
});
|
|
this.getBackground();
|
|
};
|
|
|
|
EventBus.on('refresh', (data) => {
|
|
if (data === 'welcomeLanguage') {
|
|
localStorage.setItem('welcomeImage', JSON.stringify(this.state));
|
|
}
|
|
|
|
if (data === 'background') {
|
|
if (localStorage.getItem('background') === 'false') {
|
|
// user is using custom colour or image
|
|
if (this.state.photoInfo.hidden === false) {
|
|
document.querySelector('.photoInformation').style.display = 'none';
|
|
}
|
|
|
|
// video backgrounds
|
|
if (this.state.video === true) {
|
|
return document.getElementById('backgroundVideo').style.display = 'none';
|
|
} else {
|
|
return element.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// video backgrounds
|
|
if (this.state.video === true) {
|
|
document.getElementById('backgroundVideo').style.display = 'block';
|
|
} else {
|
|
if (this.state.photoInfo.hidden === false) {
|
|
try {
|
|
document.querySelector('.photoInformation').style.display = 'block';
|
|
} catch (e) {
|
|
// Disregard exception
|
|
}
|
|
}
|
|
|
|
element.style.display = 'block';
|
|
}
|
|
|
|
const backgroundType = localStorage.getItem('backgroundType');
|
|
|
|
if (this.state.photoInfo.offline !== true) {
|
|
// basically check to make sure something has changed before we try getting another background
|
|
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)) {
|
|
return refresh();
|
|
}
|
|
} else {
|
|
if (backgroundType !== this.state.type) {
|
|
return refresh();
|
|
}
|
|
}
|
|
|
|
// background effects so we don't get another image again
|
|
const backgroundFilter = localStorage.getItem('backgroundFilter');
|
|
|
|
if (this.state.video === true) {
|
|
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
|
|
} else {
|
|
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
|
|
}
|
|
}
|
|
|
|
// uninstall photo pack reverts your background to what you had previously
|
|
if (data === 'marketplacebackgrounduninstall' || data === 'backgroundwelcome' || data === 'backgroundrefresh') {
|
|
refresh();
|
|
}
|
|
});
|
|
|
|
if (localStorage.getItem('welcomeTab')) {
|
|
return this.setState(JSON.parse(localStorage.getItem('welcomeImage')));
|
|
}
|
|
|
|
const interval = localStorage.getItem('backgroundchange');
|
|
if (interval && interval !== 'refresh') {
|
|
if (localStorage.getItem('backgroundType') === 'api') {
|
|
Interval(() => {
|
|
try {
|
|
document.getElementById('backgroundImage').classList.remove('fade-in');
|
|
document.getElementsByClassName('photoInformation')[0].classList.remove('fade-in');
|
|
} catch (e) {
|
|
// Disregard exception
|
|
}
|
|
this.getBackground();
|
|
}, Number(interval), 'background');
|
|
|
|
try {
|
|
// todo: refactor this mess
|
|
const current = JSON.parse(localStorage.getItem('currentBackground'));
|
|
const offline = localStorage.getItem('offlineMode');
|
|
if (current.url.startsWith('http') && offline === 'false') {
|
|
this.setState(current);
|
|
} else if (current.url.startsWith('http')) {
|
|
this.setState(offlineBackground());
|
|
} else {
|
|
if (offline === 'false') {
|
|
localStorage.removeItem('currentBackground');
|
|
return this.getBackground();
|
|
}
|
|
this.setState(current);
|
|
}
|
|
} catch (e) {
|
|
this.setBackground();
|
|
}
|
|
}
|
|
} else {
|
|
this.getBackground();
|
|
}
|
|
}
|
|
|
|
// only set once we've got the info
|
|
componentDidUpdate() {
|
|
if (this.state.video === true) {
|
|
return;
|
|
}
|
|
|
|
this.setBackground();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
EventBus.off('refresh');
|
|
}
|
|
|
|
render() {
|
|
if (this.state.video === true) {
|
|
const enabled = (setting) => {
|
|
return (localStorage.getItem(setting) === 'true');
|
|
};
|
|
|
|
return (
|
|
<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}/>
|
|
</video>
|
|
);
|
|
}
|
|
|
|
const backgroundFilter = localStorage.getItem('backgroundFilter');
|
|
|
|
return (
|
|
<>
|
|
<div style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
|
|
{(this.state.photoInfo.credit !== '') ?
|
|
<PhotoInformation info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
|
|
: null}
|
|
</>
|
|
);
|
|
}
|
|
}
|