feat: check for addon updates, add attribution to photo location map

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

@@ -90,6 +90,22 @@ export default class Added extends PureComponent {
     }
   }
 
+  updateCheck() {
+    let updates = 0;
+    this.state.installed.forEach(async (item) => {
+      const data = await (await fetch('https://marketplace.muetab.com/item/' + item.name)).json();
+      if (data.version !== item.version) {
+        updates++;
+      }
+    });
+    
+    if (updates > 0) { 
+      toast('Updates available: ' + updates);
+    } else {
+      toast('No updates available');
+    }
+  }
+
   componentDidMount() {
     this.sortAddons(localStorage.getItem('sortAddons'), false);
   }
@@ -119,6 +135,7 @@ export default class Added extends PureComponent {
           <option value='a-z'>{this.language.sort.a_z}</option>
           <option value='z-a'>{this.language.sort.z_a}</option>
         </Dropdown>
+        <button className='addToMue sideload updateCheck' onClick={() => this.updateCheck()}>Check for updates</button>
         <br/>
         <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', input)} />        
       </>

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

@@ -53,7 +53,7 @@ export default class Sideload extends PureComponent {
           <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))} />
           <LocalMall/>
           <h1>{window.language.modals.main.addons.sideload}</h1>
-          <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>
+          <button className='addToMue sideload updateCheck' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>
         </div>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showFailed: false })} isOpen={this.state.showFailed} className='Modal resetmodal mainModal sideloadModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <SideloadFailedModal modalClose={() => this.setState({ showFailed: false })} reason={this.state.failedReason}/>

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

@@ -61,3 +61,8 @@ button.round {
   vertical-align: middle;
   padding: 10px;
 }
+
+.updateCheck {
+  margin-left: 300px;
+  position: absolute;
+}

src/components/widgets/background/Background.jsx

@@ -158,6 +158,8 @@ export default class Background extends PureComponent {
             photoURL: photoURL,
             latitude: data.latitude || null,
             longitude: data.longitude || null,
+            // location map token from mapbox
+            maptoken: data.maptoken || null
           }
         };
 

src/components/widgets/background/PhotoInformation.jsx

@@ -92,18 +92,29 @@ export default function PhotoInformation({ info, url, api }) {
   };
 
   const photoMap = () => {
-    if (localStorage.getItem('photoMap') !== 'true' || info.latitude === null || info.longitude === null) {
+    if (localStorage.getItem('photoMap') !== 'true' || info.latitude === (null || undefined) || info.longitude === (null || undefined)) {
       return null;
     }
 
-    const lat = lat2tile(info.latitude, 12);
-    const lon = lon2tile(info.longitude, 12);
-    const tile = `https://a.tile.openstreetmap.org/12/${lon}/${lat}.png`;
+    const zoom = 12;
+    const lat = lat2tile(info.latitude, zoom);
+    const lon = lon2tile(info.longitude, zoom);
+    const tile = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${zoom}/${lon}/${lat}?access_token=${info.maptoken}`;
+    
+    let icon = 'https://res.cloudinary.com/mue/image/upload/mapbox/mapbox-logo-dark.png';
+    if (document.body.classList.contains('dark')) {
+      icon = 'https://res.cloudinary.com/mue/image/upload/mapbox/mapbox-logo-white.png';
+    }
 
     return (
-      <a href={`https://www.openstreetmap.org/?mlat=${info.latitude}&mlon=${info.longitude}`}>
-        <img src={ddgProxy ? window.constants.DDG_IMAGE_PROXY + tile : tile} alt='location' draggable={false}/>
-      </a>
+      <Fragment key='test'>
+        <a href={`https://www.openstreetmap.org/?mlat=${info.latitude}&mlon=${info.longitude}`}>
+          <img className='locationMap' src={ddgProxy ? window.constants.DDG_IMAGE_PROXY + tile : 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/'> © Mapbox</a>, <a href='http://www.openstreetmap.org/about/'>© OpenStreetMap</a>. <a href='https://www.mapbox.com/map-feedback/'>Improve this map</a>.</span>
+      </Fragment>
     );
   }
 

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

@@ -55,7 +55,7 @@
     padding: 2px;
   }
 
-  img {
+  .locationMap {
     height: 100px;
     object-fit: cover;
     width: 100%;
@@ -63,6 +63,11 @@
     background-repeat: no-repeat;
   }
 
+  .mapboxLogo {
+    height: 20px;
+    width: auto;
+  }
+
   span,
   svg {
     font-size: 2em;
@@ -103,4 +108,8 @@
       opacity: 0.8;
     }
   }
+
+  .mapCopyright {
+    font-size: 0.9em;
+  }
 }