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';
|
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-01-17 18:07:26 +00:00
|
|
|
export default function PhotoInformation(props) {
|
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-04-14 11:51:11 +00:00
|
|
|
if (props.info.hidden === true || !props.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-04-30 21:49:04 +00:00
|
|
|
const photographer = props.info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
|
2021-04-27 13:52:04 +00:00
|
|
|
|
|
|
|
let credit = props.info.credit;
|
|
|
|
let photo = language.credit;
|
|
|
|
|
2021-05-06 16:30:13 +00:00
|
|
|
// unsplash and pexels credit
|
|
|
|
if (props.info.photographerURL && props.info.photographerURL !== '' && !props.info.offline && props.api) {
|
|
|
|
if (props.api === 'unsplash') {
|
2021-05-06 17:30:57 +00:00
|
|
|
photo = <a href={props.info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
|
2021-05-06 16:30:13 +00:00
|
|
|
credit = <><a href={props.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></>;
|
|
|
|
} else {
|
2021-05-06 17:30:57 +00:00
|
|
|
photo = <a href={props.info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
|
2021-05-06 16:30:13 +00:00
|
|
|
credit = <><a href={props.info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
|
|
|
|
}
|
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-01 14:02:18 +00:00
|
|
|
img.src = (localStorage.getItem('ddgProxy') === 'true' && !props.info.offline && !props.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + props.url : props.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-05-09 15:37:28 +00:00
|
|
|
<span id='infoLocation'>{props.info.location || 'N/A'}</span>
|
|
|
|
<span id='infoCamera'>{props.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-25 12:28:41 +00:00
|
|
|
const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL;
|
|
|
|
const downloadBackground = () => {
|
|
|
|
if (downloadEnabled) {
|
|
|
|
downloadImage(props.info);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
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-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-08-20 10:52:05 +00:00
|
|
|
{/* fix console error by using fragment and key */}
|
|
|
|
{props.info.location && props.info.location !== 'N/A' ? <Fragment key='location'>
|
2021-08-19 21:24:03 +00:00
|
|
|
<LocationOn/>
|
|
|
|
<span id='infoLocation'>{props.info.location}</span>
|
2021-08-20 10:52:05 +00:00
|
|
|
</Fragment> : null}
|
|
|
|
{props.info.camera && props.info.camera !== 'N/A' ? <Fragment key='camera'>
|
2021-08-19 21:24:03 +00:00
|
|
|
<PhotoCamera/>
|
|
|
|
<span id='infoCamera'>{props.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/>
|
|
|
|
<span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
|
|
|
|
</>
|
|
|
|
: 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
|
|
|
}
|