From e878299ae8bbf6200f27834e275ff231dd1b9b0a Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi <90936742+Reckless-Satoshi@users.noreply.github.com> Date: Tue, 25 Apr 2023 18:40:46 +0000 Subject: [PATCH] Add light weight webp avatars (#457) * Add generate webp avatars, also small size * Use new avatars in frontend --- api/views.py | 14 ++++++++++++-- frontend/src/basic/NavBar/NavBar.tsx | 1 - frontend/src/basic/RobotPage/RobotProfile.tsx | 1 + frontend/src/components/BookTable/index.tsx | 2 ++ .../src/components/Charts/DepthChart/index.tsx | 1 + frontend/src/components/OrderDetails/index.tsx | 2 ++ frontend/src/components/RobotAvatar/index.tsx | 6 ++++-- .../TradeBox/EncryptedChat/MessageCard/index.tsx | 1 + frontend/src/components/TradeBox/TradeSummary.tsx | 2 ++ 9 files changed, 25 insertions(+), 5 deletions(-) diff --git a/api/views.py b/api/views.py index b4572829..c26b36be 100644 --- a/api/views.py +++ b/api/views.py @@ -687,9 +687,19 @@ class UserView(APIView): rh.assemble(roboset="set1", bgset="any") # for backgrounds ON # Does not replace image if existing (avoid re-avatar in case of nick collusion) - image_path = avatar_path.joinpath(nickname + ".png") + # Deprecate "png" and keep "webp" only after v0.4.4 + image_path = avatar_path.joinpath(nickname + ".webp") if not image_path.exists(): with open(image_path, "wb") as f: + rh.img.save(f, format="WEBP", quality=80) + + image_small_path = avatar_path.joinpath(nickname + ".small.webp") + with open(image_small_path, "wb") as f: + resized_img = rh.img.resize((80, 80)) + resized_img.save(f, format="WEBP", quality=80) + + png_path = avatar_path.joinpath(nickname + ".png") + with open(png_path, "wb") as f: rh.img.save(f, format="png", optimize=True) # Create new credentials and login if nickname is new @@ -716,7 +726,7 @@ class UserView(APIView): context["referral_code"] = token_urlsafe(8) user.profile.referral_code = context["referral_code"] - user.profile.avatar = "static/assets/avatars/" + nickname + ".png" + user.profile.avatar = "static/assets/avatars/" + nickname + ".webp" # Noticed some PGP keys replaced at re-login. Should not happen. # Let's implement this sanity check "If profile has not keys..." diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx index f0f409f6..f8da58ea 100644 --- a/frontend/src/basic/NavBar/NavBar.tsx +++ b/frontend/src/basic/NavBar/NavBar.tsx @@ -16,7 +16,6 @@ import { } from '@mui/icons-material'; import RobotAvatar from '../../components/RobotAvatar'; import { AppContext, UseAppStoreType, closeAll } from '../../contexts/AppContext'; -import styled from '@emotion/styled'; interface NavBarProps { width: number; diff --git a/frontend/src/basic/RobotPage/RobotProfile.tsx b/frontend/src/basic/RobotPage/RobotProfile.tsx index 19bc0361..a89a507b 100644 --- a/frontend/src/basic/RobotPage/RobotProfile.tsx +++ b/frontend/src/basic/RobotPage/RobotProfile.tsx @@ -285,6 +285,7 @@ const RobotProfile = ({ style={{ width: '2.6em', height: '2.6em' }} placeholderType='loading' baseUrl={baseUrl} + small={true} /> diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx index 0f1487e0..0da33939 100644 --- a/frontend/src/components/BookTable/index.tsx +++ b/frontend/src/components/BookTable/index.tsx @@ -180,6 +180,7 @@ const BookTable = ({ statusColor={statusBadgeColor(params.row.maker_status)} tooltip={t(params.row.maker_status)} baseUrl={baseUrl} + small={true} /> @@ -207,6 +208,7 @@ const BookTable = ({ statusColor={statusBadgeColor(params.row.maker_status)} tooltip={t(params.row.maker_status)} baseUrl={baseUrl} + small={true} /> diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx index f465f114..ad3a65ed 100644 --- a/frontend/src/components/Charts/DepthChart/index.tsx +++ b/frontend/src/components/Charts/DepthChart/index.tsx @@ -226,6 +226,7 @@ const DepthChart: React.FC = ({ statusColor={statusBadgeColor(order.maker_status)} tooltip={t(order.maker_status)} baseUrl={baseUrl} + small={true} /> diff --git a/frontend/src/components/OrderDetails/index.tsx b/frontend/src/components/OrderDetails/index.tsx index 3e3052f3..64fbb98e 100644 --- a/frontend/src/components/OrderDetails/index.tsx +++ b/frontend/src/components/OrderDetails/index.tsx @@ -226,6 +226,7 @@ const OrderDetails = ({ tooltip={t(order.maker_status)} orderType={order.type} baseUrl={baseUrl} + small={true} /> diff --git a/frontend/src/components/RobotAvatar/index.tsx b/frontend/src/components/RobotAvatar/index.tsx index c30c8f39..c2da70aa 100644 --- a/frontend/src/components/RobotAvatar/index.tsx +++ b/frontend/src/components/RobotAvatar/index.tsx @@ -9,6 +9,7 @@ import placeholder from './placeholder.json'; interface Props { nickname: string | undefined; smooth?: boolean; + small?: boolean; flipHorizontally?: boolean; style?: object; imageStyle?: object; @@ -29,6 +30,7 @@ const RobotAvatar: React.FC = ({ tooltip, tooltipPosition = 'right', smooth = false, + small = false, flipHorizontally = false, placeholderType = 'loading', style = {}, @@ -57,12 +59,12 @@ const RobotAvatar: React.FC = ({ useEffect(() => { if (nickname != undefined) { if (window.NativeRobosats === undefined) { - setAvatarSrc(baseUrl + '/static/assets/avatars/' + nickname + '.png'); + setAvatarSrc(`${baseUrl}/static/assets/avatars/${nickname}${small ? '.small' : ''}.webp`); setNicknameReady(true); } else { setNicknameReady(true); apiClient - .fileImageUrl(baseUrl, '/static/assets/avatars/' + nickname + '.png') + .fileImageUrl(baseUrl, `/static/assets/avatars/${nickname}${small ? '.small' : ''}.webp`) .then(setAvatarSrc); } } else { diff --git a/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx index 851cfa78..4fe6faf2 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx @@ -36,6 +36,7 @@ const MessageCard: React.FC = ({ message, isTaker, userConnected, baseUrl statusColor={userConnected ? 'success' : 'error'} nickname={message.userNick} baseUrl={baseUrl} + small={true} /> } style={{ backgroundColor: cardColor }} diff --git a/frontend/src/components/TradeBox/TradeSummary.tsx b/frontend/src/components/TradeBox/TradeSummary.tsx index 5f628c10..96145425 100644 --- a/frontend/src/components/TradeBox/TradeSummary.tsx +++ b/frontend/src/components/TradeBox/TradeSummary.tsx @@ -116,6 +116,7 @@ const TradeSummary = ({ baseUrl={baseUrl} style={{ height: '1.5em', width: '1.5em' }} nickname={makerNick} + small={true} />   {t('Maker')} @@ -131,6 +132,7 @@ const TradeSummary = ({ avatarClass='smallAvatar' style={{ height: '1.5em', width: '1.5em' }} nickname={takerNick} + small={true} />