refactor: once again move background utils, this time to api

src/components/Form/Settings/FileUpload/FileUpload.jsx

@@ -2,7 +2,7 @@ import variables from 'config/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
-import { videoCheck } from 'utils/background';
+import videoCheck from 'features/background/api/videoCheck';
 
 class FileUpload extends PureComponent {
   componentDidMount() {

src/features/background/Background.jsx

@@ -6,14 +6,12 @@ import { PureComponent } from 'react';
 import PhotoInformation from './components/PhotoInformation';
 
 import EventBus from 'utils/eventbus';
-import {
-  videoCheck,
-  offlineBackground,
-  randomColourStyleBuilder,
-  supportsAVIF,
-} from 'utils/background';
 
-import { getGradient } from 'utils/background/gradient';
+import { supportsAVIF } from './api/avif';
+import { getOfflineImage } from './api/getOfflineImage';
+import videoCheck from './api/videoCheck';
+import { getGradient } from './api/gradient';
+import { randomColourStyleBuilder } from './api/randomColour';
 
 import './scss/index.scss';
 import { decodeBlurHash } from 'fast-blurhash';
@@ -128,7 +126,7 @@ export default class Background extends PureComponent {
       data = await (await fetch(requestURL, { headers: { accept } })).json();
     } catch (e) {
       // if requesting to the API fails, we get an offline image
-      this.setState(offlineBackground('api'));
+      this.setState(getOfflineImage('api'));
       return null;
     }
 
@@ -201,7 +199,7 @@ export default class Background extends PureComponent {
     switch (type) {
       case 'api':
         if (offline) {
-          return this.setState(offlineBackground('api'));
+          return this.setState(getOfflineImage('api'));
         }
 
         // API background
@@ -246,7 +244,7 @@ export default class Background extends PureComponent {
 
         // allow users to use offline images
         if (offline && !customBackground.startsWith('data:')) {
-          return this.setState(offlineBackground('custom'));
+          return this.setState(getOfflineImage('custom'));
         }
 
         if (
@@ -271,7 +269,7 @@ export default class Background extends PureComponent {
 
       case 'photo_pack':
         if (offline) {
-          return this.setState(offlineBackground('photo_pack'));
+          return this.setState(getOfflineImage('photo_pack'));
         }
 
         const photofavourited = JSON.parse(localStorage.getItem('favourite'));
@@ -503,7 +501,7 @@ export default class Background extends PureComponent {
                 this.setState(current);
               }
             } else if (current.url.startsWith('http')) {
-              this.setState(offlineBackground());
+              this.setState(getOfflineImage());
             }
             if (this.state.firstTime !== true) {
               this.setState(current);

src/features/background/api/getOfflineImage.js

@@ -1,4 +1,4 @@
-import offlineImages from 'utils/data/offline_images.json';
+import offlineImages from '../offline_images.json';
 
 /**
  * It gets a random photographer from the offlineImages.json file, then gets a random image from that
@@ -12,7 +12,7 @@ import offlineImages from 'utils/data/offline_images.json';
  * offline: A boolean that is true.
  * credit: A string that is the name of the photographer.
  */
-export function offlineBackground(type) {
+export function getOfflineImage(type) {
   const photographers = Object.keys(offlineImages);
   const photographer = photographers[Math.floor(Math.random() * photographers.length)];
 

src/features/background/options/Colour.jsx

@@ -4,7 +4,7 @@ import { ColorPicker } from '@muetab/react-color-gradient-picker';
 import { toast } from 'react-toastify';
 import { Row, Content, Action } from '../../../components/Layout/Settings/Item/SettingsItem';
 
-import { hexToRgb, rgbToHex } from 'utils/background/gradient';
+import { hexToRgb, rgbToHex } from '../api/gradient';
 
 //import '@muetab/react-color-gradient-picker/dist/index.css';
 import '../scss/react-color-picker-gradient-picker-custom-styles.scss';

src/features/background/options/Custom.jsx

@@ -11,7 +11,7 @@ import {
 } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
 import { compressAccurately, filetoDataURL } from 'image-conversion';
-import { videoCheck } from 'utils/background';
+import videoCheck from '../api/videoCheck';
 
 import Checkbox from '../../../components/Form/Settings/Checkbox/Checkbox';
 import FileUpload from '../../../components/Form/Settings/FileUpload/FileUpload';

src/features/background/options/CustomURLModal.jsx

@@ -2,6 +2,7 @@ import variables from 'config/variables';
 import { useState, memo } from 'react';
 import { MdClose, MdOutlineAddLink } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
+
 function CustomURLModal({ modalClose, urlError, modalCloseOnly }) {
   const [url, setURL] = useState();
 

src/utils/background/index.js

@@ -1,6 +0,0 @@
-import { supportsAVIF } from './avif';
-import { offlineBackground } from './getOfflineImage';
-import { randomColourStyleBuilder } from './randomColour';
-import videoCheck from './videoCheck';
-
-export { supportsAVIF, offlineBackground, randomColourStyleBuilder, videoCheck };