352 lines
12 KiB
JavaScript
352 lines
12 KiB
JavaScript
import styles from './text.module.css'
|
|
import { Fragment, useState, useEffect, useMemo, useCallback, forwardRef, useRef } from 'react'
|
|
import { IMGPROXY_URL_REGEXP } from '../lib/url'
|
|
import { useShowModal } from './modal'
|
|
import { useMe } from './me'
|
|
import { Dropdown } from 'react-bootstrap'
|
|
import { UPLOAD_TYPES_ALLOW } from '../lib/constants'
|
|
import { useToast } from './toast'
|
|
import gql from 'graphql-tag'
|
|
import { useMutation } from '@apollo/client'
|
|
import piexif from 'piexifjs'
|
|
|
|
export function decodeOriginalUrl (imgproxyUrl) {
|
|
const parts = imgproxyUrl.split('/')
|
|
// base64url is not a known encoding in browsers
|
|
// so we need to replace the invalid chars
|
|
const b64Url = parts[parts.length - 1].replace(/-/g, '+').replace(/_/, '/')
|
|
const originalUrl = Buffer.from(b64Url, 'base64').toString('utf-8')
|
|
return originalUrl
|
|
}
|
|
|
|
function ImageOriginal ({ src, topLevel, nofollow, tab, children, onClick, ...props }) {
|
|
const me = useMe()
|
|
const [showImage, setShowImage] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (me?.privates?.imgproxyOnly && tab !== 'preview') return
|
|
// make sure it's not a false negative by trying to load URL as <img>
|
|
const img = new window.Image()
|
|
img.onload = () => setShowImage(true)
|
|
img.src = src
|
|
|
|
return () => {
|
|
img.onload = null
|
|
img.src = ''
|
|
}
|
|
}, [src, showImage])
|
|
|
|
if (showImage) {
|
|
return (
|
|
<img
|
|
className={topLevel ? styles.topLevel : undefined}
|
|
src={src}
|
|
onClick={() => onClick(src)}
|
|
onError={() => setShowImage(false)}
|
|
/>
|
|
)
|
|
} else {
|
|
// user is not okay with loading original url automatically or there was an error loading the image
|
|
|
|
// If element parsed by markdown is a raw URL, we use src as the text to not mislead users.
|
|
// This will not be the case if [text](url) format is used. Then we will show what was chosen as text.
|
|
const isRawURL = /^https?:\/\//.test(children?.[0])
|
|
return (
|
|
<a
|
|
target='_blank'
|
|
rel={`noreferrer ${nofollow ? 'nofollow' : ''} noopener`}
|
|
href={src}
|
|
>{isRawURL ? src : children}
|
|
</a>
|
|
)
|
|
}
|
|
}
|
|
|
|
function ImageProxy ({ src, srcSet: srcSetObj, onClick, topLevel, onError, ...props }) {
|
|
const srcSet = useMemo(() => {
|
|
if (!srcSetObj) return undefined
|
|
// srcSetObj shape: { [widthDescriptor]: <imgproxyUrl>, ... }
|
|
return Object.entries(srcSetObj).reduce((acc, [wDescriptor, url], i, arr) => {
|
|
return acc + `${url} ${wDescriptor}` + (i < arr.length - 1 ? ', ' : '')
|
|
}, '')
|
|
}, [srcSetObj])
|
|
const sizes = srcSet ? `${(topLevel ? 100 : 66)}vw` : undefined
|
|
|
|
// get source url in best resolution
|
|
const bestResSrc = useMemo(() => {
|
|
if (!srcSetObj) return src
|
|
return Object.entries(srcSetObj).reduce((acc, [wDescriptor, url]) => {
|
|
const w = Number(wDescriptor.replace(/w$/, ''))
|
|
return w > acc.w ? { w, url } : acc
|
|
}, { w: 0, url: undefined }).url
|
|
}, [srcSetObj])
|
|
|
|
return (
|
|
<img
|
|
className={topLevel ? styles.topLevel : undefined}
|
|
// browsers that don't support srcSet and sizes will use src. use best resolution possible in that case
|
|
src={bestResSrc}
|
|
srcSet={srcSet}
|
|
sizes={sizes}
|
|
onClick={() => onClick(bestResSrc)}
|
|
onError={onError}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default function ZoomableImage ({ src, srcSet, ...props }) {
|
|
const showModal = useShowModal()
|
|
|
|
// if `srcSet` is falsy, it means the image was not processed by worker yet
|
|
const [imgproxy, setImgproxy] = useState(!!srcSet || IMGPROXY_URL_REGEXP.test(src))
|
|
|
|
// backwards compatibility:
|
|
// src may already be imgproxy url since we used to replace image urls with imgproxy urls
|
|
const originalUrl = IMGPROXY_URL_REGEXP.test(src) ? decodeOriginalUrl(src) : src
|
|
|
|
const handleClick = useCallback((src) => showModal(close => {
|
|
return (
|
|
<div
|
|
className={styles.fullScreenContainer}
|
|
onClick={close}
|
|
>
|
|
<img className={styles.fullScreen} src={src} />
|
|
</div>
|
|
)
|
|
}, {
|
|
fullScreen: true,
|
|
overflow: (
|
|
<Dropdown.Item
|
|
href={originalUrl} target='_blank'
|
|
rel={`noreferrer ${props.nofollow ? 'nofollow' : ''} noopener`}
|
|
>
|
|
open original
|
|
</Dropdown.Item>)
|
|
}), [showModal, originalUrl, styles])
|
|
|
|
if (!src) return null
|
|
|
|
if (imgproxy) {
|
|
return (
|
|
<ImageProxy
|
|
src={src} srcSet={srcSet}
|
|
onClick={handleClick} onError={() => setImgproxy(false)} {...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return <ImageOriginal src={originalUrl} onClick={handleClick} {...props} />
|
|
}
|
|
|
|
export const ImageUpload = forwardRef(({ children, className, onSelect, onUpload, onSuccess, onError, multiple, avatar }, ref) => {
|
|
const toaster = useToast()
|
|
ref ??= useRef(null)
|
|
|
|
const [getSignedPOST] = useMutation(
|
|
gql`
|
|
mutation getSignedPOST($type: String!, $size: Int!, $width: Int!, $height: Int!, $avatar: Boolean) {
|
|
getSignedPOST(type: $type, size: $size, width: $width, height: $height, avatar: $avatar) {
|
|
url
|
|
fields
|
|
}
|
|
}`)
|
|
|
|
const s3Upload = useCallback(async file => {
|
|
const img = new window.Image()
|
|
file = await removeExifData(file)
|
|
return new Promise((resolve, reject) => {
|
|
img.onload = async () => {
|
|
onUpload?.(file)
|
|
let data
|
|
const variables = {
|
|
avatar,
|
|
type: file.type,
|
|
size: file.size,
|
|
width: img.width,
|
|
height: img.height
|
|
}
|
|
try {
|
|
({ data } = await getSignedPOST({ variables }))
|
|
} catch (e) {
|
|
toaster.danger(e.message || e.toString?.())
|
|
onError?.({ ...variables, name: file.name, file })
|
|
reject(e)
|
|
return
|
|
}
|
|
|
|
const form = new FormData()
|
|
Object.keys(data.getSignedPOST.fields).forEach(key => form.append(key, data.getSignedPOST.fields[key]))
|
|
form.append('Content-Type', file.type)
|
|
form.append('Cache-Control', 'max-age=31536000')
|
|
form.append('acl', 'public-read')
|
|
form.append('file', file)
|
|
|
|
const res = await fetch(data.getSignedPOST.url, {
|
|
method: 'POST',
|
|
body: form
|
|
})
|
|
|
|
if (!res.ok) {
|
|
// TODO make sure this is actually a helpful error message and does not expose anything to the user we don't want
|
|
const err = res.statusText
|
|
toaster.danger(err)
|
|
onError?.({ ...variables, name: file.name, file })
|
|
reject(err)
|
|
return
|
|
}
|
|
|
|
const url = `https://${process.env.NEXT_PUBLIC_MEDIA_DOMAIN}/${data.getSignedPOST.fields.key}`
|
|
// key is upload id in database
|
|
const id = data.getSignedPOST.fields.key
|
|
onSuccess?.({ ...variables, id, name: file.name, url, file })
|
|
resolve(id)
|
|
}
|
|
img.onerror = reject
|
|
img.src = window.URL.createObjectURL(file)
|
|
})
|
|
}, [toaster, getSignedPOST])
|
|
|
|
return (
|
|
<>
|
|
<input
|
|
ref={ref}
|
|
type='file'
|
|
multiple={multiple}
|
|
className='d-none'
|
|
accept={UPLOAD_TYPES_ALLOW.join(', ')}
|
|
onChange={async (e) => {
|
|
const fileList = e.target.files
|
|
for (const file of Array.from(fileList)) {
|
|
if (UPLOAD_TYPES_ALLOW.indexOf(file.type) === -1) {
|
|
toaster.danger(`image must be ${UPLOAD_TYPES_ALLOW.map(t => t.replace('image/', '')).join(', ')}`)
|
|
continue
|
|
}
|
|
if (onSelect) await onSelect?.(file, s3Upload)
|
|
else await s3Upload(file)
|
|
// reset file input
|
|
// see https://bobbyhadz.com/blog/react-reset-file-input#reset-a-file-input-in-react
|
|
e.target.value = null
|
|
}
|
|
}}
|
|
/>
|
|
<div className={className} onClick={() => ref.current?.click()} style={{ cursor: 'pointer' }}>
|
|
{children}
|
|
</div>
|
|
</>
|
|
)
|
|
})
|
|
|
|
// from https://stackoverflow.com/a/77472484
|
|
const removeExifData = async (file) => {
|
|
if (!file || !file.type.startsWith('image/')) return file
|
|
const cleanBuffer = (arrayBuffer) => {
|
|
let dataView = new DataView(arrayBuffer)
|
|
const exifMarker = 0xffe1
|
|
let offset = 2 // Skip the first two bytes (0xFFD8)
|
|
while (offset < dataView.byteLength) {
|
|
if (dataView.getUint16(offset) === exifMarker) {
|
|
// Found an EXIF marker
|
|
const segmentLength = dataView.getUint16(offset + 2, false) + 2
|
|
arrayBuffer = removeSegment(arrayBuffer, offset, segmentLength)
|
|
dataView = new DataView(arrayBuffer)
|
|
} else {
|
|
// Move to the next marker
|
|
offset += 2 + dataView.getUint16(offset + 2, false)
|
|
}
|
|
}
|
|
return arrayBuffer
|
|
}
|
|
const removeSegment = (buffer, offset, length) => {
|
|
// Create a new buffer without the specified segment
|
|
const modifiedBuffer = new Uint8Array(buffer.byteLength - length)
|
|
modifiedBuffer.set(new Uint8Array(buffer.slice(0, offset)), 0)
|
|
modifiedBuffer.set(new Uint8Array(buffer.slice(offset + length)), offset)
|
|
return modifiedBuffer.buffer
|
|
}
|
|
function getOrientation (file) {
|
|
const fr = new window.FileReader()
|
|
return new Promise((resolve, reject) => {
|
|
fr.onload = function () {
|
|
const view = new DataView(this.result)
|
|
if (view.getUint16(0, false) !== 0xFFD8) {
|
|
// not JPEG
|
|
return resolve(-2)
|
|
}
|
|
const length = view.byteLength; let offset = 2
|
|
while (offset < length) {
|
|
if (view.getUint16(offset + 2, false) <= 8) return resolve(-1) // no orientation available
|
|
const marker = view.getUint16(offset, false)
|
|
offset += 2
|
|
if (marker === 0xFFE1) {
|
|
if (view.getUint32(offset += 2, false) !== 0x45786966) {
|
|
// no orientation available
|
|
return resolve(-1)
|
|
}
|
|
const little = view.getUint16(offset += 6, false) === 0x4949
|
|
offset += view.getUint32(offset + 4, little)
|
|
const tags = view.getUint16(offset, little)
|
|
offset += 2
|
|
for (let i = 0; i < tags; i++) {
|
|
if (view.getUint16(offset + (i * 12), little) === 0x0112) {
|
|
// orientation available
|
|
return resolve(view.getUint16(offset + (i * 12) + 8, little))
|
|
}
|
|
}
|
|
} else if ((marker & 0xFF00) !== 0xFF00) {
|
|
break
|
|
} else {
|
|
offset += view.getUint16(offset, false)
|
|
}
|
|
}
|
|
// no orientation available
|
|
return resolve(-1)
|
|
}
|
|
fr.onerror = reject
|
|
fr.readAsArrayBuffer(file)
|
|
})
|
|
}
|
|
const orientation = await getOrientation(file)
|
|
const cleanFile = await new Promise((resolve, reject) => {
|
|
const fr = new window.FileReader()
|
|
fr.onload = function () {
|
|
const cleanedBuffer = cleanBuffer(this.result)
|
|
const blob = new Blob([cleanedBuffer], { type: file.type })
|
|
const newFile = new File([blob], file.name, { type: file.type })
|
|
resolve(newFile)
|
|
}
|
|
fr.onerror = reject
|
|
fr.readAsArrayBuffer(file)
|
|
})
|
|
if (orientation <= 0) {
|
|
// not orientation available (-1) or not JPEG (-2)
|
|
return cleanFile
|
|
}
|
|
// put orientation value back in
|
|
return new Promise((resolve, reject) => {
|
|
const fr = new window.FileReader()
|
|
fr.onload = function () {
|
|
const zeroth = {}
|
|
// Orientation is of type SHORT so single int is ok, see https://piexifjs.readthedocs.io/en/latest/appendices.html
|
|
zeroth[piexif.ImageIFD.Orientation] = orientation
|
|
const exifObj = { '0th': zeroth }
|
|
const exifStr = piexif.dump(exifObj)
|
|
const inserted = piexif.insert(exifStr, this.result)
|
|
const dataUriToBuffer = (dataUri) => {
|
|
// data-uri scheme regexp from https://github.com/ragingwind/data-uri-regex/blob/a9d7474c833e8fbf5b1821fe65d8cccd6aea4536/index.js
|
|
// data:[<media type>][;charset=<character set>][;base64],<data>
|
|
const regexp = /^(data:)([\w/+-]*)(;charset=[\w-]+|;base64){0,1},(.*)/gi
|
|
const b64 = regexp.exec(dataUri)[4]
|
|
const buf = Buffer.from(b64, 'base64')
|
|
return buf
|
|
}
|
|
const buf = dataUriToBuffer(inserted)
|
|
const blob = new Blob([buf], { type: file.type })
|
|
const newFile = new File([blob], file.name, { type: file.type })
|
|
resolve(newFile)
|
|
}
|
|
fr.onerror = reject
|
|
// piexifjs library needs data URI as input
|
|
fr.readAsDataURL(cleanFile)
|
|
})
|
|
}
|