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}

src/translations/de_DE.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Weicher übergang",
             "photo_information": "Foto-Informationen anzeigen",
             "show_map": "Show location map on photo information if available",
-            "category": "Kategorie",
+            "categories": "Categories",
             "buttons": {
               "title": "Schaltflächen",
               "view": "Vollbild",
@@ -263,7 +266,8 @@
               "hour": "Stunde",
               "day": "Tag",
               "month": "Monat"
-            }
+            },
+            "category": "Kategorie"
           },
           "search": {
             "title": "Suche",

src/translations/en_GB.json

@@ -23,7 +23,9 @@
       "camera": "Camera",
       "resolution": "Resolution",
       "source": "Source",
-      "category": "Category"
+      "category": "Category",
+      "exclude": "Don't show again",
+	  "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings."
     },
     "search": "Search",
     "quicklinks": {
@@ -186,7 +188,7 @@
             "transition": "Fade-in transition",
             "photo_information": "Show photo information",
             "show_map": "Show location map on photo information if available",
-            "category": "Category",
+            "categories": "Categories",
             "buttons": {
               "title": "Buttons",
               "view": "Maximise",

src/translations/en_US.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Fade-in transition",
             "photo_information": "Show photo information",
             "show_map": "Show location map on photo information if available",
-            "category": "Category",
+            "categories": "Categories",
             "buttons": {
               "title": "Buttons",
               "view": "Maximize",
@@ -263,7 +266,8 @@
               "hour": "Hour",
               "day": "Day",
               "month": "Month"
-            }
+            },
+            "category": "Category"
           },
           "search": {
             "title": "Search",

src/translations/es-419.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -188,7 +191,7 @@
             "transition": "Transición fade-in",
             "photo_information": "Ver información de la foto",
             "show_map": "Mostrar el mapa de la ubicación en la información de la foto si está disponible",
-            "category": "Categoría",
+            "categories": "Categories",
             "buttons": {
               "title": "Botones",
               "view": "Ver",
@@ -257,7 +260,8 @@
               "hour": "Hora",
               "day": "Día",
               "month": "Mes"
-            }
+            },
+            "category": "Categoría"
           },
           "search": {
             "title": "Búsqueda",

src/translations/es.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Transición fade-in",
             "photo_information": "Ver información de la foto",
             "show_map": "Mostrar el mapa de la ubicación en la información de la foto si está disponible",
-            "category": "Categoría",
+            "categories": "Categories",
             "buttons": {
               "title": "Botones",
               "view": "Ver",
@@ -263,7 +266,8 @@
               "hour": "Hora",
               "day": "Día",
               "month": "Mes"
-            }
+            },
+            "category": "Categoría"
           },
           "search": {
             "title": "Búsqueda",

src/translations/fr.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Transition en fondu",
             "photo_information": "Show photo information",
             "show_map": "Show location map on photo information if available",
-            "category": "Catégorie",
+            "categories": "Categories",
             "buttons": {
               "title": "Boutons",
               "view": "Mode vue",
@@ -263,7 +266,8 @@
               "hour": "Hour",
               "day": "Day",
               "month": "Month"
-            }
+            },
+            "category": "Catégorie"
           },
           "search": {
             "title": "Barre de Recherche",

src/translations/id_ID.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Transisi Fade-in",
             "photo_information": "Tampilkan informasi foto",
             "show_map": "Tampilkan informasi lokasi foto jika ada",
-            "category": "Kategori",
+            "categories": "Categories",
             "buttons": {
               "title": "Aksi",
               "view": "Layar Penuh",
@@ -263,7 +266,8 @@
               "hour": "Jam",
               "day": "Hari",
               "month": "Bulan"
-            }
+            },
+            "category": "Kategori"
           },
           "search": {
             "title": "Cari",

src/translations/nl.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Fade-in transition",
             "photo_information": "Show photo information",
             "show_map": "Show location map on photo information if available",
-            "category": "Category",
+            "categories": "Categories",
             "buttons": {
               "title": "Buttons",
               "view": "Weergave",
@@ -263,7 +266,8 @@
               "hour": "Hour",
               "day": "Day",
               "month": "Month"
-            }
+            },
+            "category": "Category"
           },
           "search": {
             "title": "Zoekbalk",

src/translations/no.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Fade-in transition",
             "photo_information": "Show photo information",
             "show_map": "Show location map on photo information if available",
-            "category": "Category",
+            "categories": "Categories",
             "buttons": {
               "title": "Buttons",
               "view": "Maximise",
@@ -263,7 +266,8 @@
               "hour": "Hour",
               "day": "Day",
               "month": "Month"
-            }
+            },
+            "category": "Category"
           },
           "search": {
             "title": "Søkebar",

src/translations/ru.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Fade-in transition",
             "photo_information": "Show photo information",
             "show_map": "Show location map on photo information if available",
-            "category": "Category",
+            "categories": "Categories",
             "buttons": {
               "title": "Buttons",
               "view": "Просмотр",
@@ -263,7 +266,8 @@
               "hour": "Hour",
               "day": "Day",
               "month": "Month"
-            }
+            },
+            "category": "Category"
           },
           "search": {
             "title": "Панель поиска",

src/translations/tr_TR.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "Geçiş Sırasında Solma",
             "photo_information": "Fotoğraf Bilgilerini Göster",
             "show_map": "Varsa Fotoğraf Bilgilerinde Konum Bilgisini Göster",
-            "category": "Kategori",
+            "categories": "Categories",
             "buttons": {
               "title": "Butonlar",
               "view": "Arka Planı Görüntüle",
@@ -263,7 +266,8 @@
               "hour": "Saatte Bir",
               "day": "Günde Bir",
               "month": "Ayda Bir"
-            }
+            },
+            "category": "Kategori"
           },
           "search": {
             "title": "Arama",

src/translations/zh_CN.json

@@ -24,6 +24,9 @@
       "resolution": "Resolution",
       "source": "Source",
       "category": "Category",
+      "exclude": "Don't show again",
+      "exclude_confirm": "Are you sure you don't want to see this image again?\nNote: if you don't like \"{category}\" images, you can deselect the category in the background source settings.",
+      "categories": "Categories",
       "photo": "Photo",
       "on": "on"
     },
@@ -194,7 +197,7 @@
             "transition": "过渡动画",
             "photo_information": "显示图片信息",
             "show_map": "在图片信息内显示位置信息 (如果可用)",
-            "category": "分类",
+            "categories": "Categories",
             "buttons": {
               "title": "显示顶部按钮",
               "view": "仅显示背景",
@@ -263,7 +266,8 @@
               "hour": "每小时",
               "day": "每天",
               "month": "每月"
-            }
+            },
+            "category": "分类"
           },
           "search": {
             "title": "搜索栏",