2021-08-20 10:52:05 +00:00
|
|
|
import { useState, Fragment } from 'react';
|
2021-08-15 21:28:37 +00:00
|
|
|
import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
|
2021-08-25 12:28:41 +00:00
|
|
|
import Hotkeys from 'react-hot-keys';
|
2021-09-06 18:35:31 +00:00
|
|
|
import { lat2tile, lon2tile } from 'modules/helpers/background/widget';
|
2020-10-17 09:47:01 +00:00
|
|
|
|
2021-04-07 09:57:28 +00:00
|
|
|
const toDataURL = async (url) => {
|
2021-04-11 14:53:11 +00:00
|
|
|
const res = await fetch(url);
|
|
|
|
return URL.createObjectURL(await res.blob());
|
2021-04-08 18:52:17 +00:00
|
|
|
};
|
2021-04-07 09:57:28 +00:00
|
|
|
|
2021-08-19 21:24:03 +00:00
|
|
|
const formatText = (text) => {
|
|
|
|
return text.toLowerCase().replaceAll(',', '').replaceAll(' ', '-');
|
|
|
|
};
|
|
|
|
|
2021-04-07 09:57:28 +00:00
|
|
|
const downloadImage = async (info) => {
|
|
|
|
const link = document.createElement('a');
|
|
|
|
link.href = await toDataURL(info.url);
|
2021-08-19 21:24:03 +00:00
|
|
|
link.download = `mue-${formatText(info.credit)}-${formatText(info.location)}.jpg`;
|
2021-04-07 09:57:28 +00:00
|
|
|
document.body.appendChild(link);
|
|
|
|
link.click();
|
|
|
|
document.body.removeChild(link);
|
2021-06-30 10:27:54 +00:00
|
|
|
window.stats.postEvent('feature', 'Background download');
|
2021-04-08 18:52:17 +00:00
|
|
|
};
|
2021-04-07 09:57:28 +00:00
|
|
|
|
2021-08-28 18:14:22 +00:00
|
|
|
export default function PhotoInformation({ info, url, api }) {
|
2021-08-14 19:10:48 +00:00
|
|
|
const [width, setWidth] = useState(0);
|
|
|
|
const [height, setHeight] = useState(0);
|
2021-07-12 20:48:08 +00:00
|
|
|
|
2021-03-19 22:30:29 +00:00
|
|
|
const language = window.language.widgets.background;
|
|
|
|
|
2021-08-28 18:14:22 +00:00
|
|
|
if (info.hidden === true || !info.credit) {
|
2021-03-21 13:19:24 +00:00
|
|
|
return null;
|
|
|
|
}
|
2021-03-21 13:09:06 +00:00
|
|
|
|
2021-05-06 16:30:13 +00:00
|
|
|
// remove unsplash and pexels text
|
2021-08-28 18:14:22 +00:00
|
|
|
const photographer = info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
|
2021-04-27 13:52:04 +00:00
|
|
|
|
2021-08-28 18:14:22 +00:00
|
|
|
let credit = info.credit;
|
2021-04-27 13:52:04 +00:00
|
|
|
let photo = language.credit;
|
|
|
|
|
2021-05-06 16:30:13 +00:00
|
|
|
// unsplash and pexels credit
|
2021-08-28 18:14:22 +00:00
|
|
|
if (info.photographerURL && info.photographerURL !== '' && !info.offline && api) {
|
|
|
|
if (api === 'unsplash') {
|
|
|
|
photo = <a href={info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
|
|
|
|
credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
|
2021-05-06 16:30:13 +00:00
|
|
|
} else {
|
2021-08-28 18:14:22 +00:00
|
|
|
photo = <a href={info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
|
|
|
|
credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
|
2021-05-06 16:30:13 +00:00
|
|
|
}
|
2021-04-27 13:52:04 +00:00
|
|
|
}
|
|
|
|
|
2021-07-12 20:48:08 +00:00
|
|
|
// get resolution
|
|
|
|
const img = new Image();
|
2021-07-15 14:08:37 +00:00
|
|
|
img.onload = (event) => {
|
|
|
|
setWidth(event.target.width);
|
|
|
|
setHeight(event.target.height);
|
2021-08-21 10:11:00 +00:00
|
|
|
};
|
2021-08-28 18:14:22 +00:00
|
|
|
img.src = (localStorage.getItem('ddgProxy') === 'true' && !info.offline && !url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + url : url;
|
2021-07-12 20:48:08 +00:00
|
|
|
|
2021-08-16 11:21:37 +00:00
|
|
|
// info is still there because we want the favourite button to work
|
|
|
|
if (localStorage.getItem('photoInformation') === 'false') {
|
|
|
|
return (
|
|
|
|
<div className='photoInformation'>
|
|
|
|
<h1>{photo} <span id='credit'>{credit}</span></h1>
|
|
|
|
<div style={{ display: 'none' }}>
|
2021-08-28 18:14:22 +00:00
|
|
|
<span id='infoLocation'>{info.location || 'N/A'}</span>
|
|
|
|
<span id='infoCamera'>{info.camera || 'N/A'}</span>
|
2021-07-12 20:48:08 +00:00
|
|
|
<span id='infoResolution'>{width}x{height}</span>
|
2021-05-09 15:37:28 +00:00
|
|
|
</div>
|
2021-08-16 11:21:37 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-08-28 18:14:22 +00:00
|
|
|
const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL;
|
2021-08-25 12:28:41 +00:00
|
|
|
const downloadBackground = () => {
|
|
|
|
if (downloadEnabled) {
|
2021-08-28 18:14:22 +00:00
|
|
|
downloadImage(info);
|
2021-08-25 12:28:41 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const showBackgroundInformation = () => {
|
|
|
|
const element = document.querySelector('.infoCard');
|
|
|
|
if (element) {
|
|
|
|
if (element.style.display === 'none' || element.style.display === '') {
|
|
|
|
element.style.display = 'block';
|
|
|
|
} else {
|
|
|
|
element.style.display = 'none';
|
|
|
|
}
|
|
|
|
}
|
2021-08-27 17:27:11 +00:00
|
|
|
};
|
2021-08-25 12:28:41 +00:00
|
|
|
|
2021-09-06 18:35:31 +00:00
|
|
|
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 (
|
|
|
|
<img src={`https://a.tile.openstreetmap.org/12/${lon}/${lat}.png`} alt='location' draggable={false}/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-08-16 11:21:37 +00:00
|
|
|
return (
|
|
|
|
<div className='photoInformation'>
|
|
|
|
<h1>{photo} <span id='credit'>{credit}</span></h1>
|
|
|
|
<Info className='photoInformationHover'/>
|
|
|
|
<div className='infoCard'>
|
|
|
|
<Info className='infoIcon'/>
|
|
|
|
<h1>{language.information}</h1>
|
|
|
|
<hr/>
|
2021-09-06 18:35:31 +00:00
|
|
|
{photoMap()}
|
2021-08-20 10:52:05 +00:00
|
|
|
{/* fix console error by using fragment and key */}
|
2021-08-28 18:14:22 +00:00
|
|
|
{info.location && info.location !== 'N/A' ? <Fragment key='location'>
|
2021-08-19 21:24:03 +00:00
|
|
|
<LocationOn/>
|
2021-08-28 18:14:22 +00:00
|
|
|
<span id='infoLocation'>{info.location}</span>
|
2021-08-20 10:52:05 +00:00
|
|
|
</Fragment> : null}
|
2021-08-28 18:14:22 +00:00
|
|
|
{info.camera && info.camera !== 'N/A' ? <Fragment key='camera'>
|
2021-08-19 21:24:03 +00:00
|
|
|
<PhotoCamera/>
|
2021-08-28 18:14:22 +00:00
|
|
|
<span id='infoCamera'>{info.camera}</span>
|
2021-08-20 10:52:05 +00:00
|
|
|
</Fragment> : null}
|
2021-08-16 11:21:37 +00:00
|
|
|
<Resolution/>
|
|
|
|
<span id='infoResolution'>{width}x{height}</span>
|
|
|
|
<Photographer/>
|
|
|
|
<span>{photographer}</span>
|
2021-08-25 12:28:41 +00:00
|
|
|
{downloadEnabled ?
|
2021-08-16 11:21:37 +00:00
|
|
|
<>
|
|
|
|
<Download/>
|
2021-08-28 18:14:22 +00:00
|
|
|
<span className='download' onClick={() => downloadImage(info)}>{language.download}</span>
|
2021-08-16 11:21:37 +00:00
|
|
|
</>
|
|
|
|
: null}
|
|
|
|
</div>
|
2021-08-25 12:28:41 +00:00
|
|
|
{window.keybinds.downloadBackground && window.keybinds.downloadBackground !== '' ? <Hotkeys keyName={window.keybinds.downloadBackground} onKeyDown={() => downloadBackground()} /> : null}
|
|
|
|
{window.keybinds.showBackgroundInformation && window.keybinds.showBackgroundInformation !== '' ? <Hotkeys keyName={window.keybinds.showBackgroundInformation} onKeyDown={() => showBackgroundInformation()} /> : null}
|
2021-01-17 16:25:21 +00:00
|
|
|
</div>
|
|
|
|
);
|
2021-03-17 13:01:53 +00:00
|
|
|
}
|