featured.html

<html lang="en" style="font-size: 10px; font-family: Roboto, Arial, sans-serif">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<meta content="utf-8" http-equiv="encoding" />
		<title>Social Stream - Overlay</title>
		<meta name="title" content="Social Stream - Overlay" />
		<link rel="icon" href="./favicon.ico" />
		<link rel="preload" href="./thirdparty/NotoColorEmoji.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
		<meta name="robots" content="noindex">
		<style>
			:root {
				/* basic colors */
				--comment-color: #fff;
				--comment-bg-color: #222; /* needs to be slightly above black to not get keyed out */
				--comment-border-radius: 0px;
				--comment-font-size: 40px;
				--author-color: #222;
				--author-bg-color: #ffa500;
				--author-avatar-border-color: var(--author-bg-color);
				--author-border-radius: 0px;
				--author-avatar-border-size: 3px;
				--author-avatar-size: 128px;
				--author-font-size: 30px;
				--author-left: 113px;

				/* donation/superchat specific */
				--donation-color: #5a4211;
				--donation-bg-color: #fff;
				--donation-gradient-stop0: #bf953f;
				--donation-gradient-stop1: #ede599;
				--donation-gradient-stop2: #b38728;
				--donation-label-color: #fff;
				--donation-shadow-color: #fff;
				
				--image-content-max-height: 300px;
				--shown-comment-bg-color: #555555;
				--highlighted-comment-bg-color: #f0f07d;
				--highlight-chat-left: 0px;

				--rounded-border-radius: 0px;

				/*
    LAYOUT
    */
				--comment-width: auto; /* go 100% for a full screen lower third style*/
				--comment-padding: 20px 35px 20px 145px;
				--comment-area-height: 70vh;
				--comment-scale: 1;
				--comment-area-size-offset: 0;
				--comment-area-bottom: 10px;
				/*
    STYLE
    */
				--font-family: Avenir Next, Helvetica, Geneva, Verdana, Arial, sans-serif;
				--highlight-chat-font-weight: 600;
				--author-font-weight: 700;
				--comment-font-weight: 600;
			}

			body {
				background-color: #0000;
				left: 0px;
				background-color: rgba(0, 0, 0, 0);
				margin: 0px auto;
				overflow: hidden;
			}

			#output {
				transform: translateY(30px);
				transition: 0.5s all cubic-bezier(0.25, 0.25, 0.105, 1.2);
				margin: 0 0 0 15px;
				position: absolute;
				bottom: 30px;
				min-height: calc(var(--author-avatar-size) + 15px + calc(2 * var(--author-avatar-border-size)));
			}

			.supersticker {
				max-width: 200px !important;
				max-height: 200px !important;
				min-height: 120px !important;
				min-width: 120px !important;
				vertical-align: center;
				z-index: 1;
				object-fit: contain;
				padding: 0 5px 1px 5px;
			}

			.fade {
				animation: fade 0.5s;
				webkit-transition: opacity 0.5s ease-in-out;
				transition: opacity 0.5 ease-in-out;
				opacity: 0;
			}
			@keyframes fade {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

			.dropout {
				transform: translateY(340px) !important;
				opacity: 0;
				transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
				will-change: transform, opacity;
			}

			.swipe {
				transform: translateX(-100vw) !important;
				webkit-transition: opacity 0.5s ease-in-out;
				transition: opacity 0.5 ease-in-out;
				opacity: 0;
			}

			.ffz--inline {
				display: inline-block;
			}
			.bttv-tooltip-wrapper {
				display: inline-block;
			}
			.chat-image__container {
				display: inline-block;
			}
			yt-live-chat-app {
				margin-bottom: var(--comment-area-height);
				height: calc(100vh - var(--comment-area-height)) !important;
			}
			tp-yt-paper-tooltip {
				display: none;
			}
			.chat-line__message--emote-button {
				display: inline-block;
			}
			.chat-line__message {
				cursor: pointer;
			}

			div.hl-message > div {
				display: inline-block;
			}

			.tooltip {
				display: none;
			}
			.tw-tooltip {
				display: none;
			}
			#tooltip {
				display: none;
			}
			
			svg.regular-emote, img.regular-emote {
				margin: auto 0;
			}

			.sourcetype {
				position: absolute;
				top: calc(var(--author-avatar-size) - 27px);
				max-width: 36px !important;
				max-height: 36px !important;
				left: 94px;
				margin: 0 !important;
				z-index: 4;
			}
			.dono .sourcetype {
				max-width: 32px !important;
				max-height: 32px !important;
				left: 122px;
				top: calc(var(--author-avatar-size) - 47px);
			}

			.noavatar-source {
				bottom: -4px;
				max-width: 50px !important;
				max-height: 50px !important;
				left: -20px;
				margin: 0 !important;
				z-index: 20;
			}
			.sourceOffset {
				left: 78px;
				top: -39px;
			}
			.btn-clear {
				position: absolute;
				z-index: 99999;
				bottom: calc(var(--comment-area-height) + 60px);
				right: 20px;
				font-size: 30px;
				border: 1px #bbb solid;
				border-radius: 4px;
				color: #fff;
				background: #444;
			}
			.highlighted-comment {
				background-color: var(--highlighted-comment-bg-color) !important;
			}
			html[dark] .highlighted-comment .hl-message.yt-live-chat-text-message-renderer {
				color: black;
			}
			html[dark] .highlighted-comment:hover .hl-message.yt-live-chat-text-message-renderer {
				color: white;
			}
			html[dark] .highlighted-comment #author-name.yt-live-chat-author-chip {
				color: #444;
			}
			html[dark] .highlighted-comment:hover #author-name.yt-live-chat-author-chip {
				color: #ddd;
			}
			yt-live-chat-text-message-renderer:hover {
				background-color: #eee !important;
			}
			html[dark] yt-live-chat-text-message-renderer:hover {
				background-color: #444 !important;
			}
			yt-live-chat-text-message-renderer.shown-comment {
				background-color: var(--shown-comment-bg-color) !important;
				opacity: 0.4;
			}
			.shown-comment:hover {
				opacity: 0.5;
			}

			/* example of how to remotely load a font */
			@font-face {
				font-family: "opendyslexic";
				src: url("https://vdo.ninja/examples/OpenDyslexic-Regular.otf");
				font-style: normal;
				font-weight: normal;
			}

			@font-face {
				font-family: NotoColorEmojiLimited;
				unicode-range: U+1F1E6-1F1FF;
				src: url(./thirdparty/NotoColorEmoji.ttf);
				font-display: swap;
			}

			/* latin-ext */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 200;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQspDre2.woff2) format("woff2");
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 200;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* latin-ext */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 400;
				font-display: swap;
				src: url(./thirdparty/xMQbuFFYT72XzQspDre2.woff2) format("woff2");
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 400;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* latin-ext */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 700;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQspDre2.woff2) format("woff2");
				unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
				font-family: "Sora";
				font-style: normal;
				font-weight: 700;
				font-display: swap;
				src: url(./thirdparty//xMQbuFFYT72XzQUpDg.woff2) format("woff2");
				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}

			.highlight-chat {
				font-family: "NotoColorEmojiLimited", var(--font-family);
				font-weight: var(--highlight-chat-font-weight);
				position: relative;
				left: var(--highlight-chat-left);
				box-sizing: border-box;
				font-size: 30px;
			}
			.highlight-chat.preview {
				border: 1px #ccc solid;
			}
			.hl-c-cont {
				position: relative;
				padding: 20px;
				width: 100%;
				margin: 0 auto;

				z-index: 1;
			}

			.hl-name {
				position: absolute;
				top: -20px;
				left: var(--author-left);
				font-weight: var(--author-font-weight);
				background: var(--author-bg-color);
				color: var(--author-color);
				padding: 10px;
				transform: rotate(-0deg);
				z-index: 1;
				border-radius: var(--author-border-radius);
				font-size: var(--author-font-size);
				white-space: nowrap;
				z-index: 2;
				border-radius: var(--rounded-border-radius);
				display:flex;
				align-items: center;
			}
			.hl-message {
				position: relative;
				width: var(--comment-width);
				font-weight: var(--comment-font-weight);
				padding: var(--comment-padding);
				color: var(--comment-color);
				background-color: var(--comment-bg-color);
				border-radius: var(--comment-border-radius);
				font-size: var(--comment-font-size);
				word-break: break-word;
				z-index: 1;
				border-radius: var(--rounded-border-radius);
				box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); 
			}
			.hl-message-img {
				position: absolute;
				width: 63%;
				font-weight: var(--comment-font-weight);
				padding: var(--comment-padding);
				color: var(--comment-color);
				background-color: var(--comment-bg-color);
				border-radius: var(--comment-border-radius);
				font-size: var(--comment-font-size);
				word-break: break-word;
				z-index: 1;
			}

			.hl-message:empty {
				background-color: #0000 !important;
				width: 200px;
				min-height: 37px;
				margin-left: auto;
				margin-right: 0;
				box-shadow:0 0;
			}
			.hl-name:empty {
				background-color: #0000 !important;
				z-index: 1;
				display: none;
			}

			.hl-message img,
			.hl-message svg {
				max-width: 200px;
				height: 45px;
				vertical-align: sub;
				z-index: 1;
				object-fit: contain;
				margin: auto 1px;
				position: relative;
				display: inline-block;
			}
			.hl-message a {
				color: white;
				z-index: 1;
			}
			.hl-img {
				position: absolute;
				top: 0;
				z-index: 1;
				left: calc(-0.5 * var(--author-avatar-border-size));
				width: var(--author-avatar-size);
				height: var(--author-avatar-size);
				background: var(--author-avatar-border-color);
				border-radius: 50%;
				border: 0;
				padding: var(--author-avatar-border-size);
				z-index: 3;
			}
			.hl-img img , .hl-img video{
				display: inline-block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				overflow: hidden;
				border-radius: 50%;
				z-index: 1;
				margin: auto auto;
			}
			
			
			.hl-message img+img, .hl-message img+svg, .hl-message svg+img, .hl-message svg+svg {
				margin: auto 0px;
			}

			.hl-imgContent {
				max-height: 100vh;
				max-width: 40%;
				display: inline-block;
				position: absolute;
				margin: 0;
				padding: 0;
				right: 0;
				z-index: 0;
				bottom: 0px;
				height: max(100%, 200px);
			}
			
			.largeImage {
				padding:0;
				left:100px;
			}
			
			.largeImage>img, .largeImage>video {
				max-width: calc(100vw - 200px);
				max-height: 240px;
			}

			.hl-imgContent > img  , .hl-imgContent > video {
				object-fit: contain;
				display: block;
				margin: 0;
				height: 100%;
				min-height: calc(var(--author-avatar-size) + 30px);
				max-width: 100%;
			}
			/* overlay a very faint white layer to bump the blacks above the luma key cutoff */
			.hl-img:after {
				content: "";
				display: block;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
				border-radius: 50%;
				position: absolute;
				pointer-events: none;
				z-index: 3;
			}
			.hl-img::after {
				background: rgba(255, 255, 255, 0.04);
				mix-blend-mode: lighten;
			}

			.hl-badges {
				display: inline-block;
				margin-left: 5px;
			}
			.hl-badges {
				max-height: 24px;
			}
			.hl-badges:empty {
				background-color: #0000;
			}
			.hl-badge {
				margin: 0 1px;
				min-height: 18px;
				max-width: 28px;
				display: inline-block;
			}
			span.hl-badge {
				width: 20px;
				height: 18px;
			}
			@keyframes bitties {
				from {
					transform: rotate(9deg) translate3D(-250px, 0, 0);
				}
			}
			.donation {
				position: absolute;
				display: inline-block;
				text-align: center;
				top: 97px;
				left: 70px;
				z-index: 3;
				min-width: 148px;
				border-radius: 10px;
				overflow: hidden;
				background: linear-gradient(to right, var(--donation-gradient-stop0), var(--donation-gradient-stop1), var(--donation-gradient-stop2));
				color: var(--donation-color);
				transform: rotate(-5deg) translateX(-50%);
				line-break: loose;
				max-width: 149px;
				width: min-content;
			}
			.donation-title {
				width: 100%;
				font-size: 18px;
				text-align: center;
				background-color: rgba(0, 0, 0, 0.23);
				border-radius: 10px 10px 0 0;
				padding: 9px 2px 6px;
				display: block;
				color: var(--donation-label-color);
			}

			.youtubedonation.donation-title {
			
			}

			.membership.donation-title {
			
			}
			.subtitle {
				font-size: 18px;
				padding: 3px 0 5px;
			}
			.donation .subtitle {
				font-size: 22px;
				padding: 3px 0 5px;
				color: #2d2108;
			}
			
			.donation::after {
				content: "";
				position: absolute;
				top: -50%;
				left: 0;
				height: 200%;
				width: 1px;
				background-color: var(--donation-bg-color);
				box-shadow: 0 0 20px 20px var(--donation-shadow-color);
				opacity: 0.7;
				transform: rotate(9deg) translate3D(250px, 0, 0);
				animation: superchat 3s ease-in-out infinite;
			}
			@keyframes superchat {
				from {
					transform: rotate(9deg) translate3D(-250px, 0, 0);
				}
			}

			/* hide chat input to give more space to the chat */
			/*
#input-panel, yt-live-chat-viewer-engagement-message-renderer {
	display: none !important;
}
*/

			yt-live-chat-item-list-renderer {
				margin-bottom: 20px;
			}

			yt-live-chat-text-message-renderer {
				font-size: 24px !important;
				line-height: 32px;
			}

			yt-live-chat-text-message-renderer,
			yt-live-chat-paid-message-renderer,
			yt-live-chat-membership-item-renderer {
				cursor: pointer;
			}

			yt-live-chat-text-message-renderer[is-deleted],
			yt-live-chat-paid-message-renderer[is-deleted],
			yt-live-chat-membership-item-renderer[is-deleted] {
				cursor: default;
			}

			span.zero-width-parent {
				display: inline-block;
				width: 0;
				position: absolute;
			}
			span.zero-width-parent img.zero-width-emote {
				position: absolute;
				right: 0;
			}

			.stacked {
				margin-top: 30px;
			}

			.dono {
				min-height: 195px;
			}

			.alignright.output {
				left: unset;
				right: 0;
				margin: 0 15px 0 0 !important;
			}

			.alignright .highlight-chat {
				right: var(--highlight-chat-left);
				left: unset;
				margin-left: auto;
				margin-right: 0;
				text-align: right;
			}

			.alignright .hl-name {
				right: var(--author-left);
				left: unset;
			}

			.alignright .hl-img {
				right: calc(-0.5 * var(--author-avatar-border-size));
				left: unset;
			}

			.alignright .hl-message {
				display: inline-flex;
			}

			.alignright .donation {
				right: -70px;
				left: unset;
			}
			.alignright .sourcetype {
				right: 100px;
				left: unset;
			}
			
			.alignright .sourcetype {
				right: 100px;
				left: unset;
			}
			
			.alignright .dono .sourcetype {
				right: 122px;
				left: unset;
			}
			
			
			
		.emote-container {
		  display: inline-grid;
		  grid-template-columns: 1fr;
		  grid-template-rows: 1fr;
		  vertical-align: top;
		  justify-items: center;  /* Center horizontally */
		  align-items: center;    /* Center vertically */
		  vertical-align: sub;
		}

		.emote-container .regular-emote,
		.emote-container .zero-width-emote-centered,
		.emote-container .zero-width-emote {
		  grid-column: 1;
		  grid-row: 1;
		  max-width: 100%;
		  max-height: 100%;
		  object-fit: contain;
		}

		.emote-container .zero-width-emote-centered,
		.emote-container .zero-width-emote	{
		  z-index: 1;
		}

		.regular-emote,
		.zero-width-emote,
		.zero-width-emote-centered {
		  vertical-align: top;
		}
		

		.hl-c-cont.highlight-chat.stacked {
			width: fit-content;  /* Allow container to shrink to content */
			max-width: 100%;    /* Prevent overflow */
			margin-left: 15px;  /* Match the original left margin */
			position: relative; /* Ensure proper stacking context */
			clear: both;        /* Prevent floating issues */
			padding:30px;
		}

		.hl-c-cont.highlight-chat.stacked .hl-message {
			width: fit-content !important;  /* Force message to fit content */
			max-width: calc(100vw - 160px); /* Prevent overflow, accounting for avatar and padding */
			min-width: 200px;   /* Minimum width to maintain layout */
			display: inline-block; /* Allow block to shrink to content */
		}

		/* Ensure avatar and badges maintain position */
		.hl-c-cont.highlight-chat.stacked .hl-img {
			position: absolute;
			left: calc(-0.5 * var(--author-avatar-border-size));
		}

		.hl-c-cont.highlight-chat.stacked .sourcetype {
			position: absolute;
		}

		/* Keep donations/membership badges properly positioned */
		.hl-c-cont.highlight-chat.stacked .donation,
		.hl-c-cont.highlight-chat.stacked .membership {
			position: absolute;
			z-index: 3;
		}

		/* Handle right alignment option if needed */
		.alignright .hl-c-cont.highlight-chat.stacked {
			margin-left: auto;
			margin-right: 15px;
		}

		</style>
	</head>
	<body>
		<div id="output" class="output"></div>
		<audio id="testtone" style="display: none" preload="metadata">
			<source src="./audio/tone.mp3" type="audio/mpeg" />
			<source src="./audio/tone.ogg" type="audio/ogg" />
		</audio>
		<script>
			function log(msg) {
				//	console.log(msg);
			}

			function warnlog(msg, url = false, lineNumber = false) {
				// console.warn(msg);
				if (lineNumber) {
					//	console.warn(lineNumber);
				}
			}

			function errorlog(msg, url = false, lineNumber = false) {
				console.error(msg);
				if (lineNumber) {
					console.error(lineNumber);
				}
			}
			window.onerror = function backupErr(errorMsg, url = false, lineNumber = false) {
				errorlog(errorMsg);
				errorlog(lineNumber);
				errorlog("Unhandeled Error occured"); //or any message
				return false;
			};
			
			function getById(id) {
				// js helper
				var el = document.getElementById(id);
				if (!el) {
					console.log("couldn't find "+id);
					el = document.createElement("span"); // create a fake element
				}
				return el;
			}
			
			async function fetchWithTimeout(URL, timeout = 8000) {
				// ref: https://dmitripavlutin.com/timeout-fetch-request/
				try {
					const controller = new AbortController();
					const timeout_id = setTimeout(() => controller.abort(), timeout);
					const response = await fetch(URL, { ...{ timeout: timeout }, signal: controller.signal });
					clearTimeout(timeout_id);
					return response;
				} catch (e) {
					warnlog(e);
					return await fetch(URL);
				}
			}
			var translation = {};
			async function changeLg(lang="en", retry=false) {
				log("changeLg: " + lang);
				lang = lang.replace("_", "-");
				await fetchWithTimeout("./translations/" + lang + ".json", 2000).then(async function (response) {
					try {
						if (response.status !== 200) {
							if (retry) {
								console.warn("Couldn't find the exact language file for '" + lang + "'; trying a more generic option instead");
								lang = lang.split("-")[0];
								if (lang && (lang.split("-").length==2)) {
									await changeLg(lang.split("-")[0], false); // Retry with a more generic language code.
								}
							}
							return;
						}
						await response
							.json()
							.then(function (data) {
								if (translations){
									translations = data;
								}
							})
							.catch(function (e) {
								log(e);
							});
					} catch (e) {
						log(e);
					}
				}).catch(function (err) {
					log(err);
				});
			}
			function getTranslation(key, value = false) {
				if (translation && translation.innerHTML && (key in translation.innerHTML)) {
					// these are the proper translations
					return translation.innerHTML[key];
				} else if (translation && translation.miscellaneous && translation.miscellaneous && (key in translation.miscellaneous)) {
					return translation.miscellaneous[key];
				} else if (value !== false) {
					return value;
				} else {
					return key.replaceAll("-", " "); //
				}
			}
			
			var newFileHandle = false;

			async function overwriteFile(data = false) {
				if (data == "setup") {
					const opts = {
						types: [
							{
								description: "JSON data",
								accept: { "text/plain": [".txt"], "application/json": [".json"] }
							}
						]
					};

					newFileHandle = await window.showSaveFilePicker(opts);
					if (newFileHandle) {
						document.body.onclick = null;
					}
				} else if (newFileHandle && data) {
					const writableStream = await newFileHandle.createWritable();
					await writableStream.write(data);
					await writableStream.close();
				}
			}

			var newImageHandle = false;

			async function overwriteImage(data = false) {
				if (data == "setup") {
					const opts = {
						types: [
							{
								description: "Image file",
								accept: { "image/jpeg": [".jpg"], "image/png": [".png"] }
							}
						]
					};

					try {
						newImageHandle = await window.showSaveFilePicker(opts);
					} catch (error) {
						console.error("File save cancelled or failed:", error);
						return;
					}
				} else if (newImageHandle && data) {
					const writableStream = await newImageHandle.createWritable();
					try {
						let blob;

						// Check if data is a Data URL
						if (typeof data === "string" && data.startsWith("data:")) {
							// Convert Data URL to Blob
							const fetchResponse = await fetch(data);
							blob = await fetchResponse.blob();
						} else if (typeof data === "string") {
							// If data is a URL
							const response = await fetch(data);
							if (!response.ok) throw new Error("Network response was not ok");
							blob = await response.blob();
						} else {
							blob = data; // Assuming data is already a Blob
						}

						// Convert blob to a specific format based on newImageHandle.kind (e.g., 'image/jpeg')
						const bitmap = await createImageBitmap(blob);
						const canvas = document.createElement("canvas");
						canvas.width = bitmap.width;
						canvas.height = bitmap.height;
						const ctx = canvas.getContext("2d");
						ctx.drawImage(bitmap, 0, 0);
						const mimeType = newImageHandle.type || "image/png"; // Default to PNG if type is not available
						const newBlob = await new Promise(resolve => canvas.toBlob(resolve, mimeType));

						// Write the converted blob to disk
						await writableStream.write(newBlob);
					} catch (error) {
						console.error("Error processing the image:", error);
					} finally {
						await writableStream.close();
					}
				}
			}

			async function sendToDisk(data) {
				if (newFileHandle) {
					// if a file is selected
					try {
						if (typeof data == "object") {
							data.timestamp = new Date().getTime();

							if (data.type && data.chatimg && ((data.type == "youtube") || (data.type == "youtubeshorts"))) {
								data.chatimg = data.chatimg.replace("=s32-", "=s512-"); // high, but meh.
								data.chatimg = data.chatimg.replace("=s64-", "=s512-");
							}

							if (data.type && (data.type == "twitch") && data.chatname) {
								if (!data.chatimg || data.chatimg.startsWith("https://api.socialstream.ninja")){
									data.chatimg = "https://api.socialstream.ninja/twitch/large?username=" + encodeURIComponent(data.chatname); // 150x150
								}
							}

							overwriteFile(JSON.stringify(data));
						} else {
							if (newFileHandle) {
								const writableStream = await newFileHandle.createWritable(); // clear File
								await writableStream.close();
							}
						}
					} catch (e) {}
				}
			}

			(function (w) {
				w.URLSearchParams =
					w.URLSearchParams ||
					function (searchString) {
						var self = this;
						self.searchString = searchString;
						self.get = function (name) {
							var results = new RegExp("[\?&]" + name + "=([^&#]*)").exec(self.searchString);
							if (results == null) {
								return null;
							} else {
								return decodeURI(results[1]) || 0;
							}
						};
					};
			})(window);
			var urlParams = new URLSearchParams(window.location.search);
			
			function validateRoomId(roomId) {
				if (roomId == null || roomId === '') {
					return false;
				}
				let sanitizedId = String(roomId).trim();

				if (sanitizedId.length < 1) {
					return false;
				}
				const reservedValues = [
					'undefined',
					'null',
					'false',
					'true',
					'NaN',
					'default',
					'room',
					'lobby',
					'test',
					'nothing',
					'0',
					'1',
					'none'
				];
				if (reservedValues.includes(sanitizedId.toLowerCase())) {
					return false;
				}
				sanitizedId = sanitizedId.replace(/[^a-zA-Z0-9]/g, '_');
				if (/^_+$/.test(sanitizedId)) {
					return false;
				}
				if (sanitizedId.length < 2) {
					return false;
				}
				const MAX_LENGTH = 80;
				if (sanitizedId.length > MAX_LENGTH) {
					return false;
				}

				return sanitizedId;
			}

			var nextComment = null;
			var roomID = "test";
			var applyCustomFeatureActions = false;

			if (urlParams.has("session")) {
				roomID = urlParams.get("session");
			} else if (urlParams.has("s")) {
				roomID = urlParams.get("s");
			} else if (urlParams.has("id")) {
				roomID = urlParams.get("id");
			} else if (window.location.protocol == "file:") {
				roomID = prompt("Enter your session ID here, or add it to the URL.");
			} else {
				window.location.href = "https://socialstream.ninja/landing";
			}
			
			roomID = validateRoomId(roomID)
			if (!roomID) {
				document.write("Invalid session ID");
				alert("Invalid session ID");
				throw new Error('Invalid session ID');
			}

			var password = "false";
			if (urlParams.has("password")) {
				password = urlParams.get("password") || "false";
			}

			if (urlParams.has("savetodisk")) {
				document.body.onclick = function () {
					overwriteFile("setup");
				};
			}

			var centering = false;
			if (urlParams.has("center")) {
				centering = true;
			}
			if (urlParams.has("saveimage")) {
				document.body.onclick = function () {
					overwriteImage("setup");
				};
			}

			var customSource = false;
			if (urlParams.has("branded")) {
				customSource = true;
			}
			
			var fontfit = false;
			if (urlParams.has("fontfit")) {
				fontfit = true;
			}
			
			let MAX_MESSAGES = 10; 
			if (urlParams.get("limit")) {
				MAX_MESSAGES = parseInt(urlParams.get("limit")) || 10;
			}
			
			var filterfeaturedusers = false;
			if (urlParams.has("filterfeaturedusers")) {
				filterfeaturedusers = urlParams.get("filterfeaturedusers");
				filterfeaturedusers = filterfeaturedusers.split(",").map(user => {
					const parts = user
						.toLowerCase()
						.trim()
						.split(":")
						.map(part => part.trim());
					return { username: parts[0], type: parts[1] || "*" };
				});
			}
			

			if (urlParams.has("css")) {
				var cssURL = urlParams.get("css");
				try {
					cssURL = decodeURI(cssURL);
				} catch (e) {}
				if (cssURL.startsWith("http")) {
					var cssStylesheet = document.createElement("link");
					cssStylesheet.rel = "stylesheet";
					cssStylesheet.type = "text/css";
					cssStylesheet.media = "screen";
					cssStylesheet.href = cssURL;
					document.getElementsByTagName("head")[0].appendChild(cssStylesheet);
				} else {
					var cssStylesheet = document.createElement("style");
					cssStylesheet.innerHTML = cssURL;
					document.getElementsByTagName("head")[0].appendChild(cssStylesheet);
				}
			}

			if (urlParams.has("base64css") || urlParams.has("b64css") || urlParams.has("cssbase64") || urlParams.has("cssb64")) {
				try {
					var base64Css = urlParams.get("base64css") || urlParams.get("b64css") || urlParams.get("cssbase64") || urlParams.get("cssb64");
					try {
						base64Css = atob(base64Css); // window.btoa(encodeURIComponent("#mainmenu{background-color: pink;}" ));
					} catch (e) {}
					try {
						base64Css = decodeURIComponent(base64Css); // window.btoa(encodeURIComponent("#mainmenu{background-color: pink; ❤" ));
					} catch (e) {}
					var cssStyleSheet = document.createElement("style");
					cssStyleSheet.innerText = base64Css;
					document.querySelector("head").appendChild(cssStyleSheet);
				} catch (e) {
					console.error(e);
				}
			}
			
			var ln_template = null;
			if (urlParams.has("ln") || urlParams.has("language")) {
				ln_template = urlParams.get("ln") || urlParams.get("language") || null;
			}
			if (ln_template){
				changeLg(ln_template, true);
			}

			// queuetime
			var queue = [];
			var queueTimer = null;
			var queuetime = false;
			if (urlParams.has("queuetime")) {
				queuetime = urlParams.get("queuetime");
			}
			
			var firstNamesOnly = false;
			if (urlParams.has("firstnamesonly") || urlParams.has("firstname") || urlParams.has("firstnames")) {
				firstNamesOnly = true;
			}

			var hideNames = false;
			if (urlParams.has("hidenames")) {
				hideNames = true;
			}

			var hideDonations = false;
			if (urlParams.has("hidedonations")) {
				hideDonations = true;
			}

			var onlyTwitch = false;
			var hideTwitch = false;

			if (urlParams.has("onlytwitch")) {
				onlyTwitch = true;
			}
			if (urlParams.has("hidetwitch")) {
				hideTwitch = true;
			}
			
			var onlyFrom = false;
			if (urlParams.get("onlyfrom")) {
				onlyFrom = urlParams.get("onlyfrom").toLowerCase().trim();
			} else if (urlParams.get("fromonly")) {
				onlyFrom = urlParams.get("fromonly").toLowerCase().trim(); // for the dylslexic users
			}

			var hideFrom = false;
			if (urlParams.get("hidefrom") || urlParams.get("exclude")) {
				hideFrom = [];
				(urlParams.get("hidefrom") || urlParams.get("exclude")).split(",").forEach(x => {
					hideFrom.push(x.trim().toLowerCase());
				});
			}

			var beepwords = false;
			if (urlParams.has("beepwords")) {
				beepwords = true;
			}
			
			var pseudodock = false;
			if (urlParams.has("autoshow")) {
				pseudodock = true;
			}

			var scale = false;
			if (urlParams.has("scale")) {
				scale = urlParams.get("scale") || 0.5; // 1.0 = 100% size
				scale = parseFloat(scale);
				if (scale < 1) {
					if (centering) {
						document.body.style.transform = "scale(" + scale + "), 0%)";
					} else {
						document.body.style.transform = "scale(" + scale + ")";
					}
				} else {
					if (centering) {
						document.body.style.transform = "scale(" + scale + ") translate(-" + -1 * (scale * 50.0 - 50) + "%, 0%)";
					} else {
						document.body.style.transform = "scale(" + scale + ") translate(" + -1 * (50 - 50 / scale) + "%, 0%)";
					}
				}
				if (centering) {
					if (urlParams.has("aligntop")) {
						document.body.style.transformOrigin = "center top";
					} else {
						document.body.style.transformOrigin = "center bottom";
					}
				} else {
					if (urlParams.has("aligntop")) {
						document.body.style.transformOrigin = "left top";
					} else {
						document.body.style.transformOrigin = "left bottom";
					}
				}
				document.body.style.width = parseInt(100 / scale) + "%";
			}

			var zOffset = false;
			if (urlParams.has("offset")) {
				zOffset = urlParams.get("offset") || 30; // 1.0 = 100% size
				if (scale) {
					document.body.style.transform += " translateY(-" + zOffset + "px)";
				} else {
					document.body.style.transform = "translateY(-" + zOffset + "px)";
				}
			}

			function loadGoogleFont(fontName) {
				const formattedFontName = fontName.replace(/\s/g, "+");

				const link = document.createElement("link");
				link.href = `https://fonts.googleapis.com/css2?family=${formattedFontName}&display=swap`;
				link.rel = "stylesheet";

				document.head.appendChild(link);
				var currentFont = getComputedStyle(document.documentElement).getPropertyValue("--font-family").trim();
				document.documentElement.style.setProperty("--font-family", "'" + fontName.replaceAll("+", " ") + "', " + currentFont);
			}

			if (urlParams.get("font")) {
				document.documentElement.style.setProperty("--font-family", urlParams.get("font") + ", Avenir Next, Sora, Roboto, Helvetica, Geneva, Verdana, Arial, sans-serif");
			}

			if (urlParams.get("googlefont")) {
				loadGoogleFont(urlParams.get("googlefont"));
			}

			var timeoutDelay = 0;
			if (urlParams.has("showtime")) {
				timeoutDelay = parseInt(urlParams.get("showtime")) || 20000;
			}

			var borderRadius = 0;
			if (urlParams.has("rounded")) {
				borderRadius = parseInt(urlParams.get("rounded")) || 10;
				borderRadius += "px";
				document.documentElement.style.setProperty("--rounded-border-radius", borderRadius);
			}

			if (urlParams.has("aligntop")) {
				document.getElementById("output").style.bottom = "unset";
				document.getElementById("output").style.top = "0";
			}
			
			
			var thisLabel = false;
			if (urlParams.has("label")) {
				thisLabel = urlParams.get("label") || false;
			}

			var timeoutTimer = null;
			var showsource = false;
			var showbadges = true;

			if (urlParams.has("hidebadges") || urlParams.has("nobadges")) {
				showbadges = false;
			}

			if (urlParams.has("showsource")) {
				showsource = true;
			}

			var lanonly = "";
			if (urlParams.has("lanonly")) {
				lanonly = "&lanonly";
			}

			var isIFrame = false;
			if (parent && window.location !== window.parent.location) {
				isIFrame = true;
			}

			if (urlParams.has("chroma")) {
				var chroma = urlParams.get("chroma") || "0F0";
				document.body.style.backgroundColor = "#" + chroma;
			}

			var transitionType = "dropout";
			if (urlParams.has("transition")) {
				transitionType = urlParams.get("transition").toLowerCase() || "fade";
			} else if (urlParams.has("fade")) {
				transitionType = "fade";
			} else if (urlParams.has("swipe")) {
				transitionType = "swipe";
			}

			var stacking = false;
			if (urlParams.has("stacking") || urlParams.has("stacked") || urlParams.has("stack")) {
				stacking = true;
			}

			var textDirection = "auto";
			if (urlParams.has("rtl")) {
				textDirection = "rtl"; // dir="rtl"
			}

			var alignright = false;
			if (urlParams.has("alignright")) {
				// document.documentElement.style.setProperty("--list-or-horizontal", "flex");
				alignright = true;
				document.getElementById("output").classList.add("alignright");
				document.documentElement.style.setProperty("--flex-direction", "row-reverse");
				document.documentElement.style.setProperty("--comment-padding", "20px 145px 20px 35px");
				//textDirection = "rtl";
			}

			var avatar = true;
			if (urlParams.has("noavatar")) {
				avatar = false;
				document.documentElement.style.setProperty("--comment-padding", "20px 35px 20px 35px");
				document.documentElement.style.setProperty("--author-left", "20px");
			}

			var audioContext = new (window.AudioContext || window.webkitAudioContext)();
			var timeoutTone = null;

			async function playtone(tonename = "testtone") {
				if (timeoutTone) {
					return;
				}
				timeoutTone = true;

				setTimeout(function () {
					timeoutTone = false;
				}, 500);

				if (audioContext.state == "suspended") {
					await audioContext.resume();
				}
				if (audioContext.state == "suspended") {
					return;
				}
				var toneEle = document.getElementById(tonename);
				if (toneEle) {
					toneEle
						.play()
						.then(() => {
							// beep
						})
						.catch(e => {
							console.error(e);
						});
				}
			}
			
			function updateAudioSource(newUrl) {
				var audioElement = getById("testtone");
				var sources = audioElement.getElementsByTagName("source");
				var extension = newUrl.split(".").pop().toLowerCase();
				var mimeType;

				switch (extension) {
					case "mp3":
						mimeType = "audio/mpeg";
						break;
					case "wav":
						mimeType = "audio/wav";
						break;
					case "ogg":
						mimeType = "audio/ogg";
						break;
					case "aac":
					case "m4a":
						mimeType = "audio/aac";
						break;
					case "opus":
						mimeType = "audio/opus";
						break;
					case "flac":
						mimeType = "audio/flac";
						break;
					case "webm":
						mimeType = "audio/webm";
						break;
					default:
						console.error("Unsupported file type:", extension);
						return;
				}
				if (sources.length === 1) {
					sources[0].src = newUrl;
					sources[0].type = mimeType;
				} else {
					audioElement.innerHTML = "";
					var newSource = document.createElement("source");
					newSource.src = newUrl;
					newSource.type = mimeType;
					audioElement.appendChild(newSource);
				}
				audioElement.load();
			}
			
			if (urlParams.get("custombeep")) {
				updateAudioSource(urlParams.get("custombeep"));
			}

			if (urlParams.has("beepvolume")) {
				try {
					document.getElementById("testtone").volume = parseInt(urlParams.get("beepvolume")) / 100 || 0;
				} catch (e) {
					console.error(e);
				}
			}

			var beep = false;
			if (urlParams.has("beep")) {
				// removes HTML from messages, donations, and names.
				beep = true;
				playtone();
			}

			try {
				if (window.location.host !== "socialstream.ninja") {
					// don't check if not private hosted, since it won't exist
					var script = document.createElement("script");
					script.onload = function () {
						console.log("Loaded personal actions");
					};
					script.onerror = function () {
						console.log("no personal actions file found. skipping.");
					};
					script.src = "custom.js";
					document.head.appendChild(script);
				}
			} catch (e) {}
			
			function cleanupOldMessages() {
				const messages = document.querySelectorAll('.hl-c-cont.highlight-chat.stacked');
				if (messages.length > MAX_MESSAGES) {
					const messagesToRemove = messages.length - MAX_MESSAGES;
					for (let i = 0; i < messagesToRemove; i++) {
						const oldestMessage = messages[i];
						oldestMessage.classList.add(transitionType);
						setTimeout(() => {
							if (oldestMessage && oldestMessage.parentNode) {
								oldestMessage.parentNode.removeChild(oldestMessage);
							}
						}, 500); // Match transition time
					}
				}
			}



			function realign(eventtype = false) {
				if (centering) {
					try {
						var offsetLeft = (parseInt(window.innerWidth) - parseInt(document.getElementById("message").clientWidth + 20)) / 2;
						offsetLeft -= 15;
						document.documentElement.style.setProperty("--highlight-chat-left", offsetLeft + "px");
					} catch (e) {}
				}
				try {
					var img = document.getElementById("img");
					if (!img) {
						return;
					}

					if (img.complete && img.naturalWidth > 0) {
					} else {
						return false;
					}

					var ar = img.naturalWidth / img.naturalHeight;

					if (ar < 1) {
						ar = 1 / ar;
					}
					var ar1 = 300 / img.naturalWidth;

					if (ar1 > ar) {
						ar = ar1;
					}
					var message = document.getElementById("message");
					var width = 300 * ar; // window.innerWidth*ar
					//img.style.width = width+"px";

					if (img.naturalWidth < img.naturalHeight) {
						if (message.innerText.length) {
							if (ar > 1.333) {
								ar = 1.333;
							}
						} else {
							if (ar > 1.5) {
								ar = 1.333;
							}
						}
					} else if (ar > 1.9) {
						ar = 1.9;
					}

					width += 123;
					if (window.innerWidth < width * 2.5) {
						width = window.innerWidth / 2.5;
					}
					document.getElementById("imgContent").style.width = width + "px";
					//img.style.transform = "scale("+ar+")";

					if (message.innerText.length) {
						message.style.maxWidth = "calc(100vw - " + (width + 35) + "px)";
						message.style.width = "fit-content";
						document.getElementById("imgContent").style.right = "unset";

						var offset = 0;
						if (document.getElementById("nameDIV")) {
							offset = document.getElementById("nameDIV").clientWidth + 110;
						}
						if (offset < 300) {
							offset = 300;
						}
						if (offset < document.getElementById("message").clientWidth + 19) {
							offset = document.getElementById("message").clientWidth + 19;
						}

						document.getElementById("imgContent").style.left = offset + "px";
					} else {
						message.style.maxWidth = "300px";
						img.style.transformOrigin = "bottom";
						document.getElementById("imgContent").style.right = 0;
						var offset = 0;
						if (document.getElementById("nameDIV")) {
							offset = document.getElementById("nameDIV").clientWidth + 110;
						}
						if (offset < 300) {
							offset = 300;
						} else if (offset <= 500) {
							//
						} else if (offset > window.innerWidth - 500) {
							offset = window.innerWidth - 500;
							if (offset < 500) {
								offset = 500;
							}
						}
						document.getElementById("imgContent").style.left = offset + "px";
					}
				} catch (e) {
					errorlog(e);
				}
			}
			
			var conCon = 1;
			var socketserver = false;
			var serverURL = urlParams.has("localserver") ? "ws://127.0.0.1:3000" : "wss://io.socialstream.ninja";
			var reconnectionTimeout = null;

			function setupSocket(allin = false) {
				if (reconnectionTimeout) {
					clearTimeout(reconnectionTimeout);
					reconnectionTimeout = null;
				}

				if (socketserver) {
					socketserver.onclose = null;
					socketserver.close();
					socketserver = null;
				}

				socketserver = new WebSocket(serverURL);

				socketserver.onclose = function () {
					reconnectionTimeout = setTimeout(function () {
						conCon += 1;
						setupSocket(allin);
					}, 100 * conCon);
				};

				socketserver.onerror = function (error) {
					console.error("WebSocket error:", error);
					socketserver.close();
				};

				socketserver.onopen = function () {
					conCon = 1;
					if (allin == 1) {
						socketserver.send(JSON.stringify({ join: roomID, out: 3 }));
						console.log("output channel: 3, input channel: default");
					} else if (allin == 2) {
						socketserver.send(JSON.stringify({ join: roomID, out: 3, in: 1 }));
						console.log("output channel: 3, input channel: 1");
					} else {
						socketserver.send(JSON.stringify({ join: roomID, out: 3, in: 2 })); // main default
						console.log("output channel: 3, input channel: 2");
					}
					
				};
				socketserver.addEventListener("message", function (event) {
					if (event.data) {
					
						
						
						if (typeof event.data !== "object") {
							var data = JSON.parse(event.data);
						} else {
							var data = event.data;
						}
						
						var pid = false;
						if (data && data.get){
							pid = data.get;
						}

						if (data && "overlayNinja" in data) {
							data = data.overlayNinja;
						}

						var resp = false;
						if (data == false) {
							resp = processData({ contents: false });
						} else if (data.target && data.target !== "null" && data.target !== thisLabel) { 
							return; // does not match, so we assume this isn't for us. no callback.
						} else if ("content" in data) {
							if (data.content) {
								resp = processData({ contents: data.content });
							} else {
								resp = processData({ contents: false });
							}
						} else if (data.action && "value" in data && data.action == "content") {
							if (data.value) {
								data = JSON.parse(data.value);
							} else {
								data = false;
							}
							if (data && "chatmessage" in data){
								resp = processData({ contents: data });
							} else {
								resp = processData(data);
							}
						} else if (!("action" in data) && ("chatmessage" in data)) {
							resp = processData({ contents: data });
						} else {
							resp = processData(data);
						}
						
						if (resp !== null) {
							var ret = {};
							data.result = resp;
							data.get = pid;
							ret.callback = data;
							socketserver.send(JSON.stringify(ret));
						}
					}
				});
			}
			if (urlParams.has("server")) {
				serverURL = urlParams.get("server") || serverURL;
				setupSocket();
			} else if (urlParams.has("server2")) {
				serverURL = urlParams.get("server2") || serverURL;
				setupSocket(1);
			} else if (urlParams.has("server3")) {
				serverURL = urlParams.get("server3") || serverURL;
				setupSocket(2);
			}

			var onlyshowdonos = false;
			if (urlParams.has("donosonly")) {
				onlyshowdonos = true;
			}

			var speechLang = "en-US";
			var speech = false;
			var English = true;
			var voice = false;
			var voices = window.speechSynthesis.getVoices();

			var replaceURLInLink = true;
			if (urlParams.has("readouturls")) {
				replaceURLInLink = false;
			}

			var readDonos = false;
			if (urlParams.has("ttsdonos")) {
				readDonos = urlParams.get("ttsdonos") || "en-US";
			}
			
			var disableTTS = false;
			if (urlParams.has("notts")) {
				disableTTS = true;
			}
			
			var newmembertts = false;
			if (urlParams.has("ttsnewmembers")) {
				newmembertts = urlParams.get("ttsnewmembers") || "en-US";
			}
			var ttsclicked = false;
			if (urlParams.has("ttsclicked")) {
				ttsclicked = urlParams.get("ttsclicked") || "en-US";
			}
			
			if (readDonos || newmembertts || ttsclicked || urlParams.has("speech") || urlParams.has("speak") || urlParams.has("tts")) {
				if (document.getElementById("tts")) {
					document.getElementById("tts").dataset.state = 1;
					document.getElementById("tts").classList.remove("hidden");
					document.getElementById("tts").classList.add("pressed");
				}
				var speech = true;
				speechLang = urlParams.get("speech") || urlParams.get("speak") || urlParams.get("tts") || readDonos || newmembertts || ttsclicked || "en-US";
				if (speechLang.split("-")[0].toLowerCase() == "en") {
					English = true;
				} else {
					English = false;
				}
			}
			if (urlParams.get("language") || urlParams.get("lang") || urlParams.get("ln")) {
				speechLang = urlParams.get("language") || urlParams.get("lang") || urlParams.get("ln");
				if (speechLang.split("-")[0].toLowerCase() == "en") {
					English = true;
				} else {
					English = false;
				}
			}

			var ttsSpeakChatname = true;
			if (urlParams.has("simpletts2")) {
				// You don't want to hear the chatname when TTS is enabled. ＞﹏＜
				ttsSpeakChatname = false;
				English = false;
			}

			if (urlParams.has("simpletts")) {
				English = false;
			}

			var colorized = false;
			if (urlParams.has("colorednames") || urlParams.has("color")) {
				colorized = true;
			}

			var pitch = 1;
			if (urlParams.has("pitch")) {
				pitch = urlParams.get("pitch") || 1;
				pitch = parseFloat(pitch);
			}

			var rate = 1;
			if (urlParams.has("rate")) {
				rate = urlParams.get("rate") || 1;
				rate = parseFloat(rate);
			}

			var volume = 1;
			if (urlParams.has("volume")) {
				volume = urlParams.get("volume") || 1;
			}

			var voiceLatency = 4; // 0 slowest, but best quality; 4 is fastest, but worst quality
			if (urlParams.has("latency")) {
				voiceLatency = urlParams.get("latency") || 0;
				voiceLatency = parseInt(voiceLatency) || 0;
			}

			var voiceName = false;
			if (urlParams.has("voice")) {
				voiceName = urlParams.get("voice") || "google";
			}
			
			var voiceNameGoogle = false;
			if (urlParams.has("voicegoogle")) {
				voiceNameGoogle = urlParams.get("voicegoogle");
			}
			
			var voiceNameElevenlabs = false;
			if (urlParams.has("voice11")) {
				voiceNameElevenlabs = urlParams.get("voice11");
			}
			
			var voiceNameSpeechify = false;
			if (urlParams.has("voicespeechify")) {
				voiceNameSpeechify = urlParams.get("voicespeechify");
			}

			var voiceGender = false;
			if (urlParams.has("gender")) {
				voiceGender = urlParams.get("gender") || "MALE";
			}
			var audio = false;

			var GoogleAPIKey = false; // You can get your API key from Google Cloud ; KEEP IT PRIVATE/SECRET.  It will look like: "ahasdfuyu234hjjUASDtu1234gughasdguhaU" or somnething like that.
			var ElevenLabsKey = false;
			var SpeechifyAPIKey = false;

			if (urlParams.has("ttskey") || urlParams.has("googlettskey")) {
				audio = document.createElement("audio");
				GoogleAPIKey = urlParams.get("ttskey")  || urlParams.get("googlettskey") || false;
			} else if (urlParams.has("elevenlabskey")) {
				audio = document.createElement("audio");
				ElevenLabsKey = urlParams.get("elevenlabskey") || false;
			} else if (urlParams.has("speechifykey")) {
				audio = document.createElement("audio");
				audio.onended = finishedAudio;
				SpeechifyAPIKey = urlParams.get("speechifykey") || false;
			}

			function replaceURLs(node) {
				if (node.nodeType === 3) {
					node.nodeValue = replaceURLsWithSubstring(node.nodeValue);
				} else if (node.nodeType === 1) {
					node.childNodes.forEach(replaceURLs);
				}
			}

			const validTLDs = new Set(["a","aaa","aarp","abb","abbott","abbvie","abc","able","abogado","abudhabi","ac","academy","accenture","accountant","accountants","aco","actor","ad","ads","adult","ae","aeg","aero","aetna","af","afl","africa","ag","agakhan","agency","ai","aig","airbus","airforce","airtel","akdn","al","alibaba","alipay","allfinanz","allstate","ally","alsace","alstom","am","amazon","americanexpress","americanfamily","amex","amfam","amica","amsterdam","analytics","android","anquan","anz","ao","aol","apartments","app","apple","aq","aquarelle","ar","arab","aramco","archi","army","arpa","art","arte","as","asda","asia","associates","at","athleta","attorney","au","auction","audi","audible","audio","auspost","author","auto","autos","aw","aws","ax","axa","az","azure","b","ba","baby","baidu","banamex","band","bank","bar","barcelona","barclaycard","barclays","barefoot","bargains","baseball","basketball","bauhaus","bayern","bb","bbc","bbt","bbva","bcg","bcn","bd","be","beats","beauty","beer","bentley","berlin","best","bestbuy","bet","bf","bg","bh","bharti","bi","bible","bid","bike","bing","bingo","bio","biz","bj","black","blackfriday","blockbuster","blog","bloomberg","blue","bm","bms","bmw","bn","bnpparibas","bo","boats","boehringer","bofa","bom","bond","boo","book","booking","bosch","bostik","boston","bot","boutique","box","br","bradesco","bridgestone","broadway","broker","brother","brussels","bs","bt","build","builders","business","buy","buzz","bv","bw","by","bz","bzh","c","ca","cab","cafe","cal","call","calvinklein","cam","camera","camp","canon","capetown","capital","capitalone","car","caravan","cards","care","career","careers","cars","casa","case","cash","casino","cat","catering","catholic","cba","cbn","cbre","cc","cd","center","ceo","cern","cf","cfa","cfd","cg","ch","chanel","channel","charity","chase","chat","cheap","chintai","christmas","chrome","church","ci","cipriani","circle","cisco","citadel","citi","citic","city","ck","cl","claims","cleaning","click","clinic","clinique","clothing","cloud","club","clubmed","cm","cn","co","coach","codes","coffee","college","cologne","com","commbank","community","company","compare","computer","comsec","condos","construction","consulting","contact","contractors","cooking","cool","coop","corsica","country","coupon","coupons","courses","cpa","cr","credit","creditcard","creditunion","cricket","crown","crs","cruise","cruises","cu","cuisinella","cv","cw","cx","cy","cymru","cyou","cz","d","dabur","dad","dance","data","date","dating","datsun","day","dclk","dds","de","deal","dealer","deals","degree","delivery","dell","deloitte","delta","democrat","dental","dentist","desi","design","dev","dhl","diamonds","diet","digital","direct","directory","discount","discover","dish","diy","dj","dk","dm","dnp","do","docs","doctor","dog","domains","dot","download","drive","dtv","dubai","dunlop","dupont","durban","dvag","dvr","dz","e","earth","eat","ec","eco","edeka","edu","education","ee","eg","email","emerck","energy","engineer","engineering","enterprises","epson","equipment","er","ericsson","erni","es","esq","estate","et","eu","eurovision","eus","events","exchange","expert","exposed","express","extraspace","f","fage","fail","fairwinds","faith","family","fan","fans","farm","farmers","fashion","fast","fedex","feedback","ferrari","ferrero","fi","fidelity","fido","film","final","finance","financial","fire","firestone","firmdale","fish","fishing","fit","fitness","fj","fk","flickr","flights","flir","florist","flowers","fly","fm","fo","foo","food","football","ford","forex","forsale","forum","foundation","fox","fr","free","fresenius","frl","frogans","frontier","ftr","fujitsu","fun","fund","furniture","futbol","fyi","g","ga","gal","gallery","gallo","gallup","game","games","gap","garden","gay","gb","gbiz","gd","gdn","ge","gea","gent","genting","george","gf","gg","ggee","gh","gi","gift","gifts","gives","giving","gl","glass","gle","global","globo","gm","gmail","gmbh","gmo","gmx","gn","godaddy","gold","goldpoint","golf","goo","goodyear","goog","google","gop","got","gov","gp","gq","gr","grainger","graphics","gratis","green","gripe","grocery","group","gs","gt","gu","gucci","guge","guide","guitars","guru","gw","gy","h","hair","hamburg","hangout","haus","hbo","hdfc","hdfcbank","health","healthcare","help","helsinki","here","hermes","hiphop","hisamitsu","hitachi","hiv","hk","hkt","hm","hn","hockey","holdings","holiday","homedepot","homegoods","homes","homesense","honda","horse","hospital","host","hosting","hot","hotels","hotmail","house","how","hr","hsbc","ht","hu","hughes","hyatt","hyundai","i","ibm","icbc","ice","icu","id","ie","ieee","ifm","ikano","il","im","imamat","imdb","immo","immobilien","in","inc","industries","infiniti","info","ing","ink","institute","insurance","insure","int","international","intuit","investments","io","ipiranga","iq","ir","irish","is","ismaili","ist","istanbul","it","itau","itv","j","jaguar","java","jcb","je","jeep","jetzt","jewelry","jio","jll","jm","jmp","jnj","jo","jobs","joburg","jot","joy","jp","jpmorgan","jprs","juegos","juniper","k","kaufen","kddi","ke","kerryhotels","kerrylogistics","kerryproperties","kfh","kg","kh","ki","kia","kids","kim","kindle","kitchen","kiwi","km","kn","koeln","komatsu","kosher","kp","kpmg","kpn","kr","krd","kred","kuokgroup","kw","ky","kyoto","kz","l","la","lacaixa","lamborghini","lamer","lancaster","land","landrover","lanxess","lasalle","lat","latino","latrobe","law","lawyer","lb","lc","lds","lease","leclerc","lefrak","legal","lego","lexus","lgbt","li","lidl","life","lifeinsurance","lifestyle","lighting","like","lilly","limited","limo","lincoln","link","lipsy","live","living","lk","llc","llp","loan","loans","locker","locus","lol","london","lotte","lotto","love","lpl","lplfinancial","lr","ls","lt","ltd","ltda","lu","lundbeck","luxe","luxury","lv","ly","m","ma","madrid","maif","maison","makeup","man","management","mango","map","market","marketing","markets","marriott","marshalls","mattel","mba","mc","mckinsey","md","me","med","media","meet","melbourne","meme","memorial","men","menu","merckmsd","mg","mh","miami","microsoft","mil","mini","mint","mit","mitsubishi","mk","ml","mlb","mls","mm","mma","mn","mo","mobi","mobile","moda","moe","moi","mom","monash","money","monster","mormon","mortgage","moscow","moto","motorcycles","mov","movie","mp","mq","mr","ms","msd","mt","mtn","mtr","mu","museum","music","mv","mw","mx","my","mz","n","na","nab","nagoya","name","navy","nba","nc","ne","nec","net","netbank","netflix","network","neustar","new","news","next","nextdirect","nexus","nf","nfl","ng","ngo","nhk","ni","nico","nike","nikon","ninja","nissan","nissay","nl","no","nokia","norton","now","nowruz","nowtv","np","nr","nra","nrw","ntt","nu","nyc","nz","o","obi","observer","office","okinawa","olayan","olayangroup","ollo","om","omega","one","ong","onl","online","ooo","open","oracle","orange","org","organic","origins","osaka","otsuka","ott","ovh","p","pa","page","panasonic","paris","pars","partners","parts","party","pay","pccw","pe","pet","pf","pfizer","pg","ph","pharmacy","phd","philips","phone","photo","photography","photos","physio","pics","pictet","pictures","pid","pin","ping","pink","pioneer","pizza","pk","pl","place","play","playstation","plumbing","plus","pm","pn","pnc","pohl","poker","politie","porn","post","pr","pramerica","praxi","press","prime","pro","prod","productions","prof","progressive","promo","properties","property","protection","pru","prudential","ps","pt","pub","pw","pwc","py","q","qa","qpon","quebec","quest","r","racing","radio","re","read","realestate","realtor","realty","recipes","red","redstone","redumbrella","rehab","reise","reisen","reit","reliance","ren","rent","rentals","repair","report","republican","rest","restaurant","review","reviews","rexroth","rich","richardli","ricoh","ril","rio","rip","ro","rocks","rodeo","rogers","room","rs","rsvp","ru","rugby","ruhr","run","rw","rwe","ryukyu","s","sa","saarland","safe","safety","sakura","sale","salon","samsclub","samsung","sandvik","sandvikcoromant","sanofi","sap","sarl","sas","save","saxo","sb","sbi","sbs","sc","scb","schaeffler","schmidt","scholarships","school","schule","schwarz","science","scot","sd","se","search","seat","secure","security","seek","select","sener","services","seven","sew","sex","sexy","sfr","sg","sh","shangrila","sharp","shell","shia","shiksha","shoes","shop","shopping","shouji","show","si","silk","sina","singles","site","sj","sk","ski","skin","sky","skype","sl","sling","sm","smart","smile","sn","sncf","so","soccer","social","softbank","software","sohu","solar","solutions","song","sony","soy","spa","space","sport","spot","sr","srl","ss","st","stada","staples","star","statebank","statefarm","stc","stcgroup","stockholm","storage","store","stream","studio","study","style","su","sucks","supplies","supply","support","surf","surgery","suzuki","sv","swatch","swiss","sx","sy","sydney","systems","sz","t","tab","taipei","talk","taobao","target","tatamotors","tatar","tattoo","tax","taxi","tc","tci","td","tdk","team","tech","technology","tel","temasek","tennis","teva","tf","tg","th","thd","theater","theatre","tiaa","tickets","tienda","tips","tires","tirol","tj","tjmaxx","tjx","tk","tkmaxx","tl","tm","tmall","tn","to","today","tokyo","tools","top","toray","toshiba","total","tours","town","toyota","toys","tr","trade","trading","training","travel","travelers","travelersinsurance","trust","trv","tt","tube","tui","tunes","tushu","tv","tvs","tw","tz","u","ua","ubank","ubs","ug","uk","unicom","university","uno","uol","ups","us","uy","uz","v","va","vacations","vana","vanguard","vc","ve","vegas","ventures","verisign","vermögensberater","vermögensberatung","versicherung","vet","vg","vi","viajes","video","vig","viking","villas","vin","vip","virgin","visa","vision","viva","vivo","vlaanderen","vn","vodka","volvo","vote","voting","voto","voyage","vu","w","wales","walmart","walter","wang","wanggou","watch","watches","weather","weatherchannel","webcam","weber","website","wed","wedding","weibo","weir","wf","whoswho","wien","wiki","williamhill","win","windows","wine","winners","wme","wolterskluwer","woodside","work","works","world","wow","ws","wtc","wtf","x","xbox","xerox","xihuan","xin","xxx","xyz","y","yachts","yahoo","yamaxun","yandex","ye","yodobashi","yoga","yokohama","you","youtube","yt","yun","z","za","zappos","zara","zero","zip","zm","zone","zuerich","zw","IDNs","ελ","ευ","бг","бел","дети","ею","католик","ком","мкд","мон","москва","онлайн","орг","рус","рф","сайт","срб","укр","қаз","հայ","ישראל","קום","ابوظبي","ارامكو","الاردن","البحرين","الجزائر","السعودية","العليان","المغرب","امارات","ایران","بارت","بازار","بيتك","بھارت","تونس","سودان","سورية","شبكة","عراق","عرب","عمان","فلسطين","قطر","كاثوليك","كوم","مصر","مليسيا","موريتانيا","موقع","همراه","پاكستان","پاکستان","ڀارت","कॉम","नेट","भारत","भारतम्","भारोत","संगठन","বাংলা","ভারত","ভাৰত","ਭਾਰਤ","ભારત","ଭାରତ","இந்தியா","இலங்கை","சிங்கப்பூர்","భారత్","ಭಾರತ","ഭാരതം","ලංකා","คอม","ไทย","ລາວ","გე","みんな","アマゾン","クラウド","グーグル","コム","ストア","セール","ファッション","ポイント","世界","中信","中国","中國","中文网","亚马逊","企业","佛山","信息","健康","八卦","公司","公益","台湾","台灣","商城","商店","商标","嘉里","嘉里大酒店","在线","大拿","天主教","娱乐","家電","广东","微博","慈善","我爱你","手机","招聘","政务","政府","新加坡","新闻","时尚","書籍","机构","淡马锡","游戏","澳門","点看","移动","组织机构","网址","网店","网站","网络","联通","谷歌","购物","通販","集团","電訊盈科","飞利浦","食品","餐厅","香格里拉","香港","닷넷","닷컴","삼성","한국"]);
			
			function isValidTLD(tld) {
			  return validTLDs.has(tld.toLowerCase());
			}
			
			function replaceURLsWithSubstring(text, replacement = "[Link]") {
			  if (typeof text !== "string") {
				return text;
			  }

			  try {
				// This pattern matches potential URLs more strictly
				const urlPattern = /(\bhttps?:\/\/)?[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+([/?#][^\s]*)?/g;

				return text.replace(urlPattern, (match) => {
				  // Split the match by dots to check the TLD
				  const parts = match.split('.');
				  const potentialTLD = parts[parts.length - 1].split(/[/?#]/)[0];

				  // If it doesn't contain a slash, only replace if it starts with http:// or https://
				  if (match.startsWith('http://') || match.startsWith('https://')) {
					return replacement;
				  }
				  
				  // Check if it's a valid TLD and contains a slash (indicating it's likely a URL)
				  if (match.includes('/') || isValidTLD(potentialTLD)) {
					return replacement;
				  }

				  // Otherwise, return the original match
				  return match;
				});
			  } catch (e) {
				console.error(e);
				return text;
			  }
			}

			function speak(text) {
				if (!speech) {
					return;
				}
				if (!text) {
					return;
				}
				if (disableTTS){
					return; // no exceptions.
				}

				if (replaceURLInLink) {
					text = replaceURLsWithSubstring(text, "Link");
				}
				
				if (beepwords){
					text = text.replace(/\*+/g, ' beep ');
				} else {
					text = text.replace(/\*/g, '');
				}

				if (GoogleAPIKey) {
					googleTTS(text);
					return;
				} else if (ElevenLabsKey) {
					ElevenLabsTTS(text);
					return;
				} else if (SpeechifyAPIKey){
					SpeechifyTTS(text);
					return;
				}

				if (!voice) {
					if (!voices || !voices.length) {
						voices = window.speechSynthesis.getVoices();
					}
					console.log("You can do &voice=VOICENAME to try to force select a voice based on a partial string match of its name.");
					console.log(voices);
					voices.forEach(vce => {
						if (vce.name && voiceName && vce.name.toLowerCase().includes(voiceName.toLowerCase())) {
							if (vce.lang && vce.lang.toLowerCase() == speechLang.toLowerCase()) {
								voice = vce;
							} else if (!voice && vce.lang && vce.lang.split("-")[0].toLowerCase() == speechLang.split("-")[0].toLowerCase()) {
								voice = vce;
							}
						} else if (vce.name && vce.name.includes("Siri")) {
							// SIRI sucks and breaks a lot, so lets skip if possible.
							return;
						} else if (!voice && vce.lang && vce.lang.toLowerCase() == speechLang.toLowerCase()) {
							voice = vce;
						} else if (!voice && vce.lang && vce.lang.split("-")[0].toLowerCase() == speechLang.split("-")[0].toLowerCase()) {
							voice = vce;
						}
					});
					if (!voice && voices.length) {
						voice = voices.shift(); // take the first/default voice
					}
					if (voice) {
						console.log("Voice being used:");
						console.log(voice);
						if (voice.lang && voice.lang.split("-")[0].toLowerCase() != "en") {
							English = false;
						}
					} else {
						console.log("No voice found; using lang: " + speechLang);
					}
				}

				var speechInput = new SpeechSynthesisUtterance();

				if (!voice) {
					speechInput.lang = speechLang;
				} else {
					speechInput.voice = voice;
				}

				speechInput.volume = volume;
				speechInput.rate = rate;
				speechInput.pitch = pitch;
				speechInput.text = text;
				window.speechSynthesis.speak(speechInput);
			}

			try {
				window.onresize = realign;
				if (parseInt(window.innerHeight) < 500) {
					document.documentElement.style.setProperty("--image-content-max-height", window.innerHeight);
				}
			} catch (e) {
				errorlog(e);
			}
			
			function SpeechifyTTS(tts) {
				//console.log(tts);
				try {
					const url = "https://api.sws.speechify.com/v1/audio/speech";
					let model = English ? "simba-english" : "simba-multilingual";
					const data = {
						input: "<speak>" + tts + "</speak>",
						voice_id: voiceNameSpeechify || voiceName || "henry",
						model: model,
						audio_format: "mp3"
					};
					const otherparam = {
						method: "POST",
						headers: {
							"Authorization": `Bearer ${SpeechifyAPIKey}`,
							"Content-Type": "application/json"
						},
						body: JSON.stringify(data)
					};
					fetch(url, otherparam)
						.then(response => {
							//console.log(response);
							if (!response.ok) {
								throw new Error(`HTTP error! status: ${response.status}`);
							}
							return response.json();
						})
						.then(async json => {
							//console.log(json);
							if (!json.audio_data) {
								finishedAudio();
								throw new Error("No audio data in JSON response");
							}
							try {
								if (!audio) {
									audio = document.createElement("audio");
									audio.onended = finishedAudio;
								}
								audio.src = "data:audio/mp3;base64," + json.audio_data;
								if (volume) {
									audio.volume = volume;
								}
								if (audioContext.state === 'suspended') {
									await audioContext.resume();
								}
								audio.play().then(() => {
									//console.log("Audio playing successfully");
								}).catch(err => {
									console.error("Audio play failed, user interaction required", err);
									finishedAudio();  // Ensure the queue is released
								});
							} catch (e) {
								console.error(e);
								finishedAudio();
								errorlog("REMEMBER TO CLICK THE PAGE FIRST - audio won't play until you do");
							}
						})
						.catch(error => {
							finishedAudio();
							console.error("Error with Speechify TTS:", error);
						});
				} catch (e) {
					finishedAudio();
					console.error("Error in SpeechifyTTS function:", e);
				}
			}

			function googleTTS(tts) {
				const url = "https://texttospeech.googleapis.com/v1beta1/text:synthesize?key=" + GoogleAPIKey;
				var data = {
					input: {
						text: tts
					},
					voice: {
						languageCode: speechLang.toLowerCase(),
						name: "en-GB-Standard-A",
						ssmlGender: "FEMALE"
					},
					audioConfig: {
						audioEncoding: "MP3",
						speakingRate: rate
					}
				};

				if (voiceName || voiceNameGoogle) {
					data.voice.name = voiceNameGoogle || voiceName;
				}
				if (voiceGender) {
					data.voice.ssmlGender = voiceGender.toUpperCase();
				}

				const otherparam = {
					headers: {
						"content-type": "application/json; charset=UTF-8"
					},
					body: JSON.stringify(data),
					method: "POST"
				};
				fetch(url, otherparam)
					.then(data => {
						return data.json();
					})
					.then(async res => {
						//console.log(res.audioContent);
						if (!audio) {
							audio = document.createElement("audio");
						}
						audio.src = "data:audio/mp3;base64," + res.audioContent;
						if (volume) {
							audio.volume = volume;
						}
						if (audioContext.state === 'suspended') {
							await audioContext.resume();
						}
						audio.play();
					})
					.catch(error => {
						console.error(error);
					});
			}
			function ElevenLabsTTS(tts) {
				const voiceid = voiceNameElevenlabs || voiceName || "VR6AewLTigWG4xSOukaG";
				const url = "https://api.elevenlabs.io/v1/text-to-speech/" + voiceid + "/stream?optimize_streaming_latency=" + voiceLatency;

				var data = {
					text: tts,
					model_id: "eleven_multilingual_v2",
					voice_settings: {
						stability: 0,
						similarity_boost: 0,
						style: 0.5,
						use_speaker_boost: false
					}
				};

				const otherparam = {
					headers: {
						"content-type": "application/json",
						"xi-api-key": ElevenLabsKey,
						accept: "*/*"
					},
					body: JSON.stringify(data),
					method: "POST"
				};
				fetch(url, otherparam)
					.then(data => {
						return data.blob();
					})
					.then(async res => {
						const newBlob = new Blob([res]);
						const blobUrl = window.URL.createObjectURL(newBlob);
						if (!audio) {
							audio = document.createElement("audio");
						}
						audio.src = blobUrl;
						if (volume) {
							audio.volume = volume;
						}
						if (audioContext.state === 'suspended') {
							await audioContext.resume();
						}
						try {
							audio.play();
						} catch (e) {
							errorlog("REMEMBER TO CLICK THE PAGE FIRST - audio won't play until you do");
						}
					})
					.catch(error => {
						console.error(error);
					});
			}

			function RecvDataWindow() {
				var iframe = document.createElement("iframe");

				if (pseudodock) {
					iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password=" + password + lanonly + "&push&notmobile&label=dock&vd=0&ad=0&novideo&noaudio&autostart&cleanoutput&room=" + roomID; // push and view, as we will connect with other docks also.
					// iframe.src = "https://vdo.socialstream.ninja/?ln&password="+password+"&notmobile&salt=vdo.ninja&label=overlay&exclude="+roomID+"&scene&novideo&noaudio&cleanoutput&room="+roomID; // exclude raw feed; we only want selected inputs.
				} else {
					iframe.src = "https://vdo.socialstream.ninja/?ln&password=" + password + lanonly + "&notmobile&salt=vdo.ninja&label=overlay&exclude=" + roomID + "&scene&novideo&noaudio&cleanoutput&room=" + roomID; // exclude raw feed; we only want selected inputs.
				}

				iframe.style.width = "0px";
				iframe.style.height = "0px";
				iframe.style.position = "fixed";
				iframe.style.left = "-100px";
				iframe.style.top = "-100px";
				iframe.id = "frame1";
				iframe.allow = "midi;geolocation;microphone;"; // microphone is needed for Safari webRTC P2P connections
				document.body.appendChild(iframe);

				var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
				var eventer = window[eventMethod];
				var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

				eventer(messageEvent, function (e) {
					if (e.source != iframe.contentWindow) {
						return;
					} // reject messages send from other iframes
					if ("dataReceived" in e.data) {
						// raw data
						if ("overlayNinja" in e.data.dataReceived) {
							try {
								if (applyCustomFeatureActions) {
									applyCustomFeatureActions(e.data.dataReceived.overlayNinja);
								}
							} catch (e) {
								console.error(e);
							}

							//console.log(e.data.dataReceived.overlayNinja);
							if (e.data.dataReceived.overlayNinja && "response" in e.data.dataReceived.overlayNinja) {
								// pass
							} else {
								processData({ contents: e.data.dataReceived.overlayNinja });
							}
						}
					}
				});
			}

			if (!socketserver) {
				RecvDataWindow(); // only load the iframe if not connecting via wss
			}

			try {
				var fallbackImage = new Image(); // preload it.
				fallbackImage.src = "./sources/images/unknown.png";
				fallbackImage.onerror = function () {
					fallbackImage = false;
				};
				
				var fallbackImageAnnouncement = new Image();
				fallbackImageAnnouncement.src = "./icons/announcement.png";
				fallbackImageAnnouncement.onerror = function () {
					fallbackImageAnnouncement = false;
				};
			} catch (e) {}

			function errorImage(ele) {
				if (ele.dataset.backupImage) {
					ele.src = ele.dataset.backupImage;
				} else if (fallbackImage) {
					ele.src = "./sources/images/unknown.png";
				} else {
					ele.style.display = "none";
				}
			}

			var iframeTimeout = null;
			var lastMessageId = null

			function processData(data) {
				if (pseudodock) {
					if (data && !data.contents) {
						var tmp = {};
						tmp.contents = data;
						data = tmp;
						tmp = "";
					}
				}
				if (data && data.contents) {
					if (onlyshowdonos && !data.contents.hasDonation) {
						return false;
					}
					
					if (!data.contents.chatmessage && !data.contents.chatname && !data.contents.contentimg && !data.contents.donation && !data.contents.hasDonation && !data.contents.memebership && !data.contents.hasMembership){
						return;
					}
					
					if (hideDonations){
						data.contents.hasDonation = ""; // kiss
						if (!data.contents.chatmessage && !data.contents.contentimg && !data.contents.subtitle && !data.contents.membership){
							// there's nothing worth showing, so skip
							return false;
						}
					}

					if (hideTwitch && data.contents.type === "twitch") {
						// this is a twitch message, and we're hiding them.
						return false;
					}
					if (onlyTwitch && data.contents.type !== "twitch") {
						// this is not a twitch message, so we're hiding them
						return false;
					}
					
					if (onlyFrom && data.contents.type !== onlyFrom) {
						return false;
					}
					if (hideFrom && hideFrom.includes(data.contents.type)) {
						return false;
					}
					
					if (filterfeaturedusers){
						if (!data.contents.chatname){return false;}
						const isWhitelisted = filterfeaturedusers.some(({ username, type }) => data.contents.chatname.toLowerCase().trim() === username && (type === "*" || data.contents.type === type));
						if (!isWhitelisted){
							return false;
						}
					}
					
					if (lastMessageId && ("id" in data.contents) && data.contents.id === lastMessageId) {
						return "a message with this ID is already featured. Change or remove the ID."
					} else if ("id" in data.contents){
						lastMessageId = data.contents.id;
					} else {
						lastMessageId = null;
					}

					try {
						if (data.contents.chatimg && data.contents.chatimg.startsWith("http")) {
							// preload URL based
							var tmpImage = new Image();
							tmpImage.src = data.contents.chatimg; // preload the image, since there is time for it.
						}
						if (data.contents.type && showsource) {
							// preload URL based
							var tempShowType = new Image();
							tempShowType.src = "./sources/images/" + data.contents.type + ".png";
						}
					} catch (e) {
						warnlog(e);
					}
					
					
					if (queuetime){
						queue.push(data.contents);
						checkqueue(false);
					} else {
						showmessage(data.contents)
					}
					
					return true;
				} else if (data && ("contents" in data)) { // clear
					lastMessageId = null;
					clearTimeout(timeoutTimer);
					document.getElementById("output").classList.add(transitionType);
					clearTimeout(nextComment);
					
					checkqueue(true);

					if (isIFrame) {
						clearTimeout(iframeTimeout);
						iframeTimeout = setTimeout(function () {
							parent.postMessage({ resizeWindow: { height: "0px" } }, "*");
						}, 300);
					}

					sendToDisk(data.contents);
					return true;
				} else if (data.action){
					console.log(data);
					if (data.action === "toggleTTS" || data.action === "tts") {
						if ("value" in data){
							if (data.value == "toggle") {
								speech = !speech;
							} else if (data.value == "true") {
								speech = true;
							} else if (data.value == "false") {
								speech = false;
							} else if (data.value == "1") {
								speech = true;
							} else if (data.value == "0") {
								speech = false;
							} else if (data.value == "on") {
								speech = true;
							} else if (data.value == "off") {
								speech = false;
							} else if (data.value) {
								speech = true;
							} else {
								speech = false;
							}
						} else {
							speech = !speech;
						}
						console.log("TTS: "+speech);
						return speech
					}
				}
				return null;
			}
			
			function checkqueue(reset=true){
				if (reset && queueTimer){
					clearTimeout(queueTimer);
					queueTimer = null;
				}
				if (queuetime && queue.length && !queueTimer){
					lastMessageId = null;
					document.getElementById("output").classList.add(transitionType);
					clearTimeout(nextComment);
					showmessage(queue.shift());
				}
			}
			
			function showmessage(contents) {
				try {
					clearTimeout(timeoutTimer);
					
					if (!stacking) {
						document.getElementById("output").classList.add(transitionType);
					}
					clearTimeout(nextComment);

					if (isIFrame) {
						clearTimeout(iframeTimeout);
						iframeTimeout = setTimeout(function () {
							parent.postMessage({ resizeWindow: { height: "220px" } }, "*");
						}, 300);
					}

					if (queuetime) {
						queueTimer = setTimeout(checkqueue, queuetime);
					}
				
					nextComment = setTimeout(
						function (data) {
							var addImage = "";
							var largeImage = false;
							
							if (!data.chatmessage && data.contentimg){
								if (data.contentimg.includes('.mp4') || data.contentimg.includes('.webm')){
									data.chatmessage = '<video loop="true" autoplay="true" muted="true" id="img" src="' + data.contentimg + '"  onerror="this.parent.style.display=\'none\'" /></video>';
								} else {
									data.chatmessage = '<img id="img" src="' + data.contentimg + '"  onerror="this.parent.style.display=\'none\'" />';
								}
								largeImage = true;
							} else if (data.contentimg){
								if (data.contentimg.includes('.mp4') || data.contentimg.includes('.webm')){
									addImage = '<div id="imgContent" class="hl-imgContent"><video loop="true" autoplay="true" muted="true" id="img" src="' + data.contentimg + '"  onerror="this.parent.style.display=\'none\'" /></video></div>';
								} else {
									addImage = '<div id="imgContent" class="hl-imgContent"><img id="img" src="' + data.contentimg + '"  onerror="this.parent.style.display=\'none\'" /></div>';
								}
							} else {
								data.contentimg = "";
							}
							
							

							if (!data.chatimg) {
								data.chatimg = "";
							}
							var showType = "";
							
							if (!data.type) {
								data.type = "none";
							} else {
								data.type = data.type.toString();
								showType = data.type;
							}

							var customSourceClass = "sourceOffset";
							if (showType && showsource && avatar) {
								showType = '<img src="./sources/images/' + showType + '.png" class="icon sourcetype" data-icon-name="' + showType + '" onerror="this.style.display=\'none\'" />';
							} else if (showType && showsource && !avatar) {
								showType = '<img src="./sources/images/' + showType + '.png" class="icon sourcetype noavatar-source" data-icon-name="' + showType + '" onerror="this.style.display=\'none\'" />';
							} else {
								customSourceClass = "";
								showType = "";
							}

							if (data.sourceImg && customSource && avatar) {
								showType += '<img src="./sources/images/' + data.sourceImg + '" class="icon sourcetype ' + customSourceClass + '"  onerror="this.style.display=\'none\'" />';
							} else if (data.sourceImg && customSource && !avatar) {
								showType += '<img src="./sources/images/' + +data.sourceImg + '" class="icon sourcetype ' + customSourceClass + ' noavatar-source" onerror="this.style.display=\'none\'" />';
							}

							if (hideNames) {
								data.chatname = "";
							} else if (firstNamesOnly && data.chatname) {
								data.chatname = data.chatname.toString();
								var nn = data.chatname.split(" ");
								if (nn.length > 1) {
									if (nn[0].length <= 2) {
										if (nn[1].length < 6) {
											data.chatname = nn[0] + " " + nn[1];
										} else {
											data.chatname = nn[0];
										}
									} else {
										data.chatname = nn[0];
									}
								}
							} else if (!data.chatname) {
								data.chatname = "";
							} else {
								data.chatname = data.chatname.toString();
							}

							var memebershipHTML = "";

							if (data.hasMembership) {
								if (data.hasMembership===true){
									data.hasMembership = getTranslation("membership", "Membership");
								}
								// doesn't have subtitles; shouldn't at least.
								data.membership = data.hasMembership.toString();
								memebershipHTML = data.membership;
							} else if (data.membership) {
								if (data.membership===true){
									data.membership = getTranslation("membership", "Membership");
								} else {
									data.membership = data.membership.toString(); 
								}
								
								if (data.subtitle) {
									memebershipHTML = '<div class="donation membership"><div class="donation-title">' + data.membership.toUpperCase() + "</div><div class='subtitle'>" + data.subtitle + "</div></div>";
								} else {
									memebershipHTML = '<div class="donation membership"><div class="donation-title">' + data.membership.toUpperCase() + "</div></div>";
								}
							} else if (data.subtitle) {
								memebershipHTML = '<div class="donation membership"><div class="subtitle">' + data.subtitle + "</div></div>";
							} else {
								data.membership = "";
							}

							if (!data.chatmessage) {
								data.chatmessage = "";
							} else {
								data.chatmessage = data.chatmessage.toString();
							}

							var donationHTML = "";
							if (data.hasDonation) {
								if (data.type === "twitch") {
									let donationTitle = getTranslation("cheers", "CHEERS");
									if ("title" in data){
										donationTitle = data.title;
									}
									donationHTML = '<div class="donation"><div class="donation-title">'+ donationTitle +'</div><div class="subtitle">' + data.hasDonation + "</div></div>";
									
								} else if ((data.type == "youtube") || (data.type == "youtubeshorts")) {
									let donationTitle = getTranslation("donation", "DONATION");
									if ("title" in data){
										donationTitle = data.title;
									}
									if (memebershipHTML) {
										donationHTML = '<div class="donation">' + data.hasDonation + "</div>";
									} else {
										donationHTML = '<div class="donation"><div class="donation-title">'+ donationTitle +'</div><div class="subtitle">' + data.hasDonation + "</div></div>";
									}
									
								} else if (data.title){
									donationHTML = '<div class="donation"><div class="donation-title">'+ data.title +'</div><div class="subtitle">' + data.hasDonation + "</div></div>";
									
								} else {
									donationHTML = '<div class="donation">' + data.hasDonation + "</div>";
								}
							} else {
								data.hasDonation = "";
							}

							var backgroundColor = "";
							if (data.backgroundColor) {
								if (data.backgroundColor.startsWith("background-color:")) {
									backgroundColor = data.backgroundColor;
								} else {
									backgroundColor = "background-color:" + data.backgroundColor + ";";
								}
							}

							var styleOverride = backgroundColor;

							if (data.textColor) {
								if (data.textColor.startsWith("color")) {
									styleOverride += " " + data.textColor;
								} else {
									styleOverride += "color:" + data.textColor + ";";
								}
							}
							if (styleOverride) {
								styleOverride = ' style="' + styleOverride + '"';
							}

							var styleOverrideName = "";
							if (data.backgroundNameColor) {
								styleOverrideName = data.backgroundNameColor;
							}

							if (data.nameColor && colorized) {
								styleOverrideName += " color:" + data.nameColor + ";";
							} else if (data.textNameColor) {
								styleOverrideName += " " + data.textNameColor;
							}

							if (styleOverrideName) {
								styleOverrideName = 'style="' + styleOverrideName + '"';
							}

							var avatarImg = "";
							if (avatar) {
								if (data.backupChatimg) {
									avatarImg = '<div class="hl-img" ' + styleOverrideName + '><img id="img_' + data.id + '" src="' + data.chatimg + '" class="hl-profile-pic" data-backup-image="' + data.backupChatimg + '"onerror="errorImage(this);"></div>';
								} else {
									let chatimg = "";
									if (!data.chatimg){
										if (!data.chatname && data.event){
											chatimg = "./icons/announcement.png";
										} else {
											chatimg = "./sources/images/unknown.png";
										}
									} else {
										chatimg = data.chatimg
									}
									avatarImg = '<div class="hl-img" ' + styleOverrideName + '><img id="img_' + data.id + '" src="' + chatimg + '" class="hl-profile-pic" onerror="errorImage(this);"></div>';
								}
							} 

							var chatbadges = "";
							if (data.chatbadges && showbadges) {
								data.chatbadges.forEach(badge => {
									if (typeof badge == "object") {
										if (badge.type && badge.type == "img" && badge.src) {
											chatbadges += "<img class='hl-badge' src='" + badge.src + "' />";
										} else if (badge.type && badge.type == "svg" && badge.html) {
											chatbadges += "<span class='hl-badge'>" + badge.html + "</span>";
										}
									} else {
										chatbadges += "<img class='hl-badge' src='" + badge + "' />";
									}
								});
							}

							if (chatbadges) {
								chatbadges = '<div class="hl-badges" >' + chatbadges + "</div>";
							}

							if (stacking) {
								try {
									document.getElementById("message").id = "";
									document.getElementById("nameDIV").id = "";
									document.getElementById("newmessage").id = "";
								} catch (e) {}

								const messageId = 'msg_' + Date.now(); // Unique ID for the message
								
								// Create new elements
								const messageContainer = document.createElement('div');
								messageContainer.className = 'hl-c-cont highlight-chat stacked';
								messageContainer.id = messageId;
								messageContainer.setAttribute('data-source-type', data.type);

								// Create name div
								const nameDiv = document.createElement('div');
								nameDiv.className = 'hl-name';
								nameDiv.id = 'nameDIV_' + messageId;
								if (styleOverrideName) {
									nameDiv.setAttribute('style', styleOverrideName.replace(/style="/i, '').replace(/"$/,''));
								}
								nameDiv.innerHTML = data.chatname + chatbadges;
								messageContainer.appendChild(nameDiv);

								// Create message div
								const messageDiv = document.createElement('div');
								messageDiv.className = 'hl-message';
								messageDiv.id = 'message_' + messageId;
								if (styleOverride) {
									messageDiv.setAttribute('style', styleOverride.replace(/style="/i, '').replace(/"$/,''));
								}
								messageDiv.setAttribute('dir', textDirection);
								messageDiv.innerHTML = data.chatmessage;
								messageContainer.appendChild(messageDiv);

								// Add the remaining elements
								const remainingContent = document.createElement('div');
								remainingContent.innerHTML = avatarImg + showType + addImage + (donationHTML || memebershipHTML);
								while (remainingContent.firstChild) {
									messageContainer.appendChild(remainingContent.firstChild);
								}

								// Add the new message to output
								document.getElementById("output").appendChild(messageContainer);

								cleanupOldMessages();
								
								if (data.hasDonation || memebershipHTML) {
									messageContainer.classList.add("dono");
								}

								// Individual timeout for this message
								if (timeoutDelay) {
									setTimeout(() => {
										if (messageContainer && messageContainer.parentNode) {
											messageContainer.classList.add(transitionType);
											// Remove the element after transition completes
											setTimeout(() => {
												if (messageContainer && messageContainer.parentNode) {
													messageContainer.parentNode.removeChild(messageContainer);
												}
											}, 500); // Matches the CSS transition time
										}
									}, timeoutDelay);
								}
							} else {
								// Original non-stacking behavior remains unchanged
								document.getElementById("output").innerHTML = '<div class="hl-c-cont highlight-chat" id="newmessage" data-source-type="' + data.type + '">' +
									'<div class="hl-name" ' + styleOverrideName + ' id="nameDIV">' + data.chatname + chatbadges + "</div>" +
									'<div id="message" ' + styleOverride + ' class="hl-message" dir="' + textDirection + '" >' + data.chatmessage + "</div>" +
									avatarImg + showType + addImage + (donationHTML || memebershipHTML) + "</div>";

								if (data.hasDonation || memebershipHTML) {
									document.getElementById("newmessage").classList.add("dono");
								}
							}
							if (!data.chatname && !data.chatbadges) {
								document.getElementById("nameDIV").style.display = "none";
							}

							var fontsize = "";
							var limitchar = parseInt(window.innerWidth / 6.5);

							if (largeImage){
								document.getElementById("message").classList.add("largeImage");
							} else if (fontfit) {
								if (document.getElementById("message").innerText.length > limitchar) {
									fontsize = parseInt((limitchar * 100) / document.getElementById("message").innerText.length);
									if (fontsize < 43) {
										fontsize = 43;
									}

									if (data.textColor && !data.textColor.startsWith("color")) {
										document.getElementById("message").style = data.backgroundColor + "; color:" + data.textColor + "; font-size: " + fontsize + "%;";
									} else {
										document.getElementById("message").style = data.backgroundColor + " " + data.textColor + "; font-size: " + fontsize + "%;";
									}
								}
							}

							var username = data.username || data.chatname;
							if ((data.type == "twitch") && avatar && username) {
								if (!data.chatimg || data.chatimg.startsWith("https://api.socialstream.ninja")){
									var twitchImage = new Image();
									data.chatimg = "https://api.socialstream.ninja/twitch/large?username=" + encodeURIComponent(username);
									twitchImage.onload = function () {
										try {
											document.getElementById("img_" + data.id).src = data.chatimg;
										} catch (e) {}
									}.bind(data);
									twitchImage.src = data.chatimg;
								}
							}

							if (centering) {
								try {
									var offsetLeft = (parseInt(window.innerWidth) - parseInt(document.getElementById("message").clientWidth + 20)) / 2; // 20 and 15 are the offsets/margins used. might need to update if changed.
									offsetLeft -= 15;
									document.documentElement.style.setProperty("--highlight-chat-left", offsetLeft + "px");
								} catch (e) {}
							}

							for (i = 0; i < document.getElementsByTagName("img").length; i++) {
								try {
									if (data.type == "twitch" && document.getElementsByTagName("img")[i].src.includes("/light/")) {
										// dark mode
										document.getElementsByTagName("img")[i].srcBackup = document.getElementsByTagName("img")[i].src;
										document.getElementsByTagName("img")[i].src = document.getElementsByTagName("img")[i].src.replaceAll("/light/", "/dark/");
									}

									if (!document.getElementsByTagName("img")[i].onerror) {
										document.getElementsByTagName("img")[i].onerror = function () {
											if (this.srcBackup) {
												this.src = this.srcBackup;
												this.srcBackup = null;
												delete this.srcBackup;
											} else if (this.alt.length !== 2) {
												this.style.display = "none";
											} else {
												this.outerHTML = this.alt;
											}
										};
									}
									if (!document.getElementsByTagName("img")[i].onload) {
										document.getElementsByTagName("img")[i].onload = realign;
									}
								} catch (e) {}
							}
							document.getElementById("output").classList.remove(transitionType);

							
							
							if (speech) {
								var msgPlain = document.getElementById("message"); // text only
								//var msgPlain = document.getElementById('content_'+data.counter); // text only
								if (msgPlain) {
									msgPlain = (msgPlain.textContent || msgPlain.innerText || "")
										.replace(/[\u2700-\u27BF\uE000-\uF8FF\uD83C\uD800-\uDFFF\uD83E\uD810-\uDFFF\u2011-\u26FF]/g, "")
										.replace(/_/g, " ")
										.replace(/@/g, " ")
										.replace(/^!/, ""); // Remove emojis, underscores, and @ symbols, and check if it starts with '!'

									msgPlain = msgPlain.replace(/!+/g, " "); // Replace multiple '!' with a single space
									msgPlain = msgPlain.replace(/catJAM/gi, ""); // Remove 'catJAM' case-insensitively
									msgPlain = msgPlain.trim();
								}

								var chatname = "";
								if (data.chatname && ttsSpeakChatname) {
									chatname = data.chatname.toLowerCase().replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, "");
									chatname = chatname.replaceAll("_", " ");
									chatname = chatname.replaceAll("@", " ");
									chatname = chatname.replaceAll("!", " ");
								}

								
								if (data.hasDonation && (!(newmembertts || ttsclicked) || readDonos)) {
									var donoText = document.createElement("div");
									donoText.innerHTML = data.hasDonation;
									donoText = donoText.innerText.trim();
									donoText = donoText.toLowerCase().replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, "");
									donoText = donoText.replaceAll("_", " ");
									donoText = donoText.replaceAll("@", " ");
									donoText = donoText.replaceAll("!", " ");

									if (chatname) {
										///// NAME
										if (English) {
											if (msgPlain) {
												speak(chatname + " has donated " + donoText + " and says " + msgPlain);
											} else {
												speak(chatname + " has donated " + donoText);
											}
										} else if (msgPlain) {
											speak(chatname + "! ! .. " + donoText + "! ! .. " + msgPlain);
										} else {
											speak(chatname + "! ! .. " + donoText);
										}
									} else if (English) {
										// no name but english
										if (msgPlain) {
											speak("Someone has donated " + donoText + " and says " + msgPlain);
										} else {
											speak("Someone has donated " + donoText);
										}
									} else if (msgPlain) {
										// no name; not english
										speak(donoText + "! ! .. " + msgPlain);
									} else {
										speak(donoText);
									}
								} else if (msgPlain && newmembertts && data.event && (data.event == "newmember")){
									if (chatname) {
										// NAME
										if (English) {
											speak(chatname + " says! " + msgPlain);
										} else {
											speak(chatname + "! ! .. " + msgPlain);
										}
									} else if (English) {
										// NO NAME
										speak("Someone says! " + msgPlain);
									} else {
										speak(msgPlain);
									}
								} else if (msgPlain && ((!readDonos && !newmembertts && !ttsclicked) || (ttsclicked && data.clicked))) {
									// NO DONATION
									if (chatname) {
										// NAME
										if (English) {
											speak(chatname + " says! " + msgPlain);
										} else {
											speak(chatname + "! ! .. " + msgPlain);
										}
									} else if (English) {
										// NO NAME
										speak("Someone says! " + msgPlain);
									} else {
										speak(msgPlain);
									}
								}
							}

							if (timeoutDelay) {
								timeoutTimer = setTimeout(function () {
									lastMessageId = null;
									document.getElementById("output").classList.add(transitionType);
									clearTimeout(nextComment);
									checkqueue(true);
									
								}, timeoutDelay);
							}
						},
						500, // give time for the previous featured message to go fade/drop away
						contents
					);

					sendToDisk(contents);

					if (beep) {
						playtone();
					}

					if (newImageHandle && contents && contents.chatimg) {
						if (contents.type && contents.chatimg && ((contents.type == "youtube") || (contents.type == "youtubeshorts"))) {
							contents.chatimg = contents.chatimg.replace("=s32-", "=s512-"); // high, but meh.
							contents.chatimg = contents.chatimg.replace("=s64-", "=s512-");
						}
						if (contents.type && (contents.type == "twitch") && contents.chatname) {
							if (!contents.chatimg  || contents.chatimg.startsWith("https://api.socialstream.ninja")){
								contents.chatimg = "https://api.socialstream.ninja/twitch/large?username=" + encodeURIComponent(contents.chatname); // 150x150
							}
						}
						overwriteImage(contents.chatimg);
					}
				} catch(e){
					console.error(e);
				}
			}

			if (urlParams.has("js")) {
				// ie: &js=https%3A%2F%2Fvdo.ninja%2Fexamples%2Ftestjs.js
				console.warn("Third-party Javascript has been injected into the code. Security cannot be ensured.");
				var jsURL = urlParams.get("js");
				jsURL = decodeURI(jsURL);
				console.log(jsURL);
				// type="text/javascript" crossorigin="anonymous"
				var externalJavaascript = document.createElement("script");
				externalJavaascript.type = "text/javascript";
				externalJavaascript.crossorigin = "anonymous";
				externalJavaascript.src = jsURL;
				externalJavaascript.onerror = function () {
					console.warn("Third-party Javascript failed to load");
				};
				externalJavaascript.onload = function () {
					console.log("Third-party Javascript loaded");
				};
				document.head.appendChild(externalJavaascript);
			}
		</script>
	</body>
</html>