fix: background filters, addons ui, photoinformation

This commit is contained in:
David Ralph 2021-11-12 18:34:03 +00:00
parent a356c8fe61
commit e786ad654c
5 changed files with 14 additions and 15 deletions

View File

@ -63,6 +63,5 @@ button.round {
}
.updateCheck {
margin-left: 300px;
position: absolute;
margin-top: 15px;
}

View File

@ -22,17 +22,12 @@ export default class BackgroundSettings extends PureComponent {
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
backgroundCategories: [this.getMessage('modals.main.loading')],
backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue'
backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
marketplaceEnabled: localStorage.getItem('photo_packs')
};
this.controller = new AbortController();
}
marketplaceType = () => {
if (localStorage.getItem('photo_packs')) {
return <option value='photo_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option>;
}
}
async getBackgroundCategories() {
const data = await (await fetch(variables.constants.API_URL + '/images/categories', { signal: this.controller.signal })).json();
@ -134,7 +129,7 @@ export default class BackgroundSettings extends PureComponent {
<h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
<Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
{this.marketplaceType()}
{this.state.marketplaceEnabled ? <option value='photo_pack'>{this.getMessage('modals.main.navbar.marketplace')}</option> : null}
<option value='api'>{getMessage('modals.main.settings.sections.background.type.api')}</option>
<option value='custom'>{getMessage('modals.main.settings.sections.background.type.custom_image')}</option>
<option value='colour'>{getMessage('modals.main.settings.sections.background.type.custom_colour')}</option>
@ -151,7 +146,7 @@ export default class BackgroundSettings extends PureComponent {
</>
: null}
{this.state.backgroundType === 'api' || this.state.backgroundType === 'custom' || this.state.backgroundType === 'marketplace' ?
{this.state.backgroundType === 'api' || this.state.backgroundType === 'custom' || this.state.marketplaceEnabled ?
<>
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />

View File

@ -309,12 +309,13 @@ export default class Background extends PureComponent {
}
// background effects so we don't get another image again
const backgroundFilter = localStorage.getItem('backgroundFilter');
const backgroundFilterSetting = localStorage.getItem('backgroundFilter');
const backgroundFilter = backgroundFilterSetting && backgroundFilterSetting !== 'none';
if (this.state.video === true) {
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
document.getElementById('backgroundVideo').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilterSetting + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
} else {
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilterSetting + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}`;
}
}

View File

@ -74,7 +74,7 @@ export default function PhotoInformation({ info, url, api }) {
);
}
const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL;
const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL && api;
const downloadBackground = () => {
if (downloadEnabled) {
downloadImage(info);

View File

@ -73,6 +73,10 @@
font-size: 2em;
}
span {
user-select: text;
}
h1,
.MuiSvgIcon-root {
user-select: none;