feat: rename IPC

src/index.ts

@@ -114,18 +114,18 @@ function onClosed() {
   mainWindow = null;
 }
 
-ipcMain.handle('get-main-plugin-names', () => Object.keys(mainPlugins));
+ipcMain.handle('ytmd:get-main-plugin-names', () => Object.keys(mainPlugins));
 
 const initHook = (win: BrowserWindow) => {
   ipcMain.handle(
-    'get-config',
+    'ytmd:get-config',
     (_, id: string) =>
       deepmerge(
         allPlugins[id].config ?? { enabled: false },
         config.get(`plugins.${id}`) ?? {},
       ) as PluginConfig,
   );
-  ipcMain.handle('set-config', (_, name: string, obj: object) =>
+  ipcMain.handle('ytmd:set-config', (_, name: string, obj: object) =>
     config.setPartial(`plugins.${name}`, obj, allPlugins[name].config),
   );
 

src/loader/renderer.ts

@@ -18,9 +18,9 @@ const loadedPluginMap: Record<
 export const createContext = <Config extends PluginConfig>(
   id: string,
 ): RendererContext<Config> => ({
-  getConfig: async () => window.ipcRenderer.invoke('get-config', id),
+  getConfig: async () => window.ipcRenderer.invoke('ytmd:get-config', id),
   setConfig: async (newConfig) => {
-    await window.ipcRenderer.invoke('set-config', id, newConfig);
+    await window.ipcRenderer.invoke('ytmd:set-config', id, newConfig);
   },
   ipc: {
     send: (event: string, ...args: unknown[]) => {

src/plugins/album-color-theme/index.ts

@@ -9,7 +9,25 @@ import { t } from '@/i18n';
 const COLOR_KEY = '--ytmusic-album-color';
 const DARK_COLOR_KEY = '--ytmusic-album-color-dark';
 
-export default createPlugin({
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    color?: Color;
+    darkColor?: Color;
+
+    playerPage: HTMLElement | null;
+    navBarBackground: HTMLElement | null;
+    ytmusicPlayerBar: HTMLElement | null;
+    playerBarBackground: HTMLElement | null;
+    sidebarBig: HTMLElement | null;
+    sidebarSmall: HTMLElement | null;
+    ytmusicAppLayout: HTMLElement | null;
+
+    getColor(key: string, alpha?: number): string;
+    updateColor(): void;
+  }
+>({
   name: () => t('plugins.album-color-theme.name'),
   description: () => t('plugins.album-color-theme.description'),
   restartNeeded: true,
@@ -18,16 +36,13 @@ export default createPlugin({
   },
   stylesheets: [style],
   renderer: {
-    color: null as Color | null,
-    darkColor: null as Color | null,
-
-    playerPage: null as HTMLElement | null,
-    navBarBackground: null as HTMLElement | null,
-    ytmusicPlayerBar: null as HTMLElement | null,
-    playerBarBackground: null as HTMLElement | null,
-    sidebarBig: null as HTMLElement | null,
-    sidebarSmall: null as HTMLElement | null,
-    ytmusicAppLayout: null as HTMLElement | null,
+    playerPage: null,
+    navBarBackground: null,
+    ytmusicPlayerBar: null,
+    playerBarBackground: null,
+    sidebarBig: null,
+    sidebarSmall: null,
+    ytmusicAppLayout: null,
 
     start() {
       this.playerPage = document.querySelector<HTMLElement>('#player-page');

src/plugins/audio-compressor.ts

@@ -7,7 +7,7 @@ export default createPlugin({
 
   renderer() {
     document.addEventListener(
-      'audioCanPlay',
+      'ytmd:audio-can-play',
       ({ detail: { audioSource, audioContext } }) => {
         const compressor = audioContext.createDynamicsCompressor();
 

src/plugins/captions-selector/renderer.ts

@@ -121,7 +121,7 @@ export default createRenderer<
       ?.unloadModule('captions');
     document
       .querySelector('video')
-      ?.removeEventListener('srcChanged', this.videoChangeListener);
+      ?.removeEventListener('ytmd:src-changed', this.videoChangeListener);
     this.captionsSettingsButton.removeEventListener(
       'click',
       this.captionsButtonClickListener,
@@ -139,7 +139,7 @@ export default createRenderer<
 
     document
       .querySelector('video')
-      ?.addEventListener('srcChanged', this.videoChangeListener);
+      ?.addEventListener('ytmd:src-changed', this.videoChangeListener);
     this.captionsSettingsButton.addEventListener(
       'click',
       this.captionsButtonClickListener,

src/plugins/discord/main.ts

@@ -244,7 +244,7 @@ export const backend = createBackend<
       });
       connect();
       let lastSent = Date.now();
-      ipcMain.on('timeChanged', (_, t: number) => {
+      ipcMain.on('ytmd:time-changed', (_, t: number) => {
         const currentTime = Date.now();
         // if lastSent is more than 5 seconds ago, send the new time
         if (currentTime - lastSent > 5000) {

src/plugins/downloader/main/index.ts

@@ -110,7 +110,7 @@ export const onMainLoad = async ({
     fetch: getNetFetchAsFetch(),
   });
   ipc.handle('download-song', (url: string) => downloadSong(url));
-  ipc.on('video-src-changed', (data: GetPlayerResponse) => {
+  ipc.on('ytmd:video-src-changed', (data: GetPlayerResponse) => {
     playingUrl = data.microformat.microformatDataRenderer.urlCanonical;
   });
   ipc.handle('download-playlist-request', async (url: string) =>

src/plugins/in-app-menu/main.ts

@@ -47,7 +47,7 @@ export const onMainLoad = ({
     return target;
   };
 
-  ipcMain.handle('menu-event', (event, commandId: number) => {
+  ipcMain.handle('ytmd:menu-event', (event, commandId: number) => {
     const target = getMenuItemById(commandId);
     if (target)
       target.click(

src/plugins/in-app-menu/menu/panel.ts

@@ -76,7 +76,7 @@ export const createPanel = (
     }
 
     menu.addEventListener('click', async () => {
-      await window.ipcRenderer.invoke('menu-event', item.commandId);
+      await window.ipcRenderer.invoke('ytmd:menu-event', item.commandId);
       const menuItem = (await window.ipcRenderer.invoke(
         'get-menu-by-id',
         item.commandId,

src/plugins/notifications/interactive.ts

@@ -253,9 +253,9 @@ export default (
   songControls = getSongControls(win);
 
   let currentSeconds = 0;
-  on('ytmd:player-api-loaded', () => send('setupTimeChangedListener'));
+  on('ytmd:player-api-loaded', () => send('ytmd:setup-time-changed-listener'));
 
-  on('timeChanged', (t: number) => {
+  on('ytmd:time-changed', (t: number) => {
     currentSeconds = t;
   });
 

src/plugins/picture-in-picture/main.ts

@@ -101,7 +101,7 @@ export const onMainLoad = async ({
 
   config ??= await getConfig();
   setConfig({ isInPiP });
-  on('picture-in-picture', () => {
+  on('plugin:toggle-picture-in-picture', () => {
     togglePiP();
   });
 

src/plugins/picture-in-picture/renderer.ts

@@ -90,7 +90,7 @@ const togglePictureInPicture = async () => {
     } catch {}
   }
 
-  window.ipcRenderer.send('picture-in-picture');
+  window.ipcRenderer.send('plugin:toggle-picture-in-picture');
   return false;
 };
 // For UI (HTML)

src/plugins/playback-speed/renderer.ts

@@ -78,7 +78,7 @@ const observeVideo = () => {
   const video = document.querySelector<HTMLVideoElement>('video');
   if (video) {
     video.addEventListener('ratechange', forcePlaybackRate);
-    video.addEventListener('srcChanged', forcePlaybackRate);
+    video.addEventListener('ytmd:src-changed', forcePlaybackRate);
   }
 };
 
@@ -128,7 +128,7 @@ export const onUnload = () => {
   const video = document.querySelector<HTMLVideoElement>('video');
   if (video) {
     video.removeEventListener('ratechange', forcePlaybackRate);
-    video.removeEventListener('srcChanged', forcePlaybackRate);
+    video.removeEventListener('ytmd:src-changed', forcePlaybackRate);
   }
   slider.removeEventListener('wheel', wheelEventListener);
   getSongMenu()?.removeChild(slider);

src/plugins/precise-volume/renderer.ts

@@ -71,7 +71,7 @@ export const onPlayerApiReady = async (
         const videoMode = () =>
           api.getPlayerResponse().videoDetails?.musicVideoType !==
           'MUSIC_VIDEO_TYPE_ATV';
-        $('video')?.addEventListener('srcChanged', () =>
+        $('video')?.addEventListener('ytmd:src-changed', () =>
           moveVolumeHud(videoMode()),
         );
       }

src/plugins/shortcuts/mpris.ts

@@ -29,25 +29,25 @@ function registerMPRIS(win: BrowserWindow) {
     const microToSec = (n: unknown) => Math.round(Number(n) / 1e6);
 
     const seekTo = (e: { position: unknown }) =>
-      win.webContents.send('seekTo', microToSec(e.position));
+      win.webContents.send('ytmd:seek-to', microToSec(e.position));
     const seekBy = (o: unknown) =>
-      win.webContents.send('seekBy', microToSec(o));
+      win.webContents.send('ytmd:seek-by', microToSec(o));
 
     const player = setupMPRIS();
 
     ipcMain.on('ytmd:player-api-loaded', () => {
-      win.webContents.send('setupSeekedListener', 'mpris');
-      win.webContents.send('setupTimeChangedListener', 'mpris');
-      win.webContents.send('setupRepeatChangedListener', 'mpris');
-      win.webContents.send('setupVolumeChangedListener', 'mpris');
+      win.webContents.send('ytmd:setup-seeked-listener', 'mpris');
+      win.webContents.send('ytmd:setup-time-changed-listener', 'mpris');
+      win.webContents.send('ytmd:setup-repeat-changed-listener', 'mpris');
+      win.webContents.send('ytmd:setup-volume-changed-listener', 'mpris');
     });
 
-    ipcMain.on('seeked', (_, t: number) => player.seeked(secToMicro(t)));
+    ipcMain.on('ytmd:seeked', (_, t: number) => player.seeked(secToMicro(t)));
 
     let currentSeconds = 0;
-    ipcMain.on('timeChanged', (_, t: number) => (currentSeconds = t));
+    ipcMain.on('ytmd:time-changed', (_, t: number) => (currentSeconds = t));
 
-    ipcMain.on('repeatChanged', (_, mode: string) => {
+    ipcMain.on('ytmd:repeat-changed', (_, mode: string) => {
       switch (mode) {
         case 'NONE': {
           player.loopStatus = mpris.LOOP_STATUS_NONE;
@@ -122,7 +122,7 @@ function registerMPRIS(win: BrowserWindow) {
 
     let mprisVolNewer = false;
     let autoUpdate = false;
-    ipcMain.on('volumeChanged', (_, newVol) => {
+    ipcMain.on('ytmd:volume-changed', (_, newVol) => {
       if (~~(player.volume * 100) !== newVol) {
         if (mprisVolNewer) {
           mprisVolNewer = false;

src/plugins/skip-silences/renderer.ts

@@ -115,13 +115,13 @@ export const onRendererLoad = async ({
 }: RendererContext<SkipSilencesPluginConfig>) => {
   config = await getConfig();
 
-  document.addEventListener('audioCanPlay', audioCanPlayListener, {
+  document.addEventListener('ytmd:audio-can-play', audioCanPlayListener, {
     passive: true,
   });
 };
 
 export const onRendererUnload = () => {
-  document.removeEventListener('audioCanPlay', audioCanPlayListener);
+  document.removeEventListener('ytmd:audio-can-play', audioCanPlayListener);
 
   if (playOrSeekHandler) {
     const video = document.querySelector('video');

src/plugins/sponsorblock/index.ts

@@ -76,7 +76,7 @@ export default createPlugin({
 
     const { apiURL, categories } = config;
 
-    ipc.on('video-src-changed', async (data: GetPlayerResponse) => {
+    ipc.on('ytmd:video-src-changed', async (data: GetPlayerResponse) => {
       const segments = await fetchSegments(
         apiURL,
         categories,

src/plugins/tuna-obs/index.ts

@@ -68,9 +68,9 @@ export default createPlugin({
       };
 
       ipc.on('ytmd:player-api-loaded', () =>
-        ipc.send('setupTimeChangedListener'),
+        ipc.send('ytmd:setup-time-changed-listener'),
       );
-      ipc.on('timeChanged', (t: number) => {
+      ipc.on('ytmd:time-changed', (t: number) => {
         if (!this.data.title) {
           return;
         }

src/plugins/video-toggle/index.ts

@@ -305,7 +305,7 @@ export default createPlugin({
           setVideoState(target.checked);
         });
 
-        video?.addEventListener('srcChanged', videoStarted);
+        video?.addEventListener('ytmd:src-changed', videoStarted);
 
         observeThumbnail();
 

src/plugins/visualizer/index.ts

@@ -161,7 +161,7 @@ export default createPlugin({
       }
 
       document.addEventListener(
-        'audioCanPlay',
+        'ytmd:audio-can-play',
         (e) => {
           const video = document.querySelector<
             HTMLVideoElement & { captureStream(): MediaStream }

src/preload.ts

@@ -48,7 +48,7 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
   sendToHost: (channel: string, ...args: unknown[]) =>
     ipcRenderer.sendToHost(channel, ...args),
 });
-contextBridge.exposeInMainWorld('reload', () => ipcRenderer.send('reload'));
+contextBridge.exposeInMainWorld('reload', () => ipcRenderer.send('ytmd:reload'));
 contextBridge.exposeInMainWorld(
   'ELECTRON_RENDERER_URL',
   process.env.ELECTRON_RENDERER_URL,

src/providers/app-controls.ts

@@ -7,14 +7,14 @@ import config from '@/config';
 export const restart = () => restartInternal();
 
 export const setupAppControls = () => {
-  ipcMain.on('restart', restart);
-  ipcMain.handle('getDownloadsFolder', () => app.getPath('downloads'));
+  ipcMain.on('ytmd:restart', restart);
+  ipcMain.handle('ytmd:get-downloads-folder', () => app.getPath('downloads'));
   ipcMain.on(
-    'reload',
+    'ytmd:reload',
     () =>
       BrowserWindow.getFocusedWindow()?.webContents.loadURL(config.get('url')),
   );
-  ipcMain.handle('getPath', (_, ...args: string[]) => path.join(...args));
+  ipcMain.handle('ytmd:get-path', (_, ...args: string[]) => path.join(...args));
 };
 
 function restartInternal() {

src/providers/song-info-front.ts

@@ -18,12 +18,12 @@ window.ipcRenderer.on('update-song-info', (_, extractedSongInfo: SongInfo) => {
 });
 
 // Used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
-const srcChangedEvent = new CustomEvent('srcChanged');
+const srcChangedEvent = new CustomEvent('ytmd:src-changed');
 
 export const setupSeekedListener = singleton(() => {
   $('video')?.addEventListener('seeked', (v) => {
     if (v.target instanceof HTMLVideoElement) {
-      window.ipcRenderer.send('seeked', v.target.currentTime);
+      window.ipcRenderer.send('ytmd:seeked', v.target.currentTime);
     }
   });
 });
@@ -32,7 +32,7 @@ export const setupTimeChangedListener = singleton(() => {
   const progressObserver = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
       const target = mutation.target as Node & { value: string };
-      window.ipcRenderer.send('timeChanged', target.value);
+      window.ipcRenderer.send('ytmd:time-changed', target.value);
       songInfo.elapsedSeconds = Number(target.value);
     }
   });
@@ -46,7 +46,7 @@ export const setupRepeatChangedListener = singleton(() => {
   const repeatObserver = new MutationObserver((mutations) => {
     // provided by YouTube Music
     window.ipcRenderer.send(
-      'repeatChanged',
+      'ytmd:repeat-changed',
       (
         mutations[0].target as Node & {
           __dataHost: {
@@ -63,7 +63,7 @@ export const setupRepeatChangedListener = singleton(() => {
   // Emit the initial value as well; as it's persistent between launches.
   // provided by YouTube Music
   window.ipcRenderer.send(
-    'repeatChanged',
+    'ytmd:repeat-changed',
     $<
       HTMLElement & {
         getState: () => GetState;
@@ -74,26 +74,26 @@ export const setupRepeatChangedListener = singleton(() => {
 
 export const setupVolumeChangedListener = singleton((api: YoutubePlayer) => {
   $('video')?.addEventListener('volumechange', () => {
-    window.ipcRenderer.send('volumeChanged', api.getVolume());
+    window.ipcRenderer.send('ytmd:volume-changed', api.getVolume());
   });
   // Emit the initial value as well; as it's persistent between launches.
-  window.ipcRenderer.send('volumeChanged', api.getVolume());
+  window.ipcRenderer.send('ytmd:volume-changed', api.getVolume());
 });
 
 export default (api: YoutubePlayer) => {
-  window.ipcRenderer.on('setupTimeChangedListener', () => {
+  window.ipcRenderer.on('ytmd:setup-time-changed-listener', () => {
     setupTimeChangedListener();
   });
 
-  window.ipcRenderer.on('setupRepeatChangedListener', () => {
+  window.ipcRenderer.on('ytmd:setup-repeat-changed-listener', () => {
     setupRepeatChangedListener();
   });
 
-  window.ipcRenderer.on('setupVolumeChangedListener', () => {
+  window.ipcRenderer.on('ytmd:setup-volume-changed-listener', () => {
     setupVolumeChangedListener(api);
   });
 
-  window.ipcRenderer.on('setupSeekedListener', () => {
+  window.ipcRenderer.on('ytmd:setup-seeked-listener', () => {
     setupSeekedListener();
   });
 
@@ -102,7 +102,7 @@ export default (api: YoutubePlayer) => {
       e.target instanceof HTMLVideoElement &&
       Math.round(e.target.currentTime) > 0
     ) {
-      window.ipcRenderer.send('playPaused', {
+      window.ipcRenderer.send('ytmd:play-or-paused', {
         isPaused: status === 'pause',
         elapsedSeconds: Math.floor(e.target.currentTime),
       });
@@ -170,6 +170,6 @@ export default (api: YoutubePlayer) => {
         data.microformat.microformatDataRenderer.pageOwnerDetails.name;
     }
 
-    window.ipcRenderer.send('video-src-changed', data);
+    window.ipcRenderer.send('ytmd:video-src-changed', data);
   }
 };

src/providers/song-info.ts

@@ -104,16 +104,16 @@ let handlingData = false;
 
 const registerProvider = (win: BrowserWindow) => {
   // This will be called when the song-info-front finds a new request with song data
-  ipcMain.on('video-src-changed', async (_, data: GetPlayerResponse) => {
+  ipcMain.on('ytmd:video-src-changed', async (_, data: GetPlayerResponse) => {
     handlingData = true;
     await handleData(data, win);
     handlingData = false;
     for (const c of callbacks) {
-      c(songInfo, 'video-src-changed');
+      c(songInfo, 'ytmd:video-src-changed');
     }
   });
   ipcMain.on(
-    'playPaused',
+    'ytmd:play-or-paused',
     (
       _,
       {
@@ -128,7 +128,7 @@ const registerProvider = (win: BrowserWindow) => {
       }
 
       for (const c of callbacks) {
-        c(songInfo, 'playPaused');
+        c(songInfo, 'ytmd:play-or-paused');
       }
     },
   );

src/renderer.ts

@@ -37,8 +37,8 @@ interface YouTubeMusicAppElement extends HTMLElement {
 }
 
 async function onApiLoaded() {
-  window.ipcRenderer.on('seekTo', (_, t: number) => api!.seekTo(t));
-  window.ipcRenderer.on('seekBy', (_, t: number) => api!.seekBy(t));
+  window.ipcRenderer.on('ytmd:seek-to', (_, t: number) => api!.seekTo(t));
+  window.ipcRenderer.on('ytmd:seek-by', (_, t: number) => api!.seekBy(t));
 
   const video = document.querySelector('video')!;
   const audioContext = new AudioContext();
@@ -65,7 +65,7 @@ async function onApiLoaded() {
 
   const audioCanPlayEventDispatcher = () => {
     document.dispatchEvent(
-      new CustomEvent('audioCanPlay', {
+      new CustomEvent('ytmd:audio-can-play', {
         detail: {
           audioContext,
           audioSource,

src/reset.d.ts

@@ -14,7 +14,7 @@ declare global {
   }
 
   interface DocumentEventMap {
-    audioCanPlay: CustomEvent<Compressor>;
+    'ytmd:audio-can-play': CustomEvent<Compressor>;
     videodatachange: CustomEvent<VideoDataChanged>;
   }