Add light weight webp avatars (#457)

* Add generate webp avatars, also small size

* Use new avatars in frontend

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..."

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;

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}
                             />
                           </Grid>
                           <Grid item>

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}
               />
             </ListItemAvatar>
             <ListItemText primary={params.row.maker_nick} />
@@ -207,6 +208,7 @@ const BookTable = ({
                 statusColor={statusBadgeColor(params.row.maker_status)}
                 tooltip={t(params.row.maker_status)}
                 baseUrl={baseUrl}
+                small={true}
               />
             </ListItemButton>
           </div>

frontend/src/components/Charts/DepthChart/index.tsx

@@ -226,6 +226,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                 statusColor={statusBadgeColor(order.maker_status)}
                 tooltip={t(order.maker_status)}
                 baseUrl={baseUrl}
+                small={true}
               />
             </Grid>
           </Grid>

frontend/src/components/OrderDetails/index.tsx

@@ -226,6 +226,7 @@ const OrderDetails = ({
                 tooltip={t(order.maker_status)}
                 orderType={order.type}
                 baseUrl={baseUrl}
+                small={true}
               />
             </ListItemAvatar>
             <ListItemText
@@ -257,6 +258,7 @@ const OrderDetails = ({
                   tooltip={t(order.taker_status)}
                   orderType={order.type === 0 ? 1 : 0}
                   baseUrl={baseUrl}
+                  small={true}
                 />
               </ListItemAvatar>
             </ListItem>

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<Props> = ({
   tooltip,
   tooltipPosition = 'right',
   smooth = false,
+  small = false,
   flipHorizontally = false,
   placeholderType = 'loading',
   style = {},
@@ -57,12 +59,12 @@ const RobotAvatar: React.FC<Props> = ({
   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 {

frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx

@@ -36,6 +36,7 @@ const MessageCard: React.FC<Props> = ({ message, isTaker, userConnected, baseUrl
             statusColor={userConnected ? 'success' : 'error'}
             nickname={message.userNick}
             baseUrl={baseUrl}
+            small={true}
           />
         }
         style={{ backgroundColor: cardColor }}

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}
             />
           </ToggleButton>
         </ToggleButtonGroup>