diff --git a/main.js b/main.js index e4665bc..fa74ba3 100644 --- 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 new file mode 100644 index 0000000..fddd9aa Binary files /dev/null and b/src/assets/images/user-fallback.png differ diff --git a/src/js/components/Avatar/index.js b/src/js/components/Avatar/index.js index 4d369f5..e7483e8 100644 --- 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 { this.handleLoad(e)} onError={e => this.handleError(e)} /> ); diff --git a/src/js/stores/chat.js b/src/js/stores/chat.js index 85c29cf..cecc377 100644 --- 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 index b0b5dff..8f03343 100644 --- 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: () => {