From a40961a2564738ca9f14d9e50e0d1d5c6ab7ec54 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 19 Oct 2020 00:53:19 +0300 Subject: feat: Add avatar crop --- src/containers/Profile/ProfileInfo.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'src/containers') diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index da952e9..763a077 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -11,6 +11,7 @@ import Avatar from '../../components/Avatar/Avatar'; import { patch } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; import uploadFileToS3 from '../../utils/uploadFileToS3'; +import AvatarCrop from "../../components/AvatarCrop/AvatarCrop"; interface PropTypes { savedPolls: number; @@ -107,7 +108,7 @@ const ProfileInfo: React.FC = ({ const classes = useStyles(); const { user } = useAuth(); const [progress, setProgress] = useState(0); - + const [avatarToCrop, setAvatarToCrop] = useState(''); const dateSince = useMemo(() => formatDate(userInfo?.createdAt), [userInfo]); const handleUpdateAvatar = useCallback(async (file: File) => { @@ -116,11 +117,20 @@ const ProfileInfo: React.FC = ({ .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) .then(response => setUserInfo(response.data)) .then(() => setProgress(0)); + setAvatarToCrop(''); } }, [user, setUserInfo]); + const handleCropAvatar = useCallback( async(file: File) => { + const imageSrc = URL.createObjectURL(file); + setAvatarToCrop(imageSrc); + },[]); + return (
+ { + avatarToCrop && + } { !userInfo ? @@ -135,7 +145,7 @@ const ProfileInfo: React.FC = ({ }} className={classes.avatarContainer} badgeContent={( - +
-- cgit v1.2.3 From 5eba5c1ffcdaee9a81e965f0570b00dd26bb38c6 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Thu, 29 Oct 2020 21:28:52 +0300 Subject: Wait till modal slide right on close --- src/containers/PollCreation/PollCreation.tsx | 8 +++++++- src/containers/Profile/ProfileInfo.tsx | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'src/containers') diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx index b761c73..46ab28d 100644 --- a/src/containers/PollCreation/PollCreation.tsx +++ b/src/containers/PollCreation/PollCreation.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useState, useMemo } from 'react'; +import React, {ChangeEvent, useState, useMemo, useCallback} from 'react'; import Bluebird from 'bluebird'; import { makeStyles } from '@material-ui/core/styles'; import { Card, Container, LinearProgress, InputBase, Typography } from '@material-ui/core'; @@ -13,6 +13,7 @@ import UserStrip from '../../components/UserStrip/UserStrip'; import { post } from '../../requests'; import { useFeed, useProfile } from '../../hooks/APIClient'; import { useAuth } from '../../hooks/useAuth'; +import {useHistory} from "react-router"; const useStyles = makeStyles(theme => ({ images: { @@ -32,6 +33,7 @@ const useStyles = makeStyles(theme => ({ const PollCreation: React.FC = () => { const [description, setDescription] = useState(''); const classes = useStyles(); + const history = useHistory(); const { enqueueSnackbar } = useSnackbar(); const { user } = useAuth(); const { mutate: updateFeed } = useFeed(); @@ -71,6 +73,9 @@ const PollCreation: React.FC = () => { } }; + const handleClose = useCallback(() => history.goBack(), [history]); + + const isSubmitting = useMemo(() => leftProgress + rightProgress > 0, [leftProgress, rightProgress]); return ( @@ -79,6 +84,7 @@ const PollCreation: React.FC = () => { actionIcon={} handleAction={handleSubmit} isActionDisabled={!(left && right) || isSubmitting} + handleCloseModal={handleClose} > diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index 763a077..b71e6db 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -129,7 +129,7 @@ const ProfileInfo: React.FC = ({ return (
{ - avatarToCrop && + avatarToCrop && } { !userInfo -- cgit v1.2.3 From 3fef7795681c405322aed6e1c876948ebc2cc932 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 29 Oct 2020 23:53:13 +0300 Subject: refactor: separate ImageCropAreaSelect component --- src/containers/AvatarCropModal/AvatarCropModal.tsx | 57 ++++++++++++++++++++++ src/containers/AvatarCropModal/canvasUtils.js | 54 ++++++++++++++++++++ src/containers/Profile/ProfileInfo.tsx | 15 +++--- 3 files changed, 117 insertions(+), 9 deletions(-) create mode 100644 src/containers/AvatarCropModal/AvatarCropModal.tsx create mode 100644 src/containers/AvatarCropModal/canvasUtils.js (limited to 'src/containers') diff --git a/src/containers/AvatarCropModal/AvatarCropModal.tsx b/src/containers/AvatarCropModal/AvatarCropModal.tsx new file mode 100644 index 0000000..a24d2b4 --- /dev/null +++ b/src/containers/AvatarCropModal/AvatarCropModal.tsx @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import SendIcon from "@material-ui/icons/Send"; +import { getCroppedImg } from './canvasUtils' + +import ImageCropAreaSelect from '../../components/ImageCropAreaSelect/ImageCropAreaSelect'; +import ModalScreen from '../../components/ModalScreen/ModalScreen'; + +interface Area { + x: number; + y: number; + width?: number; + height?: number; +} + +interface PropTypes { + avatar: string; + callback: (file: File) => void; +} + +const useStyles = makeStyles(theme => ({ + cropContainer: { + position: 'relative', + width: '100%', + height: '100vh', + background: '#333', + [theme.breakpoints.up('sm')]: { + height: 400, + }, + } +})); + +const AvatarCropModal: React.FC = ({ avatar, callback }) => { + const classes = useStyles(); + const [area, setArea] = useState({ x: 0, y: 0 }); + + const handleAction = async () => getCroppedImg(avatar, area) + .then(croppedImage => callback(croppedImage)); + + return ( + } + handleAction={handleAction} + isActionDisabled={false} + > +
+ +
+ + ) +}; + +export default AvatarCropModal; diff --git a/src/containers/AvatarCropModal/canvasUtils.js b/src/containers/AvatarCropModal/canvasUtils.js new file mode 100644 index 0000000..b01aadc --- /dev/null +++ b/src/containers/AvatarCropModal/canvasUtils.js @@ -0,0 +1,54 @@ +const createImage = url => + new Promise((resolve, reject) => { + const image = new Image(); + image.addEventListener('load', () => resolve(image)); + image.addEventListener('error', error => reject(error)); + image.setAttribute('crossOrigin', 'anonymous') ;// needed to avoid cross-origin issues on CodeSandbox + image.src = url + }); + +export async function getCroppedImg(imageSrc, pixelCrop) { + const image = await createImage(imageSrc); + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + const maxSize = Math.max(image.width, image.height); + const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2)); + + // set each dimensions to double largest dimension to allow for a safe area for the + // image to rotate in without being clipped by canvas context + canvas.width = safeArea; + canvas.height = safeArea; + + // translate canvas context to a central location on image to allow rotating around the center. + ctx.translate(safeArea / 2, safeArea / 2); + ctx.translate(-safeArea / 2, -safeArea / 2); + + // draw rotated image and store data. + ctx.drawImage( + image, + safeArea / 2 - image.width * 0.5, + safeArea / 2 - image.height * 0.5 + ); + const data = ctx.getImageData(0, 0, safeArea, safeArea); + + // set canvas width to final desired crop size - this will clear existing context + canvas.width = pixelCrop.width; + canvas.height = pixelCrop.height; + + // paste generated rotate image with correct offsets for x,y crop values. + ctx.putImageData( + data, + Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x), + Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y) + ); + + // As Base64 string + // return canvas.toDataURL('image/jpeg'); + + // As a blob + + return new Promise(resolve => { + canvas.toBlob(file => resolve(file)) + }) +} diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx index b71e6db..4c9f17e 100644 --- a/src/containers/Profile/ProfileInfo.tsx +++ b/src/containers/Profile/ProfileInfo.tsx @@ -11,7 +11,7 @@ import Avatar from '../../components/Avatar/Avatar'; import { patch } from '../../requests'; import { useAuth } from '../../hooks/useAuth'; import uploadFileToS3 from '../../utils/uploadFileToS3'; -import AvatarCrop from "../../components/AvatarCrop/AvatarCrop"; +import AvatarCropModal from '../AvatarCropModal/AvatarCropModal'; interface PropTypes { savedPolls: number; @@ -112,13 +112,10 @@ const ProfileInfo: React.FC = ({ const dateSince = useMemo(() => formatDate(userInfo?.createdAt), [userInfo]); const handleUpdateAvatar = useCallback(async (file: File) => { - if (user) { - uploadFileToS3(file, 0.8, setProgress) - .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) - .then(response => setUserInfo(response.data)) - .then(() => setProgress(0)); - setAvatarToCrop(''); - } + if (user) uploadFileToS3(file, 0.8, setProgress) + .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl })) + .then(response => setUserInfo(response.data)) + .then(() => setProgress(0)); }, [user, setUserInfo]); const handleCropAvatar = useCallback( async(file: File) => { @@ -129,7 +126,7 @@ const ProfileInfo: React.FC = ({ return (
{ - avatarToCrop && + avatarToCrop && } { !userInfo -- cgit v1.2.3 From 99b4e4aa53d3ade389fc270f9ba9b02904da93f6 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Tue, 17 Nov 2020 15:19:39 +0300 Subject: Make responsive avatar crop component --- src/containers/AvatarCropModal/AvatarCropModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/containers') diff --git a/src/containers/AvatarCropModal/AvatarCropModal.tsx b/src/containers/AvatarCropModal/AvatarCropModal.tsx index a24d2b4..4decdfb 100644 --- a/src/containers/AvatarCropModal/AvatarCropModal.tsx +++ b/src/containers/AvatarCropModal/AvatarCropModal.tsx @@ -22,10 +22,10 @@ const useStyles = makeStyles(theme => ({ cropContainer: { position: 'relative', width: '100%', - height: '100vh', - background: '#333', + // height: '100vh', + // background: '#333', [theme.breakpoints.up('sm')]: { - height: 400, + // height: 400, }, } })); -- cgit v1.2.3