From 88efb6356aaa05f440e8850ad9472f232897d447 Mon Sep 17 00:00:00 2001 From: edenbun Date: Sat, 29 Aug 2020 16:31:31 +0100 Subject: [PATCH 1/4] Move repeated code into functions --- src/components/widgets/Background.jsx | 68 +++++++++++---------------- 1 file changed, 27 insertions(+), 41 deletions(-) diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 1baa7794..dfa5e1ef 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -3,6 +3,21 @@ import supportsWebP from 'supports-webp'; import * as Constants from '../../modules/constants'; export default class Background extends React.PureComponent { + setAttributes(url, colour) { // Sets the attributes of the background image + let background = colour ? `background-color: ${colour};` : `background-image: url(${url});` + + document.querySelector('#backgroundImage').setAttribute( + 'style', + `${background}; + -webkit-filter: blur(${localStorage.getItem('blur')}px); + -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` + ); + } + + setCredit(photographer) { + document.querySelector('#photographer').append(` ${photographer}`); // Append credit + } + doOffline() { // Handles setting the background if the user is offline const offlineImages = require('../../modules/offlineImages.json'); const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json @@ -10,16 +25,10 @@ export default class Background extends React.PureComponent { const randomImage = offlineImages[photographer].photo[ Math.floor(Math.random() * offlineImages[photographer].photo.length) ] // Select a random image + const url = `../offline-images/${randomImage}.jpeg`; - document.querySelector('#backgroundImage').setAttribute( - 'style', - `background-image: url(../offline-images/${randomImage}.jpeg); - -webkit-filter: blur(${localStorage.getItem('blur')}px); - -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` - ); // Set background and blur - - const creditElem = document.querySelector('#photographer'); - creditElem.append(` ${photographer} (Pexels)`); // Set the credit + this.setAttributes(url); + this.setCredit(photographer); document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon } @@ -30,41 +39,23 @@ export default class Background extends React.PureComponent { const photoPack = JSON.parse(localStorage.getItem('photo_packs')); if (photoPack) { let background = photoPack[Math.floor(Math.random() * photoPack.length)]; - - document.getElementById('credits').style.display = 'none'; // Hide the credit - return document.getElementById('backgroundImage').setAttribute( - 'style', - `background-image: url(${background.url.default}); - -webkit-filter: blur(${localStorage.getItem('blur')}px); - -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` - ); // Set background and blur etc + return this.setAttributes(background.url.default); } const colour = localStorage.getItem('customBackgroundColour'); if (colour) { document.getElementById('credits').style.display = 'none'; // Hide the credit - return document.getElementById('backgroundImage').setAttribute( - 'style', - `background-color: ${colour}; - -webkit-filter: blur(${localStorage.getItem('blur')}px); - -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` - ); // Set background and blur etc + return this.setAttributes(null, colour); } const custom = localStorage.getItem('customBackground'); - if (custom !== '') { + if (custom !== '') { // Local document.getElementById('credits').style.display = 'none'; // Hide the credit - - return document.getElementById('backgroundImage').setAttribute( - 'style', - `background-image: url(${custom}); - -webkit-filter: blur(${localStorage.getItem('blur')}px); - -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` - ); // Set background and blur etc - } else { + return this.setAttributes(custom); + } else { // Online try { // First we try and get an image from the API... - let requestURL; const enabled = localStorage.getItem('webp'); + let requestURL; let data; switch (localStorage.getItem('backgroundAPI')) { @@ -86,14 +77,9 @@ export default class Background extends React.PureComponent { if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local images - document.getElementById('backgroundImage').setAttribute( - 'style', - `background-image: url(${data.file}); - -webkit-filter: blur(${localStorage.getItem('blur')}px); - -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` - ); // Set background and blur etc - const creditElem = document.querySelector('#photographer'); - creditElem.append(` ${data.photographer}`); // Set the credit + this.setAttributes(data.file); + this.setCredit(data.photographer); + if (data.location.replace(/[null]+/g, '') === ' ') return document.getElementById('backgroundCredits').style.display = 'none'; document.getElementById('location').innerText = `${data.location.replace('null', '')}`; // Set the location tooltip } catch (e) { // ..and if that fails we load one locally From 0a670de8f1252aba54e484dccb4ff36a47777ff5 Mon Sep 17 00:00:00 2001 From: edenbun Date: Sat, 29 Aug 2020 17:22:49 +0100 Subject: [PATCH 2/4] Improve readability --- src/components/widgets/Background.jsx | 66 +++++++++++++-------------- 1 file changed, 31 insertions(+), 35 deletions(-) diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index dfa5e1ef..73ec0498 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -3,7 +3,7 @@ import supportsWebP from 'supports-webp'; import * as Constants from '../../modules/constants'; export default class Background extends React.PureComponent { - setAttributes(url, colour) { // Sets the attributes of the background image + setBackground(url, colour) { // Sets the attributes of the background image let background = colour ? `background-color: ${colour};` : `background-image: url(${url});` document.querySelector('#backgroundImage').setAttribute( @@ -27,60 +27,56 @@ export default class Background extends React.PureComponent { ] // Select a random image const url = `../offline-images/${randomImage}.jpeg`; - this.setAttributes(url); + this.setBackground(url); this.setCredit(photographer); document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon } - async setBackground() { + async determineMode() { if (localStorage.getItem('offlineMode') === 'true') return this.doOffline(); const photoPack = JSON.parse(localStorage.getItem('photo_packs')); + const customBackgroundColour = localStorage.getItem('customBackgroundColour'); + const customBackground = localStorage.getItem('customBackground'); + if (photoPack) { - let background = photoPack[Math.floor(Math.random() * photoPack.length)]; - return this.setAttributes(background.url.default); - } - - const colour = localStorage.getItem('customBackgroundColour'); - if (colour) { - document.getElementById('credits').style.display = 'none'; // Hide the credit - return this.setAttributes(null, colour); - } - - const custom = localStorage.getItem('customBackground'); - if (custom !== '') { // Local - document.getElementById('credits').style.display = 'none'; // Hide the credit - return this.setAttributes(custom); + const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)]; + this.setBackground(randomPhoto.url.default); + } else if (customBackgroundColour) { + document.querySelector('#credits').style.display = 'none'; // Hide the credit + this.setBackground(null, customBackgroundColour); + } else if (customBackground !== '') { // Local + document.querySelector('#credits').style.display = 'none'; // Hide the credit + this.setBackground(customBackground); } else { // Online try { // First we try and get an image from the API... const enabled = localStorage.getItem('webp'); let requestURL; - let data; switch (localStorage.getItem('backgroundAPI')) { - case 'mue': - if (await supportsWebP && enabled === 'true') requestURL = Constants.API_URL + '/getImage?webp=true'; - else requestURL = Constants.API_URL + '/getImage?category=Outdoors'; - break; case 'unsplash': requestURL = 'https://unsplash.muetab.xyz/getImage'; break; - default: - if (await supportsWebP && enabled === 'true') requestURL = Constants.API_URL +'/getImage?webp=true'; - else requestURL = Constants.API_URL + '/getImage?category=Outdoors'; + default: // Defaults to Mue + if (await supportsWebP && enabled === 'true') { + requestURL = `${Constants.API_URL}/getImage?webp=true`; + } else { + requestURL = `${Constants.API_URL}/getImage?category=Outdoors`; + } break; } - data = await fetch(requestURL); - data = await data.json(); + let data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL - if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local images + if (data.statusCode === 429) { + this.doOffline(); // If we hit the rate limit, fallback to local images + } else { // Otherwise, set the background and credit from remote data + this.setBackground(data.file); + this.setCredit(data.photographer); + } - this.setAttributes(data.file); - this.setCredit(data.photographer); - - if (data.location.replace(/[null]+/g, '') === ' ') return document.getElementById('backgroundCredits').style.display = 'none'; + if (data.location.replace(/[null]+/g, '') === ' ') return document.querySelector('#backgroundCredits').style.display = 'none'; document.getElementById('location').innerText = `${data.location.replace('null', '')}`; // Set the location tooltip } catch (e) { // ..and if that fails we load one locally this.doOffline(); @@ -89,9 +85,9 @@ export default class Background extends React.PureComponent { } componentDidMount() { - if (localStorage.getItem('background') === 'false') return document.getElementById('credits').style.display = 'none'; // Hide the credit - if (localStorage.getItem('animations') === 'true') document.getElementById('backgroundImage').classList.add('fade-in'); - this.setBackground(); + if (localStorage.getItem('background') === 'false') return document.querySelector('#credits').style.display = 'none'; // Hide the credit + if (localStorage.getItem('animations') === 'true') document.querySelector('#backgroundImage').classList.add('fade-in'); + this.determineMode(); } render() { From b6f74d4305e4d1814545d46718a90bb4ac7695a6 Mon Sep 17 00:00:00 2001 From: edenbun Date: Sat, 29 Aug 2020 17:27:16 +0100 Subject: [PATCH 3/4] Switch a few stray lets to const --- src/components/widgets/Background.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 73ec0498..605ae3bc 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -4,7 +4,7 @@ import * as Constants from '../../modules/constants'; export default class Background extends React.PureComponent { setBackground(url, colour) { // Sets the attributes of the background image - let background = colour ? `background-color: ${colour};` : `background-image: url(${url});` + const background = colour ? `background-color: ${colour};` : `background-image: url(${url});` document.querySelector('#backgroundImage').setAttribute( 'style', @@ -67,7 +67,7 @@ export default class Background extends React.PureComponent { break; } - let data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL + const data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL if (data.statusCode === 429) { this.doOffline(); // If we hit the rate limit, fallback to local images From 320ae1c922b2235358a98b2b913ee6d182caeb2d Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 29 Aug 2020 17:47:34 +0100 Subject: [PATCH 4/4] Various changes --- src/components/widgets/Background.jsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 605ae3bc..523a615d 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -3,7 +3,7 @@ import supportsWebP from 'supports-webp'; import * as Constants from '../../modules/constants'; export default class Background extends React.PureComponent { - setBackground(url, colour) { // Sets the attributes of the background image + setBackground(url, colour, credit) { // Sets the attributes of the background image const background = colour ? `background-color: ${colour};` : `background-image: url(${url});` document.querySelector('#backgroundImage').setAttribute( @@ -12,6 +12,8 @@ export default class Background extends React.PureComponent { -webkit-filter: blur(${localStorage.getItem('blur')}px); -webkit-filter: brightness(${localStorage.getItem('brightness')}%);` ); + + if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit } setCredit(photographer) { @@ -44,11 +46,9 @@ export default class Background extends React.PureComponent { const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)]; this.setBackground(randomPhoto.url.default); } else if (customBackgroundColour) { - document.querySelector('#credits').style.display = 'none'; // Hide the credit - this.setBackground(null, customBackgroundColour); + this.setBackground(null, customBackgroundColour, 'false'); } else if (customBackground !== '') { // Local - document.querySelector('#credits').style.display = 'none'; // Hide the credit - this.setBackground(customBackground); + this.setBackground(customBackground, null, 'false'); } else { // Online try { // First we try and get an image from the API... const enabled = localStorage.getItem('webp'); @@ -56,14 +56,11 @@ export default class Background extends React.PureComponent { switch (localStorage.getItem('backgroundAPI')) { case 'unsplash': - requestURL = 'https://unsplash.muetab.xyz/getImage'; + requestURL = `${Constants.UNSPLASH_URL}/getImage`; break; default: // Defaults to Mue - if (await supportsWebP && enabled === 'true') { - requestURL = `${Constants.API_URL}/getImage?webp=true`; - } else { - requestURL = `${Constants.API_URL}/getImage?category=Outdoors`; - } + if (await supportsWebP && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`; + else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`; break; } @@ -93,4 +90,4 @@ export default class Background extends React.PureComponent { render() { return
; } -} \ No newline at end of file +}