SillyTavern - Video Backgrounds

SillyTavern-VideoBg.user.js

// ==UserScript==
// @name         SillyTavern - VideoBg
// @namespace    https://github.com/LenAdnerson
// @version      0.1
// @description  Video Backgrounds for SillyTavern
// @author       LenAnderson
// @match        http://localhost:8000/
// @grant        none
// ==/UserScript==

(function() {
	'use strict';
	const wait = async(millis)=>(new Promise(resolve=>setTimeout(resolve,millis)));
	const debounce = (func, delay=100)=>{
		let to;
		return (...args) => {
			if (to) clearTimeout(to);
			to = setTimeout(()=>func.apply(this, args), delay);
		};
	}

	let videoEl;

	const replaceBg = async(muts=[])=>{
		console.log('[STVBG]', 'replaceBg', muts);
		const el = document.querySelector('#bg1');
		const url = window.getComputedStyle(el).background.replace(/^.*url\(['"]?([^'"\)]+)['"]\).*$/, '$1');
		console.log('[STVBG]', url);
		if (url.match(/^.+\.[a-z0-z]+\.[a-z0-9]+$/i)) {
			const vurl = url.replace(/^(.+\.[a-z0-z]+)\.[a-z0-9]+$/i, '$1');
			console.log('[STVBG]', vurl);
			const resp = await fetch(url, {
				method: 'HEAD',
			});
			console.log('[STVBG]', resp);
			if (resp.ok) {
				if (!videoEl) {
					const v = document.createElement('video'); {
						v.loop = 1;
						v.autoplay = 1;
						v.muted = 1;
						v.style.position = 'absolute';
						v.style.height = '100%';
						v.style.width = '100%';
						v.style.objectFit = 'cover';
					}
					videoEl = v;
				}
				videoEl.src = vurl;
				el.append(videoEl);
				while (true) {
					try {
						await videoEl.play();
						break;
					} catch(ex) {
						await wait(100);
					}
				}

			}
		} else if (videoEl) {
			videoEl.remove();
		}
	};
	replaceBg();

	const mo = new MutationObserver(debounce(replaceBg));
	mo.observe(document.querySelector('#bg1'), {attributes:true});
})();