feat: don't show image again

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

@@ -67,7 +67,7 @@ export default class BackgroundSettings extends PureComponent {
       <SettingsItem
         title={variables.getMessage('modals.main.settings.sections.background.interval.title')}
         subtitle={variables.getMessage(
-          'modals.mani.settings.sections.background.intervanl.subtitle',
+          'modals.main.settings.sections.background.interval.subtitle',
         )}
         final={
           localStorage.getItem('photo_packs') &&
@@ -139,7 +139,7 @@ export default class BackgroundSettings extends PureComponent {
                 ))}
                     </Dropdown>*/}
               <ChipSelect
-                label={variables.getMessage('modals.main.settings.sections.background.category')}
+                label={variables.getMessage('modals.main.settings.sections.background.categories')}
                 options={this.state.backgroundCategories}
                 name="apiCategories"
               ></ChipSelect>

src/components/widgets/background/Background.jsx

@@ -146,9 +146,9 @@ export default class Background extends PureComponent {
     let apiCategories;
 
     try {
-      let apiCategories = JSON.parse(localStorage.getItem('apiCategories'))
+      apiCategories = JSON.parse(localStorage.getItem('apiCategories'))
     } catch (error) {
-      let apiCategories = localStorage.getItem('apiCategories')
+      apiCategories = localStorage.getItem('apiCategories')
     }
 
     const type = localStorage.getItem('backgroundType');
@@ -161,6 +161,7 @@ export default class Background extends PureComponent {
         // API background
         const backgroundAPI = localStorage.getItem('backgroundAPI');
         const apiQuality = localStorage.getItem('apiQuality');
+        const backgroundExclude = JSON.parse(localStorage.getItem('backgroundExclude'));
 
         let requestURL, data;
         switch (backgroundAPI) {
@@ -172,7 +173,7 @@ export default class Background extends PureComponent {
             break;
           // Defaults to Mue
           default:
-            requestURL = `${variables.constants.API_URL}/images/random?categories=${apiCategories}&quality=${apiQuality}`;
+            requestURL = `${variables.constants.API_URL}/images/random?categories=${apiCategories}&quality=${apiQuality}&excludes=${backgroundExclude}`;
             break;
         }
 
@@ -415,7 +416,8 @@ export default class Background extends PureComponent {
             (this.state.type === 'api' &&
               localStorage.getItem('backgroundAPI') !== this.state.currentAPI) ||
             (this.state.type === 'custom' &&
-              localStorage.getItem('customBackground') !== this.state.url)
+              localStorage.getItem('customBackground') !== this.state.url) ||
+            JSON.parse(localStorage.getItem('backgroundExclude')).includes(this.state.photoInfo.pun)
           ) {
             return refresh();
           }

src/components/widgets/background/PhotoInformation.jsx

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { useState, memo } from 'react';
 import Favourite from './Favourite';
+import EventBus from 'modules/helpers/eventbus';
 import {
   MdInfo,
   MdLocationOn,
@@ -11,7 +12,8 @@ import {
   MdIosShare as Share,
   MdSource as Source,
   MdFavorite as MdFavourite,
-  MdCategory as Category
+  MdCategory as Category,
+  MdVisibilityOff as VisibilityOff
 } from 'react-icons/md';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 import Modal from 'react-modal';
@@ -29,13 +31,24 @@ const formatText = (text) => {
 const downloadImage = async (info) => {
   const link = document.createElement('a');
   link.href = await toDataURL(info.url);
-  link.download = `mue-${formatText(info.credit)}-${formatText(info.location)}.jpg`;
+  link.download = `mue-${formatText(info.credit)}-${formatText(info.location)}.jpg`; // image is more likely to be webp or avif btw
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
   variables.stats.postEvent('feature', 'Background download');
 };
 
+const excludeImage = async (info) => {
+  // eslint-disable-next-line no-restricted-globals
+  const confirmed = confirm(variables.getMessage('widgets.background.exclude_confirm', { category: info.category }));
+  if (!confirmed) return;
+  let backgroundExclude = JSON.parse(localStorage.getItem('backgroundExclude'));
+  backgroundExclude.push(info.pun);
+  backgroundExclude = JSON.stringify(backgroundExclude);
+  localStorage.setItem('backgroundExclude', backgroundExclude);
+  EventBus.dispatch('refresh', 'background');
+};
+
 function PhotoInformation({ info, url, api }) {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
@@ -97,15 +110,15 @@ function PhotoInformation({ info, url, api }) {
   const ddgProxy = localStorage.getItem('ddgProxy') === 'true';
 
   // get resolution
-//   const img = new Image();
-//   img.onload = (event) => {
-//     setWidth(event.target.width);
-//     setHeight(event.target.height);
-//   };
-//   img.src =
-//     ddgProxy && !info.offline && !url.startsWith('data:')
-//       ? variables.constants.DDG_IMAGE_PROXY + url
-//       : url;
+  const img = new Image();
+  img.onload = (event) => {
+    setWidth(event.target.width);
+    setHeight(event.target.height);
+  };
+  img.src =
+    ddgProxy && !info.offline && !url.startsWith('data:')
+      ? variables.constants.DDG_IMAGE_PROXY + url
+      : url;
 
   // info is still there because we want the favourite button to work
   if (localStorage.getItem('photoInformation') === 'false') {
@@ -284,9 +297,18 @@ function PhotoInformation({ info, url, api }) {
                   <div className="concept-row" title={variables.getMessage('widgets.background.source')}>
                     <Source />
                     <span id="infoSource">
-                      <a href={info.photoURL + '?utm_source=mue'} target="_blank" rel="noopener noreferrer" className="link">
-                        {api.charAt(0).toUpperCase() + api.slice(1)}
-                      </a>
+                      {info.photoURL
+                        ? (
+                          <a href={info.photoURL + '?utm_source=mue'} target="_blank" rel="noopener noreferrer" className="link">
+                            {api.charAt(0).toUpperCase() + api.slice(1)}
+                          </a>
+                        ) 
+                        : (
+                          <a href={info.url} target="_blank" rel="noopener noreferrer" className="link">
+                            {api.charAt(0).toUpperCase() + api.slice(1)}
+                          </a>
+                        )
+                      }
                     </span>
                   </div>
                 ) : null}
@@ -308,6 +330,14 @@ function PhotoInformation({ info, url, api }) {
                     <Download onClick={() => downloadImage(info)} />
                   </Tooltip>
                 ) : null}
+                {info.pun ? (
+                  <Tooltip
+                    title={variables.getMessage('widgets.background.exclude')}
+                    key="exclude"
+                  >
+                    <VisibilityOff onClick={() => excludeImage(info)} />
+                  </Tooltip>
+                ) : null}
               </div>
             </>
           ) : null}