Change app tray icon when a track is liked #248 (#272)

dvx · May 30, 2023 · bf4d6d7 · bf4d6d7
1 parent be82fa4
commit bf4d6d7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/icon_liked.png b/icon_liked.png
diff --git a/src/constants.ts b/src/constants.ts
@@ -40,6 +40,7 @@ export enum IpcMessage {
   ShowFullscreenVizualizer = 'showFullscreenVizualizer',
   ShowSettings = 'showSettings',
   SideChanged = 'sideChanged',
+  TrackLiked = 'trackLiked',
   WindowMoved = 'windowMoved',
   WindowMoving = 'windowMoving',
   WindowReady = 'windowReady',

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -1,6 +1,7 @@
 import '../../build/Release/black-magic.node';
-import '../../icon.png';
 import '../../icon.ico';
+import '../../icon.png';
+import '../../icon_liked.png';
 
 import {
   app,
@@ -73,14 +74,17 @@ let mainWindow: BrowserWindow | null = null;
 let mousePoller: NodeJS.Timeout;
 let initialBounds: Rectangle;
 
-let tray = null;
+let tray: Tray = null;
 Menu.setApplicationMenu(null);
 
 const isSingleInstance: boolean = app.requestSingleInstanceLock();
 if (!isSingleInstance) {
   app.quit();
 }
 
+const icon = nativeImage.createFromPath(`${__dirname}/icon.png`).resize({ height: 16 });
+const iconTrackLiked = nativeImage.createFromPath(`${__dirname}/icon_liked.png`).resize({ height: 16 });
+
 const MAIN_WINDOW_OPTIONS: BrowserWindowConstructorOptions = {
   x: settings.x ?? -1,
   y: settings.y ?? -1,
@@ -216,6 +220,12 @@ const createMainWindow = (): void => {
     mainWindow.webContents.send(IpcMessage.ShowSettings);
   });
 
+  ipcMain.on(IpcMessage.TrackLiked, (_: Event, isTrackLiked: boolean) => {
+    if (tray) {
+      tray.setImage(isTrackLiked ? iconTrackLiked : icon);
+    }
+  });
+
   const windowOpenHandler = (
     details: HandlerDetails
   ): { action: 'allow' | 'deny'; overrideBrowserWindowOptions?: BrowserWindowConstructorOptions } => {
@@ -334,8 +344,6 @@ app.on('ready', () => {
 
   createMainWindow();
 
-  const iconPath = `${__dirname}/icon.png`;
-  const icon = nativeImage.createFromPath(iconPath).resize({ height: 16 });
   tray = new Tray(icon);
 
   const contextMenu = Menu.buildFromTemplate([

diff --git a/src/renderer/app/cover/index.tsx b/src/renderer/app/cover/index.tsx
@@ -1,10 +1,10 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable no-console */
+import { ipcRenderer } from 'electron';
 import { clamp } from 'lodash';
 import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import { WindowName } from '../../../constants';
+import { IpcMessage, WindowName } from '../../../constants';
 import { Settings, VisualizationType } from '../../../models/settings';
 import { AccountType, SpotifyApiInstance } from '../../api/spotify-api';
 import { WindowPortal } from '../../components';
@@ -93,14 +93,17 @@ export const Cover: FunctionComponent<Props> = ({ settings, message, onVisualiza
     if (state.type === CurrentlyPlayingType.Track) {
       try {
         const isTrackLiked = await SpotifyApiInstance.isTrackLiked(state.id);
+        if (state.isLiked !== isTrackLiked) {
+          ipcRenderer.send(IpcMessage.TrackLiked, isTrackLiked);
+        }
         dispatch({ type: CurrentlyPlayingActions.SetTrackLiked, payload: isTrackLiked });
         await handlePlaybackChanged();
       } catch (error) {
         console.error(error);
         setErrorToDisplay((error as Error).message);
       }
     }
-  }, [dispatch, handlePlaybackChanged, state.id, state.type]);
+  }, [dispatch, handlePlaybackChanged, state.id, state.isLiked, state.type]);
 
   useEffect(() => {
     (async () => {