mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-10 22:14:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve background settings

Browse Source
This commit is contained in:
David Ralph
2021-03-24 12:02:30 +00:00
parent 214d06927e
commit 2956dabc8b
5 changed files with 232 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/modals/main/settings/sections/Time.jsx
View File

@@ -95,17 +95,17 @@ export default class TimeSettings extends React.PureComponent {
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
<Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
<option value='long'>Long</option>
<option value='short'>Short</option>
<option value='long'>Long</option>
<option value='short'>Short</option>
</Dropdown>
<br/>
{dateSettings}

109
src/components/modals/main/settings/sections/background/Background.jsx Normal file
View File

@@ -0,0 +1,109 @@
import React from 'react';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import FileUpload from '../../FileUpload';
import Slider from '../../Slider';
import Switch from '../../Switch';
import ColourSettings from './Colour';
import { toast } from 'react-toastify';
export default class BackgroundSettings extends React.PureComponent {
constructor() {
super();
this.state = {
customBackground: localStorage.getItem('customBackground') || '',
backgroundType: localStorage.getItem('backgroundType') || 'api'
};
this.language = window.language.modals.main.settings;
}
resetItem(key) {
switch (key) {
case 'customBackground':
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
break;
default:
toast('resetItem requires a key!');
}
toast(this.language.toasts.reset);
}
fileUpload(e) {
localStorage.setItem('customBackground', e.target.result);
this.setState({
customBackground: e.target.result
});
}
render() {
const { background } = this.language.sections;
let backgroundSettings;
const APISettings = (
<>
<br/>
<Dropdown label={background.source.api} name='backgroundAPI'>
<option value='mue'>Mue</option>
<option value='unsplash'>Unsplash</option>
</Dropdown>
</>
);
const customSettings = (
<>
<h3>{background.source.title}</h3>
<ul>
<p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
</>
);
const colourSettings = <ColourSettings/>;
switch (this.state.backgroundType) {
case 'custom': backgroundSettings = customSettings; break;
case 'colour': backgroundSettings = colourSettings; break;
// API
default: backgroundSettings = APISettings; break;
}
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} />
<h3>{background.buttons.title}</h3>
<Checkbox name='view' text={background.buttons.view} />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
<h3>{background.effects.title}</h3>
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
<br/><br/>
<Dropdown label='Type' name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
<option value='api'>API</option>
<option value='custom'>Custom Image</option>
<option value='colour'>Custom Colour/Gradient</option>
</Dropdown>
<br/>
{backgroundSettings}
</>
);
}
}

69
src/components/modals/main/settings/sections/Background.jsx → src/components/modals/main/settings/sections/background/Colour.jsx
View File

