- Added assets folder to .gitignore

- disabled audio extension by default
        - turned get request into post
        - avoid background that are data url
        - changed UI name to Dynamic Audio
        - Changed Assets/Audio ui load to use $.get
        - added assets json url as field in ui, with connect button require confirm from popup.

public/scripts/extensions/assets/index.js

@@ -4,7 +4,7 @@ TODO:
 */
 //const DEBUG_TONY_SAMA_FORK_MODE = false
 
-import { saveSettingsDebounced } from "../../../script.js";
+import { saveSettingsDebounced, getRequestHeaders, callPopup } from "../../../script.js";
 import { getContext, getApiUrl, extension_settings, doExtrasFetch, ModuleWorkerWrapper, modules } from "../../extensions.js";
 export { MODULE_NAME };
 
@@ -13,6 +13,9 @@ const DEBUG_PREFIX = "<Assets module> ";
 const UPDATE_INTERVAL = 1000;
 let ASSETS_JSON_URL = "https://raw.githubusercontent.com/SillyTavern/SillyTavern-Content/main/index.json"
 
+const extensionName = "assets";
+const extensionFolderPath = `scripts/extensions/${extensionName}`;
+
 // DBG
 //if (DEBUG_TONY_SAMA_FORK_MODE)
 //    ASSETS_JSON_URL = "https://raw.githubusercontent.com/Tony-sama/SillyTavern-Content/main/index.json"
@@ -26,11 +29,15 @@ let currentAssets = {};
 const defaultSettings = {
 }
 
-function loadSettings() {
+function downloadAssetsList(url) {
     updateCurrentAssets().then(function(){
-    fetch(ASSETS_JSON_URL)
+    fetch(url)
         .then(response => response.json())
         .then(json => {
+            
+            availableAssets = {};
+            $("#assets_menu").empty();
+
             console.debug(DEBUG_PREFIX,"Received assets dictionary", json);
 
             for(const i of json){
@@ -80,36 +87,16 @@ function loadSettings() {
                 }
                 assetTypeMenu.appendTo("#assets_menu");
             }
+
+            $("#assets_menu").show();
+        })
+        .catch((error) => {
+            console.error(error);
+            toastr.error("Problem with assets URL",DEBUG_PREFIX+"Cannot get assets list")
         });
     });
 }
 
-$(document).ready(function () {
-    function addExtensionControls() {
-        const settingsHtml = `
-        <div id="audio_settings">
-            <div class="inline-drawer">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>Assets</b>
-                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
-                </div>
-                <div class="inline-drawer-content" id="assets_menu">
-                </div>
-            </div>
-        </div>
-        `;
-        $('#extensions_settings').append(settingsHtml);
-    }
-    
-    addExtensionControls(); // No init dependencies
-    loadSettings(); // Depends on Extension Controls
-    
-
-    //const wrapper = new ModuleWorkerWrapper(moduleWorker);
-    //setInterval(wrapper.update.bind(wrapper), UPDATE_INTERVAL);
-    //moduleWorker();
-})
-
 function isAssetInstalled(assetType,filename) {
     for(const i of currentAssets[assetType]){
         //console.debug(DEBUG_PREFIX,i,filename)
@@ -124,7 +111,10 @@ async function installAsset(url, assetType, filename) {
     console.debug(DEBUG_PREFIX,"Downloading ",url);
     const save_path = "public/assets/"+assetType+"/"+filename;
     try {
-        const result = await fetch(`/asset_download?url=${url}&save_path=${save_path}`);
+        const result = await fetch(`/asset_download?url=${url}&save_path=${save_path}`, {
+            method: 'POST',
+            headers: getRequestHeaders(),
+        });
         let assets = result.ok ? (await result.json()) : [];
         return assets;
     }
@@ -141,7 +131,10 @@ async function installAsset(url, assetType, filename) {
 async function updateCurrentAssets() {
     console.debug(DEBUG_PREFIX,"Checking installed assets...")
     try {
-        const result = await fetch(`/get_assets`);
+        const result = await fetch(`/get_assets`, {
+            method: 'POST',
+            headers: getRequestHeaders(),
+        });
         currentAssets = result.ok ? (await result.json()) : {};
     }
     catch (err) {
@@ -152,5 +145,33 @@ async function updateCurrentAssets() {
 
 
 //#############################//
-//  Module Worker              //
+//  Extension load             //
 //#############################//
+
+// This function is called when the extension is loaded
+jQuery(async () => {
+    // This is an example of loading HTML from a file
+    const windowHtml = $(await $.get(`${extensionFolderPath}/window.html`));
+
+    const assetsJsonUrl = windowHtml.find('#assets_json_url_field');
+    assetsJsonUrl.val(ASSETS_JSON_URL);
+
+    const connectButton = windowHtml.find('#assets_connect_button');
+    connectButton.on("click", async function(){
+        const confirmation = await callPopup(`Are you sure you want to connect to '${assetsJsonUrl.val()}'?`, 'confirm')
+        if (confirmation) {
+            try {
+                console.debug(DEBUG_PREFIX,"Confimation, loading assets...");
+                downloadAssetsList(assetsJsonUrl.val());
+            } catch (error) {
+                console.error('Error:', error);
+                toastr.error(`Cannot get assets list from ${assetsJsonUrl.val()}`);
+            }
+        }
+        else {
+            console.debug(DEBUG_PREFIX,"Connection refused by user");
+        }
+    });
+
+    $('#extensions_settings').append(windowHtml);
+});