fix: background photo packs, declutter

src/components/Elements/MainModal/backend/Tab.jsx

@@ -71,18 +71,6 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
   }
 
   const icon = iconMapping[label];
-  const divider = [
-    variables.getMessage('settings:sections.weather.title'),
-    variables.getMessage('settings:sections.language.title'),
-    variables.getMessage('marketplace:all'),
-    variables.getMessage('settings:sections.experimental.title'),
-  ].includes(label);
-
-  const mue = [
-    variables.getMessage('marketplace:product.overview'),
-    variables.getMessage('addons:added'),
-    variables.getMessage('marketplace:all'),
-  ].includes(label);
 
   if (
     label === variables.getMessage('settings:sections.experimental.title') &&
@@ -92,13 +80,9 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
   }
 
   return (
-    <>
-      {/*{mue && <span className="mainTitle">Mue</span>}*/}
-      <button className={className} onClick={() => onClick(label)}>
-        {icon} <span>{label}</span>
-      </button>
-      {/*{divider && <hr />}*/}
-    </>
+    <button className={className} onClick={() => onClick(label)}>
+      {icon} <span>{label}</span>
+    </button>
   );
 }
 

src/components/Layout/Settings/Header/Header.jsx

@@ -4,19 +4,15 @@ import {
   MdFlag,
   MdOutlineVisibilityOff,
   MdOutlineVisibility,
-  MdOutlineKeyboardArrowRight,
 } from 'react-icons/md';
 import EventBus from 'utils/eventbus';
 import { Button } from 'components/Elements';
