add user avatar to menu

mukuyoubi · Sep 14, 2017 · c39fc35 · c39fc35
1 parent 97bccf7
commit c39fc35
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 6 deletions.
diff --git a/main.js b/main.js
@@ -1,7 +1,7 @@
 
 import fs from 'fs';
 import tmp from 'tmp';
-import { app, powerMonitor, BrowserWindow, Tray, Menu, ipcMain, clipboard, shell } from 'electron';
+import { app, powerMonitor, BrowserWindow, Tray, Menu, ipcMain, clipboard, shell, nativeImage } from 'electron';
 import windowStateKeeper from 'electron-window-state';
 import AutoLaunch from 'auto-launch';
 
@@ -248,6 +248,16 @@ let mainMenu = [
     }
 ];
 
+function getIcon(data) {
+    var fallback = nativeImage.createFromPath(`${__dirname}/src/assets/images/user-fallback.png`);
+    var icon = data ? nativeImage.createFromDataURL(data) : fallback;
+
+    return icon.resize({
+        width: 24,
+        height: 24,
+    });
+}
+
 function updateTray(unread = 0) {
     if (!isOsx) {
         // Always show the tray icon on windows
@@ -453,6 +463,7 @@ const createMainWindow = () => {
             return {
                 label: e.RemarkName || e.NickName,
                 accelerator: `Cmd+${index}`,
+                icon: getIcon(e.icon),
                 click() {
                     mainWindow.show();
                     mainWindow.webContents.send('message-chatto', {
@@ -465,6 +476,7 @@ const createMainWindow = () => {
         contacts = contacts.map(e => {
             return {
                 label: e.RemarkName || e.NickName,
+                icon: getIcon(e.icon),
                 click() {
                     mainWindow.show();
                     mainWindow.webContents.send('show-userinfo', {

diff --git a/src/assets/images/user-fallback.png b/src/assets/images/user-fallback.png
diff --git a/src/js/components/Avatar/index.js b/src/js/components/Avatar/index.js
@@ -11,7 +11,7 @@ export default class Avatar extends Component {
     };
 
     static defaultProps = {
-        fallback: 'http://i.pravatar.cc/200',
+        fallback: 'assets/images/user-fallback.png',
     };
 
     handleError(e) {
@@ -29,6 +29,7 @@ export default class Avatar extends Component {
             <img
                 className={clazz('Avatar', 'fade fadein', this.props.className)}
                 src={this.props.src}
+                onClick={this.props.onClick}
                 onLoad={e => this.handleLoad(e)}
                 onError={e => this.handleError(e)} />
         );

diff --git a/src/js/stores/chat.js b/src/js/stores/chat.js
@@ -173,10 +173,25 @@ function hasUnreadMessage(messages) {
     });
 }
 
-function updateMenus(sessions) {
+async function updateMenus(sessions) {
+    var conversationsWithIcon = await Promise.all(
+        sessions.map(async e => {
+            e.icon = await helper.getDataURL(e.HeadImgUrl);
+            return e;
+        })
+    );
+    var contactsWithIcon = await Promise.all(
+        contacts.memberList.map(async e => {
+            e.icon = await helper.getDataURL(e.HeadImgUrl);
+            return e;
+        })
+    );
+
+    console.log(conversationsWithIcon);
+
     ipcRenderer.send('menu-update', {
-        conversations: JSON.stringify(sessions),
-        contacts: JSON.stringify(contacts.memberList),
+        conversations: JSON.stringify(conversationsWithIcon),
+        contacts: JSON.stringify(contactsWithIcon),
     });
 }
 

diff --git a/src/js/utils/helper.js b/src/js/utils/helper.js
@@ -229,7 +229,7 @@ const helper = {
     },
 
     // 3 types supported: pic, video, doc
-    getMediaType(ext = '') {
+    getMediaType: (ext = '') => {
         ext = ext.toLowerCase();
 
         switch (true) {
@@ -244,6 +244,28 @@ const helper = {
         }
     },
 
+    getDataURL: (src) => {
+        var image = new window.Image();
+
+        return new Promise((resolve, reject) => {
+            image.src = src;
+            image.onload = () => {
+                var canvas = document.createElement('canvas');
+                var context = canvas.getContext('2d');
+
+                canvas.width = image.width;
+                canvas.height = image.height;
+
+                context.drawImage(image, 0, 0, image.width, image.height);
+                resolve(canvas.toDataURL('image/png'));
+            };
+
+            image.onerror = () => {
+                resolve('');
+            };
+        });
+    },
+
     isOsx: window.process.platform === 'darwin',
 
     isSuspend: () => {