feature: copy album art to clipboard

johnnyshankman · Dec 30, 2023 · 09b3f1f · 09b3f1f
1 parent 5f892d4
commit 09b3f1f
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 13 deletions.
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -11,6 +11,7 @@ import {
   IpcMainEvent,
   OpenDialogReturnValue,
   clipboard,
+  nativeImage,
 } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
@@ -53,6 +54,7 @@ ipcMain.on('get-album-art', async (event, arg) => {
     path.join(app.getPath('userData'), 'userConfig.json'),
   ) as StoreStructure;
   userConfig.lastPlayedSong = filePath;
+
   fs.writeFileSync(
     path.join(app.getPath('userData'), 'userConfig.json'),
     JSON.stringify(userConfig),
@@ -347,6 +349,16 @@ ipcMain.on('copy-to-clipboard', async (event, arg): Promise<any> => {
   clipboard.writeText(arg.text);
 });
 
+ipcMain.on('copy-art-to-clipboard', async (event, arg): Promise<any> => {
+  const filePath = arg.song;
+  const metadata = await mm.parseFile(filePath);
+  if (metadata.common.picture?.[0].data) {
+    clipboard.writeImage(
+      nativeImage.createFromBuffer(metadata.common.picture?.[0].data),
+    );
+  }
+});
+
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
   sourceMapSupport.install();

diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -8,6 +8,7 @@ export type Channels =
   | 'initialize'
   | 'get-album-art'
   | 'copy-to-clipboard'
+  | 'copy-art-to-clipboard'
   | 'show-in-finder'
   | 'song-imported';
 

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -33,6 +33,7 @@ import LinearProgressBar from './components/LinearProgressBar';
 import { StoreStructure, SongSkeletonStructure } from '../common/common';
 import './App.scss';
 import ReusableSongMenu from './components/ReusableSongMenu';
+import AlbumArtMenu from './components/AlbumArtMenu';
 
 /**
  * @TODO this is a monolithic file and needs refactoring into smaller components
@@ -124,6 +125,7 @@ function MainDash() {
   const [shuffle, setShuffle] = useState(false);
   const [repeating, setRepeating] = useState(false);
   const [initialScrollIndex, setInitialScrollIndex] = useState(0);
+  const [showAlbumArtMenu, setShowAlbumArtMenu] = useState(false);
 
   const bufferToDataUrl = async (
     buffer: Buffer,
@@ -708,15 +710,31 @@ function MainDash() {
           </div>
         )}
         {currentSongDataURL && (
-          <img
-            src={currentSongDataURL}
-            alt="Album Art"
-            className="object-cover rounded-lg shadow-md max-w-[280px] w-1/3"
-            style={{
-              aspectRatio: '200/200',
-              objectFit: 'cover',
-            }}
-          />
+          <>
+            <img
+              src={currentSongDataURL}
+              alt="Album Art"
+              className="album-art object-cover rounded-lg shadow-md max-w-[280px] w-1/3"
+              style={{
+                aspectRatio: '200/200',
+                objectFit: 'cover',
+              }}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                setShowAlbumArtMenu(true);
+              }}
+            />
+            {showAlbumArtMenu && currentSong && (
+              <AlbumArtMenu
+                open
+                anchorEl={document.querySelector('.album-art')}
+                onClose={() => {
+                  setShowAlbumArtMenu(false);
+                }}
+                song={currentSong}
+              />
+            )}
+          </>
         )}
 
         <Tooltip title="Import Library">
@@ -953,7 +971,7 @@ function MainDash() {
        */}
       {songMenu && (
         <ReusableSongMenu
-          open={!!songMenu}
+          open
           anchorEl={songMenu?.anchorEl}
           onClose={() => {
             setSongMenu(undefined);

diff --git a/src/renderer/components/AlbumArtMenu.tsx b/src/renderer/components/AlbumArtMenu.tsx
@@ -0,0 +1,44 @@
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+type AlbumArtMenuProps = {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  song: string;
+};
+
+export default function AlbumArtMenu(props: AlbumArtMenuProps) {
+  const { anchorEl, onClose, song } = props;
+
+  const copyAlbumArt = () => {
+    window.electron.ipcRenderer.sendMessage('copy-art-to-clipboard', {
+      song,
+    });
+    onClose();
+  };
+
+  return (
+    <Menu
+      id="basic-menu"
+      anchorEl={anchorEl}
+      open
+      MenuListProps={{
+        'aria-labelledby': 'basic-button',
+      }}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: 'center',
+        horizontal: 'center',
+      }}
+    >
+      <MenuItem
+        sx={{
+          fontSize: '11px',
+        }}
+        onClick={copyAlbumArt}
+      >
+        Copy Image
+      </MenuItem>
+    </Menu>
+  );
+}
diff --git a/src/renderer/components/ReusableSongMenu.tsx b/src/renderer/components/ReusableSongMenu.tsx
@@ -3,15 +3,14 @@ import MenuItem from '@mui/material/MenuItem';
 import { SongSkeletonStructure } from '../../common/common';
 
 type SongMenuProps = {
-  open: boolean;
   anchorEl: HTMLElement | null;
   onClose: () => void;
   song: string;
   songInfo: SongSkeletonStructure;
 };
 
 export default function ReusableSongMenu(props: SongMenuProps) {
-  const { open, anchorEl, onClose, song, songInfo } = props;
+  const { anchorEl, onClose, song, songInfo } = props;
 
   const showPathInFinder = () => {
     window.electron.ipcRenderer.sendMessage('show-in-finder', {
@@ -31,7 +30,7 @@ export default function ReusableSongMenu(props: SongMenuProps) {
     <Menu
       id="basic-menu"
       anchorEl={anchorEl}
-      open={open}
+      open
       MenuListProps={{
         'aria-labelledby': 'basic-button',
       }}