From c736dcf57a5085cb6a6d18c79f45c33b968b7692 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 28 Nov 2021 14:13:24 +0000 Subject: [PATCH] fix: enable photo map and update, fix welcome error, fix preview --- src/components/helpers/preview/Preview.jsx | 6 ++-- src/components/helpers/preview/preview.scss | 4 ++- .../sections/background/Background.jsx | 2 +- .../modals/welcome/WelcomeSections.jsx | 7 ++++ .../widgets/background/PhotoInformation.jsx | 36 +++++++++---------- src/modules/constants.js | 4 +-- src/modules/helpers/background/widget.js | 9 ----- 7 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/components/helpers/preview/Preview.jsx b/src/components/helpers/preview/Preview.jsx index 4cccaf2a..7846e7d7 100644 --- a/src/components/helpers/preview/Preview.jsx +++ b/src/components/helpers/preview/Preview.jsx @@ -7,9 +7,9 @@ export default function Preview(props) { return (
-

{getMessage('modals.main.settings.reminder.title')}

-

{getMessage('modals.welcome.preview.description')}

- +

{getMessage('modals.main.settings.reminder.title')}

+

{getMessage('modals.welcome.preview.description')}

+
); } diff --git a/src/components/helpers/preview/preview.scss b/src/components/helpers/preview/preview.scss index 63d75e1d..b06e77ba 100644 --- a/src/components/helpers/preview/preview.scss +++ b/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; diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 613dd502..c33f3dc8 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -133,7 +133,7 @@ export default class BackgroundSettings extends PureComponent { - {/**/} +

{getMessage('modals.main.settings.sections.background.source.title')}

this.setState({ backgroundType: value })} category='background'> diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx index fe4db288..843c8047 100644 --- a/src/components/modals/welcome/WelcomeSections.jsx +++ b/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) { diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 60719198..f4669a19 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/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 ( - - + + location
- mapbox logo © Mapbox, © OpenStreetMap. Improve this map. ); - }*/} + } + + // 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 (
@@ -129,7 +129,7 @@ export default function PhotoInformation({ info, url, api }) {

{variables.language.getMessage(variables.languagecode, 'widgets.background.information')}

- {/*photoMap()*/} + {photoMap()} {/* fix console error by using fragment and key */} {info.location && info.location !== 'N/A' ? diff --git a/src/modules/constants.js b/src/modules/constants.js index c46c3773..7d497165 100644 --- a/src/modules/constants.js +++ b/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'; diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js index 046a437e..9f34b98c 100644 --- a/src/modules/helpers/background/widget.js +++ b/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))); -}*/