fix: various widget fixes and cleanup etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
2026-07-13 20:13:47 +02:00 · 2021-11-11 20:43:33 +00:00
parent 4a6f93e701
commit c627599590
20 changed files with 203 additions and 97 deletions
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -6,7 +6,7 @@ import PhotoInformation from './PhotoInformation';

 import EventBus from 'modules/helpers/eventbus';
 import Interval from 'modules/helpers/interval';
-import { videoCheck, offlineBackground, gradientStyleBuilder, randomColourStyleBuilder } from 'modules/helpers/background/widget';
+import { videoCheck, offlineBackground, getGradient, randomColourStyleBuilder } from 'modules/helpers/background/widget';

 import './scss/index.scss';

@@ -81,17 +81,29 @@ export default class Background extends PureComponent {
      offline = true;
    }

-    const setFavourited = (favourited) => {
+    const setFavourited = ({ type, url, credit, location, camera }) => {
+      console.log(type)
+      if (type === 'random_colour' || type === 'random_gradient') { 
+        return this.setState({ 
+          type: 'colour',
+          style: `background:${url}`
+        });
+      }
      this.setState({
-        url: favourited.url,
+        url,
        photoInfo: {
-          credit: favourited.credit,
-          location: favourited.location,
-          camera: favourited.camera
+          credit,
+          location,
+          camera
        }
      });
    }

+    const favourited = JSON.parse(localStorage.getItem('favourite'));
+    if (favourited) {
+      return setFavourited(favourited);
+    }
+
    const type = localStorage.getItem('backgroundType');
    switch (type) {
      case 'api':
@@ -99,21 +111,16 @@ export default class Background extends PureComponent {
          return this.setState(offlineBackground());
        }

-        const favourited = JSON.parse(localStorage.getItem('favourite'));
-        if (favourited) {
-          return setFavourited(favourited);
-        }
-
        // API background
        const backgroundAPI = localStorage.getItem('backgroundAPI');
        const apiCategory = localStorage.getItem('apiCategory');
        const apiQuality = localStorage.getItem('apiQuality');
-        const photoMap = localStorage.getItem('photoMap');
+        const photoMap = (localStorage.getItem('photoMap') === 'true');

        let requestURL, data;
        switch (backgroundAPI) {
          case 'unsplash':
-            requestURL = `${variables.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}&map=${(photoMap === 'true')}`;
+            requestURL = `${variables.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}&map=${photoMap}`;
            break;
          case 'pexels':
            requestURL = `${variables.constants.PROXY_URL}/images/pexels?quality=${apiQuality}`;
@@ -131,13 +138,9 @@ export default class Background extends PureComponent {
          return this.setState(offlineBackground());
        }

-        let credit = data.photographer;
        let photoURL, photographerURL;

-        if (backgroundAPI === 'unsplash') {
-          photoURL = data.photo_page;
-          photographerURL = data.photographer_page;
-        } else if (backgroundAPI === 'pexels') {
+        if (backgroundAPI === 'unsplash' || backgroundAPI === 'pexels') {
          photoURL = data.photo_page;
          photographerURL = data.photographer_page;
        }
@@ -148,12 +151,12 @@ export default class Background extends PureComponent {
          currentAPI: backgroundAPI,
          photoInfo: {
            hidden: false,
-            credit: credit,
+            credit: data.photographer,
            location: data.location,
            camera: data.camera,
            url: data.file,
-            photographerURL: photographerURL,
-            photoURL: photoURL,
+            photographerURL,
+            photoURL,
            latitude: data.latitude || null,
            longitude: data.longitude || null,
            // location map token from mapbox
@@ -164,32 +167,19 @@ export default class Background extends PureComponent {
        this.setState(object);

        localStorage.setItem('currentBackground', JSON.stringify(object));
-      break;
+        break;

      case 'colour':
-        const customBackgroundColour = localStorage.getItem('customBackgroundColour') || {'angle':'180','gradient':[{'colour':'#ffb032','stop':0}],'type':'linear'};
-
-        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': customBackgroundColour, 'stop': 0 }] };
-            localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
-          }
+        const gradient = getGradient();
+        if (gradient) {
+          this.setState(gradient);
        }
-
-        if (typeof gradientSettings === 'object' && gradientSettings !== null) {
-          return this.setState(gradientStyleBuilder(gradientSettings));
-        }
-      break;
+        break;

      case 'random_colour':
      case 'random_gradient':
        this.setState(randomColourStyleBuilder(type));
-      break;
+        break;

      case 'custom':
        let customBackground;
@@ -223,7 +213,7 @@ export default class Background extends PureComponent {

          localStorage.setItem('currentBackground', JSON.stringify(object));
        }
-      break;
+        break;

      case 'photo_pack':
        if (offline) {
@@ -248,7 +238,7 @@ export default class Background extends PureComponent {
            }
          });
        }
-      break;
+        break;
      default:
        break;
    }
@@ -314,10 +304,8 @@ export default class Background extends PureComponent {
          if (backgroundType !== this.state.type || (this.state.type === 'api' && localStorage.getItem('backgroundAPI') !== this.state.currentAPI) || (this.state.type === 'custom' && localStorage.getItem('customBackground') !== this.state.url)) {
            return refresh();
          }
-        } else {
-          if (backgroundType !== this.state.type) {
-            return refresh();
-          }
+        } else if (backgroundType !== this.state.type) {
+          return refresh();
        }

        // background effects so we don't get another image again
@@ -342,7 +330,8 @@ export default class Background extends PureComponent {

    const interval = localStorage.getItem('backgroundchange');
    if (interval && interval !== 'refresh') {
-      const type = localStorage.getItem('backgroundType')
+      const type = localStorage.getItem('backgroundType');
+
      if (type === 'api' || type === 'custom') {
        Interval(() => {
          try {
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -26,24 +26,45 @@ export default class Favourite extends PureComponent {
      });
      variables.stats.postEvent('feature', 'Background favourite');
    } else {
-      const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
+      const type = localStorage.getItem('backgroundType');
+      switch (type) {
+        case 'colour':
+          return;
+        case 'random_colour':
+        case 'random_gradient':
+          localStorage.setItem('favourite', JSON.stringify({
+            type: localStorage.getItem('backgroundType'),
+            url: document.getElementById('backgroundImage').style.background
+          }));
+          break;
+        default:
+          const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');

-      if (!url) {
-        return;
+          if (!url) {
+            return;
+          }
+
+          if (type === 'custom') {
+            localStorage.setItem('favourite', JSON.stringify({
+              type,
+              url    
+            }));
+          } else {
+            // photo information now hides information if it isn't sent, unless if photoinformation hover is hidden
+            const location = document.getElementById('infoLocation');
+            const camera = document.getElementById('infoCamera');
+    
+            localStorage.setItem('favourite', JSON.stringify({
+              type,
+              url, 
+              credit: document.getElementById('credit').textContent || '',
+              location: location ? location.innerText : 'N/A',
+              camera: camera ? camera.innerText : 'N/A',
+              resolution: document.getElementById('infoResolution').textContent || '',          
+            }));
+          }
      }

-      // photo information now hides information if it isn't sent, unless if photoinformation hover is hidden
-      const location = document.getElementById('infoLocation');
-      const camera = document.getElementById('infoCamera');
-
-      localStorage.setItem('favourite', JSON.stringify({ 
-        url: url, 
-        credit: document.getElementById('credit').textContent,
-        location: location ? location.innerText : 'N/A',
-        camera: camera ? camera.innerText : 'N/A',
-        resolution: document.getElementById('infoResolution').textContent
-      }));
-
      this.setState({
        favourited: this.buttons.favourited
      });
@@ -53,7 +74,7 @@ export default class Favourite extends PureComponent {

  render() {
    const backgroundType = localStorage.getItem('backgroundType');
-    if (backgroundType === 'colour' || backgroundType === 'custom') {
+    if (backgroundType === 'colour') {
      return null;
    }

--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -16,7 +16,7 @@ export default class Maximise extends PureComponent {
  setAttribute(blur, brightness, filter) {
    // don't attempt to modify the background if it isn't an image
    const backgroundType = localStorage.getItem('backgroundType');
-    if (backgroundType === 'colour') {
+    if (backgroundType === 'colour' || backgroundType === 'random_colour' || backgroundType === 'random_gradient') {
      return;
    }

--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -96,10 +96,21 @@ export default class QuickLinks extends PureComponent {

  // widget zoom
  setZoom(element) {
+    const zoom = localStorage.getItem('zoomQuicklinks') || 100;
+    if (localStorage.getItem('quicklinksText')) {
+      const links = element.getElementsByTagName('a');
+
+      for (const link of links) {
+        link.style.fontSize = `${0.87 * Number(zoom / 100)}em`;
+      }
+
+      return;
+    }
+
    const images = element.getElementsByTagName('img');

    for (const img of images) {
-      img.style.height = `${0.87 * Number((localStorage.getItem('zoomQuicklinks') || 100) / 100)}em`;
+      img.style.height = `${0.87 * Number(zoom / 100)}em`;
    }
  }

@@ -153,10 +164,7 @@ export default class QuickLinks extends PureComponent {
      }

      const url = useProxy ? 'https://icons.duckduckgo.com/ip2/' : 'https://www.google.com/s2/favicons?sz=32&domain=';
-      let img = url + item.url.replace('https://', '').replace('http://', '') + (useProxy ? '.ico' : '');
-      if (item.icon) {
-        img = item.icon;
-      }
+      const img = item.icon || url + item.url.replace('https://', '').replace('http://', '') + (useProxy ? '.ico' : '');

      const link = (
        <a key={item.key} onContextMenu={(e) => this.deleteLink(item.key, e)} href={item.url} target={target} rel={rel} draggable={false}>
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -172,31 +172,30 @@ export default class Search extends PureComponent {
    const customText = variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.search.custom').split(' ')[0];

    return (
-      <form onSubmit={this.searchButton} className='searchBar'>
-        {localStorage.getItem('searchDropdown') === 'true' ? 
-        <div className='searchDropdown'>
-          <span className='searchSelected' onClick={() => this.toggleDropdown()}>{this.state.currentSearch}</span>
-          <div style={{ visibility: this.state.searchDropdown }}>
+      <>
+        <div>
+          {localStorage.getItem('searchDropdown') === 'true' ? 
+          <div className='searchDropdown' style={{ visibility: this.state.searchDropdown }}>
            {searchEngines.map(({ name }) => {
              if (name === this.state.currentSearch) {
-                return null;
+                 return null;
              }

              return (
-                <Fragment key={name}>
-                  <span className='searchDropdownList' onClick={() => this.setSearch(name)}>{name}</span>
-                  <br/>
-                </Fragment>
+                <span className='searchDropdownList' onClick={() => this.setSearch(name)}>{name}</span>
              );
            })}
            {this.state.currentSearch !== customText ? <span className='searchDropdownList' onClick={() => this.setSearch(customText, 'custom')}>{customText}</span> : null}
-          </div>
-        </div> : null}
-        {this.state.microphone}
-        <SearchIcon onClick={this.searchButton}/>
-        <AutocompleteInput placeholder={variables.language.getMessage(variables.languagecode, 'widgets.search')} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
-        {variables.keybinds.focusSearch && variables.keybinds.focusSearch !== '' ? <Hotkeys keyName={variables.keybinds.focusSearch} onKeyDown={() => document.getElementById('searchtext').focus()}/> : null}
-      </form>
+          </div>: null}
+        </div>
+        <form onSubmit={this.searchButton} className='searchBar'>
+        {localStorage.getItem('searchDropdown') === 'true' ? <span className="dropdown-span" onClick={() => this.toggleDropdown()}>{this.state.currentSearch}</span> : ''}
+          {this.state.microphone}
+          <SearchIcon onClick={this.searchButton}/>
+          <AutocompleteInput placeholder={variables.language.getMessage(variables.languagecode, 'widgets.search')} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
+          {variables.keybinds.focusSearch && variables.keybinds.focusSearch !== '' ? <Hotkeys keyName={variables.keybinds.focusSearch} onKeyDown={() => document.getElementById('searchtext').focus()}/> : null}
+        </form>
+      </>
    );
  }
 }
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -50,10 +50,22 @@
 }

 .searchDropdown {
-  display: inline-block;
+  display: block;
  margin-top: 10px;
  font-size: calc(5px + 1.2vmin);
  user-select: none;
+  position: absolute;
+  top: 2.5em;
+  left: 1em;
+  text-align: left;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 20px;
+  padding: 10px;
+  width: 250px;
+
+  span {
+    display: block;
+  }

  .searchDropdownList, .searchSelected {
    cursor: pointer;
@@ -87,3 +99,17 @@
    }
  }
 }
+
+.dropdown-span {
+  font-size: calc(5px + 1.2vmin);
+  display: inline-block;
+  padding-top: 8px;
+  vertical-align: top;
+  margin-right: 30px;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    color: rgb(214, 214, 214);
+  }
+}