chore: release 6.0.3

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

manifest/chrome.json

@@ -4,7 +4,7 @@
   "default_locale": "en",
   "name": "__MSG_name__",
   "description": "__MSG_description__",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

manifest/firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Mue",
   "description": "Fast, open and free-to-use new tab page for modern browsers.",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

package.json

@@ -9,15 +9,15 @@
   "homepage": "https://muetab.com",
   "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
   "license": "BSD-3-Clause",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "dependencies": {
     "@eartharoid/i18n": "^1.0.2",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@fontsource/lexend-deca": "4.4.5",
     "@fontsource/montserrat": "4.4.5",
-    "@mui/icons-material": "5.1.1",
+    "@mui/icons-material": "5.2.0",
-    "@mui/material": "5.1.1",
+    "@mui/material": "5.2.1",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -35,7 +35,12 @@ export default class Autocomplete extends PureComponent {
       input: e.target.innerText
     });
 
-    this.props.onClick(e);
+    this.props.onClick({
+      preventDefault: () => e.preventDefault(),
+      target: {
+        value: e.target.innerText
+      }
+    });
   };
 
   componentDidMount() {

src/components/helpers/preview/Preview.jsx

@@ -7,9 +7,9 @@ export default function Preview(props) {
 
   return (
     <div className='preview-mode'>
-      <h3>{getMessage('modals.main.settings.reminder.title')}</h3>
+      <h1>{getMessage('modals.main.settings.reminder.title')}</h1>
-      <h1>{getMessage('modals.welcome.preview.description')}</h1>
+      <p>{getMessage('modals.welcome.preview.description')}</p>
-      <button className='close' onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
+      <button className='pinNote' onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
     </div>
   );
 }

src/components/helpers/preview/preview.scss

@@ -6,8 +6,10 @@
   color: var(--modal-text);
   background: var(--background);
   max-width: 300px;
-  border-radius: 0.7em;
+  border-radius: .7em;
   z-index: 999;
+  text-align: left;
+  cursor: default;
 
   h1 {
     font-size: 1rem;

src/components/modals/main/marketplace/sections/Create.jsx

@@ -58,7 +58,8 @@ export default class Create extends PureComponent {
     const data = input || localStorage;
     let settings = {};
     Object.keys(data).forEach((key) => {
-      if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') {
+      if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats' || key === 'backup_settings' || key === 'showReminder' 
+      || key === 'experimental' || key === 'debugtimeout' || key === 'quotelanguage') {
         return;
       }
       settings[key] = localStorage.getItem(key);
@@ -67,7 +68,7 @@ export default class Create extends PureComponent {
     this.setState({
       addonData: settings,
       settingsClasses: {
-        current: input ? 'toggle lightTheme' : 'toggle lightTheme active',
+        current: input ? 'toggle lightTheme active' : 'toggle lightTheme',
         json: input ? 'toggle lightTheme active' : 'toggle lightTheme'
       }
     });
@@ -231,9 +232,9 @@ export default class Create extends PureComponent {
     const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
     const importSettings = (
       <>
-        <h3>{getMessage('modals.mwelcome.sections.title')}</h3>
+        <h3>{getMessage('modals.welcome.sections.settings.title')}</h3>
-        <div className='themesToggleArea'>
+        <div className='themesToggleArea' >
-          <div className='options'>
+          <div className='options' style={{ maxWidth: '512px' }}>
             <div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
               <ExportIcon/>
               <span>{getMessage('modals.main.addons.create.settings.current')}</span>
@@ -267,11 +268,18 @@ export default class Create extends PureComponent {
           <TextField label={getMessage('modals.main.addons.create.quotes.api.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.author} onInput={(e) => this.updateQuotePack(e.target.value, 'author')}/>
           <br/><br/>
         </> : <>
-          <button onClick={() => this.importQuotes()} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
+        <div className='themesToggleArea'>
-          <br/><br/>
+          <div className='options'>
+            <div onClick={() => this.importQuotes()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
         </>}
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg'>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }}disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
@@ -280,18 +288,31 @@ export default class Create extends PureComponent {
     const addPhotos = (
       <>
         <h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
-        <button onClick={() => this.importPhotos()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
+        <div className='themesToggleArea'>
-        <br/><br/>
+          <div className='options'>
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+            <div onClick={() => this.importPhotos()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
+        <button onClick={() => this.changeTab(2)} className='uploadbg'>{getMessage('modals.welcome.buttons.previous')}</button>
         <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
     const downloadAddon = (
       <>
-        <h3>{getMessage('modals.main.addons.create.finish.title')}</h3>
+        <div className='themesToggleArea'>
-        <button onClick={() => this.downloadAddon()} className='upload'>{getMessage('modals.main.addons.create.finish.download')}</button>
+          <div className='options'>
-        <br/><br/>
+            <div onClick={() => this.downloadAddon()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.finish.download')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
         <button onClick={() => this.changeTab((this.state.addonMetadata.type === 'quote_api') ? 'quotes' : this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
       </>
     );

src/components/modals/main/scss/marketplace/modules/_item.scss

@@ -73,6 +73,17 @@ p.description {
   }
 }
 
+@media only screen and (max-width: 1200px) {
+  .side {
+    margin-top: 222px;
+    float: none !important;
+  }
+
+  .overview {
+    margin-top: -160px !important;
+  }
+}
+
 .overview {
   font-size: 30px !important;
   margin-top: 33px;

src/components/modals/main/scss/settings/_main.scss

@@ -58,6 +58,11 @@ input {
     padding: 15px 20px;
     border-radius: 4px;
     display: flex !important;
+    cursor: pointer;
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+    }
   }
 }
 

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

@@ -90,11 +90,19 @@ export default class BackgroundSettings extends PureComponent {
     const APISettings = (
       <>
         <Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage' onChange={(e) => this.setState({ backgroundAPI: e })}/>
-        <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
+        {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ?
-          {this.state.backgroundCategories.map((category) => (
+          <>
-            <MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
+            <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
-          ))}
+              <MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
-        </Dropdown>
+              <MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
+            </Dropdown>
+          </> : 
+          <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' >
+            {this.state.backgroundCategories.map((category) => (
+              <MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
+            ))}
+          </Dropdown>
+        }
         <Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
           <option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
           <option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
@@ -125,7 +133,7 @@ export default class BackgroundSettings extends PureComponent {
         <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' disabled={!usingImage} />
         <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' disabled={!usingImage} />
         <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' disabled={this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'} />
-        {/*<Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>*/}
+        <Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>
 
         <h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
         <Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>

src/components/modals/welcome/WelcomeSections.jsx

@@ -92,6 +92,13 @@ export default class WelcomeSections extends PureComponent {
     this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
   }
 
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+  }
+
   // cancel welcome image timer if not on welcome tab
   componentDidUpdate() {
     if (this.props.currentTab !== 0) {

src/components/modals/welcome/welcome.scss

@@ -79,13 +79,13 @@
 
 .themesToggleArea {
   .active {
-    background: var(--tab-active) !important;
+    background: var(--tab-active);
   }
 
   .toggle {
     background: var(--sidebar);
     text-align: center;
-    border-radius: 40px;
+    border-radius: 20px;
     padding: 20px;
     margin: 10px;
     border: 3px solid var(--tab-active);
@@ -96,9 +96,10 @@
     align-content: center;
     justify-content: center;
 
+    cursor: pointer;
+
     &:hover {
       background: var(--tab-active);
-      cursor: pointer;
     }
 
     span {

src/components/widgets/background/PhotoInformation.jsx

@@ -2,7 +2,6 @@ import variables from 'modules/variables';
 import { useState, Fragment } from 'react';
 import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@mui/icons-material';
 //import Hotkeys from 'react-hot-keys';
-//import { lat2tile, lon2tile } from 'modules/helpers/background/widget';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -26,6 +25,7 @@ const downloadImage = async (info) => {
 export default function PhotoInformation({ info, url, api }) {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
+  const [usePhotoMap, setPhotoMap] = useState(false);
 
   if (info.hidden === true || !info.credit) {
     return null;
@@ -75,7 +75,7 @@ export default function PhotoInformation({ info, url, api }) {
   }
 
   const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL && api;
-  /*const downloadBackground = () => { 
+  const downloadBackground = () => { 
     if (downloadEnabled) {
       downloadImage(info);
     }
@@ -90,36 +90,36 @@ export default function PhotoInformation({ info, url, api }) {
         element.style.display = 'none';
       }
     }
-  };*/
+  };
 
-  {/*const photoMap = () => {
+  const photoMap = () => {
-    if (localStorage.getItem('photoMap') !== 'true' || !info.latitude || !info.longitude) {
+    if (localStorage.getItem('photoMap') !== 'true' || !info.latitude || !info.longitude || usePhotoMap === false) {
       return null;
     }
 
     const zoom = 12;
-    const lat = lat2tile(info.latitude, zoom);
+    const tile = `${variables.constants.MAPBOX_URL}/styles/v1/mapbox/streets-v11/static/pin-s+555555(${info.longitude},${info.latitude})/${info.longitude},${info.latitude},${zoom},0/300x100?access_token=${info.maptoken}`;
-    const lon = lon2tile(info.longitude, zoom);
-    const tile = `${variables.constants.MAPBOX_URL}/styles/v1/mapbox/streets-v11/tiles/${zoom}/${lon}/${lat}?access_token=${info.maptoken}`;
-    
-    let icon = variables.constants.CDN_URL + '/mapbox/mapbox-logo-dark.png';
-    if (document.body.classList.contains('dark')) {
-      icon = variables.constants.CDN_URL + '/mapbox/mapbox-logo-white.png';
-    }
 
     return (
-      <Fragment key='test'>
+      <Fragment key='photomap'>
-        <a href={`https://www.openstreetmap.org/?mlat=${info.latitude}&mlon=${info.longitude}`} target='_blank' rel='noopener noreferrer'>
+        <a href={`${variables.constants.OPENSTREETMAP_URL}/?mlat=${info.latitude}&mlon=${info.longitude}`} target='_blank' rel='noopener noreferrer'>
           <img className='locationMap' src={tile} alt='location' draggable={false}/>
         </a>
         <br/>
-        <img className='mapboxLogo' src={icon} alt='mapbox logo' draggable={false}/>
         <span className='mapCopyright'>
           <a href='https://www.mapbox.com/about/maps/' target='_blank' rel='noopener noreferrer'> © Mapbox</a>, <a href='https://www.openstreetmap.org/about/' target='_blank' rel='noopener noreferrer'>© OpenStreetMap</a>. <a href='https://www.mapbox.com/map-feedback/' target='_blank' rel='noopener noreferrer'>Improve this map</a>.
         </span>
       </Fragment>
     );
-  }*/}
+  }
+
+  // only request map image if the user looks at the photo information
+  // this is to reduce requests to the api
+  try {
+    document.getElementsByClassName('photoInformation')[0].onmouseover = () => {
+      setPhotoMap(true);
+    }
+  } catch (e) {}
 
   return (
     <div className='photoInformation'>
@@ -129,7 +129,7 @@ export default function PhotoInformation({ info, url, api }) {
         <Info className='infoIcon'/>
         <h1>{variables.language.getMessage(variables.languagecode, 'widgets.background.information')}</h1>
         <hr/>
-        {/*photoMap()*/}
+        {photoMap()}
         {/* fix console error by using fragment and key */}
         {info.location && info.location !== 'N/A' ? <Fragment key='location'>
           <LocationOn/>

src/index.js

@@ -22,7 +22,7 @@ if (languagecode === 'en') {
 }
 
 variables.language = new I18n(variables.languagecode, {
-  de: require('./translations/de_DE.json'),
+  de_DE: require('./translations/de_DE.json'),
   en_GB: require('./translations/en_GB.json'),
   en_US: require('./translations/en_US.json'),
   es: require('./translations/es.json'),

src/modules/constants.js

@@ -5,14 +5,14 @@ export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';
 export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
-//export const MAPBOX_URL = 'https://api.mapbox.com';
+export const MAPBOX_URL = 'https://api.mapbox.com';
+export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';
 
 // Mue URLs
 export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
 export const BLOG_POST = 'https://blog.muetab.com/posts/version-6-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
-export const CDN_URL = 'https://res.cloudinary.com/mue/image/upload';
 
 // Mue Info
 export const ORG_NAME = 'mue';
@@ -29,4 +29,4 @@ export const DONATE_USERNAME = 'davidcralph'; // this only works if you use the
 
 export const OFFLINE_IMAGES = 20;
 
-export const VERSION = '6.0.2'; 
+export const VERSION = '6.0.3'; 

src/modules/helpers/background/widget.js

@@ -72,12 +72,3 @@ export function randomColourStyleBuilder(type) {
     style
   }
 }
-
-// source: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
-/*export function lon2tile(lon, zoom) {
-  return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
-}
-
-export function lat2tile(lat, zoom) {
-  return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
-}*/

src/modules/helpers/marketplace.js

@@ -48,6 +48,7 @@ export function install(type, input, sideload) {
       localStorage.setItem('quoteType', 'quote_pack');
       EventBus.dispatch('refresh', 'quote');
       break;
+
     default:
       break;
   }
@@ -78,6 +79,7 @@ export function uninstall(type, name) {
       });
       showReminder();
       break;
+
     case 'quotes':
       localStorage.removeItem('quote_packs');
       localStorage.removeItem('quoteAPI');
@@ -85,12 +87,14 @@ export function uninstall(type, name) {
       localStorage.removeItem('oldQuoteType');
       EventBus.dispatch('refresh', 'marketplacequoteuninstall');
       break;
+
     case 'photos':
       localStorage.removeItem('photo_packs');
       localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
       localStorage.removeItem('oldBackgroundType');
       EventBus.dispatch('refresh', 'marketplacebackgrounduninstall');
       break;
+
     default:
       break;
   }