Cleanup, refactor and new features

src/components/widgets/background/Background.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import * as Constants from '../../../modules/constants';
+
+import './scss/index.scss';
+
+export default class Background extends React.PureComponent {
+  gradientStyleBuilder(gradientSettings) {
+    const { type, angle, gradient } = gradientSettings;
+    let style = `background: ${gradient[0].colour};`;
+    if (gradient.length > 1) {
+      // Note: Append the gradient for additional browser support.
+      const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
+      style += ` background: ${type}-gradient(${(type === 'linear' ? (`${angle}deg,`) : '')}${stepStyles})`;
+    }
+    return style;
+  }
+
+  setBackground(url, colour, credit) { // Sets the attributes of the background image
+    let gradientSettings = '';
+    try {
+      gradientSettings = JSON.parse(colour);
+    } catch (e) {
+      const hexColorRegex = /#[0-9a-fA-F]{6}/s;
+      if (hexColorRegex.exec(colour)) {
+        // 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));
+      }
+    }
+    const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url})`;
+    let brightness = localStorage.getItem('brightness');
+    if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) brightness = 75;
+
+    document.querySelector('#backgroundImage').setAttribute(
+      'style',
+      `${background}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+    );
+
+    if (credit === 'false' && document.querySelector('#credits')) document.querySelector('#credits').style.display = 'none'; // Hide the credit
+  }
+
+  setCredit(photographer, unsplash, url) {
+    let credit = photographer;
+    if (unsplash) credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
+    document.querySelector('#photographer').insertAdjacentHTML("beforeend", ` ${credit}`); // Append credit
+    document.getElementById('credit').textContent = credit;
+    document.getElementById('photographerCard').textContent = credit;
+  }
+
+  doOffline() { // Handles setting the background if the user is offline
+    const offlineImages = require('./offline_images.json');
+    const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
+    const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
+    const randomImage = offlineImages[photographer].photo[
+      Math.floor(Math.random() * offlineImages[photographer].photo.length)
+    ]; // Select a random image
+    const url = `../offline-images/${randomImage}.jpg`;
+
+    this.setBackground(url);
+    this.setCredit(photographer);
+
+    document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon
+  }
+
+  async determineMode() {
+    const offlineMode = localStorage.getItem('offlineMode');
+
+    const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
+    const customBackgroundColour = localStorage.getItem('customBackgroundColour');
+    const customBackground = localStorage.getItem('customBackground');
+    const favourited = JSON.parse(localStorage.getItem('favourite'));
+
+    if (favourited) {
+      if (offlineMode === 'true') return this.doOffline();
+      this.setBackground(favourited.url, null, 'true');
+      this.setCredit(favourited.credit);
+      document.getElementById('location').textContent = favourited.location;
+    } else if (photoPack) {
+      if (offlineMode === 'true') return this.doOffline();
+      const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)];
+      this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer);
+      this.setCredit(randomPhoto.photographer);
+      document.getElementById('location').textContent = randomPhoto.location;
+    }
+    else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false');
+    else if (customBackground !== '') {
+      if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
+        document.getElementById('backgroundImage').innerHTML = `
+        <video autoplay muted loop id='backgroundVideo'>
+            <source src='${customBackground}'/>
+        </video>`;
+      } else this.setBackground(customBackground, null, 'false'); // Local
+    } else { // Online
+      if (offlineMode === 'true') return this.doOffline();
+      try { // First we try and get an image from the API...
+        const enabled = localStorage.getItem('webp');
+        let requestURL;
+
+        switch (localStorage.getItem('backgroundAPI')) {
+          case 'unsplash': requestURL = `${Constants.UNSPLASH_URL}/getImage`; break;
+          default: // Defaults to Mue
+            if (localStorage.getItem('supportswebp') === 'true' && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`;
+            else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`;
+            break;
+        }
+
+        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
+        else { // Otherwise, set the background and credit from remote data
+          this.setBackground(data.file);
+          if (localStorage.getItem('backgroundAPI') === 'unsplash') return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
+          this.setCredit(data.photographer);
+          document.getElementById('camera').textContent = data.camera || 'N/A';
+          document.getElementById('resolution').textContent = data.resolution || 'N/A';
+        }
+
+        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();
+      }
+    }
+  }
+
+  componentDidMount() {
+    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() {
+    return <div id='backgroundImage'></div>;
+  }
+}