• Created 'InterpolatePlaceholders'

• Made 'View active sources' dynamic
This commit is contained in:
nutty
2026-07-03 01:34:32 +10:00
parent 64793d2114
commit 71e355f95d
2 changed files with 44 additions and 1 deletions
+43
View File
@@ -211,6 +211,7 @@ function LoadJSON(settingsJson) {
SaveSettingsToStorage(); SaveSettingsToStorage();
RefreshWidgetPreview(); RefreshWidgetPreview();
InterpolatePlaceholders();
}); });
settingItemContent.appendChild(inputElement); settingItemContent.appendChild(inputElement);
@@ -257,6 +258,7 @@ function LoadJSON(settingsJson) {
UpdateSettingItemVisibility(); UpdateSettingItemVisibility();
RefreshWidgetPreview(); RefreshWidgetPreview();
SaveSettingsToStorage(); SaveSettingsToStorage();
InterpolatePlaceholders();
}) })
.catch(error => console.error('Error loading settings:', error)); .catch(error => console.error('Error loading settings:', error));
} }
@@ -487,6 +489,47 @@ function GetSettingDepth(setting, allSettings) {
return depth; return depth;
} }
function InterpolatePlaceholders() {
// Regex to match anything inside curly braces, e.g., {smtcBridgeAddress}
const tokenRegex = /\{([^}]+)\}/g;
// Iterate over all settings from the original JSON in memory
settingsData.settings.forEach(setting => {
// Only process settings that actually have a placeholder in their description
if (setting.description && setting.description.includes('{')) {
// Start with the original untouched description from the JSON
let dynamicHTML = setting.description;
let match;
// Reset regex state (required when reusing a global regex in a loop)
tokenRegex.lastIndex = 0;
// Find all {tokens} in the string
while ((match = tokenRegex.exec(setting.description)) !== null) {
const targetId = match[1]; // The exact text inside the braces
const targetInput = document.getElementById(targetId);
if (targetInput) {
// Get current value, or fallback to the JSON default if the box is empty
const fallback = settingsData.settings.find(s => s.id === targetId)?.defaultValue || '';
const currentValue = targetInput.value || fallback;
// Replace the token with the actual value in our temporary string
dynamicHTML = dynamicHTML.replace(match[0], currentValue);
}
}
// Find the specific <p> tag for this setting in the DOM and overwrite its HTML
const descriptionParagraph = document.querySelector(`#item-${setting.id} p`);
if (descriptionParagraph) {
descriptionParagraph.innerHTML = dynamicHTML;
}
}
});
}
+1 -1
View File
@@ -97,7 +97,7 @@
{ {
"id": "targetApplication", "id": "targetApplication",
"label": "Target Application", "label": "Target Application",
"description": "Specific app to track. Leave empty to automatically follow the active player.<br><a href='http://127.0.0.1:5000/sessions' target='_blank' style='color: #4da6ff; text-decoration: underline;'>View active sources</a>", "description": "Specific app to track. Leave empty to automatically follow the active player.<br><a href='http://{smtcBridgeAddress}:{smtcBridgePort}/sessions' target='_blank' style='color: #4da6ff; text-decoration: underline;'>View active sources</a>",
"type": "text", "type": "text",
"placeholder": "e.g., Spotify.exe", "placeholder": "e.g., Spotify.exe",
"defaultValue": "", "defaultValue": "",