import React from 'react';
import { graphql, navigate, Link } from 'gatsby';
import {
getAspectRatio,
getMeta,
getName,
getShutterFractionFromExposureTime,
getVibrant,
getVibrantToHelmetSafeBodyStyle,
hasName,
} from '../../utils';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import { Helmet } from 'react-helmet';
import classnames from 'classnames';
import posthog from 'posthog-js';
import MetadataItem from './MetadataItem';
const logKeyShortcut = (keyCode) => {
try {
// eslint-disable-next-line
posthog.capture('[key shortcut]', { keyCode });
window.plausible('KeyShortcut', {props: { keyCode }});
} catch (e) {/* do nothing */}
};
const GalleryImage = ({ data, pageContext }) => {
const image = data.allFile.edges[0].node;
const ar = getAspectRatio(image);
React.useEffect(() => {
const keyListener = (e) => {
switch (e.code) {
case 'ArrowRight': {
logKeyShortcut(e.code);
if (pageContext.nextImage) {
navigate(`/photogallery/${pageContext.nextImage}/`);
}
return;
}
case 'ArrowLeft': {
logKeyShortcut(e.code);
if (pageContext.prevImage) {
navigate(`/photogallery/${pageContext.prevImage}/`);
}
return;
}
case 'Escape':
case 'KeyG': {
logKeyShortcut(e.code);
navigate('/photogallery/');
}
}
};
document.addEventListener('keydown', keyListener);
return () => {
document.removeEventListener('keydown', keyListener);
};
}, [pageContext]);
const name = getName(image);
const meta = getMeta(image);
let locationString;
if (meta.iptc.city || meta.iptc.province_or_state) {
const location = [meta.iptc.city, meta.iptc.province_or_state].filter(Boolean);
locationString = location.join(', ');
}
const vibrant = getVibrant(image, true);
const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
const dateTaken = React.useMemo(() => new Date(meta.dateTaken), [meta]);
return (<>
{name} - Gallery | Chuck Dries
{image.base}
{hasName(image) &&
{name}
}
{meta.iptc.caption}
{
}
);
};
export const query = graphql`
query GalleryImage($imageFilename: String) {
allFile(filter: {sourceInstanceName: {eq: "gallery"}, base: {eq: $imageFilename}}) {
edges {
node {
base
childImageSharp{
fluid {
aspectRatio
}
gatsbyImageData(
layout: CONSTRAINED
# placeholder: BLURRED
placeholder: DOMINANT_COLOR
# placeholder: TRACED_SVG
height: 2160
)
}
fields {
imageMeta {
dateTaken
iptc {
caption
object_name
keywords
city
province_or_state
}
exif {
FNumber
ExposureTime
ISO
}
vibrant {
...VibrantColors
}
}
}
}
}
}
}
`;
export default GalleryImage;