diff --git a/src/background.js b/src/background.js index 94dbbc00..612f8775 100644 --- a/src/background.js +++ b/src/background.js @@ -388,7 +388,11 @@ class Background { // create tray if (isCreateTray) { this.trayEventEmitter = new EventEmitter(); - this.ypmTrayImpl = createTray(this.window, this.trayEventEmitter); + this.ypmTrayImpl = createTray( + this.window, + this.trayEventEmitter, + this.store + ); } // init ipcMain diff --git a/src/electron/ipcMain.js b/src/electron/ipcMain.js index aa0e3d72..09f3ca85 100644 --- a/src/electron/ipcMain.js +++ b/src/electron/ipcMain.js @@ -319,5 +319,8 @@ export function initIpcMain(win, store, trayEventEmitter) { ipcMain.on('updateTrayLikeState', (_, isLiked) => { trayEventEmitter.emit('updateLikeState', isLiked); }); + ipcMain.on('updateTrayIcon', () => { + trayEventEmitter.emit('updateIcon'); + }); } } diff --git a/src/electron/tray.js b/src/electron/tray.js index ed314f26..92442c40 100644 --- a/src/electron/tray.js +++ b/src/electron/tray.js @@ -102,10 +102,11 @@ function createMenuTemplate(win) { // 添加左键支持 // 2022.05.17 class YPMTrayLinuxImpl { - constructor(tray, win, emitter) { + constructor(tray, win, emitter, store) { this.tray = tray; this.win = win; this.emitter = emitter; + this.store = store; this.template = undefined; this.initTemplate(); this.contextMenu = Menu.buildFromTemplate(this.template); @@ -146,14 +147,37 @@ class YPMTrayLinuxImpl { this.contextMenu.getMenuItemById('unlike').visible = isLiked; this.tray.setContextMenu(this.contextMenu); }); + this.emitter.on('updateIcon', () => { + this.updateIcon(); + }); + } + + updateIcon() { + let trayIconSetting = this.store.get('settings.trayIconTheme') || 'auto'; + let iconTheme; + if (trayIconSetting === 'auto') { + iconTheme = nativeTheme.shouldUseDarkColors ? 'light' : 'dark'; + } else { + iconTheme = trayIconSetting; + } + + let icon = nativeImage + .createFromPath(path.join(__static, `img/icons/menu-${iconTheme}@88.png`)) + .resize({ + height: 20, + width: 20, + }); + + this.tray.setImage(icon); } } class YPMTrayWindowsImpl { - constructor(tray, win, emitter) { + constructor(tray, win, emitter, store) { this.tray = tray; this.win = win; this.emitter = emitter; + this.store = store; this.template = createMenuTemplate(win); this.contextMenu = Menu.buildFromTemplate(this.template); @@ -193,12 +217,39 @@ class YPMTrayWindowsImpl { isPlaying => (this.isPlaying = isPlaying) ); this.emitter.on('updateLikeState', isLiked => (this.isLiked = isLiked)); + this.emitter.on('updateIcon', () => { + this.updateIcon(); + }); + } + + updateIcon() { + let trayIconSetting = this.store.get('settings.trayIconTheme') || 'auto'; + let iconTheme; + if (trayIconSetting === 'auto') { + iconTheme = nativeTheme.shouldUseDarkColors ? 'light' : 'dark'; + } else { + iconTheme = trayIconSetting; + } + + let icon = nativeImage + .createFromPath(path.join(__static, `img/icons/menu-${iconTheme}@88.png`)) + .resize({ + height: 20, + width: 20, + }); + + this.tray.setImage(icon); } } -export function createTray(win, eventEmitter) { - // 感觉图标颜色应该不属于界面主题范畴，只需要跟随系统主题 - let iconTheme = nativeTheme.shouldUseDarkColors ? 'light' : 'dark'; +export function createTray(win, eventEmitter, store) { + let trayIconSetting = store.get('settings.trayIconTheme') || 'auto'; + let iconTheme; + if (trayIconSetting === 'auto') { + iconTheme = nativeTheme.shouldUseDarkColors ? 'light' : 'dark'; + } else { + iconTheme = trayIconSetting; + } let icon = nativeImage .createFromPath(path.join(__static, `img/icons/menu-${iconTheme}@88.png`)) @@ -211,6 +262,6 @@ export function createTray(win, eventEmitter) { tray.setToolTip('YesPlayMusic'); return isLinux - ? new YPMTrayLinuxImpl(tray, win, eventEmitter) - : new YPMTrayWindowsImpl(tray, win, eventEmitter); + ? new YPMTrayLinuxImpl(tray, win, eventEmitter, store) + : new YPMTrayWindowsImpl(tray, win, eventEmitter, store); } diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js index d880e326..4bf4b59f 100644 --- a/src/locale/lang/en.js +++ b/src/locale/lang/en.js @@ -169,6 +169,12 @@ export default { light: 'Light', dark: 'Dark', }, + trayIcon: { + text: 'Tray Icon Color', + auto: 'Auto', + light: 'Light', + dark: 'Dark', + }, automaticallyCacheSongs: 'Automatically cache songs', clearSongsCache: 'Clear Songs Cache', cacheCount: 'Cached {song} songs ({size})', diff --git a/src/locale/lang/tr.js b/src/locale/lang/tr.js index fda29395..d8206298 100644 --- a/src/locale/lang/tr.js +++ b/src/locale/lang/tr.js @@ -164,6 +164,12 @@ export default { light: 'Aydınlık', dark: 'Karanlık', }, + trayIcon: { + text: 'Tepsi Simgesi Rengi', + auto: 'Otomatik', + light: 'Aydınlık', + dark: 'Karanlık', + }, automaticallyCacheSongs: 'Müzikleri otomatik çerezle', clearSongsCache: 'Müzik çerezlerini temizle', cacheCount: 'Çerezlenen {song} Müzikler ({size})', diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js index 543132a1..4e1cd3f7 100644 --- a/src/locale/lang/zh-CN.js +++ b/src/locale/lang/zh-CN.js @@ -170,6 +170,12 @@ export default { light: '浅色', dark: '深色', }, + trayIcon: { + text: '托盘图标颜色', + auto: '自动', + light: '浅色', + dark: '深色', + }, automaticallyCacheSongs: '自动缓存歌曲', clearSongsCache: '清除歌曲缓存', cacheCount: '已缓存 {song} 首 ({size})', diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js index 384a0cfa..1b46985b 100644 --- a/src/locale/lang/zh-TW.js +++ b/src/locale/lang/zh-TW.js @@ -166,6 +166,12 @@ export default { light: '淺色', dark: '深色', }, + trayIcon: { + text: '工作列圖示顏色', + auto: '自動', + light: '淺色', + dark: '深色', + }, automaticallyCacheSongs: '自動快取歌曲', clearSongsCache: '清除歌曲快取', cacheCount: '已快取 {song} 首 ({size})', diff --git a/src/store/initLocalStorage.js b/src/store/initLocalStorage.js index 9540efb3..4718ecd3 100644 --- a/src/store/initLocalStorage.js +++ b/src/store/initLocalStorage.js @@ -30,6 +30,7 @@ let localStorage = { showLibraryDefault: false, subTitleDefault: false, linuxEnableCustomTitlebar: false, + trayIconTheme: 'auto', enabledPlaylistCategories, proxyConfig: { protocol: 'noProxy', diff --git a/src/views/settings.vue b/src/views/settings.vue index 2fb00630..a1670c8e 100644 --- a/src/views/settings.vue +++ b/src/views/settings.vue @@ -56,6 +56,18 @@ +
+
+
{{ $t('settings.trayIcon.text') }}
+
+
+ +
+
@@ -907,6 +919,21 @@ export default { changeAppearance(value); }, }, + trayIconTheme: { + get() { + if (this.settings.trayIconTheme === undefined) return 'auto'; + return this.settings.trayIconTheme; + }, + set(value) { + this.$store.commit('updateSettings', { + key: 'trayIconTheme', + value, + }); + if (this.isElectron) { + ipcRenderer.send('updateTrayIcon', value); + } + }, + }, musicQuality: { get() { return this.settings.musicQuality ?? 320000;