feat: custom video background settings, more progress on quick links and some background fixes

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/background/Background.jsx

@@ -34,28 +34,6 @@ export default class Background extends React.PureComponent {
     });
   }
 
-  setBackground() {
-    // Brightness
-    let brightness = localStorage.getItem('brightness');
-    if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) {
-      brightness = 75;
-    }
-
-    if (this.state.url !== '') {
-      const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
-
-      document.querySelector('#backgroundImage').setAttribute(
-        'style',
-        `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
-      );
-    } else {
-      document.querySelector('#backgroundImage').setAttribute(
-        'style',
-        `${this.state.style}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
-      );
-    }
-  }
-
   offlineBackground() {
     const offlineImages = require('./offline_images.json');
 
@@ -78,6 +56,28 @@ export default class Background extends React.PureComponent {
     });
   }
 
+  setBackground() {
+    // Brightness
+    let brightness = localStorage.getItem('brightness');
+    if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) {
+      brightness = 75;
+    }
+
+    if (this.state.url !== '') {
+      const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url;
+
+      document.querySelector('#backgroundImage').setAttribute(
+        'style',
+        `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+      );
+    } else {
+      document.querySelector('#backgroundImage').setAttribute(
+        'style',
+        `${this.state.style}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);`
+      );
+    }
+  }
+
   // Main background getting function
   async getBackground() {
     if (localStorage.getItem('offlineMode') === 'true') {
@@ -140,7 +140,7 @@ export default class Background extends React.PureComponent {
           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 }] };
+            gradientSettings = { 'type': 'linear', 'angle': '180', 'gradient': [{ 'colour': customBackgroundColour, 'stop': 0 }] };
             localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
           }
         }
@@ -155,7 +155,7 @@ export default class Background extends React.PureComponent {
         const customBackground = localStorage.getItem('customBackground');
         if (customBackground !== '') {
           // video background
-          if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) { 
+          if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
             return this.setState({
               url: customBackground,
               video: true,
@@ -203,16 +203,32 @@ export default class Background extends React.PureComponent {
 
   // only set once we've got the info
   componentDidUpdate() {
+    if (this.state.video === true) {
+      return;
+    }
+
     this.setBackground();
   }
 
   render() {
+    if (this.state.video === true) {
+      const checkValue = (setting) => {
+        return (localStorage.getItem(setting) === 'true');
+      };
+
+      return (
+        <video autoPlay muted={checkValue('backgroundVideoMute')} loop={checkValue('backgroundVideoLoop')} id='backgroundVideo'>
+          <source src={this.state.url}/>
+        </video>
+      );
+    }
+
     return (
-      <React.Fragment>
+      <>
         <div id='backgroundImage'/>
         {(this.state.photoInfo.credit !== '') ? <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo}/>
         : null}
-      </React.Fragment>
+      </>
     );
   }
 }

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -42,7 +42,7 @@ export default class QuickLinks extends React.PureComponent {
       <div className='quicklinks-container'>
         {this.state.items.map((item) => (
           <Tooltip title={item.name} key={item.name}>
-            <a href={item.url}><img src={'https://s2.googleusercontent.com/s2/favicons?domain_url=' + item.url}/></a>
+            <a href={item.url}><img src={'https://s2.googleusercontent.com/s2/favicons?sz=64&domain_url=' + item.url} alt={item.name}/></a>
           </Tooltip>
         ))}
         <div className='quicklinks'>

src/components/widgets/quicklinks/scss/index.scss

@@ -27,7 +27,6 @@
     color: #636e72;
     opacity: 1;
   }
-
 }
 
 .quicklinks:hover .quicklinkscontainer {
@@ -72,4 +71,18 @@ textarea {
 
 .quicklinks-container > a, .quicklinks-container > .quicklinks > button {
   display: inline;
+}
+
+.quicklinks-container { 
+  img {
+    height: 32px;
+    width: auto;
+    transition: transform .2s;
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+  a {
+    margin: 5px;
+  }
 }