@@ -1,27 +1,21 @@
import React from 'react';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import FileUpload from '../FileUpload';
import Slider from '../Slider';
import Switch from '../Switch';
import { ColorPicker } from 'react-color-gradient-picker';
import hexToRgb from '../../../../../modules/helpers/background/hexToRgb';
import rgbToHex from '../../../../../modules/helpers/background/rgbToHex';
import hexToRgb from '../../../../../../modules/helpers/background/hexToRgb';
import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
import { toast } from 'react-toastify';
import 'react-color-gradient-picker/dist/index.css';
export default class BackgroundSettings extends React.PureComponent {
export default class ColourSettings extends React.PureComponent {
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };
GradientPickerInitalState = undefined;
constructor() {
super();
this.state = {
customBackground: localStorage.getItem('customBackground') || '',
gradientSettings: this.DefaultGradientSettings
};
this.language = window.language.modals.main.settings;
@@ -36,13 +30,6 @@ export default class BackgroundSettings extends React.PureComponent {
});
break;
case 'customBackground':
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
break;
default:
toast('resetItem requires a key!');
}
@@ -88,6 +75,12 @@ export default class BackgroundSettings extends React.PureComponent {
});
}
componentDidUpdate() {
if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
}
onGradientChange = (event, index) => {
const newValue = event.target.value;
const name = event.target.name;
@@ -144,19 +137,6 @@ export default class BackgroundSettings extends React.PureComponent {
});
};
fileUpload(e) {
localStorage.setItem('customBackground', e.target.result);
this.setState({
customBackground: e.target.result
});
}
componentDidUpdate() {
if (document.getElementById('customBackgroundHex').value !== this.language.sections.background.source.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
}
render() {
const { background } = this.language.sections;
@@ -201,31 +181,6 @@ export default class BackgroundSettings extends React.PureComponent {
return (
<>
<h2>{background.title}</h2>
<Switch name='background' text={this.language.enabled} />
<h3>{background.buttons.title}</h3>
<Checkbox name='view' text={background.buttons.view} />
<Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
<h3>{background.effects.title}</h3>
<Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
<Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
<h3>{background.source.title}</h3>
<Dropdown label={background.source.api} name='backgroundAPI'>
<option value='mue'>Mue</option>
<option value='unsplash'>Unsplash</option>
</Dropdown>
{/* <Text title={background.source.custom_url} name='customBackground' /> */ }
<ul>
<p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
<ul>
<p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.language.buttons.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
@@ -234,4 +189,4 @@ export default class BackgroundSettings extends React.PureComponent {
</>
);
}
}
}

2
src/components/modals/main/tabs/Settings.jsx
View File

@@ -7,7 +7,7 @@ import Greeting from '../settings/sections/Greeting';
import Time from '../settings/sections/Time';
import Quote from '../settings/sections/Quote';
import Appearance from '../settings/sections/Appearance';
import Background from '../settings/sections/Background';
import Background from '../settings/sections/background/Background';
import Advanced from '../settings/sections/Advanced';
import Changelog from '../settings/sections/Changelog';
import Order from '../settings/sections/Order';

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

@@ -80,106 +80,115 @@ export default class Background extends React.PureComponent {
// Main background getting function
async getBackground() {
if (localStorage.getItem('offlineMode') === 'true') {
return this.offlineBackground();
}
// favourite button
const favourited = JSON.parse(localStorage.getItem('favourite'));
if (favourited) {
return this.setState({
url: favourited.url,
photoInfo: {
credit: favourited.credit,
location: favourited.location
}
});
}
// background colour
const customBackgroundColour = localStorage.getItem('customBackgroundColour');
if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
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": colour, "stop": 0 }] };
localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
}
}
if (typeof gradientSettings === 'object' && gradientSettings !== null) {
return this.gradientStyleBuilder(gradientSettings);
}
}
// custom user background
const customBackground = localStorage.getItem('customBackground');
if (customBackground !== '') {
// video background
if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
return this.setState({
url: customBackground,
video: true,
photoInfo: {
hidden: true
}
});
// normal background
} else {
return this.setState({
url: customBackground,
photoInfo: {
hidden: true
}
});
}
}
// photo pack
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,
photoInfo: {
credit: randomPhoto.photographer
}
});
}
// API background
const backgroundAPI = localStorage.getItem('backgroundAPI');
let requestURL, data;
switch (backgroundAPI) {
case 'unsplash':
requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
break;
// Defaults to Mue
default:
requestURL = `${window.constants.API_URL}/getImage?category=Outdoors`;
break;
}
try {
data = await (await fetch(requestURL)).json();
} catch (e) {
// if requesting to the API fails, we get an offline image
return this.offlineBackground();
}
this.setState({
url: data.file,
photoInfo: {
credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ' on Unsplash',
location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
camera: data.camera || 'N/A',
resolution: data.resolution || 'N/A'
switch (localStorage.getItem('backgroundType')) {
case 'api':
// favourite button
const favourited = JSON.parse(localStorage.getItem('favourite'));
if (favourited) {
return this.setState({
url: favourited.url,
photoInfo: {
credit: favourited.credit,
location: favourited.location
}
});
}
// API background
const backgroundAPI = localStorage.getItem('backgroundAPI');
let requestURL, data;
switch (backgroundAPI) {
case 'unsplash':
requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
break;
// Defaults to Mue
default:
requestURL = `${window.constants.API_URL}/getImage?category=Outdoors`;
break;
}
try {
data = await (await fetch(requestURL)).json();
} catch (e) {
// if requesting to the API fails, we get an offline image
return this.offlineBackground();
}
this.setState({
url: data.file,
photoInfo: {
credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ' on Unsplash',
location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
camera: data.camera || 'N/A',
resolution: data.resolution || 'N/A'
}
});
break;
case 'colour':
// background colour
const customBackgroundColour = localStorage.getItem('customBackgroundColour');
if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
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": colour, "stop": 0 }] };
localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
}
}
if (typeof gradientSettings === 'object' && gradientSettings !== null) {
return this.gradientStyleBuilder(gradientSettings);
}
}
break;
case 'custom':
// custom user background
const customBackground = localStorage.getItem('customBackground');
if (customBackground !== '') {
// video background
if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
return this.setState({
url: customBackground,
video: true,
photoInfo: {
hidden: true
}
});
// normal background
} else {
return this.setState({
url: customBackground,
photoInfo: {
hidden: true
}
});
}
}
break;
case 'photo_pack':
// photo pack
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,
photoInfo: {
credit: randomPhoto.photographer
}
});
}
}
});
}
componentDidMount() {