Capturing pack and cover

background.js

@@ -10,8 +10,6 @@ const WAVEFORM_PATH_RE = /\.wv\.json$/i;
 const SCRAMBLED_PATH_RE = /-scrambled\//i;
 const HASH_RE = /^[a-f0-9]{64}$/i;
 const GRAPHQL_URL = "https://surfaces-graphql.splice.com/graphql";
-const DEBUG_TRACE = true;
-const DEBUG_TRACE_MARKER = "S3DBG_MAPTRACE_V1";
 
 function isDomainAllowed(pageUrl) {
   return typeof pageUrl === "string" && SPLICE_DOMAIN_RE.test(pageUrl);
@@ -81,24 +79,6 @@ function normalizeName(value) {
   return typeof value === "string" ? value.trim().toLowerCase() : "";
 }
 
-function debugMapTrace(stage, entry) {
-  if (!DEBUG_TRACE) {
-    return;
-  }
-  const safe = entry && typeof entry === "object" ? entry : {};
-  console.debug(DEBUG_TRACE_MARKER, stage, {
-    sampleId: safe.sampleId || "",
-    fileName: safe.fileName || "",
-    key: safe.key || "",
-    bpm: safe.bpm || "",
-    tagsCount: Array.isArray(safe.tags) ? safe.tags.length : 0,
-    coverImageUrl: safe.coverImageUrl || "",
-    previewUrl: safe.previewUrl || "",
-    fullUrl: safe.fullUrl || "",
-    source: safe.source || ""
-  });
-}
-
 function extractSampleIdFromUrl(url) {
   try {
     const parsed = new URL(url);
@@ -164,6 +144,7 @@ function mergeEntry(tabState, inputEntry, source, options) {
     previewUrl: "",
     fullUrl: "",
     fileName: "",
+    packName: "",
     key: "",
     bpm: "",
     tags: [],
@@ -191,6 +172,9 @@ function mergeEntry(tabState, inputEntry, source, options) {
   if (inputEntry.fileName) {
     merged.fileName = String(inputEntry.fileName).trim();
   }
+  if (typeof inputEntry.packName === "string" && inputEntry.packName.trim()) {
+    merged.packName = inputEntry.packName.trim();
+  }
   if (typeof inputEntry.key === "string" && inputEntry.key.trim()) {
     merged.key = inputEntry.key.trim();
   }
@@ -228,6 +212,7 @@ function upsertPreviewContext(tabId, context, source) {
       previewUrl,
       fullUrl: context.fullUrl ? normalizeUrl(context.fullUrl) : "",
       fileName: context.fileName || "",
+      packName: context.packName || "",
       key: context.key || "",
       bpm: context.bpm || "",
       tags: Array.isArray(context.tags) ? context.tags : [],
@@ -241,6 +226,7 @@ function upsertPreviewContext(tabId, context, source) {
 function upsertUrl(tabId, url, source) {
   const sourceTag = source && typeof source === "object" ? source.tag || "" : source || "";
   const sourceFileName = source && typeof source === "object" ? source.fileName || "" : "";
+  const sourcePackName = source && typeof source === "object" ? source.packName || "" : "";
   const sourceKey = source && typeof source === "object" ? source.key || "" : "";
   const sourceBpm = source && typeof source === "object" ? source.bpm || "" : "";
   const sourceTags = source && typeof source === "object" && Array.isArray(source.tags) ? source.tags : [];
@@ -260,6 +246,7 @@ function upsertUrl(tabId, url, source) {
     previewUrl: isPreviewUrl(normalized) ? normalized : "",
     fullUrl: isFullUrl(normalized) ? normalized : "",
     fileName: sourceFileName,
+    packName: sourcePackName,
     key: sourceKey,
     bpm: sourceBpm,
     tags: sourceTags,
@@ -302,6 +289,7 @@ async function appendHistoryRows(rows) {
         ...existing,
         ...row,
         fileName: row.fileName || existing.fileName || "",
+        packName: row.packName || existing.packName || "",
         key: row.key || existing.key || "",
         bpm: row.bpm || existing.bpm || "",
         tags: Array.isArray(row.tags) && row.tags.length ? row.tags : (existing.tags || []),
@@ -323,6 +311,7 @@ async function appendDownloadHistory(entry, result) {
     previewUrl: resolvedEntry.previewUrl || "",
     fullUrl: resolvedEntry.fullUrl || "",
     fileName: resolvedEntry.fileName || "",
+    packName: resolvedEntry.packName || "",
     key: resolvedEntry.key || "",
     bpm: resolvedEntry.bpm || "",
     tags: Array.isArray(resolvedEntry.tags) ? resolvedEntry.tags : [],
@@ -345,6 +334,7 @@ function makeDecodedPlaceholderRow(entry, source) {
     previewUrl: entry.previewUrl || "",
     fullUrl: entry.fullUrl || "",
     fileName: entry.fileName || "",
+    packName: entry.packName || "",
     key: entry.key || "",
     bpm: entry.bpm || "",
     tags: Array.isArray(entry.tags) ? entry.tags : [],
@@ -533,6 +523,7 @@ function findEntryInTabStates(sampleId) {
         previewUrl: normalizeUrl(entry.previewUrl || ""),
         fullUrl: normalizeUrl(entry.fullUrl || ""),
         fileName: entry.fileName || "",
+        packName: entry.packName || "",
         key: entry.key || "",
         bpm: entry.bpm || "",
         tags: Array.isArray(entry.tags) ? entry.tags : [],
@@ -559,6 +550,7 @@ async function hydrateEntryFromHistory(sampleId) {
         previewUrl,
         fullUrl,
         fileName: row.fileName || "",
+        packName: row.packName || "",
         key: row.key || "",
         bpm: row.bpm || "",
         tags: Array.isArray(row.tags) ? row.tags : [],
@@ -577,6 +569,7 @@ async function resolveAndDownloadEntry(entryInput) {
     previewUrl: normalizeUrl(entry.previewUrl || ""),
     fullUrl: normalizeUrl(entry.fullUrl || ""),
     fileName: entry.fileName || "",
+    packName: entry.packName || "",
     key: entry.key || "",
     bpm: entry.bpm || "",
     tags: Array.isArray(entry.tags) ? entry.tags : [],
@@ -629,6 +622,7 @@ function serializeEntry(entry) {
     previewUrl: entry.previewUrl || "",
     fullUrl: entry.fullUrl || "",
     fileName: entry.fileName || "",
+    packName: entry.packName || "",
     key: entry.key || "",
     bpm: entry.bpm || "",
     tags: Array.isArray(entry.tags) ? entry.tags : [],
@@ -661,10 +655,7 @@ browser.runtime.onMessage.addListener((message, sender) => {
 
     const contexts = Array.isArray(message.contexts) ? message.contexts : [];
     for (const context of contexts) {
-      const merged = upsertPreviewContext(tabId, context, "graphql_preview");
+      upsertPreviewContext(tabId, context, "graphql_preview");
-      if (merged) {
-        debugMapTrace("CAPTURE_PREVIEW_CONTEXT_MERGED", merged);
-      }
     }
     return Promise.resolve({ ok: true, added: contexts.length });
   }
@@ -678,14 +669,12 @@ browser.runtime.onMessage.addListener((message, sender) => {
       const merged = upsertUrl(tabId, raw, {
         tag: message.source || "network_preview",
         fileName: canAttachPlaybackMeta ? (message.fileName || "") : "",
+        packName: "",
         key: "",
         bpm: "",
         tags: [],
         coverImageUrl: ""
       });
-      if (merged) {
-        debugMapTrace("CAPTURE_URLS_MERGED", merged);
-      }
       if (merged && merged.previewUrl && canAttachPlaybackMeta) {
         const row = makeDecodedPlaceholderRow(merged, message.source || "network_preview");
         if (row) {
@@ -749,6 +738,7 @@ browser.runtime.onMessage.addListener((message, sender) => {
       return Promise.resolve({ ok: false });
     }
     const fileName = typeof message.fileName === "string" ? message.fileName.trim() : "";
+    const packName = typeof message.packName === "string" ? message.packName.trim() : "";
     const key = typeof message.key === "string" ? message.key.trim() : "";
     const bpm = typeof message.bpm === "string" ? message.bpm.trim() : "";
     const tags = Array.isArray(message.tags) ? message.tags.map((x) => String(x).trim()).filter(Boolean) : [];
@@ -779,6 +769,9 @@ browser.runtime.onMessage.addListener((message, sender) => {
     if (fileName) {
       targetEntry.fileName = fileName;
     }
+    if (packName) {
+      targetEntry.packName = packName;
+    }
     if (key) {
       targetEntry.key = key;
     }
@@ -794,7 +787,6 @@ browser.runtime.onMessage.addListener((message, sender) => {
     targetEntry.capturedAt = Date.now();
     state.entriesBySample.set(targetEntry.sampleId, targetEntry);
     state.latestSampleId = targetEntry.sampleId;
-    debugMapTrace("UPDATE_ACTIVE_PLAYBACK_META_TARGET", targetEntry);
     const row = makeDecodedPlaceholderRow(targetEntry, targetEntry.source || "playback_meta");
     if (!row) {
       return Promise.resolve({ ok: true });

content-script.js

@@ -3,10 +3,7 @@
 const TARGET_SELECTOR = ".playbar-playback-info-bar.playback-row-section.svelte-11gjrk3";
 const INJECTED_CONTAINER_ID = "s3-audio-capture-controls";
 const SPLICE_DOMAIN_RE = /^https?:\/\/([a-z0-9-]+\.)*splice\.com(\/|$)/i;
-const GRAPHQL_URL_FRAGMENT = "surfaces-graphql.splice.com/graphql";
 const PROBE_EVENT_SOURCE = "S3_CAPTURE_PROBE";
-const DEBUG_CAPTURE = true;
-const DEBUG_PLAYBACK_META_MARKER = "S3DBG_PLAYBAR_META_V2";
 let knownUrls = new Set();
 let knownPerformanceUrls = new Set();
 let observer = null;
@@ -178,15 +175,20 @@ function extractCoverImageFromGraphqlItem(item) {
   return "";
 }
 
-function logDebug(message, extra) {
+function extractPackNameFromGraphqlItem(item) {
-  if (!DEBUG_CAPTURE) {
+  if (!item || typeof item !== "object" || !item.parents || !Array.isArray(item.parents.items)) {
-    return;
+    return "";
   }
-  if (typeof extra === "undefined") {
+  for (const parent of item.parents.items) {
-    console.debug("[S3 capture]", message);
+    if (!parent || typeof parent !== "object") {
-    return;
+      continue;
+    }
+    const name = typeof parent.name === "string" ? parent.name.trim() : "";
+    if (name) {
+      return name;
+    }
   }
-  console.debug("[S3 capture]", message, extra);
+  return "";
 }
 
 function collectProbeCandidateUrls(payload) {
@@ -272,6 +274,7 @@ function extractPreviewContextsFromGraphql(json) {
       ? Array.from(new Set(item.tags.map((tag) => (tag && tag.label ? String(tag.label).trim() : "")).filter(Boolean)))
       : [];
     const itemCoverImageUrl = extractCoverImageFromGraphqlItem(item);
+    const itemPackName = extractPackNameFromGraphqlItem(item);
     const files = Array.isArray(item.files) ? item.files : [];
 
     for (const file of files) {
@@ -290,7 +293,8 @@ function extractPreviewContextsFromGraphql(json) {
         key: itemKey,
         bpm: itemBpm,
         tags: itemTags,
-        coverImageUrl: itemCoverImageUrl
+        coverImageUrl: itemCoverImageUrl,
+        packName: itemPackName
       });
     }
   }
@@ -308,30 +312,6 @@ function sendPreviewContexts(contexts) {
   }).catch(() => {
     // Ignore transient extension messaging failures.
   });
-  logDebug("Captured preview contexts", contexts);
-}
-
-function inspectGraphqlResponse(candidateUrl, response) {
-  if (typeof candidateUrl !== "string" || !candidateUrl.includes(GRAPHQL_URL_FRAGMENT)) {
-    return;
-  }
-  if (!response || typeof response.clone !== "function") {
-    return;
-  }
-
-  response.clone().json().then((json) => {
-    const contexts = extractPreviewContextsFromGraphql(json);
-    if (contexts.length) {
-      sendPreviewContexts(contexts);
-    }
-    const urls = new Set();
-    recursivelyCollectAudioUrls(json, urls);
-    if (urls.size) {
-      captureUrls(Array.from(urls));
-    }
-  }).catch(() => {
-    // Some GraphQL responses may not be parseable JSON.
-  });
 }
 
 function captureUrls(inputUrls) {
@@ -361,7 +341,6 @@ function captureUrls(inputUrls) {
   }).catch(() => {
     // Ignore transient extension context failures.
   });
-  logDebug("Captured S3 URLs", newUrls);
 }
 
 function scanNodeForUrls(root) {
@@ -408,12 +387,7 @@ function patchFetch() {
       if (init && typeof init === "object" && typeof init.url === "string") {
         captureUrls([init.url]);
       }
-      return originalFetch(input, init).then((response) => {
+      return originalFetch(input, init);
-        if (candidate) {
-          inspectGraphqlResponse(candidate, response);
-        }
-        return response;
-      });
     };
     fetchPatched = true;
   } catch (error) {
@@ -429,6 +403,7 @@ function patchXhr() {
   try {
     const originalOpen = window.XMLHttpRequest.prototype.open;
     window.XMLHttpRequest.prototype.open = function patchedOpen(method, url) {
+      this.__s3CaptureRequestUrl = typeof url === "string" ? url : "";
       if (typeof url === "string") {
         captureUrls([url]);
       }
@@ -708,15 +683,6 @@ function syncPlaybackMeta() {
     tags: currentPlaybackTags,
     coverImageUrl: currentPlaybackCoverImageUrl
   };
-  if (DEBUG_CAPTURE) {
-    console.debug(DEBUG_PLAYBACK_META_MARKER, {
-      fileName: payload.fileName,
-      key: payload.key,
-      bpm: payload.bpm,
-      tagsCount: Array.isArray(payload.tags) ? payload.tags.length : 0,
-      coverImageUrl: payload.coverImageUrl
-    });
-  }
   const signature = JSON.stringify(payload);
   lastPlaybackMetaSignature = signature;
   lastPlaybackMetaApplied = false;
@@ -745,11 +711,17 @@ function installPageProbeListener() {
 
     const kind = typeof data.kind === "string" ? data.kind : "unknown";
     const payload = data.payload && typeof data.payload === "object" ? data.payload : {};
+    if (kind === "graphql-contexts") {
+      const contexts = Array.isArray(payload.contexts) ? payload.contexts : [];
+      if (contexts.length) {
+        sendPreviewContexts(contexts);
+      }
+      return;
+    }
     const candidateUrls = collectProbeCandidateUrls(payload);
     if (candidateUrls.length) {
       captureUrls(candidateUrls);
     }
-    logDebug("Probe event: " + kind, payload);
   });
 
   probeListenerInstalled = true;
@@ -771,10 +743,6 @@ function injectPageProbeScript() {
   script.async = false;
   script.onload = () => {
     script.remove();
-    logDebug("Injected page probe.");
-  };
-  script.onerror = () => {
-    logDebug("Failed to inject page probe.");
   };
   root.appendChild(script);
 }

history.js

@@ -12,10 +12,11 @@ function formatDate(ms) {
 }
 
 function formatMeta(entry) {
+  const packName = entry && entry.packName ? entry.packName : "n/a";
   const key = entry && entry.key ? entry.key : "n/a";
   const bpm = entry && entry.bpm ? entry.bpm : "n/a";
   const tags = entry && Array.isArray(entry.tags) && entry.tags.length ? entry.tags.join(", ") : "n/a";
-  return `Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
+  return `Pack: ${packName} | Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
 }
 
 function buildItem(entry) {

page-probe.js

@@ -2,6 +2,7 @@
 
 (function initPageProbe() {
   const EVENT_SOURCE = "S3_CAPTURE_PROBE";
+  const GRAPHQL_URL_FRAGMENT = "surfaces-graphql.splice.com/graphql";
   let lastAudioResponseUrl = "";
 
   function emit(kind, payload) {
@@ -23,6 +24,156 @@
     return typeof value === "string" ? value : "";
   }
 
+  function normalizeUrl(rawUrl) {
+    try {
+      return new URL(rawUrl, window.location.href).toString();
+    } catch (error) {
+      return "";
+    }
+  }
+
+  function normalizeFileName(raw) {
+    if (typeof raw !== "string") {
+      return "";
+    }
+    const trimmed = raw.trim();
+    if (!trimmed) {
+      return "";
+    }
+    const parts = trimmed.split("/");
+    return parts[parts.length - 1] || trimmed;
+  }
+
+  function extractSampleIdFromUrl(url) {
+    try {
+      const parsed = new URL(url);
+      const marker = "/audio_samples/";
+      const idx = parsed.pathname.indexOf(marker);
+      if (idx < 0) {
+        return "";
+      }
+      const rest = parsed.pathname.slice(idx + marker.length);
+      const parts = rest.split("/").filter(Boolean);
+      const first = (parts[0] || "").replace(/-scrambled$/i, "");
+      const second = (parts[1] || "").split(".")[0];
+      const hashRe = /^[a-f0-9]{64}$/i;
+      if (hashRe.test(first)) {
+        return first.toLowerCase();
+      }
+      if (hashRe.test(second)) {
+        return second.toLowerCase();
+      }
+      return "";
+    } catch (error) {
+      return "";
+    }
+  }
+
+  function extractCoverImageFromGraphqlItem(item) {
+    if (!item || typeof item !== "object") {
+      return "";
+    }
+    const ownFiles = Array.isArray(item.files) ? item.files : [];
+    for (const file of ownFiles) {
+      if (!file || typeof file !== "object") {
+        continue;
+      }
+      if (String(file.asset_file_type_slug || "").toLowerCase() !== "cover_image") {
+        continue;
+      }
+      const url = normalizeUrl(file.url || "");
+      if (url) {
+        return url;
+      }
+    }
+    const parents = item.parents && Array.isArray(item.parents.items) ? item.parents.items : [];
+    for (const parent of parents) {
+      const files = parent && Array.isArray(parent.files) ? parent.files : [];
+      for (const file of files) {
+        if (!file || typeof file !== "object") {
+          continue;
+        }
+        if (String(file.asset_file_type_slug || "").toLowerCase() !== "cover_image") {
+          continue;
+        }
+        const url = normalizeUrl(file.url || "");
+        if (url) {
+          return url;
+        }
+      }
+    }
+    return "";
+  }
+
+  function extractPackNameFromGraphqlItem(item) {
+    if (!item || typeof item !== "object" || !item.parents || !Array.isArray(item.parents.items)) {
+      return "";
+    }
+    for (const parent of item.parents.items) {
+      if (!parent || typeof parent !== "object") {
+        continue;
+      }
+      const name = typeof parent.name === "string" ? parent.name.trim() : "";
+      if (name) {
+        return name;
+      }
+    }
+    return "";
+  }
+
+  function extractPreviewContextsFromGraphql(json) {
+    const contexts = [];
+    const items = json &&
+      json.data &&
+      json.data.assetsSearch &&
+      Array.isArray(json.data.assetsSearch.items)
+      ? json.data.assetsSearch.items
+      : [];
+    for (const item of items) {
+      if (!item || typeof item !== "object") {
+        continue;
+      }
+      const sampleId = typeof item.uuid === "string" ? item.uuid.toLowerCase() : "";
+      const itemName = normalizeFileName(String(item.name || ""));
+      const itemKey = typeof item.key === "string" ? item.key.trim().toUpperCase() : "";
+      const itemBpm = item.bpm == null ? "" : String(item.bpm).trim();
+      const itemTags = Array.isArray(item.tags)
+        ? Array.from(new Set(item.tags.map((tag) => (tag && tag.label ? String(tag.label).trim() : "")).filter(Boolean)))
+        : [];
+      const itemCoverImageUrl = extractCoverImageFromGraphqlItem(item);
+      const itemPackName = extractPackNameFromGraphqlItem(item);
+      const files = Array.isArray(item.files) ? item.files : [];
+      for (const file of files) {
+        if (!file || typeof file !== "object") {
+          continue;
+        }
+        const typeSlug = String(file.asset_file_type_slug || "").toLowerCase();
+        const fileUrl = normalizeUrl(file.url || "");
+        if (typeSlug !== "preview_mp3" || !fileUrl) {
+          continue;
+        }
+        contexts.push({
+          sampleId: sampleId || extractSampleIdFromUrl(fileUrl),
+          previewUrl: fileUrl,
+          fileName: itemName,
+          key: itemKey,
+          bpm: itemBpm,
+          tags: itemTags,
+          coverImageUrl: itemCoverImageUrl,
+          packName: itemPackName
+        });
+      }
+    }
+    return contexts;
+  }
+
+  function emitGraphqlContextsFromJson(json) {
+    const contexts = extractPreviewContextsFromGraphql(json);
+    if (contexts.length) {
+      emit("graphql-contexts", { contexts });
+    }
+  }
+
   function markLastAudioUrl(url, contentType) {
     const maybeUrl = safeString(url);
     const maybeType = safeString(contentType).toLowerCase();
@@ -64,6 +215,13 @@
             status: response ? response.status : 0,
             contentType: contentType || ""
           });
+          if (requestUrl && requestUrl.includes(GRAPHQL_URL_FRAGMENT) && response && typeof response.clone === "function") {
+            response.clone().json().then((json) => {
+              emitGraphqlContextsFromJson(json);
+            }).catch(() => {
+              // Ignore non-JSON GraphQL edge cases.
+            });
+          }
           return response;
         },
         (error) => {
@@ -117,6 +275,28 @@
             status: xhr.status || 0,
             contentType
           });
+          const requestUrl = safeString(xhr.__s3CaptureRequestUrl);
+          if (!requestUrl || !requestUrl.includes(GRAPHQL_URL_FRAGMENT)) {
+            return;
+          }
+          try {
+            let json = null;
+            if (xhr.responseType === "json" && xhr.response && typeof xhr.response === "object") {
+              json = xhr.response;
+            } else {
+              if (xhr.responseType && xhr.responseType !== "text" && xhr.responseType !== "") {
+                return;
+              }
+              const text = safeString(xhr.responseText);
+              if (!text) {
+                return;
+              }
+              json = JSON.parse(text);
+            }
+            emitGraphqlContextsFromJson(json);
+          } catch (error) {
+            // Ignore non-JSON GraphQL edge cases.
+          }
         },
         { once: true }
       );

popup.js

@@ -13,10 +13,11 @@ function entryLabel(entry) {
 }
 
 function formatMeta(entry) {
+  const packName = entry && entry.packName ? entry.packName : "n/a";
   const key = entry && entry.key ? entry.key : "n/a";
   const bpm = entry && entry.bpm ? entry.bpm : "n/a";
   const tags = entry && Array.isArray(entry.tags) && entry.tags.length ? entry.tags.join(", ") : "n/a";
-  return `Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
+  return `Pack: ${packName} | Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
 }
 
 function buildRow(entry) {