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

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

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    extends: 'react-app',
+    parser: '@babel/eslint-parser'
+}

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
+    "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/preset-env": "^7.13.12",
@@ -36,6 +37,9 @@
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^8.1.1",
     "css-loader": "^5.2.0",
+    "eslint": "^7.23.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-webpack-plugin": "^2.5.3",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.4.0",
     "sass": "^1.32.8",
@@ -51,9 +55,6 @@
     "chrome": "cp manifest/chrome.json build/manifest.json",
     "firefox": "cp manifest/firefox.json build/manifest.json"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/modals/main/marketplace/sections/Added.jsx

@@ -28,7 +28,7 @@ export default class Added extends React.PureComponent {
         icon: ''
       },
       button: ''
-    }
+    };
     this.buttons = {
       uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
     }

src/components/modals/main/settings/sections/background/Background.jsx

@@ -21,19 +21,11 @@ export default class BackgroundSettings extends React.PureComponent {
     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!');
-    }
-
+  resetCustom() {
+    localStorage.setItem('customBackground', '');
+    this.setState({
+      customBackground: ''
+    });
     toast(this.language.toasts.reset);
   }
 
@@ -44,6 +36,25 @@ export default class BackgroundSettings extends React.PureComponent {
     });
   }
 
+  videoCustomSettings = () => {
+    const customBackground = this.state.customBackground;
+
+    if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
+      return (
+        <>
+          <Checkbox name='backgroundVideoLoop' text='Loop Video'/>
+          <Checkbox name='backgroundVideoMute' text='Mute Video'/>
+        </>
+      )
+    } else {
+      return null;
+    }
+  }
+
+  componentDidUpdate() {
+    localStorage.setItem('customBackground', this.state.customBackground);
+  }
+
   render() {
     const { background } = this.language.sections;
 
@@ -78,22 +89,21 @@ export default class BackgroundSettings extends React.PureComponent {
     const customSettings = (
       <>
         <ul>
-          <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
+          <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
         </ul>
+        {this.videoCustomSettings()}
         <ul>
-          <p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
+          <p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetCustom()}>{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;
+      case 'colour': backgroundSettings = <ColourSettings/>; break;
       // API
       default: backgroundSettings = APISettings; break;
     }

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;
+  }
 }

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
   entry: path.resolve(__dirname, './src/index.js'),
@@ -69,6 +70,7 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: '[name].css',
       chunkFilename: '[id].css'
-    })
+    }),
+    new ESLintPlugin()
   ]
 };