mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
246 lines
7.8 KiB
TypeScript
246 lines
7.8 KiB
TypeScript
/* eslint-disable react/prop-types */
|
|
/* eslint-disable @typescript-eslint/no-floating-promises */
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
/* eslint-disable @typescript-eslint/prefer-optional-chain */
|
|
import { useState, useCallback, useRef } from 'react'
|
|
import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop'
|
|
|
|
import { useAppState } from '#components/AppShell/hooks/useAppState'
|
|
import 'react-image-crop/dist/ReactCrop.css'
|
|
import DialogModal from '#components/Templates/DialogModal'
|
|
|
|
import type { Crop } from 'react-image-crop'
|
|
|
|
interface AvatarWidgetProps {
|
|
avatar: string
|
|
setAvatar: React.Dispatch<React.SetStateAction<any>>
|
|
}
|
|
|
|
export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar }) => {
|
|
const [crop, setCrop] = useState<Crop>()
|
|
const [image, setImage] = useState<string>('')
|
|
const [cropModalOpen, setCropModalOpen] = useState<boolean>(false)
|
|
const [cropping, setCropping] = useState<boolean>(false)
|
|
|
|
const appState = useAppState()
|
|
|
|
const imgRef = useRef<HTMLImageElement>(null)
|
|
|
|
const onImageChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files && event.target.files[0]
|
|
if (file) {
|
|
const validFormats = ['image/jpeg', 'image/png']
|
|
const maxSizeMB = 10
|
|
const maxSizeBytes = maxSizeMB * 1024 * 1024
|
|
|
|
if (!validFormats.includes(file.type)) {
|
|
alert('Unsupported file format. Please upload a JPEG or PNG image.')
|
|
return
|
|
}
|
|
|
|
if (file.size > maxSizeBytes) {
|
|
alert(`File size exceeds ${maxSizeMB}MB. Please upload a smaller image.`)
|
|
return
|
|
}
|
|
|
|
setImage(URL.createObjectURL(file))
|
|
setCropModalOpen(true)
|
|
} else {
|
|
alert('No file selected or an error occurred while selecting the file.')
|
|
}
|
|
}, [])
|
|
|
|
const onImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
|
|
const { width, height } = e.currentTarget
|
|
setCrop(centerAspectCrop(width, height, 1))
|
|
}, [])
|
|
|
|
const centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => {
|
|
return centerCrop(
|
|
makeAspectCrop(
|
|
{
|
|
unit: 'px',
|
|
width: mediaWidth / 2,
|
|
},
|
|
aspect,
|
|
mediaWidth,
|
|
mediaHeight,
|
|
),
|
|
mediaWidth,
|
|
mediaHeight,
|
|
)
|
|
}
|
|
|
|
async function resizeImage(
|
|
image: HTMLImageElement,
|
|
maxWidth: number,
|
|
maxHeight: number,
|
|
): Promise<HTMLImageElement> {
|
|
const canvas = document.createElement('canvas')
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
let width = image.width
|
|
let height = image.height
|
|
|
|
if (width > maxWidth) {
|
|
height *= maxWidth / width
|
|
width = maxWidth
|
|
}
|
|
if (height > maxHeight) {
|
|
width *= maxHeight / height
|
|
height = maxHeight
|
|
}
|
|
|
|
canvas.width = width
|
|
canvas.height = height
|
|
|
|
if (ctx) {
|
|
ctx.drawImage(image, 0, 0, width, height)
|
|
}
|
|
|
|
const resizedImage = new Image()
|
|
resizedImage.src = canvas.toDataURL()
|
|
|
|
await resizedImage.decode()
|
|
return resizedImage
|
|
}
|
|
|
|
const renderCrop = useCallback(async () => {
|
|
const image = imgRef.current
|
|
if (crop && image) {
|
|
const resizedImage = await resizeImage(image, 1024, 1024) // Bildgröße vor dem Zuschneiden reduzieren
|
|
const scaleX = resizedImage.naturalWidth / resizedImage.width
|
|
const scaleY = resizedImage.naturalHeight / resizedImage.height
|
|
|
|
const canvas = new OffscreenCanvas(crop.width * scaleX, crop.height * scaleY)
|
|
const ctx = canvas.getContext('2d')
|
|
const pixelRatio = window.devicePixelRatio
|
|
canvas.width = crop.width * pixelRatio * scaleX
|
|
canvas.height = crop.height * pixelRatio * scaleY
|
|
|
|
if (ctx) {
|
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
|
|
ctx.drawImage(
|
|
resizedImage,
|
|
crop.x * scaleX,
|
|
crop.y * scaleY,
|
|
crop.width * scaleX,
|
|
crop.height * scaleY,
|
|
0,
|
|
0,
|
|
crop.width * scaleX,
|
|
crop.height * scaleY,
|
|
)
|
|
}
|
|
|
|
const blob = await canvas.convertToBlob()
|
|
await resizeBlob(blob)
|
|
setCropping(false)
|
|
setImage('')
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [crop])
|
|
|
|
const resizeBlob = useCallback(
|
|
async (blob: Blob) => {
|
|
const img = new Image()
|
|
img.src = URL.createObjectURL(blob)
|
|
await img.decode()
|
|
|
|
const canvas = new OffscreenCanvas(400, 400)
|
|
const ctx = canvas.getContext('2d')
|
|
ctx?.drawImage(img, 0, 0, 400, 400)
|
|
|
|
const resizedBlob = await canvas.convertToBlob()
|
|
const asset = await appState.assetsApi.upload(resizedBlob, 'avatar')
|
|
setAvatar(asset.id)
|
|
},
|
|
[appState.assetsApi, setAvatar],
|
|
)
|
|
|
|
return (
|
|
<>
|
|
{!cropping ? (
|
|
<label className='custom-file-upload'>
|
|
<input
|
|
type='file'
|
|
accept='image/*'
|
|
className='tw-file-input tw-w-full tw-max-w-xs'
|
|
onChange={onImageChange}
|
|
/>
|
|
<div className='button tw-btn tw-btn-lg tw-btn-circle tw-animate-none'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
fill='none'
|
|
viewBox='0 0 24 24'
|
|
strokeWidth='1.5'
|
|
stroke='currentColor'
|
|
className='tw-w-6 tw-h-6'
|
|
>
|
|
<path
|
|
strokeLinecap='round'
|
|
strokeLinejoin='round'
|
|
d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5'
|
|
/>
|
|
</svg>
|
|
</div>
|
|
{avatar ? (
|
|
<div className='tw-h-20 tw-w-20'>
|
|
<img
|
|
src={appState.assetsApi.url + avatar}
|
|
className='tw-h-20 tw-w-20 tw-rounded-full'
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className='tw-h-20 tw-w-20'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
version='1.0'
|
|
viewBox='0 0 150 150'
|
|
className='tw-w-20 tw-h-20 tw-rounded-full'
|
|
style={{ backgroundColor: '#eee' }}
|
|
>
|
|
<path
|
|
fill='#ccc'
|
|
d='M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z'
|
|
/>
|
|
<path
|
|
fill='#ccc'
|
|
d='M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z'
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</label>
|
|
) : (
|
|
<div className='tw-w-20 tw-flex tw-items-center tw-justify-center'>
|
|
<span className='tw-loading tw-loading-spinner'></span>
|
|
</div>
|
|
)}
|
|
<DialogModal
|
|
title=''
|
|
isOpened={cropModalOpen}
|
|
onClose={() => {
|
|
setCropModalOpen(false)
|
|
setImage('')
|
|
}}
|
|
closeOnClickOutside={false}
|
|
>
|
|
<ReactCrop crop={crop} onChange={(c) => setCrop(c)} aspect={1}>
|
|
<img src={image} ref={imgRef} onLoad={onImageLoad} />
|
|
</ReactCrop>
|
|
<button
|
|
className={'tw-btn tw-btn-primary'}
|
|
onClick={() => {
|
|
setCropping(true)
|
|
setCropModalOpen(false)
|
|
renderCrop()
|
|
}}
|
|
>
|
|
Select
|
|
</button>
|
|
</DialogModal>
|
|
</>
|
|
)
|
|
}
|