fix notification icons

background.html

@@ -31,15 +31,6 @@
     When making changes to these templates, be sure to update test/index.html as well
   -->
 
-    <script type="text/x-tmpl-mustache" id="identicon-svg">
-      <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
-         <circle cx='50' cy='50' r='40' fill='{{ color }}' />
-          <text text-anchor='middle' fill='white' font-family='sans-serif' font-size='24px' x='50' y='50' baseline-shift='-8px'>
-              {{ content }}
-          </text>
-      </svg>
-    </script>
-
     <script type="text/javascript" src="js/components.js"></script>
     <script type="text/javascript" src="js/database.js"></script>
     <script type="text/javascript" src="js/storage.js"></script>
@@ -59,7 +50,6 @@
     <script type="text/javascript" src="js/views/whisper_view.js"></script>
 
     <script type="text/javascript" src="js/views/session_inbox_view.js"></script>
-    <script type="text/javascript" src="js/views/identicon_svg_view.js"></script>
     <script type="text/javascript" src="js/views/session_registration_view.js"></script>
     <script type="text/javascript" src="js/views/app_view.js"></script>
 

background_test.html

@@ -31,15 +31,6 @@
     When making changes to these templates, be sure to update test/index.html as well
   -->
 
-    <script type="text/x-tmpl-mustache" id="identicon-svg">
-      <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
-         <circle cx='50' cy='50' r='40' fill='{{ color }}' />
-          <text text-anchor='middle' fill='white' font-family='sans-serif' font-size='24px' x='50' y='50' baseline-shift='-8px'>
-              {{ content }}
-          </text>
-      </svg>
-    </script>
-
     <script type="text/javascript" src="js/components.js"></script>
     <script type="text/javascript" src="js/database.js"></script>
     <script type="text/javascript" src="js/storage.js"></script>
@@ -60,7 +51,6 @@
     <script type="text/javascript" src="js/views/session_confirm_view.js"></script>
 
     <script type="text/javascript" src="js/views/session_inbox_view.js"></script>
-    <script type="text/javascript" src="js/views/identicon_svg_view.js"></script>
     <script type="text/javascript" src="js/views/session_registration_view.js"></script>
     <script type="text/javascript" src="js/views/app_view.js"></script>
 

js/notifications.js

@@ -148,7 +148,6 @@
       }
 
       drawAttention();
-
       this.lastNotification = new Notification(title, {
         body: window.platform === 'linux' ? filter(message) : message,
         icon: iconUrl,

js/views/identicon_svg_view.js

@@ -1,42 +0,0 @@
-/* global Whisper, loadImage */
-
-// eslint-disable-next-line func-names
-(function() {
-  'use strict';
-
-  window.Whisper = window.Whisper || {};
-
-  /*
-   * Render an avatar identicon to an svg for use in a notification.
-   */
-  Whisper.IdenticonSVGView = Whisper.View.extend({
-    templateName: 'identicon-svg',
-    initialize(options) {
-      this.render_attributes = options;
-    },
-    getSVGUrl() {
-      const html = this.render().$el.html();
-      const svg = new Blob([html], { type: 'image/svg+xml;charset=utf-8' });
-      return URL.createObjectURL(svg);
-    },
-    getDataUrl() {
-      const svgurl = this.getSVGUrl();
-      return new Promise(resolve => {
-        const img = document.createElement('img');
-        img.onload = () => {
-          const canvas = loadImage.scale(img, {
-            canvas: true,
-            maxWidth: 100,
-            maxHeight: 100,
-          });
-          const ctx = canvas.getContext('2d');
-          ctx.drawImage(img, 0, 0);
-          URL.revokeObjectURL(svgurl);
-          resolve(canvas.toDataURL('image/png'));
-        };
-
-        img.src = svgurl;
-      });
-    },
-  });
-})();

ts/components/session/SessionClosableOverlay.tsx

@@ -48,7 +48,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
     this.inputRef = React.createRef();
     this.onKeyUp = this.onKeyUp.bind(this);
     this.onGroupNameChanged = this.onGroupNameChanged.bind(this);
-
   }
 
   public componentDidMount() {
@@ -60,7 +59,6 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
   }
   public componentWillUnmount() {
     window.removeEventListener('keyup', this.onKeyUp);
-
   }
 
   public getContacts() {

ts/components/session/usingClosedConversationDetails.tsx

@@ -55,7 +55,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) {
         const memberConvos = _.compact(members.map(m => getConversationController().get(m.key)));
         const memberAvatars = memberConvos.map(m => {
           return {
-            avatarPath: m.getAvatar()?.url || undefined,
+            avatarPath: m.getAvatarPath() || undefined,
             id: m.id,
             name: m.get('name') || m.get('profileName') || m.id,
           };

ts/hooks/useMembersAvatar.tsx

@@ -38,7 +38,7 @@ export function useMembersAvatars(conversation: ReduxConversationType | undefine
         );
         const memberAvatars = memberConvos.map(m => {
           return {
-            avatarPath: m.getAvatar()?.url || undefined,
+            avatarPath: m.getAvatarPath() || undefined,
             id: m.id as string,
             name: (m.get('name') || m.get('profileName') || m.id) as string,
           };

ts/models/conversation.ts

@@ -48,6 +48,8 @@ import {
   SendMessageType,
 } from '../components/session/conversation/SessionCompositionBox';
 import { ed25519Str } from '../session/onions/onionPath';
+import { getDecryptedMediaUrl } from '../session/crypto/DecryptedAttachmentsManager';
+import { IMAGE_JPEG } from '../types/MIME';
 
 export enum ConversationTypeEnum {
   GROUP = 'group',
@@ -1375,21 +1377,21 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
 
     return null;
   }
-  public getAvatar() {
-    const url = this.getAvatarPath();
-
-    return { url: url || null };
-  }
 
   public async getNotificationIcon() {
-    return new Promise(resolve => {
-      const avatar = this.getAvatar();
-      if (avatar.url) {
-        resolve(avatar.url);
-      } else {
-        resolve(new window.Whisper.IdenticonSVGView(avatar).getDataUrl());
+    const avatarUrl = this.getAvatarPath();
+    const noIconUrl = 'images/session/session_icon_32.png';
+    if (avatarUrl) {
+      const decryptedAvatarUrl = await getDecryptedMediaUrl(avatarUrl, IMAGE_JPEG);
+
+      if (!decryptedAvatarUrl) {
+        window.log.warn('Could not decrypt avatar stored locally for getNotificationIcon..');
+        return noIconUrl;
       }
-    });
+      return decryptedAvatarUrl;
+    } else {
+      return noIconUrl;
+    }
   }
 
   public async notify(message: MessageModel) {
@@ -1430,7 +1432,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       ConversationTypeEnum.PRIVATE
     );
 
-    const iconUrl = await convo.getNotificationIcon();
+    const iconUrl = await this.getNotificationIcon();
 
     const messageJSON = message.toJSON();
     const messageSentAt = messageJSON.sent_at;