mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-13 03:58:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: hot reload on background

Browse Source
This commit is contained in:
David Ralph
2021-04-14 12:51:11 +01:00
parent 7fbadad649
commit d596670fdb
6 changed files with 52 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@@ -125,7 +125,7 @@ export default class Marketplace extends React.PureComponent {
return (
<div id='marketplace'>
<div className='emptyitems'>
<div class='emptyMessage'>
<div className='emptyMessage'>
{msg}
</div>
</div>

4
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import EventBus from '../../../../../../modules/helpers/eventbus';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import FileUpload from '../../FileUpload';
@@ -28,6 +30,7 @@ export default class BackgroundSettings extends React.PureComponent {
customBackground: ''
});
toast(this.language.toasts.reset);
EventBus.dispatch('refresh', 'background');
}
customBackground(e, text) {
@@ -42,6 +45,7 @@ export default class BackgroundSettings extends React.PureComponent {
this.setState({
customBackground: result
});
EventBus.dispatch('refresh', 'background');
}
videoCustomSettings = () => {

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

@@ -1,4 +1,3 @@
// TODO: rewrite this tomorrow
import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
@@ -14,15 +13,11 @@ export default class Background extends React.PureComponent {
style: '',
url: '',
currentAPI: '',
video: false,
photoInfo: {
hidden: false,
credit: '',
url: ''
hidden: false
}
};
this.language = window.language.widgets.background;
this.ddgproxy = (localStorage.getItem('ddgProxy') === 'true');
}
gradientStyleBuilder(gradientSettings) {
@@ -50,10 +45,8 @@ export default class Background extends React.PureComponent {
// Get all photographers from the keys in offlineImages.json
const photographers = Object.keys(offlineImages);
// Select a random photographer from the keys
const photographer = photographers[Math.floor(Math.random() * photographers.length)];
// Select a random image
const randomImage = offlineImages[photographer].photo[
Math.floor(Math.random() * offlineImages[photographer].photo.length)
];
@@ -61,29 +54,32 @@ export default class Background extends React.PureComponent {
this.setState({
url: `./offline-images/${randomImage}.jpg`,
photoInfo: {
hidden: true,
credit: photographer
}
});
}
setBackground() {
const backgroundImage = document.querySelector('#backgroundImage');
if (this.state.url !== '') {
const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
const backgroundImage = document.querySelector('#backgroundImage');
const url = (localStorage.getItem('ddgProxy') === 'true') ? window.constants.DDG_PROXY + this.state.url : this.state.url;
const photoInformation = document.querySelector('.photoInformation');
if (localStorage.getItem('bgtransition') === 'false') {
photoInformation.style.display = 'block';
return backgroundImage.setAttribute(
'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
);
if (photoInformation) {
photoInformation.style.display = 'block';
}
backgroundImage.style.backgroundImage = null;
return backgroundImage.style.backgroundImage = `url(${url})`;
}
backgroundImage.classList.add('backgroundPreload');
photoInformation.classList.add('backgroundPreload');
backgroundImage.style.backgroundImage = null;
if (photoInformation) {
photoInformation.classList.add('backgroundPreload');
}
// preloader for background transition
let preloader = document.createElement('img');
@@ -94,23 +90,16 @@ export default class Background extends React.PureComponent {
backgroundImage.classList.remove('backgroundPreload');
backgroundImage.classList.add('fade-in');
backgroundImage.setAttribute(
'style',
`background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%);`
);
preloader = null;
backgroundImage.style.backgroundImage = `url(${url})`;
preloader.remove();
// wait before showing photoinformation, should make this better with state or something later but lazy
if (this.state.photoInfo.hidden !== false) {
if (photoInformation) {
photoInformation.classList.remove('backgroundPreload');
document.querySelector('.photoInformation').classList.add('fade-in');
photoInformation.classList.add('fade-in');
}
});
} else {
document.querySelector('#backgroundImage').setAttribute(
'style',
`${this.state.style}; -webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
);
backgroundImage.setAttribute('style', `${this.state.style};`);
}
}
@@ -165,16 +154,16 @@ export default class Background extends React.PureComponent {
photoInfo: {
credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`,
location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
camera: data.camera || 'N/A',
resolution: data.resolution || 'N/A',
camera: data.camera,
resolution: data.resolution,
url: data.file
}
});
break;
case 'colour':
// background colour
const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
let gradientSettings = '';
try {
gradientSettings = JSON.parse(customBackgroundColour);
@@ -193,7 +182,6 @@ export default class Background extends React.PureComponent {
break;
case 'custom':
// custom user background
const customBackground = localStorage.getItem('customBackground');
// allow users to use offline images
@@ -218,7 +206,6 @@ export default class Background extends React.PureComponent {
return this.offlineBackground();
}
// photo pack
const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
if (photoPack) {
const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)];
@@ -240,20 +227,17 @@ export default class Background extends React.PureComponent {
EventBus.on('refresh', (data) => {
if (data === 'background') {
const photoInfo = document.querySelector('.photoInformation');
const backgroundType = localStorage.getItem('backgroundType');
if (localStorage.getItem('background') === 'false') {
photoInfo.style.display = 'none';
return element.style.display = 'none';
}
photoInfo.style.display = 'block';
element.style.display = 'block';
if (this.state.type !== localStorage.getItem('backgroundType') || (this.state.type === 'api' && this.state.currentAPI !== localStorage.getItem('backgroundAPI'))) {
// todo: make this good
if (backgroundType !== this.state.type
|| (localStorage.getItem('backgroundAPI') !== this.state.currentAPI && backgroundType === 'api')
|| (backgroundType === 'custom' && localStorage.getItem('customBackground') !== this.state.url)
) {
element.classList.remove('fade-in');
this.setState({
url: '',
video: false,
photoInfo: {
hidden: true
}
@@ -261,7 +245,11 @@ export default class Background extends React.PureComponent {
return this.getBackground();
}
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
if (this.state.video === true) {
document.querySelector('#backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
} else {
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
}
}
});
@@ -284,7 +272,7 @@ export default class Background extends React.PureComponent {
};
return (
<video autoPlay muted={enabled('backgroundVideoMute')} loop={enabled('backgroundVideoLoop')} id='backgroundVideo'>
<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>
);
@@ -292,8 +280,9 @@ export default class Background extends React.PureComponent {
return (
<>
<div id='backgroundImage'/>
{(this.state.photoInfo.credit !== '') ? <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
<div style={{ 'WebkitFilter': `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)` }} id='backgroundImage'/>
{(this.state.photoInfo.credit !== '') ?
<PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
: null}
</>
);

2
src/components/widgets/background/PhotoInformation.jsx
View File

@@ -25,7 +25,7 @@ const downloadImage = async (info) => {
export default function PhotoInformation(props) {
const language = window.language.widgets.background;
if (props.info.hidden === true) {
if (props.info.hidden === true || !props.info.credit) {
return null;
}

8
src/components/widgets/background/scss/index.scss
View File

@@ -3,10 +3,10 @@
#backgroundImage {
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-attachment: fixed !important;
zoom: 100% !important;
}