feat(api-server): Add queue api (#2767)

src/renderer.ts

@@ -43,6 +43,13 @@ async function listenForApiLoad() {
 
 interface YouTubeMusicAppElement extends HTMLElement {
   navigate(page: string): void;
+  networkManager: {
+    fetch: (url: string, data: unknown) => Promise<unknown>;
+  };
+}
+
+interface SearchBoxElement extends HTMLElement {
+  getSearchboxStats(): unknown;
 }
 
 async function onApiLoaded() {
@@ -159,6 +166,99 @@ async function onApiLoaded() {
     } satisfies QueueResponse);
   });
 
+  window.ipcRenderer.on('ytmd:add-to-queue', (_, videoId: string) => {
+    const queue = document.querySelector<QueueElement>('#queue');
+    const app = document.querySelector<YouTubeMusicAppElement>('ytmusic-app');
+    if (!app) return;
+
+    const store = queue?.queue.store.store;
+    if (!store) return;
+
+    app.networkManager
+      .fetch('/music/get_queue', {
+        queueContextParams: store.getState().queue.queueContextParams,
+        queueInsertPosition: 'INSERT_AT_END',
+        videoIds: [videoId],
+      })
+      .then((result) => {
+        if (
+          result &&
+          typeof result === 'object' &&
+          'queueDatas' in result &&
+          Array.isArray(result.queueDatas)
+        ) {
+          queue?.dispatch({
+            type: 'ADD_ITEMS',
+            payload: {
+              nextQueueItemId: store.getState().queue.nextQueueItemId,
+              index: store.getState().queue.items.length ?? 0,
+              items: result.queueDatas
+                .map((it) =>
+                  typeof it === 'object' && it && 'content' in it
+                    ? it.content
+                    : null,
+                )
+                .filter(Boolean),
+              shuffleEnabled: false,
+              shouldAssignIds: true,
+            },
+          });
+        }
+      });
+  });
+  window.ipcRenderer.on(
+    'ytmd:move-in-queue',
+    (_, fromIndex: number, toIndex: number) => {
+      const queue = document.querySelector<QueueElement>('#queue');
+      queue?.dispatch({
+        type: 'MOVE_ITEM',
+        payload: {
+          fromIndex,
+          toIndex,
+        },
+      });
+    },
+  );
+  window.ipcRenderer.on('ytmd:remove-from-queue', (_, index: number) => {
+    const queue = document.querySelector<QueueElement>('#queue');
+    queue?.dispatch({
+      type: 'REMOVE_ITEM',
+      payload: index,
+    });
+  });
+  window.ipcRenderer.on('ytmd:set-queue-index', (_, index: number) => {
+    const queue = document.querySelector<QueueElement>('#queue');
+    queue?.dispatch({
+      type: 'SET_INDEX',
+      payload: index,
+    });
+  });
+  window.ipcRenderer.on('ytmd:clear-queue', () => {
+    const queue = document.querySelector<QueueElement>('#queue');
+    queue?.queue.store.store.dispatch({
+      type: 'SET_PLAYER_PAGE_INFO',
+      payload: { open: false },
+    });
+    queue?.dispatch({
+      type: 'CLEAR',
+    });
+  });
+
+  window.ipcRenderer.on('ytmd:search', async (_, query: string) => {
+    const app = document.querySelector<YouTubeMusicAppElement>('ytmusic-app');
+    const searchBox =
+      document.querySelector<SearchBoxElement>('ytmusic-search-box');
+
+    if (!app || !searchBox) return;
+
+    const result = await app.networkManager.fetch('/search', {
+      query,
+      suggestStats: searchBox.getSearchboxStats(),
+    });
+
+    window.ipcRenderer.send('ytmd:search-results', result);
+  });
+
   const video = document.querySelector('video')!;
   const audioContext = new AudioContext();
   const audioSource = audioContext.createMediaElementSource(video);