-import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 
 export const CustomActions = ({ children }) => {
   return children;
 };
 
 function Header(props) {
-  const { setSubSection, subSection } = useTab();
-
   const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
 
   useEffect(() => {
@@ -69,19 +65,6 @@ function Header(props) {
 
   return (
     <div className="modalHeader">
-      <span className="mainTitle">
-        {/*}
-        {props.secondaryTitle && (
-          <>
-            <span className="backTitle" onClick={() => setSubSection('')}>
-              {props.title}
-            </span>
-            <MdOutlineKeyboardArrowRight />
-          </>
-        )}
-        {props.secondaryTitle || props.title}
-        */}
-      </span>
       <div className="headerActions">
         {props.visibilityToggle && <VisibilityToggle />}
         {props.report !== false && <ReportButton />}

src/features/background/Background.jsx

@@ -276,79 +276,36 @@ export default class Background extends PureComponent {
 
       case 'photo_pack':
         if (offline) {
-          return this.setState(getOfflineImage('photo_pack'));
-        }
-
-        const photofavourited = JSON.parse(localStorage.getItem('favourite'));
-        if (photofavourited) {
-          return setFavourited(photofavourited);
+          return this.setState(getOfflineImage('photo'));
         }
 
         const photoPack = [];
         const installed = JSON.parse(localStorage.getItem('installed'));
         installed.forEach((item) => {
           if (item.type === 'photos') {
-            photoPack.push(...item.photos);
+            const photos = item.photos.map((photo) => {
+              return photo;
+            });
+
+            photoPack.push(...photos);
           }
         });
-        if (photoPack) {
-          const randomNumber = Math.floor(Math.random() * photoPack.length);
-          const randomPhoto = photoPack[randomNumber];
-          if (
-            (localStorage.getItem('backgroundchange') === 'refresh' &&
-              this.state.firstTime === true) ||
-            (localStorage.getItem('backgroundchange') === null && this.state.firstTime === true)
-          ) {
-            if (this.state.firstTime !== true) {
-              localStorage.setItem('marketplaceNumber', randomNumber);
-              this.setState({
-                firstTime: false,
-                url: randomPhoto.url.default,
-                type: 'photo_pack',
-                photoInfo: {
-                  hidden: false,
-                  credit: randomPhoto.photographer,
-                  location: randomPhoto.location,
-                },
-              });
-            }
-          } else {
-            if (
-              Number(
-                Number(localStorage.getItem('backgroundStartTime')) +
-                  Number(localStorage.getItem('backgroundchange')) >=
-                  Number(Date.now()),
-              )
-            ) {
-              const randomPhoto = photoPack[localStorage.getItem('marketplaceNumber')];
-              if (this.state.firstTime !== true) {
-                this.setState({
-                  url: randomPhoto.url.default,
-                  type: 'photo_pack',
-                  photoInfo: {
-                    hidden: false,
-                    credit: randomPhoto.photographer,
-                    location: randomPhoto.location,
-                  },
-                });
-              } else {
-                this.setState({ firstTime: true });
-              }
-              this.setState({ firstTime: true });
-            } else {
-              localStorage.setItem('marketplaceNumber', randomNumber);
-              return this.setState({
-                url: randomPhoto.url.default,
-                type: 'photo_pack',
-                photoInfo: {
-                  hidden: false,
-                  credit: randomPhoto.photographer,
-                  location: randomPhoto.location,
-                },
-              });
-            }
-          }
+
+        if (photoPack.length === 0) {
+          return this.setState(getOfflineImage('photo'));
         }
+
+        const photo = photoPack[Math.floor(Math.random() * photoPack.length)];
+
+        this.setState({
+          url: photo.url.default,
+          type: 'photo_pack',
+          video: videoCheck(photo.url.default),
+          photoInfo: {
+            // todo: finish this
+            photographer: photo.photographer,
+          },
+        });
         break;
       default:
         break;
@@ -474,19 +431,13 @@ export default class Background extends PureComponent {
       return this.setState(JSON.parse(localStorage.getItem('welcomeImage')));
     }
 
-    if (
-      localStorage.getItem('backgroundchange') === 'refresh' ||
-      localStorage.getItem('backgroundchange') === null
-    ) {
-      try {
-        document.getElementById('backgroundImage').classList.remove('fade-in');
-        document.getElementsByClassName('photoInformation')[0].classList.remove('fade-in');
-      } catch (e) {
-        // Disregard exception
-      }
-      this.getBackground();
-      localStorage.setItem('backgroundStartTime', Date.now());
+    try {
+      document.getElementById('backgroundImage').classList.remove('fade-in');
+      document.getElementsByClassName('photoInformation')[0].classList.remove('fade-in');
+    } catch (e) {
+      // Disregard exception
     }
+    this.getBackground();
   }
 
   // only set once we've got the info

src/features/marketplace/views/Browse.jsx

@@ -1,6 +1,5 @@
 import variables from 'config/variables';
 import { useState, useEffect } from 'react';
-import { toast } from 'react-toastify';
 import { MdWifiOff, MdLocalMall, MdOutlineArrowForward, MdLibraryAdd } from 'react-icons/md';
 
 import ItemPage from './oldItemPage';
@@ -9,7 +8,6 @@ import Items from '../components/Items/OldItems';
 import { Header } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 
-import { install } from 'utils/marketplace';
 import { sortItems } from '../api';
 
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';

src/features/marketplace/views/ItemPage.jsx

@@ -1,5 +1,4 @@
 import variables from 'config/variables';
-import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
 import { useEffect, useState } from 'react';
 import { ShareModal } from 'components/Elements';
@@ -14,25 +13,17 @@ import {
   MdOutlineWarning,
   MdStyle,
   MdClose,
-  MdLibraryAdd,
 } from 'react-icons/md';
-import { Header } from 'components/Layout/Settings';
 import Modal from 'react-modal';
 import Markdown from 'markdown-to-jsx';
-import { Button } from 'components/Elements';
 import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
 import { Carousel } from '../components/Elements/Carousel';
-import { AnimatePresence, motion } from 'framer-motion';
 
 const ItemPage = () => {
-  const { subTab } = useTab();
-  const controller = new AbortController();
   const [count, setCount] = useState(5);
-  const [item, setItemData] = useState(null);
   const [shareModal, setShareModal] = useState(false);
-  const { installedItems, setInstalledItems, selectedItem, installItem, uninstallItem } =
+  const { installedItems, selectedItem, installItem, uninstallItem } =
     useMarketData();
-  let themeColour = selectedItem.colour || '#000000';
 
   const [isInstalled, setIsInstalled] = useState(false);
 
@@ -42,137 +33,6 @@ const ItemPage = () => {
     setIsInstalled(installed);
   }, [installedItems, selectedItem.name]);
 
-  {
-    /*const uninstallItem = () => {
-    setInstalledItems(installedItems.filter((item) => item.name !== selectedItem.name));
-    localStorage.setItem('installed', JSON.stringify(installedItems));
-    setIsInstalled(false);
-  };*/
-  }
-
-  {
-    /*const installItem = () => {
-    const installedItems = JSON.parse(localStorage.getItem('installed')) || [];
-    if (!installedItems.some((item) => item.name === selectedItem.name)) {
-      installedItems.push(selectedItem);
-      localStorage.setItem('installed', JSON.stringify(installedItems));
-
-      if (selectedItem.type === 'settings') {
-        localStorage.removeItem('backup_settings');
-
-        let oldSettings = [];
-        Object.keys(localStorage).forEach((key) => {
-          oldSettings.push({
-            name: key,
-            value: localStorage.getItem(key),
-          });
-        });
-
-        localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
-        Object.keys(selectedItem.settings).forEach((key) => {
-          localStorage.setItem(key, selectedItem.settings[key]);
-        });
-      }
-
-      if (selectedItem.type === 'photos') {
-        const currentPhotos = JSON.parse(localStorage.getItem('photo_packs')) || [];
-
-        selectedItem.photos.forEach((photo) => {
-          currentPhotos.push(photo);
-        });
-
-        localStorage.setItem('photo_packs', JSON.stringify(currentPhotos));
-
-        const oldBackgroundType = localStorage.getItem('backgroundType');
-        if (oldBackgroundType !== 'photo_pack') {
-          localStorage.setItem('oldBackgroundType', oldBackgroundType);
-          localStorage.setItem('backgroundType', 'photo_pack');
-        }
-      }
-
-      if (selectedItem.type === 'quotes') {
-        const currentQuotes = JSON.parse(localStorage.getItem('quote_packs')) || [];
-
-        selectedItem.quotes.forEach((quote) => {
-          currentQuotes.push(quote);
-        });
-
-        localStorage.setItem('quote_packs', JSON.stringify(currentQuotes));
-
-        const oldQuoteType = localStorage.getItem('quoteType');
-        if (oldQuoteType !== 'quote_pack') {
-          localStorage.setItem('oldQuoteType', oldQuoteType);
-          localStorage.setItem('quoteType', 'quote_pack');
-        }
-      }
-
-      setIsInstalled(true);
-    }
-  };
-
-  const uninstallItem = () => {
-    let installedItems = JSON.parse(localStorage.getItem('installed')) || [];
-    installedItems = installedItems.filter((item) => item.name !== selectedItem.name);
-    localStorage.setItem('installed', JSON.stringify(installedItems));
-
-    if (selectedItem.type === 'settings') {
-      const oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
-      localStorage.clear();
-      oldSettings.forEach((item) => {
-        localStorage.setItem(item.name, item.value);
-      });
-    }
-
-    if (selectedItem.type === 'photos') {
-      const installedContents = JSON.parse(localStorage.getItem('photo_packs'));
-      const packContents = JSON.parse(localStorage.getItem('installed')).find(
-        (content) => content.name === selectedItem.name,
-      );
-
-      installedContents.forEach((item, index) => {
-        const exists = packContents.photos.find((content) => content.photo === item.photo);
-        if (exists !== undefined) {
-          installedContents.splice(index, 1);
-        }
-      });
-
-      if (installedContents.length === 0) {
-        localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
-        localStorage.removeItem('oldBackgroundType');
-        localStorage.removeItem('photo_packs');
-      } else {
-        localStorage.setItem('photo_packs', JSON.stringify(installedContents));
-      }
-    }
-
-    if (selectedItem.type === 'quotes') {
-      const installedContents = JSON.parse(localStorage.getItem('quote_packs'));
-      const packContents = JSON.parse(localStorage.getItem('installed')).find(
-        (content) => content.name === selectedItem.name,
-      );
-
-      installedContents.forEach((item, index) => {
-        const exists = packContents.quotes.find(
-          (content) => content.quote === item.quote || content.author === item.author,
-        );
-        if (exists !== undefined) {
-          installedContents.splice(index, 1);
-        }
-      });
-
-      if (installedContents.length === 0) {
-        localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType'));
-        localStorage.removeItem('oldQuoteType');
-        localStorage.removeItem('quote_packs');
-      } else {
-        localStorage.setItem('quote_packs', JSON.stringify(installedContents));
-      }
-    }
-
-    setIsInstalled(false);
-  };*/
-  }
-
   const locale = localStorage.getItem('language');
   const shortLocale = locale.includes('-') ? locale.split('-')[0] : locale;
   let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' });
@@ -517,7 +377,6 @@ const ItemPage = () => {
       <div className="itemPage flex flex-row gap-8 2xl:gap-16 justify-between">
         <div class="flex flex-col-reverse xl:flex-row gap-8 2xl:gap-16">
           <ItemDetails />
-          {/* <div> */}
             <div className="itemShowcase">
               <div className="subHeader">
                 {itemWarning()}
@@ -547,7 +406,6 @@ const ItemPage = () => {
                 <Markdown>{selectedItem.description}</Markdown>
               </div>
               <ItemShowcase />
-            {/* </div> */}
           </div>
         </div>
 

src/features/marketplace/views/oldItemPage.jsx

@@ -19,7 +19,6 @@ import Modal from 'react-modal';
 import { Header } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 
-import { install, uninstall } from 'utils/marketplace';
 import { Carousel } from '../components/Elements/Carousel';
 import { ShareModal } from 'components/Elements';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
@@ -80,8 +79,8 @@ class ItemPage extends PureComponent {
   }
 
   updateAddon() {
-    uninstall(this.props.data.type, this.props.data.display_name);
-    install(this.props.data.type, this.props.data);
+   // uninstall(this.props.data.type, this.props.data.display_name);
+    //install(this.props.data.type, this.props.data);
     toast(variables.getMessage('toasts.updated'));
     this.setState({
       showUpdateButton: false,
@@ -108,9 +107,9 @@ class ItemPage extends PureComponent {
 
   manage(type) {
     if (type === 'install') {
-      install(this.props.data.type, this.props.data.data);
+     // install(this.props.data.type, this.props.data.data);
     } else {
-      uninstall(this.props.data.type,this.props.data.display_name);
+     // uninstall(this.props.data.type,this.props.data.display_name);
     }
 
     toast(variables.getMessage('toasts.' + type + 'ed'));

src/features/marketplace/views/oldLibrary.jsx

@@ -12,7 +12,6 @@ import { Dropdown, FileUpload } from 'components/Form/Settings';
 import { Header, CustomActions } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 
-import { install, uninstall } from 'utils/marketplace';
 import { sortItems } from '../api';
 
 export default class Added extends PureComponent {
@@ -70,7 +69,7 @@ export default class Added extends PureComponent {
       });
     }
 
-    install(input.type, input, true, false);
+   // install(input.type, input, true, false);
     toast(variables.getMessage('toasts.installed'));
     variables.stats.postEvent('marketplace', 'Sideload');
     this.setState({
@@ -119,7 +118,7 @@ export default class Added extends PureComponent {
   }
 
   uninstall() {
-    uninstall(this.state.item.type, this.state.item.display_name);
+    //uninstall(this.state.item.type, this.state.item.display_name);
 
     toast(variables.getMessage('toasts.uninstalled'));
 
@@ -157,7 +156,7 @@ export default class Added extends PureComponent {
   removeAll() {
     try {
       this.state.installed.forEach((item) => {
-        uninstall(item.type, item.name);
+      //  uninstall(item.type, item.name);
       });
     } catch (e) {}
 

src/features/quote/Quote.jsx

@@ -389,15 +389,6 @@ class Quote extends PureComponent {
         this.getQuote();
       }
     });
-
-    if (
-      localStorage.getItem('quotechange') === 'refresh' ||
-      localStorage.getItem('quotechange') === null
-    ) {
-      this.setZoom();
-      this.getQuote();
-      localStorage.setItem('quoteStartTime', Date.now());
-    }
   }
 
   componentWillUnmount() {

src/utils/marketplace/index.js

@@ -1,4 +0,0 @@
-import { install } from './install';
-import { uninstall } from './uninstall';
-
-export { install, uninstall };

src/utils/marketplace/install.js

@@ -1,81 +0,0 @@
-import EventBus from 'utils/eventbus';
-
-// todo: relocate these 2 functions
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function showReminder() {
-  document.querySelector('.reminder-info').style.display = 'flex';
-  localStorage.setItem('showReminder', true);
-}
-
-export function install(type, input, sideload, collection) {
-  switch (type) {
-    case 'settings':
-      localStorage.removeItem('backup_settings');
-
-      let oldSettings = [];
-      Object.keys(localStorage).forEach((key) => {
-        oldSettings.push({
-          name: key,
-          value: localStorage.getItem(key),
-        });
-      });
-
-      localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
-      Object.keys(input.settings).forEach((key) => {
-        localStorage.setItem(key, input.settings[key]);
-      });
-      showReminder();
-      break;
-
-    case 'photos':
-      const currentPhotos = JSON.parse(localStorage.getItem('photo_packs')) || [];
-      input.photos.forEach((photo) => {
-        currentPhotos.push(photo);
-      });
-      localStorage.setItem('photo_packs', JSON.stringify(currentPhotos));
-
-      if (localStorage.getItem('backgroundType') !== 'photo_pack') {
-        localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType'));
-      }
-      localStorage.setItem('backgroundType', 'photo_pack');
-      localStorage.removeItem('backgroundchange');
-      EventBus.emit('refresh', 'background');
-      // TODO: make this legitimately good and work without a reload - currently we just refresh
-      sleep(4000);
-      if (!collection) {
-        window.location.reload();
-      }
-      break;
-
-    case 'quotes':
-      const currentQuotes = JSON.parse(localStorage.getItem('quote_packs')) || [];
-      input.quotes.forEach((quote) => {
-        currentQuotes.push(quote);
-      });
-      localStorage.setItem('quote_packs', JSON.stringify(currentQuotes));
-
-      if (localStorage.getItem('quoteType') !== 'quote_pack') {
-        localStorage.setItem('oldQuoteType', localStorage.getItem('quoteType'));
-      }
-      localStorage.setItem('quoteType', 'quote_pack');
-      localStorage.removeItem('quotechange');
-      EventBus.emit('refresh', 'quote');
-      break;
-
-    default:
-      break;
-  }
-
-  const installed = JSON.parse(localStorage.getItem('installed'));
-
-  if (sideload) {
-    input.sideload = true;
-  }
-
-  installed.push(input);
-
-  localStorage.setItem('installed', JSON.stringify(installed));
-}

src/utils/marketplace/uninstall.js

@@ -1,81 +0,0 @@
-import EventBus from 'utils/eventbus';
-
-import BackgroundOptions from 'features/background/options/default';
-import QuoteOptions from 'features/quote/options/default';
-
-// todo: relocate this function
-function showReminder() {
-  document.querySelector('.reminder-info').style.display = 'flex';
-  localStorage.setItem('showReminder', true);
-}
-
-export function uninstall(type, name) {
-  let installedContents, packContents;
-  switch (type) {
-    case 'settings':
-      const oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
-      localStorage.clear();
-      oldSettings.forEach((item) => {
-        localStorage.setItem(item.name, item.value);
-      });
-      showReminder();
-      break;
-
-    case 'quotes':
-      installedContents = JSON.parse(localStorage.getItem('quote_packs'));
-      packContents = JSON.parse(localStorage.getItem('installed')).find(
-        (content) => content.name === name,
-      );
-      installedContents.forEach((item, index) => {
-        const exists = packContents.quotes.find(
-          (content) => content.quote === item.quote || content.author === item.author,
-        );
-        if (exists !== undefined) {
-          installedContents.splice(index, 1);
-        }
-      });
-      localStorage.setItem('quote_packs', JSON.stringify(installedContents));
-      if (installedContents.length === 0) {
-        localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType') || QuoteOptions.quoteType);
-        localStorage.removeItem('oldQuoteType');
-        localStorage.removeItem('quote_packs');
-      }
-      localStorage.removeItem('quotechange');
-      EventBus.emit('refresh', 'marketplacequoteuninstall');
-      break;
-
-    case 'photos':
-      installedContents = JSON.parse(localStorage.getItem('photo_packs'));
-      packContents = JSON.parse(localStorage.getItem('installed')).find(
-        (content) => content.name === name,
-      );
-      installedContents.forEach((item, index) => {
-        const exists = packContents.photos.find((content) => content.photo === item.photo);
-        if (exists !== undefined) {
-          installedContents.splice(index, 1);
-        }
-      });
-      localStorage.setItem('photo_packs', JSON.stringify(installedContents));
-      if (installedContents.length === 0) {
-        localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType') || BackgroundOptions.backgroundType);
-        localStorage.removeItem('oldBackgroundType');
-        localStorage.removeItem('photo_packs');
-      }
-      localStorage.removeItem('backgroundchange');
-      EventBus.emit('refresh', 'marketplacebackgrounduninstall');
-      break;
-
-    default:
-      break;
-  }
-
-  let installed = JSON.parse(localStorage.getItem('installed'));
-  for (let i = 0; i < installed.length; i++) {
-    if (installed[i].name === name) {
-      installed.splice(i, 1);
-      break;
-    }
-  }
-
-  localStorage.setItem('installed', JSON.stringify(installed));
-}