fix: enable photo map and update, fix welcome error, fix preview

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.welcome.preview.description')}</h1>
-      <button className='close' onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
+      <h1>{getMessage('modals.main.settings.reminder.title')}</h1>
+      <p>{getMessage('modals.welcome.preview.description')}</p>
+      <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/settings/sections/background/Background.jsx

@@ -133,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/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 = () => {
-    if (localStorage.getItem('photoMap') !== 'true' || !info.latitude || !info.longitude) {
+  const photoMap = () => {
+    if (localStorage.getItem('photoMap') !== 'true' || !info.latitude || !info.longitude || usePhotoMap === false) {
       return null;
     }
 
     const zoom = 12;
-    const lat = lat2tile(info.latitude, zoom);
-    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';
-    }
+    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}`;
 
     return (
-      <Fragment key='test'>
-        <a href={`https://www.openstreetmap.org/?mlat=${info.latitude}&mlon=${info.longitude}`} target='_blank' rel='noopener noreferrer'>
+      <Fragment key='photomap'>
+        <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/>