Show custom user avatar (#740)

* Use material avatar in timeline avatar

* Load default profile image from static file

* Include base64 image in squeak display entry response

* Got default profile image working

MANIFEST.in

@@ -3,3 +3,4 @@ graft squeaknode/admin/webapp/templates
 graft squeaknode/admin/webapp/static
 include squeaknode/db/alembic.ini
 graft squeaknode/db/alembic
+include squeaknode/admin/default_profile_image.jpg

frontend/src/components/SqueakUserAvatar/SqueakUserAvatar.js

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import TimelineDot from '@material-ui/lab/TimelineDot';
 
 import FaceIcon from '@material-ui/icons/Face';
+import Avatar from '@material-ui/core/Avatar';
 
 import {useHistory} from "react-router-dom";
 
@@ -22,12 +23,32 @@ export default function SqueakUserAvatar({
       goToSqueakAddressPage(squeak.getAuthorAddress());
     }
   };
+
+  const getAuthorImage = () => {
+    console.log(squeak);
+    console.log("squeak image: " + squeak.getAuthorImage());
+    return squeak.getAuthorImage();
+  }
+
+  function ImageSrcString() {
+    console.log("getAuthorImage" + getAuthorImage());
+    return "data:image/jpeg;base64," + getAuthorImage();
+  }
+
+  function AvatarImage() {
+    console.log("ImageSrcString: " + ImageSrcString());
+    return (
+      <Avatar alt="Remy Sharp" src={`${ImageSrcString()}`} />
+    )
+  }
+
+  console.log("show avatar");
   return (
     <TimelineDot
     onClick={handleAvatarClick}
     style={{cursor: 'pointer'}}
     >
-      <FaceIcon />
+      {squeak && AvatarImage()}
     </TimelineDot>
   )
 }

itests/tests/test_squeak_node.py

@@ -275,6 +275,9 @@ def test_make_squeak(server_stub, admin_stub, signing_profile_id):
     assert (
         get_squeak_display_response.squeak_display_entry.content_str == "Hello from the profile on the server!"
     )
+    print("get_squeak_display_response.squeak_display_entry.author_image: {}".format(
+        get_squeak_display_response.squeak_display_entry.author_image,
+    ))
 
     # Get the squeak profile
     get_squeak_profile_response = admin_stub.GetSqueakProfile(

proto/squeak_admin.proto

@@ -438,6 +438,9 @@ message SqueakDisplayEntry {
 
     /// The author name
     string author_name = 11;
+
+    /// The author image
+    string author_image = 12;
 }
 
 message GetTimelineSqueakDisplaysRequest {

squeaknode/admin/profile_image_util.py

@@ -0,0 +1,12 @@
+import base64
+
+from pkg_resources import resource_stream
+
+
+def load_default_profile_image():
+    return resource_stream(__name__, 'default_profile_image.jpg').read()
+
+
+def bytes_to_base64_string(data: bytes) -> str:
+    encoded_string = base64.b64encode(data)
+    return encoded_string.decode('utf-8')

squeaknode/admin/util.py

@@ -1,15 +1,21 @@
 import logging
 
 from proto import squeak_admin_pb2
+from squeaknode.admin.profile_image_util import bytes_to_base64_string
+from squeaknode.admin.profile_image_util import load_default_profile_image
 from squeaknode.core.received_offer_with_peer import ReceivedOfferWithPeer
 from squeaknode.core.received_payment_summary import ReceivedPaymentSummary
 from squeaknode.core.sent_payment_summary import SentPaymentSummary
 from squeaknode.core.squeak_entry_with_profile import SqueakEntryWithProfile
 from squeaknode.core.util import get_hash
 
+
 logger = logging.getLogger(__name__)
 
 
+DEFAULT_PROFILE_IMAGE = load_default_profile_image()
+
+
 def squeak_entry_to_message(squeak_entry_with_profile: SqueakEntryWithProfile):
     if squeak_entry_with_profile is None:
         return None
@@ -24,6 +30,10 @@ def squeak_entry_to_message(squeak_entry_with_profile: SqueakEntryWithProfile):
     author_address = str(squeak.GetAddress())
     is_reply = squeak.is_reply
     reply_to = squeak.hashReplySqk.hex() if is_reply else None
+    image_base64_str = bytes_to_base64_string(DEFAULT_PROFILE_IMAGE)
+    logger.info("image_base64_str len: {}".format(
+        len(image_base64_str),
+    ))
     return squeak_admin_pb2.SqueakDisplayEntry(
         squeak_hash=get_hash(squeak).hex(),
         is_unlocked=squeak.HasDecryptionKey(),
@@ -36,6 +46,7 @@ def squeak_entry_to_message(squeak_entry_with_profile: SqueakEntryWithProfile):
         author_address=author_address,
         is_reply=is_reply,
         reply_to=reply_to,
+        author_image=image_base64_str,
     )