feat(Admin > Edit Album): View photo in new tab as original dimensions

Author: danactive

src/components/AdminAlbum/Photo.tsx

@@ -1,14 +1,23 @@
 import Button from '@mui/joy/Button'
+import IconButton from '@mui/joy/IconButton'
 import Stack from '@mui/joy/Stack'
 import useSWRMutation from 'swr/mutation'
 
 import type { Prediction } from '../../../app/api/admin/classify/route'
-import { photoPath } from '../../lib/paths'
+import { originalPath, photoPath } from '../../lib/paths'
 import config from '../../models/config'
 import type { Gallery, RawXmlItem } from '../../types/common'
 import Img from '../Img'
 import Link from '../Link'
 
+function OpenInNewIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+      <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+    </svg>
+  )
+}
+
 const fetcher = async (url: string, { arg }: { arg: string }) =>
   fetch(url, {
     method: 'POST',
@@ -25,22 +34,39 @@ export default function AdminAlbumPhoto(
     fetcher,
   )
 
-  const path = photoPath(item.filename, gallery)
+  const photoSrc = photoPath(item.filename, gallery)
+  const originalSrc = originalPath(item.filename, gallery)
   const dimensions = size === 'small' ? config.resizeDimensions.preview : config.resizeDimensions.photo
 
   return (
     <>
       <Stack direction="column">
-        <Img
-          src={path}
-          alt={item.thumb_caption || 'Photo'}
-          width={dimensions.width - 20}
-          height={dimensions.height - 20}
-        />
+        <Stack direction="row" alignItems="flex-start" spacing={1} sx={{ position: 'relative' }}>
+          <Img
+            src={photoSrc}
+            alt={item.thumb_caption || 'Photo'}
+            width={dimensions.width - 20}
+            height={dimensions.height - 20}
+          />
+          <IconButton
+            component={Link}
+            href={originalSrc}
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="soft"
+            color="primary"
+            size="sm"
+            title="Open original image in new tab"
+            aria-label="Open original image in new tab"
+            sx={{ flexShrink: 0, mt: 0.5 }}
+          >
+            <OpenInNewIcon />
+          </IconButton>
+        </Stack>
         <Button
           onClick={(e) => {
             e.preventDefault()
-            trigger(path)
+            trigger(photoSrc)
           }}
         >
           Classify Image

src/lib/paths.ts

@@ -16,7 +16,7 @@ const filenameAsJpg = (filename: Item['filename'][0]) => {
  * @param {string} rasterType photo|thumb
  * @returns {string} path
  */
-export const rasterPath = (filename: XmlItem['filename'], gallery: Gallery, rasterType: 'photo' | 'thumb') => {
+export const rasterPath = (filename: XmlItem['filename'], gallery: Gallery, rasterType: 'original' | 'photo' | 'thumb') => {
   const imageFilename = filenameAsJpg(Array.isArray(filename) ? filename[0] : filename)
   const year = imageFilename.indexOf('-') >= 0 ? imageFilename.split('-')[0] : ''
 
@@ -29,10 +29,15 @@ export const rasterPath = (filename: XmlItem['filename'], gallery: Gallery, rast
 export const thumbPath = (filename: XmlItem['filename'], gallery: Gallery) => rasterPath(filename, gallery, 'thumb')
 
 /**
- * Photo path to public folder
+ * Photo path to public folder (resized for display)
  */
 export const photoPath = (filename: XmlItem['filename'], gallery: Gallery) => rasterPath(filename, gallery, 'photo')
 
+/**
+ * Original (full-size) image path to public folder
+ */
+export const originalPath = (filename: XmlItem['filename'], gallery: Gallery) => rasterPath(filename, gallery, 'original')
+
 /**
  * Video paths to public folder on local filesystem
  * @param {object} filename file plus extension