fix: background blur transition

src/components/modals/main/settings/ChipSelect.jsx

@@ -0,0 +1,56 @@
+import { useState, memo, useEffect } from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+
+function ChipSelect({ label, options, name }) {
+  const [optionsSelected, setoptionsSelected] = useState([]);
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    setoptionsSelected(
+      typeof value === 'string' ? value.split(',') : value,
+    );
+    localStorage.setItem('apiCategories', optionsSelected)
+  };
+  console.log(localStorage.getItem('apiCategories'))
+
+
+  return (
+    <div>
+      <FormControl>
+        <InputLabel id="chipSelect-label">{label}</InputLabel>
+        <Select
+          labelId="chipSelect-label"
+          id="chipSelect"
+          multiple
+          value={optionsSelected}
+          onChange={handleChange}
+          input={<OutlinedInput id="select-multiple-chip" label={label} />}
+          renderValue={(optionsSelected) => (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {optionsSelected.map((value) => (
+                <Chip key={value} label={value} />
+              ))}
+            </Box>
+          )}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.name} value={option.name}>
+              {option.name.charAt(0).toUpperCase() + option.name.slice(1)} ({option.count})
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default memo(ChipSelect);

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

@@ -5,6 +5,7 @@ import { MdSource, MdOutlineKeyboardArrowRight, MdOutlineAutoAwesome } from 'rea
 
 import Header from '../../Header';
 import Checkbox from '../../Checkbox';
+import ChipSelect from '../../ChipSelect';
 import Dropdown from '../../Dropdown';
 import Slider from '../../Slider';
 import Radio from '../../Radio';
@@ -125,16 +126,25 @@ export default class BackgroundSettings extends PureComponent {
               </Dropdown>
             </>
           ) : (
-            <Dropdown
-              label={variables.getMessage('modals.main.settings.sections.background.category')}
-              name="apiCategories"
-            >
-              {this.state.backgroundCategories.map((category) => (
-				  <MenuItem value={category.name} key={category.name}>
-                  {category.name.charAt(0).toUpperCase() + category.name.slice(1)} ({category.count})
-                </MenuItem>
-              ))}
-            </Dropdown>
+            <>
+              {/*<Dropdown
+                label={variables.getMessage('modals.main.settings.sections.background.category')}
+                name="apiCategories"
+              >
+                {this.state.backgroundCategories.map((category) => (
+                  <MenuItem value={category.name} key={category.name}>
+                    {category.name.charAt(0).toUpperCase() + category.name.slice(1)} (
+                    {category.count})
+                  </MenuItem>
+                ))}
+                    </Dropdown>
+              <ChipSelect
+                label={variables.getMessage('modals.main.settings.sections.background.category')}
+                options={this.state.backgroundCategories}
+                name="apiCategories"
+              ></ChipSelect>
+              */}
+            </>
           )}
           <Dropdown
             label={variables.getMessage(

src/components/widgets/background/Background.jsx

@@ -83,7 +83,6 @@ export default class Background extends PureComponent {
       if (this.state.photoInfo.blur_hash) {
         backgroundImage.style.backgroundColor = this.state.photoInfo.colour;
         backgroundImage.classList.add('fade-in');
-
         const canvas = document.createElement('canvas');
         canvas.width = 32;
         canvas.height = 32;
@@ -105,6 +104,7 @@ export default class Background extends PureComponent {
       // this.state.photoInfo.width = img.width;
       // this.state.photoInfo.height = img.height;
       const blobUrl = URL.createObjectURL(await (await fetch(url)).blob()); // TODO: revoke this later
+      backgroundImage.classList.add('backgroundTransform');
       backgroundImage.style.backgroundImage = `url(${blobUrl})`;
       // img.remove();
       // URL.revokeObjectURL(blobUrl);
@@ -143,6 +143,14 @@ export default class Background extends PureComponent {
       return setFavourited(favourited);
     }
 
+    let apiCategories;
+
+    try {
+      let apiCategories = JSON.parse(localStorage.getItem('apiCategories'))
+    } catch (error) {
+      let apiCategories = localStorage.getItem('apiCategories')
+    }
+
     const type = localStorage.getItem('backgroundType');
     switch (type) {
       case 'api':
@@ -152,7 +160,6 @@ export default class Background extends PureComponent {
 
         // API background
         const backgroundAPI = localStorage.getItem('backgroundAPI');
-        const apiCategories = JSON.parse(localStorage.getItem('apiCategories'));
         const apiQuality = localStorage.getItem('apiQuality');
 
         let requestURL, data;

src/components/widgets/background/PhotoInformation.jsx

@@ -317,4 +317,4 @@ function PhotoInformation({ info, url, api }) {
   );
 }
 
-export default memo(PhotoInformation);
+export default memo(PhotoInformation);

src/components/widgets/background/scss/_photoinformation.scss

@@ -23,7 +23,7 @@
       }
       .concept-stats {
         display: flex;
-		padding-top: 5px;
+        padding-top: 5px;
         gap: 20px;
         @include themed() {
           color: t($subColor);
@@ -61,6 +61,23 @@
   }
 }
 
+.mapOn {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    img {
+      flex-shrink: 0;
+      min-width: 100%;
+      min-height: 100%;
+    }
+    svg {
+      display: none;
+    }
+}
+
 .photoInformation-legacy {
   font-size: 1.36em;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@@ -293,7 +310,7 @@
 }
 
 .photoInformation-content {
-	line-height: 2em;
+  line-height: 2em;
   margin-right: 3px;
   display: flex;
   flex-flow: column;

src/components/widgets/background/scss/index.scss

@@ -10,6 +10,21 @@
   zoom: 100% !important;
 }
 
+.backgroundTransform {
+  @include animation('fadein2 2s');
+  transition: background  2s;
+}
+
+@include keyframes(fadein2) {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 .backgroundPreload {
   opacity: 0;
 }

src/modules/constants.js

@@ -1,6 +1,6 @@
 // API URLs
 // export const API_URL = 'https://api.muetab.com/v2';
-export const API_URL = 'http://127.0.0.1:8787/v2';
+export const API_URL = 'https://api.muetab.com/v2';
 export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';