rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-04-18 04:37:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve inline preview of audio assets

Browse Source
This commit is contained in:
Cohee 2023-10-16 02:09:43 +03:00
parent 9ee2c2e9c1
commit 4657aef306
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/scripts/extensions/assets/index.js
View File

@ -10,6 +10,7 @@ export { MODULE_NAME };
const MODULE_NAME = 'Assets'; const MODULE_NAME = 'Assets';
const DEBUG_PREFIX = "<Assets module> "; const DEBUG_PREFIX = "<Assets module> ";
let previewAudio = null;
let ASSETS_JSON_URL = "https://raw.githubusercontent.com/SillyTavern/SillyTavern-Content/main/index.json" let ASSETS_JSON_URL = "https://raw.githubusercontent.com/SillyTavern/SillyTavern-Content/main/index.json"
const extensionName = "assets"; const extensionName = "assets";
@ -122,14 +123,15 @@ function downloadAssetsList(url) {
const displayName = DOMPurify.sanitize(asset["name"] || asset["id"]); const displayName = DOMPurify.sanitize(asset["name"] || asset["id"]);
const description = DOMPurify.sanitize(asset["description"] || ""); const description = DOMPurify.sanitize(asset["description"] || "");
const url = isValidUrl(asset["url"]) ? asset["url"] : ""; const url = isValidUrl(asset["url"]) ? asset["url"] : "";
const previewIcon = assetType == 'extension' ? 'fa-arrow-up-right-from-square' : 'fa-headphones-simple';
$(`<i></i>`) $(`<i></i>`)
.append(element) .append(element)
.append(`<div class="flex-container flexFlowColumn"> .append(`<div class="flex-container flexFlowColumn">
<span class="flex-container alignitemscenter"> <span class="flex-container alignitemscenter">
<b>${displayName}</b> <b>${displayName}</b>
<a href="${url}" target="_blank" title="Open in browser"> <a class="asset_preview" href="${url}" target="_blank" title="Preview in browser">
<i class="fa-solid fa-sm fa-arrow-up-right-from-square"></i> <i class="fa-solid fa-sm ${previewIcon}"></i>
</a> </a>
</span> </span>
<span>${description}</span> <span>${description}</span>
@ -137,6 +139,7 @@ function downloadAssetsList(url) {
.appendTo(assetTypeMenu); .appendTo(assetTypeMenu);
} }
assetTypeMenu.appendTo("#assets_menu"); assetTypeMenu.appendTo("#assets_menu");
assetTypeMenu.on('click', 'a.asset_preview', previewAsset);
} }
$("#assets_menu").show(); $("#assets_menu").show();
@ -150,6 +153,28 @@ function downloadAssetsList(url) {
}); });
} }
function previewAsset(e) {
const href = $(this).attr('href');
const audioExtensions = ['.mp3', '.ogg', '.wav'];
if (audioExtensions.some(ext => href.endsWith(ext))) {
e.preventDefault();
if (previewAudio) {
previewAudio.pause();
if (previewAudio.src === href) {
previewAudio = null;
return;
}
}
previewAudio = new Audio(href);
previewAudio.play();
return;
}
}
function isAssetInstalled(assetType, filename) { function isAssetInstalled(assetType, filename) {
let assetList = currentAssets[assetType]; let assetList = currentAssets[assetType];