QOL: Move source code under the src directory. (#1318)

src/plugins/notifications/back.ts

@@ -0,0 +1,51 @@
+import { BrowserWindow, Notification } from 'electron';
+
+import is from 'electron-is';
+
+import { notificationImage } from './utils';
+import config from './config';
+import interactive from './interactive';
+
+import registerCallback, { SongInfo } from '../../providers/song-info';
+
+import type { ConfigType } from '../../config/dynamic';
+
+type NotificationOptions = ConfigType<'notifications'>;
+
+const notify = (info: SongInfo) => {
+  // Send the notification
+  const currentNotification = new Notification({
+    title: info.title || 'Playing',
+    body: info.artist,
+    icon: notificationImage(info),
+    silent: true,
+    urgency: config.get('urgency') as 'normal' | 'critical' | 'low',
+  });
+  currentNotification.show();
+
+  return currentNotification;
+};
+
+const setup = () => {
+  let oldNotification: Notification;
+  let currentUrl: string | undefined;
+
+  registerCallback((songInfo: SongInfo) => {
+    if (!songInfo.isPaused && (songInfo.url !== currentUrl || config.get('unpauseNotification'))) {
+      // Close the old notification
+      oldNotification?.close();
+      currentUrl = songInfo.url;
+      // This fixes a weird bug that would cause the notification to be updated instead of showing
+      setTimeout(() => {
+        oldNotification = notify(songInfo);
+      }, 10);
+    }
+  });
+};
+
+export default (win: BrowserWindow, options: NotificationOptions) => {
+  // Register the callback for new song information
+  is.windows() && options.interactive
+    ? interactive(win)
+    : setup();
+};

src/plugins/notifications/config.ts

@@ -0,0 +1,5 @@
+import { PluginConfig } from '../../config/dynamic';
+
+const config = new PluginConfig('notifications');
+
+export default config;

src/plugins/notifications/interactive.ts

@@ -0,0 +1,257 @@
+import path from 'node:path';
+
+import { app, BrowserWindow, ipcMain, Notification } from 'electron';
+
+import { notificationImage, secondsToMinutes, ToastStyles } from './utils';
+import config from './config';
+
+import getSongControls from '../../providers/song-controls';
+import registerCallback, { SongInfo } from '../../providers/song-info';
+import { changeProtocolHandler } from '../../providers/protocol-handler';
+import { setTrayOnClick, setTrayOnDoubleClick } from '../../tray';
+import { getMediaIconLocation, mediaIcons, saveMediaIcon } from '../utils';
+
+let songControls: ReturnType<typeof getSongControls>;
+let savedNotification: Notification | undefined;
+
+export default (win: BrowserWindow) => {
+  songControls = getSongControls(win);
+
+  let currentSeconds = 0;
+  ipcMain.on('apiLoaded', () => win.webContents.send('setupTimeChangedListener'));
+
+  ipcMain.on('timeChanged', (_, t: number) => currentSeconds = t);
+
+  if (app.isPackaged) {
+    saveMediaIcon();
+  }
+
+  let savedSongInfo: SongInfo;
+  let lastUrl: string | undefined;
+
+  // Register songInfoCallback
+  registerCallback((songInfo) => {
+    if (!songInfo.artist && !songInfo.title) {
+      return;
+    }
+
+    savedSongInfo = { ...songInfo };
+    if (!songInfo.isPaused
+      && (songInfo.url !== lastUrl || config.get('unpauseNotification'))
+    ) {
+      lastUrl = songInfo.url;
+      sendNotification(songInfo);
+    }
+  });
+
+  if (config.get('trayControls')) {
+    setTrayOnClick(() => {
+      if (savedNotification) {
+        savedNotification.close();
+        savedNotification = undefined;
+      } else if (savedSongInfo) {
+        sendNotification({
+          ...savedSongInfo,
+          elapsedSeconds: currentSeconds,
+        });
+      }
+    });
+
+    setTrayOnDoubleClick(() => {
+      if (win.isVisible()) {
+        win.hide();
+      } else {
+        win.show();
+      }
+    });
+  }
+
+  app.once('before-quit', () => {
+    savedNotification?.close();
+  });
+
+  changeProtocolHandler(
+    (cmd) => {
+      if (Object.keys(songControls).includes(cmd)) {
+        songControls[cmd as keyof typeof songControls]();
+        if (config.get('refreshOnPlayPause') && (
+          cmd === 'pause'
+          || (cmd === 'play' && !config.get('unpauseNotification'))
+        )
+        ) {
+          setImmediate(() =>
+            sendNotification({
+              ...savedSongInfo,
+              isPaused: cmd === 'pause',
+              elapsedSeconds: currentSeconds,
+            }),
+          );
+        }
+      }
+    },
+  );
+};
+
+function sendNotification(songInfo: SongInfo) {
+  const iconSrc = notificationImage(songInfo);
+
+  savedNotification?.close();
+
+  let icon: string;
+  if (typeof iconSrc === 'object') {
+    icon = iconSrc.toDataURL();
+  } else {
+    icon = iconSrc;
+  }
+
+  savedNotification = new Notification({
+    title: songInfo.title || 'Playing',
+    body: songInfo.artist,
+    icon: iconSrc,
+    silent: true,
+    // https://learn.microsoft.com/en-us/uwp/schemas/tiles/toastschema/schema-root
+    // https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/toast-schema
+    // https://learn.microsoft.com/en-us/windows/apps/design/shell/tiles-and-notifications/adaptive-interactive-toasts?tabs=xml
+    // https://learn.microsoft.com/en-us/uwp/api/windows.ui.notifications.toasttemplatetype
+    toastXml: getXml(songInfo, icon),
+  });
+
+  savedNotification.on('close', () => {
+    savedNotification = undefined;
+  });
+
+  savedNotification.show();
+}
+
+const getXml = (songInfo: SongInfo, iconSrc: string) => {
+  switch (config.get('toastStyle')) {
+    default:
+    case ToastStyles.logo:
+    case ToastStyles.legacy: {
+      return xmlLogo(songInfo, iconSrc);
+    }
+
+    case ToastStyles.banner_top_custom: {
+      return xmlBannerTopCustom(songInfo, iconSrc);
+    }
+
+    case ToastStyles.hero: {
+      return xmlHero(songInfo, iconSrc);
+    }
+
+    case ToastStyles.banner_bottom: {
+      return xmlBannerBottom(songInfo, iconSrc);
+    }
+
+    case ToastStyles.banner_centered_bottom: {
+      return xmlBannerCenteredBottom(songInfo, iconSrc);
+    }
+
+    case ToastStyles.banner_centered_top: {
+      return xmlBannerCenteredTop(songInfo, iconSrc);
+    }
+  }
+};
+const display = (kind: keyof typeof mediaIcons) => {
+  if (config.get('toastStyle') === ToastStyles.legacy) {
+    return `content="${mediaIcons[kind]}"`;
+  }
+
+  return `\
+            content="${config.get('hideButtonText') ? '' : kind.charAt(0).toUpperCase() + kind.slice(1)}"\
+            imageUri="file:///${path.resolve(getMediaIconLocation(), `${kind}.png`)}"
+        `;
+};
+
+const getButton = (kind: keyof typeof mediaIcons) =>
+  `<action ${display(kind)} activationType="protocol" arguments="youtubemusic://${kind}"/>`;
+
+const getButtons = (isPaused: boolean) => `\
+    <actions>
+        ${getButton('previous')}
+        ${isPaused ? getButton('play') : getButton('pause')}
+        ${getButton('next')}
+    </actions>\
+`;
+
+const toast = (content: string, isPaused: boolean) => `\
+<toast>
+    <audio silent="true" />
+    <visual>
+        <binding template="ToastGeneric">
+            ${content}
+        </binding>
+    </visual>
+
+    ${getButtons(isPaused)}
+</toast>`;
+
+const xmlImage = ({ title, artist, isPaused }: SongInfo, imgSrc: string, placement: string) => toast(`\
+            <image id="1" src="${imgSrc}" name="Image" ${placement}/>
+            <text id="1">${title}</text>
+            <text id="2">${artist}</text>\
+`, isPaused ?? false);
+
+const xmlLogo = (songInfo: SongInfo, imgSrc: string) => xmlImage(songInfo, imgSrc, 'placement="appLogoOverride"');
+
+const xmlHero = (songInfo: SongInfo, imgSrc: string) => xmlImage(songInfo, imgSrc, 'placement="hero"');
+
+const xmlBannerBottom = (songInfo: SongInfo, imgSrc: string) => xmlImage(songInfo, imgSrc, '');
+
+const xmlBannerTopCustom = (songInfo: SongInfo, imgSrc: string) => toast(`\
+            <image id="1" src="${imgSrc}" name="Image" />
+            <text>ㅤ</text>
+            <group>
+                <subgroup>
+                    <text hint-style="body">${songInfo.title}</text>
+                    <text hint-style="captionSubtle">${songInfo.artist}</text>
+                </subgroup>
+                ${xmlMoreData(songInfo)}
+            </group>\
+`, songInfo.isPaused ?? false);
+
+const xmlMoreData = ({ album, elapsedSeconds, songDuration }: SongInfo) => `\
+<subgroup hint-textStacking="bottom">
+    ${album
+  ? `<text hint-style="captionSubtle" hint-wrap="true" hint-align="right">${album}</text>` : ''}
+    <text hint-style="captionSubtle" hint-wrap="true" hint-align="right">${secondsToMinutes(elapsedSeconds ?? 0)} / ${secondsToMinutes(songDuration)}</text>
+</subgroup>\
+`;
+
+const xmlBannerCenteredBottom = ({ title, artist, isPaused }: SongInfo, imgSrc: string) => toast(`\
+            <text>ㅤ</text>
+            <group>
+                <subgroup hint-weight="1" hint-textStacking="center">
+                    <text hint-align="center" hint-style="${titleFontPicker(title)}">${title}</text>
+                    <text hint-align="center" hint-style="SubtitleSubtle">${artist}</text>
+                </subgroup>
+            </group>
+            <image id="1" src="${imgSrc}" name="Image"  hint-removeMargin="true" />\
+`, isPaused ?? false);
+
+const xmlBannerCenteredTop = ({ title, artist, isPaused }: SongInfo, imgSrc: string) => toast(`\
+            <image id="1" src="${imgSrc}" name="Image" />
+            <text>ㅤ</text>
+            <group>
+                <subgroup hint-weight="1" hint-textStacking="center">
+                    <text hint-align="center" hint-style="${titleFontPicker(title)}">${title}</text>
+                    <text hint-align="center" hint-style="SubtitleSubtle">${artist}</text>
+                </subgroup>
+            </group>\
+`, isPaused ?? false);
+
+const titleFontPicker = (title: string) => {
+  if (title.length <= 13) {
+    return 'Header';
+  }
+
+  if (title.length <= 22) {
+    return 'Subheader';
+  }
+
+  if (title.length <= 26) {
+    return 'Title';
+  }
+
+  return 'Subtitle';
+};

src/plugins/notifications/menu.ts

@@ -0,0 +1,93 @@
+import is from 'electron-is';
+
+import { BrowserWindow, MenuItem } from 'electron';
+
+import { snakeToCamel, ToastStyles, urgencyLevels } from './utils';
+
+import config from './config';
+
+import { MenuTemplate } from '../../menu';
+
+import type { ConfigType } from '../../config/dynamic';
+
+const getMenu = (options: ConfigType<'notifications'>): MenuTemplate => {
+  if (is.linux()) {
+    return [
+      {
+        label: 'Notification Priority',
+        submenu: urgencyLevels.map((level) => ({
+          label: level.name,
+          type: 'radio',
+          checked: options.urgency === level.value,
+          click: () => config.set('urgency', level.value),
+        })),
+      }
+    ];
+  } else if (is.windows()) {
+    return [
+      {
+        label: 'Interactive Notifications',
+        type: 'checkbox',
+        checked: options.interactive,
+        // Doesn't update until restart
+        click: (item: MenuItem) => config.setAndMaybeRestart('interactive', item.checked),
+      },
+      {
+        // Submenu with settings for interactive notifications (name shouldn't be too long)
+        label: 'Interactive Settings',
+        submenu: [
+          {
+            label: 'Open/Close on tray click',
+            type: 'checkbox',
+            checked: options.trayControls,
+            click: (item: MenuItem) => config.set('trayControls', item.checked),
+          },
+          {
+            label: 'Hide Button Text',
+            type: 'checkbox',
+            checked: options.hideButtonText,
+            click: (item: MenuItem) => config.set('hideButtonText', item.checked),
+          },
+          {
+            label: 'Refresh on Play/Pause',
+            type: 'checkbox',
+            checked: options.refreshOnPlayPause,
+            click: (item: MenuItem) => config.set('refreshOnPlayPause', item.checked),
+          },
+        ],
+      },
+      {
+        label: 'Style',
+        submenu: getToastStyleMenuItems(options),
+      },
+    ];
+  } else {
+    return [];
+  }
+};
+
+export default (_win: BrowserWindow, options: ConfigType<'notifications'>): MenuTemplate => [
+  ...getMenu(options),
+  {
+    label: 'Show notification on unpause',
+    type: 'checkbox',
+    checked: options.unpauseNotification,
+    click: (item: MenuItem) => config.set('unpauseNotification', item.checked),
+  },
+];
+
+export function getToastStyleMenuItems(options: ConfigType<'notifications'>) {
+  const array = Array.from({ length: Object.keys(ToastStyles).length });
+
+  // ToastStyles index starts from 1
+  for (const [name, index] of Object.entries(ToastStyles)) {
+    array[index - 1] = {
+      label: snakeToCamel(name),
+      type: 'radio',
+      checked: options.toastStyle === index,
+      click: () => config.set('toastStyle', index),
+    } satisfies Electron.MenuItemConstructorOptions;
+  }
+
+  return array as Electron.MenuItemConstructorOptions[];
+}

src/plugins/notifications/utils.ts

@@ -0,0 +1,88 @@
+import path from 'node:path';
+import fs from 'node:fs';
+
+import { app, NativeImage } from 'electron';
+
+import config from './config';
+
+import { cache } from '../../providers/decorators';
+import { SongInfo } from '../../providers/song-info';
+import { getAssetsDirectoryLocation } from '../utils';
+
+const defaultIcon = path.join(getAssetsDirectoryLocation(), 'youtube-music.png');
+const userData = app.getPath('userData');
+const temporaryIcon = path.join(userData, 'tempIcon.png');
+const temporaryBanner = path.join(userData, 'tempBanner.png');
+
+
+export const ToastStyles = {
+  logo: 1,
+  banner_centered_top: 2,
+  hero: 3,
+  banner_top_custom: 4,
+  banner_centered_bottom: 5,
+  banner_bottom: 6,
+  legacy: 7,
+};
+
+export const urgencyLevels = [
+  { name: 'Low', value: 'low' },
+  { name: 'Normal', value: 'normal' },
+  { name: 'High', value: 'critical' },
+];
+
+const nativeImageToLogo = cache((nativeImage: NativeImage) => {
+  const temporaryImage = nativeImage.resize({ height: 256 });
+  const margin = Math.max(temporaryImage.getSize().width - 256, 0);
+
+  return temporaryImage.crop({
+    x: Math.round(margin / 2),
+    y: 0,
+    width: 256,
+    height: 256,
+  });
+});
+
+export const notificationImage = (songInfo: SongInfo) => {
+  if (!songInfo.image) {
+    return defaultIcon;
+  }
+
+  if (!config.get('interactive')) {
+    return nativeImageToLogo(songInfo.image);
+  }
+
+  switch (config.get('toastStyle')) {
+    case ToastStyles.logo:
+    case ToastStyles.legacy: {
+      return saveImage(nativeImageToLogo(songInfo.image), temporaryIcon);
+    }
+
+    default: {
+      return saveImage(songInfo.image, temporaryBanner);
+    }
+  }
+};
+
+export const saveImage = cache((img: NativeImage, savePath: string) => {
+  try {
+    fs.writeFileSync(savePath, img.toPNG());
+  } catch (error: unknown) {
+    console.log(`Error writing song icon to disk:\n${String(error)}`);
+    return defaultIcon;
+  }
+
+  return savePath;
+});
+
+export const snakeToCamel = (string_: string) => string_.replaceAll(/([-_][a-z]|^[a-z])/g, (group) =>
+  group.toUpperCase()
+    .replace('-', ' ')
+    .replace('_', ' '),
+);
+
+export const secondsToMinutes = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60);
+  const secondsLeft = seconds % 60;
+  return `${minutes}:${secondsLeft < 10 ? '0' : ''}${secondsLeft}`;
+};