diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 46b08d76..8a3bd192 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -169,6 +169,7 @@ export default class BackgroundSettings extends PureComponent { +

{background.source.title}

this.setState({ backgroundType: value })} category='background'> diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index f9a264e3..abb2e476 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -108,11 +108,12 @@ export default class Background extends PureComponent { const backgroundAPI = localStorage.getItem('backgroundAPI'); const apiCategory = localStorage.getItem('apiCategory'); const apiQuality = localStorage.getItem('apiQuality'); + const photoMap = localStorage.getItem('photoMap'); let requestURL, data; switch (backgroundAPI) { case 'unsplash': - requestURL = `${window.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}`; + requestURL = `${window.constants.PROXY_URL}/images/unsplash?quality=${apiQuality}&map=${(photoMap === 'true')}`; break; case 'pexels': requestURL = `${window.constants.PROXY_URL}/images/pexels?quality=${apiQuality}`; @@ -154,7 +155,9 @@ export default class Background extends PureComponent { camera: data.camera, url: data.file, photographerURL: photographerURL, - photoURL: photoURL + photoURL: photoURL, + latitude: data.latitude || null, + longitude: data.longitude || null, } }; diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 1a5f7cd6..3c734287 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -1,6 +1,7 @@ import { useState, Fragment } from 'react'; import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons'; import Hotkeys from 'react-hot-keys'; +import { lat2tile, lon2tile } from 'modules/helpers/background/widget'; const toDataURL = async (url) => { const res = await fetch(url); @@ -88,6 +89,18 @@ export default function PhotoInformation({ info, url, api }) { } }; + const photoMap = () => { + if (localStorage.getItem('photoMap') !== 'true' || info.latitude === null || info.longitude === null) { + return null; + } + + const lat = lat2tile(info.latitude, 12); + const lon = lon2tile(info.longitude, 12); + return ( + location + ); + } + return (

{photo} {credit}

@@ -96,6 +109,7 @@ export default function PhotoInformation({ info, url, api }) {

{language.information}


+ {photoMap()} {/* fix console error by using fragment and key */} {info.location && info.location !== 'N/A' ? diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index ca31462c..5f5b9acb 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -55,6 +55,14 @@ padding: 2px; } + img { + height: 100px; + object-fit: cover; + width: 100%; + background-position: center center; + background-repeat: no-repeat; + } + span, svg { font-size: 2em; diff --git a/src/modules/helpers/background/widget.js b/src/modules/helpers/background/widget.js index be544baa..f8a79425 100644 --- a/src/modules/helpers/background/widget.js +++ b/src/modules/helpers/background/widget.js @@ -36,3 +36,13 @@ export function gradientStyleBuilder({ type, angle, gradient }) { style: `background:${gradient[0]?.colour};${grad}` }; } + + +// 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))); +}