Add bgm cbs

src/ts/globalApi.svelte.ts

@@ -35,7 +35,7 @@ import { save } from "@tauri-apps/plugin-dialog";
 import { listen } from '@tauri-apps/api/event'
 import { registerPlugin } from '@capacitor/core';
 import { language } from "src/lang";
-import { startObserveDom } from "./observer";
+import { startObserveDom } from "./observer.svelte";
 import { updateGuisize } from "./gui/guisize";
 import { encodeCapKeySafe } from "./storage/mobileStorage";
 import { updateLorebooks } from "./characters";

src/ts/observer.svelte.ts

@@ -3,12 +3,14 @@ import { sleep } from "./util";
 import { getCurrentCharacter, getCurrentChat, setCurrentChat } from "./storage/database.svelte";
 import { runLuaButtonTrigger } from "./process/lua";
 
+let bgmElement:HTMLAudioElement|null = null;
 
 function nodeObserve(node:HTMLElement){
     const triggerName = node.getAttribute('risu-trigger');
     const btnEvent = node.getAttribute('risu-btn');
     const observerAdded = node.getAttribute('risu-observer');
     const hlLang = node.getAttribute('x-hl-lang');
+    const ctrlName = node.getAttribute('risu-ctrl');
 
     if(observerAdded){
         return
@@ -87,6 +89,27 @@ function nodeObserve(node:HTMLElement){
             }, {once: true})
         })
     }
+
+    if(ctrlName){
+        const split = ctrlName.split('___');
+
+        switch(split[0]){
+            case 'bgm':{
+                const volume = split[1] === 'auto' ? 0.5 : parseFloat(split[1]);
+                if(!bgmElement){
+                    bgmElement = new Audio(split[2]);
+                    bgmElement.volume = volume
+                    bgmElement.addEventListener('ended', ()=>{
+                        bgmElement.remove();
+                        bgmElement = null;
+                    })
+                    bgmElement.play();
+                }
+                break
+            }
+        }
+    }
+
 }
 
 export async function startObserveDom(){
@@ -102,11 +125,8 @@ export async function startObserveDom(){
         })
     })
 
-    //We are using a while loop intead of MutationObserver because MutationObserver is expensive for just a few elements
     while(true){
-        document.querySelectorAll('[risu-trigger]').forEach(nodeObserve);
-        document.querySelectorAll('[risu-btn]').forEach(nodeObserve);
-        document.querySelectorAll('[x-hl-lang]').forEach(nodeObserve);
+        document.querySelectorAll('[risu-trigger], [risu-btn], [x-hl-lang], [risu-ctrl]').forEach(nodeObserve);
         await sleep(100);
     }
 }

src/ts/parser.svelte.ts

@@ -292,7 +292,7 @@ async function renderHighlightableMarkdown(data:string) {
 
 }
 
-export const assetRegex = /{{(raw|path|img|image|video|audio|bg|emotion|asset|video-img|source)::(.+?)}}/gms
+export const assetRegex = /{{(raw|path|img|image|video|audio|bgm|bg|emotion|asset|video-img|source)::(.+?)}}/gms
 
 async function replaceAsync(string, regexp, replacerFunction) {
     const replacements = await Promise.all(
@@ -407,6 +407,8 @@ async function parseAdditionalAssets(data:string, char:simpleCharacterArgument|c
                 }
                 return `<img src="${path.path}" alt="${path.path}" style="${assetWidthString} "/>\n`
             }
+            case 'bgm':
+                return `<div risu-ctrl="bgm___auto___${path.path}" style="display:none;"></div>\n`
         }
         return ''
     })
@@ -568,7 +570,7 @@ export async function ParseMarkdown(
     }
     return decodeStyle(DOMPurify.sanitize(data, {
         ADD_TAGS: ["iframe", "style", "risu-style", "x-em",],
-        ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling", "risu-btn", 'risu-trigger', 'risu-mark', 'x-hl-lang', 'x-hl-text'],
+        ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling", "risu-ctrl" ,"risu-btn", 'risu-trigger', 'risu-mark', 'x-hl-lang', 'x-hl-text'],
     }))
 }