From 591a8ccb564679b199115efafbb7f6b0c5aeb9d4 Mon Sep 17 00:00:00 2001
From: mxaln <murmax82@gmail.com>
Date: Fri, 4 Oct 2019 17:14:29 -0400
Subject: [PATCH] Updated jdenticon lib, fixed identicons on progress page

---
 package.json                                  |  2 +-
 .../pages/tasks/components/TaskIdenticon.js   | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 8826b8d2..51b8bf35 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "font-awesome": "~4.7.0",
     "howler": "~2.0.4",
     "immutability-helper": "~2.7.0",
-    "jdenticon": "~1.8.0",
+    "jdenticon": "~2.2.0",
     "js-base64": "~2.1.9",
     "json-schema-traverse": "~0.3.1",
     "lodash": "latest",
diff --git a/src/js/pages/tasks/components/TaskIdenticon.js b/src/js/pages/tasks/components/TaskIdenticon.js
index f89b01a6..e848004c 100644
--- a/src/js/pages/tasks/components/TaskIdenticon.js
+++ b/src/js/pages/tasks/components/TaskIdenticon.js
@@ -4,6 +4,10 @@ import jdenticon from 'jdenticon';
 import ReactPlayer from 'react-player';
 import config from '../../../../config/config';
 
+jdenticon.config = {
+  replaceMode: "observe"
+};
+
 class TaskIdenticon extends React.Component {
 
   constructor(props) {
@@ -24,19 +28,16 @@ class TaskIdenticon extends React.Component {
     this.setState({playing: false});
   }
 
-  componentDidMount() {
-    jdenticon.update(`#user${this.props.task.id.slice(0, 8)}`, this.props.task.details.user_icon_hash?
-      this.props.task.details.user_icon_hash: 'null user');
-  }
-
   render() {
 
     const { task } = this.props;
 
     return (
       <Container>
-        <Identicon onClick={()=>this.play()} id={`#user${task.id.slice(0, 8)}`}
-          data-jdenticon-hash={task.details.user_icon_hash ? task.details.user_icon_hash: 'null user'} />
+        <IconBox>
+          <Identicon onClick={()=>this.play()} id={`#user${task.id.slice(0, 8)}`}
+            data-jdenticon-hash={task.details.user_icon_hash ? task.details.user_icon_hash: 'null user'} />
+        </IconBox>
         <ReactPlayer
           url={`${config.streamingUrl}${task.details.user_name_audio ? task.details.user_name_audio : ''}`}
           playing={this.state.playing}
@@ -53,9 +54,17 @@ const Container = styled.div`
 `;
 Container.displayName = 'Container';
 
+const IconBox = styled.div`
+  width: 3.5vw;
+  height: 3.5vw;
+  background-color: white;
+  border-top-right-radius: 1vw;
+`;
+IconBox.displayName = 'IconBox';
+
 const Identicon = styled.svg`
-  height: 4vw;
-  width: 4vw;
+  width: 3.5vw;
+  height: 3.5vw;
   cursor: pointer;
 `;
 Identicon.displayName = 'Identicon';