Editing/uploading cover art is now a thing

Author: kevinfrei

src/MyWindow.ts

@@ -1,13 +1,24 @@
 // This is for getting at "global" stuff from the window object
 import { ISearchBox } from '@fluentui/react';
-import { FTON, MakeError, MakeLogger, Type } from '@freik/core-utils';
-import { IpcRenderer } from 'electron';
+import {
+  AlbumKey,
+  FTON,
+  MakeError,
+  MakeLogger,
+  SongKey,
+  Type,
+} from '@freik/core-utils';
+import { IpcRenderer, NativeImage } from 'electron';
 import { IpcRendererEvent, OpenDialogSyncOptions } from 'electron/main';
+import { PathLike } from 'fs';
+import { FileHandle } from 'fs/promises';
 import { HandleMessage } from './ipc';
 
-const log = MakeLogger('MyWindow');
+const log = MakeLogger('MyWindow', true);
 const err = MakeError('MyWindow-err');
 
+type ReadFile1 = (path: PathLike | FileHandle) => Promise<Buffer>;
+
 /*
  * "Window" stuff goes here
  */
@@ -19,6 +30,8 @@ interface MyWindow extends Window {
   initApp?: () => void;
   ipcSet?: boolean;
   searchBox?: ISearchBox | null;
+  clipboard: Electron.Clipboard | undefined;
+  readFile: ReadFile1; // | ReadFile2 | ReadFile3;
 }
 
 declare let window: MyWindow;
@@ -87,15 +100,15 @@ export function UnsubscribeMediaMatcher(
   mediaQuery?.removeEventListener('change', handler);
 }
 
