swag

src/actions.ts

@@ -1,4 +1,5 @@
 import type { Page } from 'playwright'
+import { captureQueryPromise } from './hashHandlers.js'
 
 const dismissConsentIfPresent = async (page: Page) => {
    const overlay = page.locator('#onetrust-consent-sdk')
@@ -16,81 +17,94 @@ const dismissConsentIfPresent = async (page: Page) => {
    await overlay.waitFor({ state: 'hidden', timeout: 10000 }).catch(() => {})
 }
 
-export const addToPlaylistAction = async (page: Page) => {
-   const slowHostTimeoutMs = 90000 // Зменшив, 90с це занадто, краще впасти раніше
+export const addNotDuplicateItemToPlaylistAction = async (page: Page) => {
+   const timeout = 60000 // Зменшив, 90с це занадто, краще впасти раніше
 
-   await page.waitForLoadState('networkidle', { timeout: slowHostTimeoutMs }) // Важливо: networkidle краще ніж domcontentloaded для SPA
+   await page.waitForLoadState('domcontentloaded', { timeout }) // Важливо: networkidle краще ніж domcontentloaded для SPA
    await dismissConsentIfPresent(page)
-   console.log('page loaded')
+   console.log('[a] page loaded')
 
    const track = page.locator('[data-testid="tracklist-row"]').first()
-   await track.waitFor({ state: 'visible', timeout: slowHostTimeoutMs })
-   console.log('track found')
+   await track.waitFor({ state: 'visible', timeout })
+   console.log('[a] track found')
 
-   // ТРЮК 1: Примусовий скрол до елемента перед кліком
-   await track.scrollIntoViewIfNeeded()
-   await track.click({ button: 'right', timeout: slowHostTimeoutMs })
-   console.log('right-clicked track')
+   await track.click({ button: 'right', timeout })
+   console.log('[a] right-clicked track')
 
    const menu = page.locator('[data-testid="context-menu"]')
-   await menu.waitFor({ state: 'visible', timeout: slowHostTimeoutMs })
-   console.log('context menu visible')
+   await menu.waitFor({ state: 'visible', timeout })
+   console.log('[a] context menu visible')
 
    const addToPlaylistButton = menu.getByText('Add to Playlist', { exact: false })
    await addToPlaylistButton.waitFor({ state: 'visible' })
-   await addToPlaylistButton.hover() // Hover обов'язковий
-   console.log('hovered "Add to Playlist"')
+   await addToPlaylistButton.hover()
+   console.log('[a] hovered "Add to Playlist"')
 
    const input = page.locator('[placeholder="Find a playlist"]')
-   await input.waitFor({ state: 'visible', timeout: slowHostTimeoutMs })
-   console.log('search input visible')
+   await input.waitFor({ state: 'visible', timeout })
+   console.log('[a] search input visible')
 
-   // ТРЮК 2: Повільний ввід тексту. Це дає React час обробити стейт.
-   // Замість fill використовуємо pressSequentially з затримкою
    await input.pressSequentially('TEST', { delay: 100 })
-   console.log('typed playlist name with delay')
+   console.log('[a] typed playlist name with delay')
 
-   // Даємо час на рендеринг відфільтрованого списку
    await page.waitForTimeout(1500)
 
-   // ТРЮК 3: Замість кліку мишкою - ENTER
-   // Після пошуку фокус зазвичай залишається в input або перший елемент стає активним.
-   // Спробуємо натиснути стрілку вниз (щоб точно вибрати плейліст) і Enter.
    const targetPlaylist = page.getByRole('menuitem', { name: 'TEST', exact: true }).first()
    if (!(await targetPlaylist.isVisible())) {
-      console.log('playlist not found in search results, clicking search result to trigger playlist loading')
-      await dismissConsentIfPresent(page)
-      console.log('dissmissed')
-      await page.getByText('TEST', { exact: true }).first().click({ force: true, timeout: slowHostTimeoutMs })
-      console.log('clicked search result, waiting for playlist to appear in search results')
+      console.log('[a] playlist not found in search results, clicking search result to trigger playlist loading')
+      await page.getByText('TEST', { exact: true }).first().click({ force: true, timeout })
+      console.log('[a] clicked search result, waiting for playlist to appear in search results')
    } else {
-      console.log('playlist found in search results, clicking it')
-      await dismissConsentIfPresent(page)
-      console.log('dissmissed')
-      await targetPlaylist.click({ force: true, timeout: slowHostTimeoutMs })
-      console.log('clicked playlist in search results')
+      console.log('[a] playlist found in search results, clicking it')
+      await targetPlaylist.click({ force: true, timeout })
+      console.log('[a] clicked playlist in search results')
    }
 
-   // Wait for context menu to close implicitly
-   await menu.waitFor({ state: 'hidden', timeout: 15000 }).catch(() => { })
-   console.log('context menu closed')
+   await page.waitForTimeout(3000)
+}
 
-   // --- БЛОК ОБРОБКИ "Add Anyway" ---
-   // Тут важливо чекати не просто появи, а появи АБО зникнення діалогу
-   // Але оскільки нам треба клікнути, чекаємо кнопку.
+export const removeFromPlaylistAction = async (page: Page) => {
+   const timeout = 60000
 
-   try {
-      const addAnywayBtn = page.getByRole('button', { name: /add anyway/i })
-      // Чекаємо трохи довше, бо модалка може мати анімацію появи
-      await addAnywayBtn.waitFor({ state: 'visible', timeout: 15000 })
+   await page.waitForLoadState('networkidle', { timeout })
+   console.log('[a] page loaded')
 
-      console.log('"Add anyway" visible, clicking...')
-      // Тут теж краще без force, якщо можливо, але для модалок force допустимий
-      await addAnywayBtn.click()
-   } catch (e) {
-      console.log('"Add anyway" button did not appear (track likely added or not duplicate)')
-   }
+   const track = page.locator('[data-testid="tracklist-row"]').first()
+   await track.waitFor({ state: 'visible', timeout })
+   console.log('[a] track found')
+   const clickZone = track.locator('[aria-colindex="2"]').first()
+   await clickZone.waitFor({ state: 'visible', timeout })
+   console.log('[a] clickZone found')
+
+   await clickZone.click({ button: 'right', timeout })
+   console.log('[a] right-clicked track')
+
+   const menu = page.locator('[data-testid="context-menu"]')
+   await menu.waitFor({ state: 'visible', timeout })
+   console.log('[a] context menu visible')
+
+   const btn = menu.getByText('Remove from this playlist')
+   await btn.waitFor({ state: 'visible', timeout })
+   await btn.click({ timeout })
+   console.log('[a] remove from playlist btn clicked')
 
-   // Фінальне очікування, щоб запит встиг піти
    await page.waitForTimeout(3000)
 }
+
+// fetchPlaylist + modify hashes + (possibly search)
+export const getModifyPlaylistHashAction = async (page: Page): Promise<void> => {
+   await page.goto('https://open.spotify.com/playlist/6uXwlbGoEnIQT9Cu5RsuxP', {
+      waitUntil: 'domcontentloaded',
+   })
+   const queryData = await captureQueryPromise(page, ['fetchPlaylist'])
+   const result = queryData?.json
+   if (!result) throw new Error('No data in fetchPlaylist response')
+
+   if (result.data.playlistV2.content.totalCount === 0) {
+      console.log('Playlist is empty, using addToPlaylist flow to get hash')
+      await page.goto('https://open.spotify.com/search/deco27', { waitUntil: 'domcontentloaded' })
+      return addNotDuplicateItemToPlaylistAction(page)
+   } else {
+      return removeFromPlaylistAction(page)
+   }
+}

src/browser.ts

@@ -62,3 +62,16 @@ export async function killBrowser(browser: Browser | null) {
    if (browser) await browser.close().catch(() => {})
    if (global.gc) global.gc() // force garbage collection to free RAM
 }
+
+export async function browserWrapper<T>(fn: (page: Page) => Promise<T>) {
+   const { browser, page } = await createInstance()
+   try {
+      const data = await fn(page)
+      return data
+   } catch (err) {
+      await handleError(err)
+      return null
+   } finally {
+      killBrowser(browser)
+   }
+}

src/hashHandlers.ts

@@ -1,77 +1,87 @@
-import { addToPlaylistAction } from './actions.js'
-import { createInstance, killBrowser, handleError } from './browser.js'
+import type { Page } from 'playwright'
+import { browserWrapper } from './browser.js'
 import { type Operation, store } from './storage.js'
 import { delay } from './utils.js'
+import { getModifyPlaylistHashAction } from './actions.js'
+import { queue } from './index.js'
 
 export const operations: Operation[] = [
-   { name: 'fetchPlaylist', url: 'https://open.spotify.com/playlist/79QHayucQm6M4wUlUbhQNQ' },
    {
-      name: 'searchDesktop',
-      url: `https://open.spotify.com/search/deco27/tracks`,
+      type: 'action',
+      names: ['addToPlaylist', 'removeFromPlaylist'],
+      action: getModifyPlaylistHashAction,
    },
+   { names: ['fetchPlaylist'], url: 'https://open.spotify.com/playlist/79QHayucQm6M4wUlUbhQNQ' },
    {
-      name: 'addToPlaylist',
-      url: 'https://open.spotify.com/search/deco27/tracks',
-      action: addToPlaylistAction,
+      names: ['searchDesktop'],
+      url: `https://open.spotify.com/search/deco27/tracks`,
    },
 ]
 
-export async function updateHash(op: Operation) {
-   const { browser, page } = await createInstance()
-
-   try {
-      const hashPromise = page
-         .waitForResponse(
-            async (res) => {
-               const url = res.url()
-               if (url.includes('query') || (url.includes('graphql') && res.status() === 200)) {
-                  try {
-                     const body = res.request().postDataJSON()
-                     if (!body) return false
-                     const hash = body.extensions?.persistedQuery?.sha256Hash
-                     if (hash) {
-                        console.log(body.operationName)
-                        store.hashes[body.operationName] = hash
-                     }
-                     return body.operationName === op.name
-                  } catch {
-                     return false
+export async function captureQueryPromise(page: Page, operationNames: string[]) {
+   const res = await page.waitForResponse(
+      async (res) => {
+         const url = res.url()
+         if (url.includes('query') || (url.includes('graphql') && res.status() === 200)) {
+            try {
+               const body = res.request().postDataJSON()
+               if (!body) return false
+               const hash = body.extensions?.persistedQuery?.sha256Hash
+               if (hash) {
+                  console.log(body.operationName)
+                  store.hashes[body.operationName] = hash
+                  // Record hash for ALL operation names since they share the same hash
+                  for (const name of operationNames) {
+                     store.tempHashes[name] = hash
                   }
                }
+               return operationNames.includes(body.operationName)
+            } catch {
                return false
-            },
-            { timeout: 150000 },
-         )
-         .then((res) => (res.request().postDataJSON()?.extensions?.persistedQuery?.sha256Hash || null) as string | null)
-         .catch((err) => {
-            console.warn(`⚠️ [${op.name}] Hash listener ended: ${err.message}`)
-            return null
-         })
+            }
+         }
+         return false
+      },
+      { timeout: 150000 },
+   )
 
-      await page.goto(op.url, { waitUntil: 'domcontentloaded', timeout: 120000 })
+   const hash = (res.request().postDataJSON()?.extensions?.persistedQuery?.sha256Hash || null) as string | null
+   const json = await res.json().catch(() => null)
 
-      const actionPromise = op.action
-         ? op.action(page).catch((e) => {
-              throw new Error(`Action failed: ${e.message}`)
-           })
-         : Promise.resolve()
+   return { hash, json: operationNames.length === 1 ? json : null }
+}
 
-      const [hash] = await Promise.all([hashPromise, actionPromise])
-      return hash
-   } catch (err) {
-      handleError(err)
+export async function updateHash(page: Page, op: Operation) {
+   // For URL-based operations
+   const queryPromise = captureQueryPromise(page, op.names).catch((err) => {
+      console.warn(`⚠️ [${op.names}] Hash listener ended: ${err.message}`)
       return null
-   } finally {
-      await killBrowser(browser)
-   }
+   })
+
+   if (op.type !== 'action') await page.goto(op.url, { waitUntil: 'domcontentloaded', timeout: 120000 })
+
+   const actionPromise = op.action
+      ? op.action(page).catch((e) => {
+           throw new Error(`Action failed: ${e.message}`)
+        })
+      : Promise.resolve()
+
+   await Promise.all([queryPromise, actionPromise])
+   return store.tempHashes[op.names[0]] || null
 }
 
 export async function updateAllHashes() {
-   const res = []
+   const res: Record<string, string | null> = {}
+   store.tempHashes = {}
+
    for (const op of operations) {
-      const hash = await updateHash(op)
-      res.push({ name: op.name, hash })
+      // if we already have hashes from previos operations, we can skip
+      if (op.names.every((name) => store.tempHashes[name])) continue
+      const hash = await queue.add(() => browserWrapper((page) => updateHash(page, op)))
+      op.names.forEach((name) => (res[name] = hash))
       await delay(800)
    }
+
+   store.tempHashes = {}
    return res
 }

src/index.ts

@@ -2,15 +2,15 @@ import express from 'express'
 import 'dotenv/config'
 import PQueue from 'p-queue'
 import cron from 'node-cron'
-import { store, type AccessTokenResponse, type TokenResponse } from './storage.js'
-import { createInstance, killBrowser, handleError } from './browser.js'
+import { store, type AccessTokenResponse, type Hashes, type TokenResponse } from './storage.js'
+import { createInstance, killBrowser, handleError, browserWrapper } from './browser.js'
 import { delay } from './utils.js'
 import { updateAllHashes, operations, updateHash } from './hashHandlers.js'
 import type { Browser } from 'playwright'
 
 const app = express()
 const PORT = process.env.PORT || 3000
-const queue = new PQueue({ concurrency: 1 })
+export const queue: PQueue = new PQueue({ concurrency: 1 })
 
 // Health check - must be before auth middleware
 app.get('/', (req, res) => {
@@ -121,40 +121,49 @@ app.get('/hashes', (req, res) => {
 
 app.put('/hashes', async (req, res) => {
    const raw = req.query.names as string
-   let hashes: { name: string; hash: string | null }[] = []
+   let tempHash = store.tempHashes
 
-   if (!raw) {
+   const names = raw ? raw.split(',') : null
+
+   if (!names) {
       // update all
-      hashes = await queue.add(updateAllHashes)
+      tempHash = await updateAllHashes()
    } else {
       // update selected
-      const names = raw.split(',')
       for (const name of names) {
-         const op = operations.find((o) => o.name === name)
-         if (!op) continue
-         const hash = await queue.add(() => updateHash(op))
-         hashes.push({ name: op.name, hash })
+         const op = operations.find((o) => o.names.includes(name))
+         if (!op || op.names.every((name) => tempHash[name])) {
+            console.log(`Skipping ${name}`)
+            continue
+         }
+
+         const hash = await queue.add(() => browserWrapper((page) => updateHash(page, op)))
+         // Record hash for ALL names in the operation
+         console.log(`Hash for ${op.names.join(', ')}: ${hash}`)
+         for (const opName of op.names) tempHash[opName] = hash
          await delay(800)
       }
-      if (hashes.length === 0) {
+      const hashesAmount = Object.keys(tempHash).length
+      if (hashesAmount === 0) {
          return res.status(400).json({ error: 'No valid operation names provided' })
       }
-      if (hashes.length !== names.length) {
+      if (names.some((name) => !operations.some((op) => op.names.includes(name)))) {
          return res.status(404).json({
             error: 'Some operation names were invalid',
-            details: { raw, hashes: Object.fromEntries(hashes.map((i) => [i.name, i.hash])) },
+            details: { raw, hashes: tempHash },
          })
       }
    }
 
-   if (hashes.map((h) => h.hash).some((h) => h === null)) {
-      console.error('Failed to update some hashes', hashes)
-      return res
-         .status(502)
-         .json({ error: 'Failed to update some hashes', details: Object.fromEntries(hashes.map((i) => [i.name, i.hash])) })
+   if (Object.keys(tempHash).some((key) => tempHash[key] === null)) {
+      console.error('Failed to update some hashes', tempHash)
+      return res.status(502).json({ error: 'Failed to update some hashes', details: tempHash })
    }
 
-   res.json({ requested: Object.fromEntries(hashes.map((i) => [i.name, i.hash])), all: store.hashes })
+   store.tempHashes = {}
+   Object.assign(store.hashes, tempHash)
+   const requested = Object.fromEntries(Object.entries(store.hashes).filter(([key, value]) => names?.includes(key) && value))
+   res.json({ requested, all: store.hashes })
 })
 
 cron.schedule('0 3 * * *', () => {
@@ -162,7 +171,7 @@ cron.schedule('0 3 * * *', () => {
    setTimeout(async () => {
       await queue.add(async () => {
          const hashes = await updateAllHashes()
-         if (hashes.map((h) => h.hash).some((h) => h === null)) {
+         if (Object.keys(hashes).some((key) => hashes[key] === null)) {
             console.error('cron: Failed to update some hashes', hashes)
          }
       })

src/storage.ts

@@ -8,14 +8,22 @@ export type TokenResponse = {
    client: ClientTokenResponse
 }
 
-export type Operation = {
-   name: string
-   url: string
-   action?: (page: Page) => Promise<void>
-}
-type Hashes = Record<string, string | null>
+export type Operation = (
+   | {
+        type?: never
+        url: string
+        action?: (page: Page) => Promise<void>
+     }
+   | {
+        type: 'action'
+        action: (page: Page) => Promise<void>
+     }
+) & { names: [string, ...string[]] }
+
+export type Hashes = Record<string, string | null>
 export const store = {
    access: null as AccessTokenResponse | null,
    client: null as ClientTokenResponse | null,
    hashes: {} as Hashes,
+   tempHashes: {} as Hashes,
 }