rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated audio/assets extension user feedback for muted/disconnected from assets repo.

This commit is contained in:
Tony Ribeiro 2023-08-24 21:42:32 +02:00
parent 3b6978010f
commit 7e5bdb11a3
5 changed files with 69 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,7 +96,8 @@ function downloadAssetsList(url) {
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
toastr.error("Problem with assets URL", DEBUG_PREFIX + "Cannot get assets list"); toastr.error("Problem with assets URL", DEBUG_PREFIX + "Cannot get assets list");
$('#assets-connect-button').addClass("fa-plug-circle-xmark"); $('#assets-connect-button').addClass("fa-plug-circle-exclamation");
$('#assets-connect-button').addClass("redOverlayGlow");
}); });
}); });
} }
@ -171,15 +172,15 @@ jQuery(async () => {
try { try {
console.debug(DEBUG_PREFIX, "Confimation, loading assets..."); console.debug(DEBUG_PREFIX, "Confimation, loading assets...");
downloadAssetsList(assetsJsonUrl.val()); downloadAssetsList(assetsJsonUrl.val());
connectButton.removeClass("fa-plug"); connectButton.removeClass("fa-plug-circle-exclamation");
connectButton.removeClass("fa-plug-circle-xmark"); connectButton.removeClass("redOverlayGlow");
connectButton.addClass("fa-plug-circle-check"); connectButton.addClass("fa-plug-circle-check");
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
toastr.error(`Cannot get assets list from ${assetsJsonUrl.val()}`); toastr.error(`Cannot get assets list from ${assetsJsonUrl.val()}`);
connectButton.removeClass("fa-plug");
connectButton.removeClass("fa-plug-circle-check"); connectButton.removeClass("fa-plug-circle-check");
connectButton.addClass("fa-plug-circle-xmark"); connectButton.addClass("fa-plug-circle-exclamation");
connectButton.removeClass("redOverlayGlow");
} }
} }
else { else {

2
public/scripts/extensions/assets/window.html
View File

@ -8,7 +8,7 @@
<label for="assets-json-url-field">Assets URL</label> <label for="assets-json-url-field">Assets URL</label>
<div class="assets-connect-div"> <div class="assets-connect-div">
<input id="assets-json-url-field" class="text_pole widthUnset flex1"> <input id="assets-json-url-field" class="text_pole widthUnset flex1">
<i id="assets-connect-button" class="menu_button fa-solid fa-plug fa-xl"></i> <i id="assets-connect-button" class="menu_button fa-solid fa-plug-circle-exclamation fa-xl redOverlayGlow"></i>
</div> </div>
<div> <div>
<p>Please refresh ST after downloading new asset to use them.</p> <p>Please refresh ST after downloading new asset to use them.</p>

64
public/scripts/extensions/audio/index.js
View File

@ -91,23 +91,37 @@ function loadSettings() {
} }
$("#audio_enabled").prop('checked', extension_settings.audio.enabled); $("#audio_enabled").prop('checked', extension_settings.audio.enabled);
$("#audio_character_bgm_volume").text(extension_settings.audio.bgm_volume); $("#audio_bgm_volume").text(extension_settings.audio.bgm_volume);
$("#audio_ambient_volume").text(extension_settings.audio.ambient_volume); $("#audio_ambient_volume").text(extension_settings.audio.ambient_volume);
$("#audio_character_bgm_volume_slider").val(extension_settings.audio.bgm_volume); $("#audio_bgm_volume_slider").val(extension_settings.audio.bgm_volume);
$("#audio_ambient_volume_slider").val(extension_settings.audio.ambient_volume); $("#audio_ambient_volume_slider").val(extension_settings.audio.ambient_volume);
if (extension_settings.audio.bgm_muted) { if (extension_settings.audio.bgm_muted) {
$("#audio_character_bgm_mute_icon").toggleClass("fa-volume-high"); $("#audio_bgm_mute_icon").removeClass("fa-volume-high");
$("#audio_character_bgm_mute_icon").toggleClass("fa-volume-mute"); $("#audio_bgm_mute_icon").addClass("fa-volume-mute");
$("#audio_character_bgm").prop("muted", true); $("#audio_bgm_mute").addClass("redOverlayGlow");
$("#audio_bgm").prop("muted", true);
}
else{
$("#audio_bgm_mute_icon").addClass("fa-volume-high");
$("#audio_bgm_mute_icon").removeClass("fa-volume-mute");
$("#audio_bgm_mute").removeClass("redOverlayGlow");
$("#audio_bgm").prop("muted", false);
} }
if (extension_settings.audio.ambient_muted) { if (extension_settings.audio.ambient_muted) {
$("#audio_ambient_mute_icon").toggleClass("fa-volume-high"); $("#audio_ambient_mute_icon").removeClass("fa-volume-high");
$("#audio_ambient_mute_icon").toggleClass("fa-volume-mute"); $("#audio_ambient_mute_icon").addClass("fa-volume-mute");
$("#audio_ambient_mute").addClass("redOverlayGlow");
$("#audio_ambient").prop("muted", true); $("#audio_ambient").prop("muted", true);
} }
else{
$("#audio_ambient_mute_icon").addClass("fa-volume-high");
$("#audio_ambient_mute_icon").removeClass("fa-volume-mute");
$("#audio_ambient_mute").removeClass("redOverlayGlow");
$("#audio_ambient").prop("muted", false);
}
$("#audio_bgm_cooldown").val(extension_settings.audio.bgm_cooldown); $("#audio_bgm_cooldown").val(extension_settings.audio.bgm_cooldown);
@ -117,12 +131,12 @@ function loadSettings() {
async function onEnabledClick() { async function onEnabledClick() {
extension_settings.audio.enabled = $('#audio_enabled').is(':checked'); extension_settings.audio.enabled = $('#audio_enabled').is(':checked');
if (extension_settings.audio.enabled) { if (extension_settings.audio.enabled) {
if ($("#audio_character_bgm").attr("src") != "") if ($("#audio_bgm").attr("src") != "")
$("#audio_character_bgm")[0].play(); $("#audio_bgm")[0].play();
if ($("#audio_ambient").attr("src") != "") if ($("#audio_ambient").attr("src") != "")
$("#audio_ambient")[0].play(); $("#audio_ambient")[0].play();
} else { } else {
$("#audio_character_bgm")[0].pause(); $("#audio_bgm")[0].pause();
$("#audio_ambient")[0].pause(); $("#audio_ambient")[0].pause();
} }
saveSettingsDebounced(); saveSettingsDebounced();
@ -130,9 +144,10 @@ async function onEnabledClick() {
async function onBGMMuteClick() { async function onBGMMuteClick() {
extension_settings.audio.bgm_muted = !extension_settings.audio.bgm_muted; extension_settings.audio.bgm_muted = !extension_settings.audio.bgm_muted;
$("#audio_character_bgm_mute_icon").toggleClass("fa-volume-high"); $("#audio_bgm_mute_icon").toggleClass("fa-volume-high");
$("#audio_character_bgm_mute_icon").toggleClass("fa-volume-mute"); $("#audio_bgm_mute_icon").toggleClass("fa-volume-mute");
$("#audio_character_bgm").prop("muted", !$("#audio_character_bgm").prop("muted")); $("#audio_bgm").prop("muted", !$("#audio_bgm").prop("muted"));
$("#audio_bgm_mute").toggleClass("redOverlayGlow");
saveSettingsDebounced(); saveSettingsDebounced();
} }
@ -141,13 +156,14 @@ async function onAmbientMuteClick() {
$("#audio_ambient_mute_icon").toggleClass("fa-volume-high"); $("#audio_ambient_mute_icon").toggleClass("fa-volume-high");
$("#audio_ambient_mute_icon").toggleClass("fa-volume-mute"); $("#audio_ambient_mute_icon").toggleClass("fa-volume-mute");
$("#audio_ambient").prop("muted", !$("#audio_ambient").prop("muted")); $("#audio_ambient").prop("muted", !$("#audio_ambient").prop("muted"));
$("#audio_ambient_mute").toggleClass("redOverlayGlow");
saveSettingsDebounced(); saveSettingsDebounced();
} }
async function onBGMVolumeChange() { async function onBGMVolumeChange() {
extension_settings.audio.bgm_volume = ~~($("#audio_character_bgm_volume_slider").val()); extension_settings.audio.bgm_volume = ~~($("#audio_bgm_volume_slider").val());
$("#audio_character_bgm").prop("volume", extension_settings.audio.bgm_volume * 0.01); $("#audio_bgm").prop("volume", extension_settings.audio.bgm_volume * 0.01);
$("#audio_character_bgm_volume").text(extension_settings.audio.bgm_volume); $("#audio_bgm_volume").text(extension_settings.audio.bgm_volume);
saveSettingsDebounced(); saveSettingsDebounced();
//console.debug(DEBUG_PREFIX,"UPDATED BGM MAX TO",extension_settings.audio.bgm_volume); //console.debug(DEBUG_PREFIX,"UPDATED BGM MAX TO",extension_settings.audio.bgm_volume);
} }
@ -470,7 +486,7 @@ async function updateBGM() {
} }
else { else {
console.log(DEBUG_PREFIX, "Switching BGM to", currentExpressionBGM) console.log(DEBUG_PREFIX, "Switching BGM to", currentExpressionBGM)
const audio = $("#audio_character_bgm"); const audio = $("#audio_bgm");
if (audio.attr("src") == audio_file_path) { if (audio.attr("src") == audio_file_path) {
console.log(DEBUG_PREFIX, "Already playing, ignored"); console.log(DEBUG_PREFIX, "Already playing, ignored");
@ -533,16 +549,16 @@ jQuery(async () => {
$('#extensions_settings').append(windowHtml); $('#extensions_settings').append(windowHtml);
loadSettings(); loadSettings();
$("#audio_character_bgm").attr("loop", true); $("#audio_bgm").attr("loop", true);
$("#audio_ambient").attr("loop", true); $("#audio_ambient").attr("loop", true);
$("#audio_character_bgm").hide(); $("#audio_bgm").hide();
$("#audio_ambient").hide(); $("#audio_ambient").hide();
$("#audio_character_bgm_mute").on("click", onBGMMuteClick); $("#audio_bgm_mute").on("click", onBGMMuteClick);
$("#audio_character_ambient_mute").on("click", onAmbientMuteClick); $("#audio_ambient_mute").on("click", onAmbientMuteClick);
$("#audio_enabled").on("click", onEnabledClick); $("#audio_enabled").on("click", onEnabledClick);
$("#audio_character_bgm_volume_slider").on("input", onBGMVolumeChange); $("#audio_bgm_volume_slider").on("input", onBGMVolumeChange);
$("#audio_ambient_volume_slider").on("input", onAmbientVolumeChange); $("#audio_ambient_volume_slider").on("input", onAmbientVolumeChange);
$("#audio_bgm_cooldown").on("input", onBGMCooldownInput); $("#audio_bgm_cooldown").on("input", onBGMCooldownInput);
@ -550,11 +566,11 @@ jQuery(async () => {
// DBG // DBG
$("#audio_debug").on("click", function () { $("#audio_debug").on("click", function () {
if ($("#audio_debug").is(':checked')) { if ($("#audio_debug").is(':checked')) {
$("#audio_character_bgm").show(); $("#audio_bgm").show();
$("#audio_ambient").show(); $("#audio_ambient").show();
} }
else { else {
$("#audio_character_bgm").hide(); $("#audio_bgm").hide();
$("#audio_ambient").hide(); $("#audio_ambient").hide();
} }
}); });

4
public/scripts/extensions/audio/style.css
View File

@ -11,3 +11,7 @@
width: 50px; width: 50px;
height: 30px; height: 30px;
} }
.audio-mute-button-muted {
color: red;
}

24
public/scripts/extensions/audio/window.html
View File

@ -19,19 +19,19 @@
</div> </div>
<div> <div>
<div> <div>
<label for="audio_character_bgm_volume_slider">Music <span id="audio_character_bgm_volume"></span></label> <label for="audio_bgm_volume_slider">Music <span id="audio_bgm_volume"></span></label>
<div class="mixer-div"> <div class="mixer-div">
<div id="audio_character_bgm_mute" class="menu_button audio-mute-button"> <div id="audio_bgm_mute" class="menu_button audio-mute-button">
<i class="fa-solid fa-volume-high fa-lg" id="audio_character_bgm_mute_icon"></i> <i class="fa-solid fa-volume-high fa-lg" id="audio_bgm_mute_icon"></i>
</div> </div>
<input type="range" class ="slider" id ="audio_character_bgm_volume_slider" value = "0" maxlength ="100"> <input type="range" class ="slider" id ="audio_bgm_volume_slider" value = "0" maxlength ="100">
</div> </div>
<audio id="audio_character_bgm" controls src=""> <audio id="audio_bgm" controls src="">
</div> </div>
<div> <div>
<label for="audio_ambient_volume_slider">Ambient <span id="audio_ambient_volume"></span></label> <label for="audio_ambient_volume_slider">Ambient <span id="audio_ambient_volume"></span></label>
<div class="mixer-div"> <div class="mixer-div">
<div id="audio_character_ambient_mute" class="menu_button audio-mute-button"> <div id="audio_ambient_mute" class="menu_button audio-mute-button">
<i class="fa-solid fa-volume-high fa-lg" id="audio_ambient_mute_icon"></i> <i class="fa-solid fa-volume-high fa-lg" id="audio_ambient_mute_icon"></i>
</div> </div>
<input type="range" class ="slider" id ="audio_ambient_volume_slider" value = "0" maxlength ="100"> <input type="range" class ="slider" id ="audio_ambient_volume_slider" value = "0" maxlength ="100">
@ -43,6 +43,18 @@
<input id="audio_bgm_cooldown" class="text_pole wide30p"> <input id="audio_bgm_cooldown" class="text_pole wide30p">
</div> </div>
</div> </div>
<div>
<b>Hint:</b>
<i>
Create new folder in the
<b>public/characters/</b>
folder and name it as the name of the character.
Create a folder name <b>bgm</b> inside of it.
Put bgm music with expressions there. File names should follow the pattern:
<it>[expression_label]_[number].mp3</it>
By default one of the <it>neutral_[number].mp3</it> will play if classify module is not active.
</i>
</div>
</div> </div>
</div> </div>
</div> </div>