-export async function InvokeMain(
+export async function InvokeMain<T>(
   channel: string,
-  key?: string,
+  key?: T,
 ): Promise<string | void> {
   let result;
   if (key) {
-    log(`Invoking main("${channel}", "${key}")`);
+    log(`Invoking main("${channel}", "...")`);
     result = (await window.ipc!.invoke(channel, key)) as string;
-    log(`Invoke main ("${channel}" "${key}") returned:`);
+    log(`Invoke main ("${channel}" "...") returned:`);
   } else {
     log(`Invoking main("${channel}")`);
     result = (await window.ipc!.invoke(channel)) as string;
@@ -104,3 +117,45 @@ export async function InvokeMain(
   log(result);
   return result;
 }
+
+export function ImageFromClipboard(): NativeImage | undefined {
+  return window.clipboard?.readImage();
+}
+
+export async function UploadImageForSong(
+  songKey: SongKey,
+  nativeImage: NativeImage,
+): Promise<void> {
+  // Have to turn a nativeImage into something that can be cloned
+  const buffer = nativeImage.toJPEG(90);
+  await InvokeMain('upload-image', { songKey, nativeImage: buffer });
+}
+
+export async function UploadImageForAlbum(
+  albumKey: AlbumKey,
+  nativeImage: NativeImage,
+): Promise<void> {
+  // Have to turn a nativeImage into something that can be cloned
+  const buffer = nativeImage.toJPEG(90);
+  await InvokeMain('upload-image', { albumKey, nativeImage: buffer });
+}
+
+export async function UploadFileForSong(
+  songKey: SongKey,
+  path: string,
+): Promise<void> {
+  // Have to turn a nativeImage into something that can be cloned
+  const buffer = await window.readFile(path);
+  log(typeof buffer);
+  await InvokeMain('upload-image', { songKey, nativeImage: buffer });
+}
+
+export async function UploadFileForAlbum(
+  albumKey: AlbumKey,
+  path: string,
+): Promise<void> {
+  // Have to turn a nativeImage into something that can be cloned
+  const buffer = await window.readFile(path);
+  log(typeof buffer);
+  await InvokeMain('upload-image', { albumKey, nativeImage: buffer });
+}

src/Recoil/Local.ts

@@ -1,5 +1,6 @@
-import { SongKey } from '@freik/core-utils';
-import { atom, selector } from 'recoil';
+import { AlbumKey, SongKey } from '@freik/core-utils';
+import { atom, atomFamily, selector, selectorFamily } from 'recoil';
+import { RandomInt } from '../Tools';
 import { repeatState } from './ReadWrite';
 
 export type PlaylistName = string;
@@ -100,3 +101,19 @@ export const isMiniplayerState = atom<boolean>({
   key: 'isMiniplayer',
   default: false,
 });
+
+/* This stuff is to make it so that pic URL's will refresh, when we update
+ * the "picCacheAvoider" for a particularly album cover
+ * It's efficacy is not guaranteed, but it's a best effort, i guess
+ */
+export const picCacheAvoiderState = atomFamily<number, AlbumKey>({
+  key: 'picCacheAvoider',
+  default: RandomInt(0xfffff),
+});
+
+export const albumCoverUrlState = selectorFamily<string, AlbumKey>({
+  key: 'albuCoverUrl',
+  get: (key: AlbumKey) => ({ get }) => {
+    return `pic://album/${key}#${get(picCacheAvoiderState(key))}`;
+  },
+});

src/Tools.ts

@@ -220,6 +220,12 @@ export function isPlaylist(playlist?: string): boolean {
   return Type.isString(playlist) && playlist.length > 0;
 }
 
+export function RandomInt(max: number): number {
+  const values = new Uint32Array(4);
+  window.crypto.getRandomValues(values);
+  return values[0] % max;
+}
+
 export function ShuffleArray<T>(array: T[]): T[] {
   const values = new Uint32Array(array.length);
   window.crypto.getRandomValues(values);

src/UI/DetailPanel/MetadataEditor.tsx

@@ -21,7 +21,18 @@ import {
 } from '@freik/core-utils';
 import { useId } from '@uifabric/react-hooks';
 import { useEffect, useState } from 'react';
+import { CallbackInterface, useRecoilCallback, useRecoilValue } from 'recoil';
 import { SetMediaInfo } from '../../ipc';
+import {
+  ImageFromClipboard,
+  ShowOpenDialog,
+  UploadFileForAlbum,
+  UploadFileForSong,
+  UploadImageForAlbum,
+  UploadImageForSong,
+} from '../../MyWindow';
+import { albumCoverUrlState, picCacheAvoiderState } from '../../Recoil/Local';
+import { getAlbumKeyForSongKeyState } from '../../Recoil/ReadOnly';
 import { onRejected } from '../../Tools';
 
 const log = MakeLogger('MetadataEditor', true);
@@ -148,6 +159,67 @@ export function MetadataEditor(props: MetadataProps): JSX.Element {
     }
   };
 
+  const uploadImage = async (
+    cbInterface: CallbackInterface,
+    uploadSong: (sk: SongKey) => Promise<void>,
+    uploadAlbum: (ak: AlbumKey) => Promise<void>,
+  ) => {
+    // Easy: one song:
+    if (props.forSong !== undefined) {
+      await uploadSong(props.forSong);
+      const albumKey = await cbInterface.snapshot.getPromise(
+        getAlbumKeyForSongKeyState(props.forSong),
+      );
+      setTimeout(
+        () => cbInterface.set(picCacheAvoiderState(albumKey), (p) => p + 1),
+        250,
+      );
+    } else {
+      // Messy: Multiple songs
+      const albumsSet: Set<AlbumKey> = new Set();
+      for (const song of props.forSongs!) {
+        const albumKey = await cbInterface.snapshot.getPromise(
+          getAlbumKeyForSongKeyState(song),
+        );
+        if (albumsSet.has(albumKey)) {
+          continue;
+        }
+        albumsSet.add(albumKey);
+        await uploadAlbum(albumKey);
+        // This bonks the URL so it will be reloaded after we've uploaded the image
+        setTimeout(
+          () => cbInterface.set(picCacheAvoiderState(albumKey), (p) => p + 1),
+          250,
+        );
+      }
+    }
+  };
+
+  const onImageFromClipboard = useRecoilCallback((cbInterface) => async () => {
+    const img = ImageFromClipboard();
+    if (img !== undefined) {
+      await uploadImage(
+        cbInterface,
+        async (sk: SongKey) => await UploadImageForSong(sk, img),
+        async (ak: AlbumKey) => await UploadImageForAlbum(ak, img),
+      );
+    }
+  });
+  const onSelectFile = useRecoilCallback((cbInterface) => async () => {
+    const selected = ShowOpenDialog({
+      title: 'Select Cover Art image',
+      properties: ['openFile'],
+      filters: [{ name: 'Images', extensions: ['jpg', 'jpeg', 'png'] }],
+    });
+    if (selected !== undefined) {
+      await uploadImage(
+        cbInterface,
+        async (sk: SongKey) => await UploadFileForSong(sk, selected[0]),
+        async (ak: AlbumKey) => await UploadFileForAlbum(ak, selected[0]),
+      );
+    }
+  });
+  const coverUrl = useRecoilValue(albumCoverUrlState(props.albumId || '___'));
   // Nothing selected: EMPTY!
   if (!isSingle && !isMultiple) {
     return <Text>Not Single and not Multiple (This is a bug!)</Text>;
@@ -267,10 +339,16 @@ export function MetadataEditor(props: MetadataProps): JSX.Element {
       </Stack>
       <Image
         alt="Album Cover"
-        src={`pic://album/${props.albumId ? props.albumId : '____'}`}
+        src={coverUrl}
         imageFit={ImageFit.centerContain}
         height={350}
       />
+      <br />
+      <Stack horizontal horizontalAlign="center">
+        <DefaultButton text="Choose File..." onClick={onSelectFile} />
+        &nbsp;
+        <DefaultButton text="From Clipboard" onClick={onImageFromClipboard} />
+      </Stack>
     </>
   );
 }

src/UI/SongPlaying.tsx

@@ -3,7 +3,11 @@ import { MakeLogger } from '@freik/core-utils';
 import { SyntheticEvent } from 'react';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 import { MaybePlayNext } from '../Recoil/api';
-import { currentSongKeyState, songListState } from '../Recoil/Local';
+import {
+  albumCoverUrlState,
+  currentSongKeyState,
+  songListState,
+} from '../Recoil/Local';
 import {
   MediaTime,
   mediaTimePercentState,
@@ -32,14 +36,10 @@ export function GetAudioElem(): HTMLMediaElement | void {
 function CoverArt(): JSX.Element {
   const songKey = useRecoilValue(currentSongKeyState);
   const albumKey = useRecoilValue(getAlbumKeyForSongKeyState(songKey));
-
+  const picurl = useRecoilValue(albumCoverUrlState(albumKey));
   return (
     <span id="song-cover-art">
-      <img
-        id="img-current-cover-art"
-        src={`pic://album/${albumKey}`}
-        alt="album cover"
-      />
+      <img id="img-current-cover-art" src={picurl} alt="album cover" />
     </span>
   );
 }

src/UI/Views/Albums.tsx

@@ -20,6 +20,7 @@ import {
   useRecoilValue,
 } from 'recoil';
 import { AddSongs } from '../../Recoil/api';
+import { albumCoverUrlState } from '../../Recoil/Local';
 import {
   allAlbumsState,
   allArtistsState,
@@ -51,6 +52,7 @@ export function AlbumHeaderDisplay(props: { album: Album }): JSX.Element {
   const onRightClick = useRecoilCallback((cbInterface) =>
     SongListDetailContextMenuClick(cbInterface, props.album.songs),
   );
+  const picurl = useRecoilValue(albumCoverUrlState(props.album.key));
   return (
     <Stack
       horizontal
@@ -60,7 +62,7 @@ export function AlbumHeaderDisplay(props: { album: Album }): JSX.Element {
       style={{ padding: '2px 0px', cursor: 'pointer' }}
     >
       <Image
-        src={`pic://album/${props.album.key}`}
+        src={picurl}
         height={50}
         width={50}
         imageFit={ImageFit.centerContain}

src/__mocks__/MyWindow.ts

@@ -1,10 +1,18 @@
 // This is for getting at "global" stuff from the window object
 import { MakeError, MakeLogger, Type } from '@freik/core-utils';
+import crypto from 'crypto';
 import { OpenDialogSyncOptions } from 'electron/main';
 
 const log = MakeLogger('MyWindow-mock');
 const err = MakeError('MyWindow-mock-err');
 
+// This fixes window.crypto for the Jest environment
+Object.defineProperty(global, 'crypto', {
+  value: {
+    getRandomValues: (arr: any[]) => crypto.randomBytes(arr.length),
+  },
+});
+
 export function ShowOpenDialog(
   options: OpenDialogSyncOptions,
 ): string[] | undefined {

static/main/Communication.ts

@@ -1,6 +1,7 @@
 import { FTON, FTONData, MakeError, MakeLogger } from '@freik/core-utils';
 import { ipcMain, shell } from 'electron';
 import { IpcMainInvokeEvent } from 'electron/main';
+import { isAlbumCoverData, SaveNativeImageForAlbum } from './cover-art';
 import { FlushImageCache } from './ImageCache';
 import { setMediaInfoForSong } from './metadata';
 import {
@@ -24,6 +25,7 @@ const log = MakeLogger('Communication');
 const err = MakeError('Communication-err');
 
 type Handler<T> = (arg?: string) => Promise<T | void>;
+type TypeHandler<T> = (arg: T) => Promise<string | void>;
 
 /**
  * Read a value from persistence by name, returning it's unprocessed contents
@@ -122,6 +124,31 @@ export function register(key: string, handleIt: Handler<string>): void {
     },
   );
 }
+/**
+ * Registers with `ipcMain.handle` a function that takes a mandatory parameter
+ * and returns *string* data untouched. It also requires a checker to ensure the
+ * data is properly typed
+ * @param  {string} key - The id to register a listener for
+ * @param  {TypeHandler<T>} handler - the function that handles the data
+ * @param  {(v:any)=>v is T} checker - a Type Check function for type T
+ * @returns void
+ */
+export function registerKey<T>(
+  key: string,
+  handler: TypeHandler<T>,
+  checker: (v: any) => v is T,
+): void {
+  ipcMain.handle(
+    key,
+    async (event: IpcMainInvokeEvent, arg: any): Promise<string | void> => {
+      if (checker(arg)) {
+        return await handler(arg);
+      } else {
+        err(`Invalid argument type to ${key} handler`);
+      }
+    },
+  );
+}
 
 /**
  * Show a file in the shell
@@ -172,4 +199,7 @@ export function CommsSetup(): void {
   // because they don't just read/write to disk.
   register('read-from-storage', readFromStorage);
   register('write-to-storage', writeToStorage);
+
+  // Unflattened data handlers (everything should switch to these eventually
+  registerKey('upload-image', SaveNativeImageForAlbum, isAlbumCoverData);
 }