zetaphor/splirate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Capturing pack and cover

Browse Source
This commit is contained in:
Zetaphor
2026-08-05 22:41:04 -05:00
parent 235f76a124
commit 47871d4bc5
6 changed files with 490 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
background.js
View File

@@ -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");
if (merged) {
debugMapTrace("CAPTURE_PREVIEW_CONTEXT_MERGED", merged);
}
upsertPreviewContext(tabId, context, "graphql_preview");
}
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 });

80
content-script.js
View File

@@ -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) {
if (!DEBUG_CAPTURE) {
return;
function extractPackNameFromGraphqlItem(item) {
if (!item || typeof item !== "object" || !item.parents || !Array.isArray(item.parents.items)) {
return "";
}
if (typeof extra === "undefined") {
console.debug("[S3 capture]", message);
return;
for (const parent of item.parents.items) {
if (!parent || typeof parent !== "object") {
continue;
}
console.debug("[S3 capture]", message, extra);
const name = typeof parent.name === "string" ? parent.name.trim() : "";
if (name) {
return name;
}
}
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) => {
if (candidate) {
inspectGraphqlResponse(candidate, response);
}
return response;
});
return originalFetch(input, init);
};
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);
}

3
history.js
View File

@@ -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) {

180
page-probe.js
View File

@@ -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 }
);

3
popup.js
View File

@@ -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) {

262
sample.har Normal file
View File

File diff suppressed because one or more lines are too long