dock2.html

<html>
<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 - Dashboard</title>
	<meta name="title" content="Social Stream - Dashboard" />
	<link rel="icon" href="./icons/favicon.ico" />

	<style>
		:root {
			--show-emoji-only: flex ;
			--list-or-horizontal: flex;
			--show-donos-only: flex;
			--show-queue-only: flex;
			--scale-output-moz: scale(1.0);
			--scale-output: 1.0;
			--font-color: #FFF;
			--font-color-name: #DDD;
			--background-color: #34373D;
			--link-color: #5AF;
			--input-color: #FFF;
			--highlight-base: #FFF4;
			--highlight-base2: #4444;
			--highlight-compact: #3335;
			--highlight-compact2: #3333;
			--stylized-emoji: 140%;
			--stylized-img: 23px;
			--show-images: inline-block;
			--fade-out-time: 20s;
			--comment-font-size: unset;
			--message-line-height: 22px;
			--author-font-size: 17px;
			--electron-drag-fix: drag;
		}

		/*
			.noText {
				display: var(--show-emoji-only) !important;
			}

			.noDono {
				display: var(--show-donos-only) !important;
			}

			.highlight-chat:not(.queued) {
				display: var(--show-queue-only)!important;
			}
		*/

		#output {
			zoom: var(--scale-output);
			-moz-transform: var(--scale-output-moz);
			-moz-transform-origin: 0 0;
			width:100%;
		}
		.hl-badge{
			padding: 0px 2px 0px 0px;
			vertical-align: top;
			max-width: 100px;
			max-height: 20px;
			height:20px;
			display:inline-block;
			width: auto;
			object-fit: contain;
		}
		.hl-badge:last-child{
			padding: 0 4px 0px 0px;
		}

		a {
			color: var(--link-color);
			display: contents;
			text-decoration:none
		}

		.hl-img-content {
			max-width: 80px;
			margin: 0 2px;
			max-height: 30px;
		}

		/* 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;
		}

		body {
			font-family: 'Sora', Roboto, Arial, sans-serif;
			color: var(--font-color);
			margin: 0 0;
			background-color: var(--background-color);
			text-shadow: -2px -2px #000000, -2px -1px #000000, -2px 0px #000000, -2px 1px #000000, -2px 2px #000000, -1px -2px #000000, -1px -1px #000000, -1px 0px #000000, -1px 1px #000000, -1px 2px #000000, 0px -2px #000000, 0px -1px #000000, 0px 0px #000000, 0px 1px #000000, 0px 2px #000000, 1px -2px #000000, 1px -1px #000000, 1px 0px #000000, 1px 1px #000000, 1px 2px #000000, 2px -2px #000000, 2px -1px #000000, 2px 0px #000000, 2px 1px #000000, 2px 2px #000000;
			overflow-x: hidden;
			scrollbar-color:#666 #201c29;
		}

		::-webkit-scrollbar {
			width: 15px;
		}

		::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 13px rgb(0 0 0 / 90%);
			border-radius: 4px;
		}

		::-webkit-scrollbar-thumb {
			border-radius: 4px;
			-webkit-box-shadow: inset 0 0 16px rgb(150 150 150 / 100%);
			border: solid 3px transparent;
		}

		body > div {
			 -webkit-app-region: no-drag;
		}

		body.lightmode {
			font-weight: 500;
			text-shadow: -2px -2px #FFF, -2px -1px #FFF, -2px 0px #FFF, -2px 1px #FFF, -2px 2px #FFF, -1px -2px #FFF, -1px -1px #FFF, -1px 0px #FFF, -1px 1px #FFF, -1px 2px #FFF, 0px -2px #FFF, 0px -1px #FFF, 0px 0px #FFF, 0px 1px #FFF, 0px 2px #FFF, 1px -2px #FFF, 1px -1px #FFF, 1px 0px #FFF, 1px 1px #FFF, 1px 2px #FFF, 2px -2px #FFF, 2px -1px #FFF, 2px 0px #FFF, 2px 1px #FFF, 2px 2px #FFF;
		}

		body.lightmode input::placeholder {

				  color: black;
				  opacity: 1; /* Firefox */

		}
		body.lightmode #menu{
			background-color: #e9e9e9;
		}

		.fade-in-image {
			animation: fadeIn .2s;
		}

		@keyframes fadeIn {
		  0% { opacity: 0; }
		  99% { opacity: 0.2; }
		  100% { opacity: 1; }
		}

		.bot.compactmode {
			padding: 0;
		}

		.randommode {
			position:absolute!important;
			max-width: 20vw;
		}

		.hl-message{
			margin: auto 1px;
			overflow-wrap: anywhere;
			line-height: max(var(--message-line-height) , var(--comment-font-size));
			font-size: var(--comment-font-size);
		}

		.notcompactmode .hl-message img{
			height: 17px;
			max-height: 17px;
		}

		.hl-message img{
			position:relative;
			margin: auto 1px;
			padding: 0;
			display:inline-block;
			height: 24px;
			max-width: 24px;
			max-height: 24px;
		}


		img:first-child:not(:last-child){
			margin: auto 1px auto 5px;
		}

		img:not(:first-child):last-child{
			margin: auto 5px auto 1px;
		}

		.hl-message span > img{
			margin: auto 1px;
		}

		.highlight {
			background-color:yellow!important;
		}

		img {
			display:inline-block;
			max-width: 48px;
			max-height: 24px;
			position:relative;
			margin: auto;
			padding: 0;
			object-fit: contain;
			vertical-align: top;
		}

		.bot > .hl-message {
			padding: 5px 0 5px 5px;
			font-style: italic;
		}

		.hl-compact-message {
			-webkit-box-decoration-break: clone;
			box-decoration-break: clone;
			padding-left: 5px;
			display: inline-block;
			height: 23px;
		}

		.hl-badges {
			max-width:28px;
			max-height:28px;
			object-fit: contain;
			position:relative;
			top:-6px;
		}


		.highlight-chat {
			display:var(--list-or-horizontal);
			cursor:pointer;
			width:fit-content;
			background-color: var(--highlight-base);
			min-height: 24px;
		}

		.highlight-chat.expand{
			animation: expand 2s;
			overflow: hidden;
			word-break: break-all;
			line-break: anywhere;
		}


		.larger-emojis{
			top: 0px;
			position: relative;

		}

		.highlight-chat.larger-emojis{
			overflow: hidden;
		}


		.highlight-chat.compactmode.expand {
			padding-top: 3px;
			background-color: #0000;
		}

		.compactmode.expand.time-arrived {
			margin: auto 0;
		}
		.larger-emojis:not(.expand) .hl-message {
			line-height: 34px!important;
		}

		.highlight-chat.expand.larger-emojis{
			line-height: 30px;
			height: 40px;
			max-height: 40px;
		}

		.larger-emojis img:not(.hl-badge, .icon) {
			height: var(--stylized-img);
			max-width: var(--stylized-img);
			max-height: var(--stylized-img);
		}

		.hl-message img:not(.hl-badge, .icon) {
			display: var(--show-images);
		}

		.larger-emojis img.hl-badge{
			top: 3px;
			height: 22px;
			max-height: 22px;
		}
		.larger-emojis img.icon {
			top: 3px;
			height: 24px;
			max-height: 24px;
		}

		.hl-badge.svg {
			vertical-align: middle;
			object-fit: contain;
			display:inline-block;
			width: auto;
		}

		.notcompactmode>.highlight-chat>img.icon {
			top: 0px;
			margin: 1.6px 2px auto 1px;
		}


		.notcompactmode>.time-arrived {
			margin: 8px 2px auto 1px;
		}

		.notcompactmode:not(.expand)>.time-arrived {
			margin: 9.5px 2px auto 1px;
		}

		.larger-emojis.notcompactmode>.time-arrived{
			margin: 12px 2px auto 1px;
		}

		.larger-emojis.notcompactmode>img.icon {
			margin: 5px 2px auto 1px;
		}

		.larger-emojis.notcompactmode>.hl-name {
			margin: 2px 5px 0 5px;
		}

		div {
			display:inline-block;
		}

		.hide {
			display: none !important;
		}

		.queueid::before {
		    content: attr(data-qid);
		}

		.queueid[data-qid] {
			margin: auto 3px;
		}


		@keyframes expand {
            0% {
               max-width: 0px;
            }
			20% {
               max-width: 300px;
            }
			50% {
               max-width: 800px;
            }
			100% {
               max-width: 20000px;
            }
         }

		.hl-name {
			font-weight: 700;
			margin: auto 5px;
			position:relative;
			left: 0;
			width: fit-content;
			color: var(--font-color-name);
			display:inline-block;
			font-size: var(--author-font-size);
		}


		.notcompactmode>.hl-name{
			margin: 3.14px 5px 0 5px;
			min-width: max(135px,12vw);
			max-width: max(220px, 25vw);
			white-space: unset;
			min-height: 24px;
			line-height: max(var(--author-font-size) , var(--message-line-height));
		}

		@media only screen and (max-width: 310px){
			.notcompactmode>.highlight-chat {
				display: inline-block;
			}
		}
		@media only screen and (max-width: 180px){
			.time-arrived {
				display: none!important;
			}
		}

		.splitMode.hl-name{
		    text-align: right;
			min-width: 0;
			margin: 3.5px 5px 0 5px;
			white-space: unset;
			overflow: hidden;
			height: 24px;
			line-height: max(var(--author-font-size) , var(--message-line-height));
		}
		.leftside{
			min-width: max(300px,15vw);
			text-align: right;
			margin-right: 8px;
		}
		.leftside>img{
			top: 0px;
			margin: 2px 2px auto 1px;
		}
		.larger-emojis>.hl-name{
			height: 30px;
			line-height: 29px;
		}
		.notcompactmode>.highlight-chat{
			width:100%;
			padding: 2px 1px;
			margin: 0;
			min-height:27px;
		}

		.highlight-chat.odd:not(.expand){
			background-color: var(--highlight-base2);
		}

		.highlight-chat:hover {
			background-color: #AFA4;
		}

		.highlight-chat.compactmode{
			background-color: var(--highlight-compact);
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			padding-right:3px;
		}

		.highlight-chat.odd.compactmode:not(.expand){
			background-color: var(--highlight-compact2);
		}

		.highlight-chat.donation{
			background-color: #FEFFAD33;
		}

		.highlight-chat.odd.donation:not(.expand){
			background-color: #FDFF6533;
		}

		.highlight-chat.member{
			background-color: #ADFEFF33;
		}

		.highlight-chat.odd.member:not(.expand){
			background-color: #65FDFF33;
		}

		.donationAmount{
			text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #FFe60073, 0 0 40px #FFe60073, 0 0 50px #FFe60073, 0 0 60px #FFe60073, 0 0 70px #FFe60073;
			padding:5px;
			margin: auto;
			white-space: nowrap;
		}

		@-webkit-keyframes glow {
		    from {
				text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #FFe60073, 0 0 40px #FFe60073, 0 0 50px #FFe60073, 0 0 60px #FFe60073, 0 0 70px #FFe60073;
			}
			to {
				text-shadow: 0 0 20px #fff, 0 0 30px #FFff4da6, 0 0 40px #FFff4da6, 0 0 50px #FFff4da6, 0 0 60px #FFff4da6, 0 0 70px #FFff4da6, 0 0 80px #FFff4da6;
			}
		}

		a {
			pointer-events: none;
		}

		.time-arrived {
			font-size: 10px;
			display: inline-block;
			margin: auto 1px;
			padding-right: 1px;
			left: 2px;
			position: relative;
			white-space: nowrap;
		}

		#menu {
			position:fixed;
			top:0;
			right:0;
			display:block;
			background-color: #888;
			z-index:2;
			zoom: var(--scale-output);
		}

		#menu > button {
			display:inline-block;
			padding:5px;
			margin: 5px;
			background-color: #DDD2;
			opacity:0.9;
			-webkit-app-region: no-drag;
		}
		#menu > button:hover {
			background-color: #DDDF;
			cursor: pointer;
			opacity:1.0;
		}
		#menu > button.red {
			background-color: #FCC4;
		}
		#menu > button.green {
			background-color: #affdff!important;
			color: black!important;
		}
		#menu > button.red:hover {
			background-color: #FCCF;
		}

		#menu > button.blue {
			background-color: #99a8cc;
		}
		#menu > button.blue:hover {
			background-color: #99c8ff;
		}

		#menu > input {
			padding: 5px;
			background-color: var(--input-color);
			border: 1px solid black;
			border-radius: 5px;
			-webkit-app-region: no-drag;
		}
		#menu > input:focus {
		  background-color: var(--input-color);
		}

		#menu.darkmode > button {
			background-color: #0004;
			color:white;
		}
		#menu.darkmode > button:hover {
			background-color: #000F;
			opacity:1.0;
		}
		#menu.darkmode > button.blue {
			background-color: #99a8cc;
		}
		#menu.darkmode > button.red {
			background-color: #F004;
		}
		#menu.darkmode > button.blue:hover {
			background-color: #99c8ff;
		}
		#menu.darkmode > button.red:hover {
			background-color: #600F;
		}
		#menu.darkmode > input {
			background-color: #0004;
			color:white;
			border: 1px solid white;
		}
		#menu.darkmode > input:hover {
			background-color: #0000;
		}

		@media only screen and (max-width: 1000px){
			#menu > button {
				display:inline-block;
				padding:2px;
				margin: 1px;
				font-size:95%;
			}
			#menu > input {
				display:inline-block;
				padding:5px 4px;
				margin: 1px;
				font-size:85%;
				max-width: 110px;
			}
		}
		@media only screen and (max-width: 870px){
			#menu > button {
				display:inline-block;
				margin: 1px;
				font-size:80%;
			}
			#menu > input {
				display:inline-block;
				padding:5px 3px;
				margin: 1px;
				font-size:75%;
				max-width: 100px;
			}
		}
		@media only screen and (max-width: 640px){
			#menu > button {
				display:inline-block;
				margin: 0px;
				font-size:75%;
			}
			#menu > input {
				display:inline-block;
				padding:4px 2px;
				margin: 0px;
				font-size:70%;
				max-width: 80px;
			}
		}
		@media only screen and (max-width: 480px){
			#menu > button {
				display:inline-block;
				margin: 0px;
				font-size:70%;
			}
			#menu > input {
				display:inline-block;
				padding:3px 1px;
				margin: 0px;
				font-size:70%;
				max-width: 70px;
			}
		}

		.last-message{
			border: 3px white solid;
		}
		.pressed {
			background-color: #9C9C !important;
		}
		.queued {
			background-color: #99a8cc !important;
		}
		#pinned .queued {
			background-color: #9d99cc !important;
		}
		.icon {
			margin: 4px 2px auto 1px;
			border-radius: 50%;
		}

		.invert {
			filter: invert(1);
		}

		#jumpto {
			position: fixed !important;
			right: 20px;
			bottom: 20px;
		}

		#jumpto {
			position: fixed !important;
			right: 20px;
			bottom: 20px;
		}

		input[type="text"] {
			width: 110px;
		}
		input[type="text"]:focus {
			width: 170px;
		}
		#filter_messages{
			width: 45px;
		}
		#filter_messages:focus{
			width: 150px;
		}
		input[type="text"] {
			-webkit-transition: all 0.4s ease 0s;
			-moz-transition: all 0.4s ease 0s;
			-o-transition: all 0.4s ease 0s;
			transition: all 0.4s ease 0s;
		}
		input::placeholder{
			color: var(--input-color);
		}
		.hidden {
			display:none!important;
		}
		#pinned{
			position: sticky;
			top: 0!important;
			background-color: #712a65!important;
			left: 0;
			width: 100%;
			border-bottom: solid 2px #fff;
			z-index:1;
			zoom: var(--scale-output);
		}

		#pinned:empty {
		   display:none;
		}
		span.emoji{
			font-size: var(--stylized-emoji);
			top: -1px;
			position: relative;
			vertical-align: sub;
			text-shadow: 0 0 #0000;
		}

		.alignbottom {
			bottom: 0;
			position: absolute;
		}

		.fade {
			animation: fadeout var(--fade-out-time);
			webkit-transition: opacity 0.5s ease-in-out;
			-moz-transition: opacity 0.5 ease-in-out;
			-ms-transition: opacity 0.5 ease-in-out;
			-o-transition: opacity 0.5 ease-in-out;
			opacity: 0;
		}
		@keyframes fade {
	      0% {opacity:0;}
		  5% {opacity:1;}
		  95% {opacity:1;}
		  100% {opacity:0;}
		}

		.fadeout {
			animation: fadeout var(--fade-out-time);
			webkit-transition: opacity 0.5s ease-in-out;
			-moz-transition: opacity 0.5 ease-in-out;
			-ms-transition: opacity 0.5 ease-in-out;
			-o-transition: opacity 0.5 ease-in-out;
			opacity: 0;
		}

		@keyframes fadeout {
	      0% {opacity:1;}
		  95% {opacity:1;}
		  100% {opacity:0;}
		}

		.fadein {
			animation: fadein 1s;
			webkit-transition: opacity 0.5s ease-in-out;
			-moz-transition: opacity 0.5 ease-in-out;
			-ms-transition: opacity 0.5 ease-in-out;
			-o-transition: opacity 0.5 ease-in-out;
			opacity: 1;
		}
		@keyframes fadein {
	      0% {opacity:0;}
		  10% {opacity:0;}
		  100% {opacity:1;}
		}

		.swiperight {
		    animation: swiperight 1s;
		}
		@keyframes swiperight {
	      0% {transform: translateX(-100vw);}
		  100% {transform: translateX(0);}
		}

		.swipeleft {
		    animation: swipeleft 1s;
		}
		@keyframes swipeleft {
	      0% {transform: translateX(100vw);}
		  100% {transform: translateX(0);}
		}

		.swipeup {
		    animation: swipeup 1s;
		}
		@keyframes swipeup {
	      0% {transform: translateY(-100vh);}
		  100% {transform: translateY(0);}
		}

		.fadeout.swipeup {
			animation: fadeout var(--fade-out-time), swipeup 1s;
		}
		.fadein.swipeup {
		    animation:  fadein 2s, swipeup 1s;
		}

		.fadeout.fadein {
			animation: fadeout var(--fade-out-time), fadein 1s;
		}

		.swipeleft.fadein{
			 animation: swipeleft 1s, fadein 1s;
		}
		.swipeleft.fadeout {
			animation: fadeout var(--fade-out-time), swipeleft 1s;
		}

		.swiperight.fadein{
			 animation: swiperight 1s, fadein 1s;
		}
		.swiperight.fadeout{
			 animation: swiperight 1s, fadeout var(--fade-out-time);
		}

		.swipeup.fadeout {
		    animation: fadeout var(--fade-out-time), swipeup 1s;
		}

		.swipeleft.fadein.fadeout{
			 animation: swipeleft 1s, fadein 1s, fadeout var(--fade-out-time);
		}
		.swipeup.fadein.fadeout{
			 animation: swipeup 1s, fadein 1s, fadeout var(--fade-out-time);
		}
		.swiperight.fadein.fadeout{
			 animation: swiperight 1s, fadein 1s, fadeout var(--fade-out-time);
		}

		.electronDraggable {
			-webkit-app-region: var(--electron-drag-fix);
		}

		.context-menu {
			display: none;
			position: fixed;
			z-index: 10 !important;
			padding: 12px 0 !important;
			width: 240px !important;
			background-color: #fff !important;
			border: solid 1px #dfdfdf !important;
			box-shadow: 1px 1px 2px #cfcfcf !important;
		}
		.context-menu--active {
			display: block !important;
		}
		.context-menu__items {
			list-style: none !important;
			margin: 0;
			padding: 0;
		}
		.context-menu__item {
			display: block;
			margin-bottom: 4px !important;
			text-shadow: 0 0 black;
			cursor:pointer;
		}
		.context-menu__item:last-child {
			margin-bottom: 0 !important;
		}
		.context-menu__link {
			display: block;
			padding: 4px 12px;
			color: #0066aa;;
			text-decoration: none;
		}
		.context-menu__item:hover>*{
			color: #fff !important;
		}
		.context-menu__item:hover {
			color: #fff !important;
			background-color: #0066aa !important;
		}
		.context-menu__tip {
			margin-left: 15px;
			color: #777;
			margin-top: 10px;
			padding-top: 10px;
			position: relative;
			top: 7px;
		}
	</style>
</head>
<body class='electronDraggable'>
	<div id="pinned" class="output notcompactmode"></div>
	<div id="output" class="output notcompactmode"></div>
	<div id="menu" class="electronDraggable">
		<button id="select_save_file" data-state="0" onclick="overwriteFile('setup');" title="Select the file you wish to save the most recent message to" class="green hidden">💾 Set Save File Location</button>
		<button id="next_in_queue" data-state="0" onclick="nextInQueue();" title="Hold CTRL when selecting messages to add them to the queue instead" class="hidden blue">Next in Queue</button>
		<button id="show_only_queue" data-state="0" onclick="filterQueued(this);" title="Show only the messages in queue" class="hidden">Show Only Queued</button>
		<button id="clear_overlay" data-state="0" onclick="sendDataP2P(false);" title="Clear the featured chat overlay. (Not this dock)" class="red">Clear Current Overlay</button>
		<button id="pause" data-state="0" onclick="pause(this);" title="Pause incoming chat messages">⏯︎</button>
		<button id="autoshow" data-state="0" onclick="autoShow(this);" title="Auto-feature chat messages as they come in">Auto</button>
		<button id="tts" data-state="0" onclick="speech = !speech; window.speechSynthesis.cancel(); this.classList.toggle('pressed');" title="Toggle whether to read out-loud incoming messages using text-to-speech">🔊</button>
		<button id="notify" data-state="0" onclick="beep = !beep; if (beep){this.classList.add('pressed');this.innerText = '🔕';playtone();} else {this.classList.remove('pressed');this.innerText = '🔔';}" title="Beep when there is a new message">🔔</button>
		<input id="filter_messages" onchange="filterMessages(this.value);" placeholder="Filter messages" type="text" />
		<button id="hide_emoji" data-state="0" onclick="emoji(this);" title="Hide all emoji-only messages">🚫🙂</button>
		<button id="only_donos" data-state="0" onclick="donos(this);" title="Show only messages that have donations/cheer">🤑</button>
		<button id="say_hello" data-state="0" onclick="toggleChat();" title="Send a text message to all social endpoints">💬</button>
		<input type="text" id="chatInput" style="display:none;" placeholder="Say something.." />
		<button id="jumpto" data-state="0" onclick="jumptoBottom(this);" title="Jump to bottom">V</button>
	</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>
	<nav id="context-menu" class="context-menu">
		<ul class="context-menu__items">
			<li class="context-menu__item"  data-action="Delete">
				<a href="#" class="context-menu__link" data-action="Delete">
					<i class="las la-external-link"></i>
					<span>Delete Message</span>
				</a>
			</li>
			<li class="context-menu__item" data-action="Queue">
				<a href="#" class="context-menu__link" data-action="Queue">
					<i class="las la-paperclip"></i>
					<span>Toggle Queue</span>
				</a>
			</li>
			<li class="context-menu__item" data-action="Pin">
				<a href="#" class="context-menu__link" data-action="Pin">
					<i class="las la-pen"></i>
					<span>Toggle Pin</span>
				</a>
			</li>
			<li class="context-menu__item" data-action="TTS">
				<a href="#" class="context-menu__link" data-action="TTS">
					<i class="las la-pen"></i>
					<span>Text to Speech</span>
				</a>
			</li>
		</ul>
	</nav>
	<script>
	window.onerror = function backupErr(errorMsg, url=false, lineNumber=false) {
		console.error(errorMsg);
		console.error(lineNumber);
		console.error("Unhandled Error occured"); //or any message
		return false;
	};

	function getById(id) { // js helper
		var el = document.getElementById(id);
		if (!el) {
			el = document.createElement("span"); // create a fake element
		}
		return el;
	}

	(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);
	var channel = null;
	var iframe = null;
	var queue = [];
	var selectedQueue = [];
	var datestamp = true;
	var nextComment = null;
	var roomID = "test";
	var messageTimeout = 0;
	var filtering = false;
	var applyCustomActions = false;
	var showsource = true;
	var compactmode = false;
	var darkmode = null;
	var scale = 1;
	var forceAutoscroll = false;
	var triggerState = true;
	var emojis = true;
	var pauseState = false;
	var timeoutTimer = null;
	var isOBSBrowserSource = false;
	var customNodeLimit = false;
	var body = document.body;
	var html = document.documentElement;
	var mainOutputWindow = document.getElementById("output");
	var fileStream, writer; // streaming message writer
	var newFileHandle = false; // single message writer
	var singlewriter = false;
	var odd = false;
	var showbadges = true;
	var colorized = false;
	var horizontal = false;
	var autoTimeoutEnabled = true;

	var encode = false;

	try{
		if (electronApi){ // fix for electron dragging.
			document.body.style.width = "95%";
			setTimeout(function(){
				document.body.style.width = "100%";
			},1000);

			setTimeout(function(){
				document.body.style.width = "98%";
			},2000);

			setTimeout(function(){
				document.body.style.width = "100%";
			},5000);
		}
	} catch(e){
		//console.error(e);
	}

	var timeoutDelay = 0;
	if (urlParams.has("showtime")){
		timeoutDelay = parseInt(urlParams.get("showtime")) || 20000;
		document.documentElement.style.setProperty("--fade-out-time", parseFloat(timeoutDelay/1000)+"s");
	}

	if (urlParams.has("disabletimeout")) {
		autoTimeoutEnabled = 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.");
		if (roomID){
			var href = window.location.href;
			var arr = href.split('?');
			var newurl;
			if (arr.length > 1 && arr[1] !== '') {
				newurl = href + '&session=' + roomID;
			} else {
				newurl = href + '?session=' + roomID;
			}
			window.history.pushState({path: newurl.toString()}, '', newurl.toString());
		} else {
			alert("You need to provide your extension's session ID for this page to work");
		}
	} else {
		window.location.href = "https://github.com/steveseguin/live-chat-overlay#readme";
	}

	var password = "false";
	if (urlParams.has("password")){
		password = urlParams.get("password") || "false";
	}

	if (urlParams.has("nodate") || urlParams.has("notimestamp") || urlParams.has("notime")){
		datestamp = false;
	}

	if (urlParams.has("hidesource")){
		showsource = false;
	}

	var splitMode = "";
	if (urlParams.has("split")){
		splitMode = " splitMode";
	}

	if (urlParams.has("alignbottom")){
		document.getElementById("output").classList.add("alignbottom");
	}

	var attachmentsonly = false;
	if (urlParams.has("attachmentsonly")){
		attachmentsonly = true;
	}

	var stripHTML = false;
	if (urlParams.has("strip") || urlParams.has("striphtml")){ // removes HTML from messages, donations, and names.
		stripHTML = true;
	}

	var audioContext = new AudioContext();
	var timeoutTone = null;

	function playtone(tonename="testtone") {
		if (timeoutTone){return;}

		setTimeout(function(){
			timeoutTone = false;
		},500);

		if (audioContext.state == "suspended"){
			audioContext.resume();
		}
		if (audioContext.state == "suspended"){
			return
		}
		var toneEle = document.getElementById(tonename);
		if (toneEle){
			toneEle.volume = 1.0;
			toneEle.play().then(()=>{console.log("BEEP");}).catch((e)=>{
				console.error(e);
			});
			timeoutTone = true;
		}

	}

	if (urlParams.has('css')){
		var cssURL = urlParams.get('css');
		cssURL = decodeURI(cssURL);

		var cssStylesheet = document.createElement('link');
		cssStylesheet.rel = 'stylesheet';
		cssStylesheet.type = 'text/css';
		cssStylesheet.media = 'screen';
		cssStylesheet.href = 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");
			var css = decodeURIComponent(atob(base64Css)); // window.btoa(encodeURIComponent("#mainmenu{background-color: pink; ❤" ));
			var cssStyleSheet = document.createElement("style");
			cssStyleSheet.innerText = css;
			document.querySelector("head").appendChild(cssStyleSheet);
		} catch(e){console.error(e);}
	};

	var transitionType = [];

	if (urlParams.has("fadein")){
		transitionType.push("fadein");
	}

	if (urlParams.has("fadeout")){
		transitionType.push("fadeout");
	}

	if (urlParams.has("swiperight")){
		transitionType.push("swiperight");
	}

	if (urlParams.has("swipeleft")){
		transitionType.push("swipeleft");
	}

	if (urlParams.has("swipeup")){
		transitionType.push("swipeup");
	}

	var reversed = false;
	if (urlParams.has("reverse")){
		reversed = true;
		forceAutoscroll=false;
		document.getElementById("output").style.flexDirection = "column-reverse";
		document.getElementById("output").style.display = "flex";
	}

	if (urlParams.has("dropdown")){
		reversed = true;
		forceAutoscroll=false
		document.getElementById("output").style.flexDirection = "column-reverse";
		document.getElementById("output").style.display = "flex";
		transitionType.push("swipeup");
	}

	var beep = false;
	if (urlParams.has("beep")){ // removes HTML from messages, donations, and names.
		beep = true;
		document.getElementById("notify").innerHTML = "🔕";
		document.getElementById("notify").classList.add("pressed");
		playtone();
	}

	var stylizeEmoji = false;
	if (urlParams.has("emoji") || urlParams.has("emojis")){
		stylizeEmoji = urlParams.get("emoji") || urlParams.get("emojis") || "140%";
		document.documentElement.style.setProperty("--stylized-emoji", stylizeEmoji);
		document.documentElement.style.setProperty("--message-line-height", "30px");
		document.documentElement.style.setProperty("--stylized-img", "35px");

	}

	var flexOrNotToFlex = "flex";

	if (urlParams.has("horizontal")){
		horizontal = true;
		flexOrNotToFlex = "inline-block";
		document.documentElement.style.setProperty("--list-or-horizontal", flexOrNotToFlex);
		document.getElementById("output").style.width = "10000%";
		document.getElementById("output").style.right = "0";
		if (stylizeEmoji){
			document.getElementById("output").style.maxHeight = "40px";
		} else {
			document.getElementById("output").style.maxHeight = "30px";
		}
		document.getElementById("output").style.overflow = "hidden";
		document.getElementById("output").style.position = "absolute";
		document.getElementById("output").style.textAlign = "right";
		document.getElementById("output").style.whiteSpace = "nowrap";
		document.getElementById("output").classList.remove("notcompactmode");
		document.getElementById("menu").style.top = "42px";
		compactmode = true;
		customNodeLimit = 15;
	}

	var avatars = true;
	if (urlParams.has("noavatar") || urlParams.has("noavatars")){
		avatars = false;
	}

	if (urlParams.has("limit")){
		customNodeLimit = parseInt(urlParams.get("limit")) || 100;
	}

	if (urlParams.has("hidebadges") || urlParams.has("nobadges")){
		showbadges = false;
	}

	if (urlParams.has("colorednames") || urlParams.has("color")){
		colorized = true;
	}


	custombot = false;
	if (urlParams.has("myname") || urlParams.has("botlist")){
		custombot = urlParams.get("myname") || urlParams.get("botlist") || false;
		if (custombot){
			custombot = decodeURIComponent(custombot);
			custombot = custombot.toLowerCase().replace(/[^a-z0-9,_]+/gi, "");
			custombot = custombot.split(",");
		}
	}

	var doNotShowBot = false;
	if (urlParams.has("hidebots")){
		doNotShowBot = true;
	}

	var autoshow = false;
	var autoshowdonos = false;

	if (urlParams.has("autoshow")){
		autoshow = true;
		document.getElementById("autoshow").classList.add("pressed");
	}

	var autoShowQueue = [];

	if (urlParams.has("autoshowdonos")){
		autoshowdonos = true;
	}

	if (urlParams.has("scale")){
		scale = urlParams.get("scale") || 1.0;
		scale = parseFloat(scale);
		document.documentElement.style.setProperty("--scale-output", scale);
		document.documentElement.style.setProperty("--scale-output-moz", "scale("+scale+")");
	}

	var conCon = 1;
	var socketserver = false;
	var serverURL = "wss://api.overlay.ninja";

	function setupSocket(){
		socketserver.onclose = function (){
			setTimeout(function(){
				conCon+=1;
				socketserver = new WebSocket(serverURL);
				setupSocket();
			},100*conCon);
		};
		socketserver.onopen = function (){
			conCon = 1;
			socketserver.send(JSON.stringify({"join":roomID, "out":2, "in":1}));
		};
		socketserver.addEventListener('message', function (event) {
			var resp = false
			if (event.data){
				var data = JSON.parse(event.data);
				processInput(data);
				if (data.get){
					var ret = {};
					ret.callback = {};
					ret.callback.get = data.get
					ret.callback.result = true;
					socketserver.send(JSON.stringify(ret));
				}
			}
		});
	}
	if (urlParams.has("server")){
		serverURL = urlParams.get("server") || serverURL;
		socketserver = new WebSocket(serverURL);
		setupSocket();
	}

	var customSource = false;
	if (urlParams.has("branded")){
		customSource = true;
	}

	var speechLang = "en-US";
	var speech = false;
	var English = true;
	var voice = false;
	var voices = window.speechSynthesis.getVoices();
	
	//var voiceGender = false;   // I'll need to add the Google Speech API to the dock to make this work
	//if (urlParams.has("gender")){
	//	voiceGender = urlParams.get("gender") || "MALE";
	//}

	if (urlParams.has("speech") || urlParams.has("speak") || urlParams.has("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") || speechLang;

		if (speechLang.split("-")[0].toLowerCase() == "en"){
			English = true;
		} else {
			English = false;
		}
	} else
	
	if (urlParams.has("language") || urlParams.has("lang") || urlParams.has("ln")){
		speechLang = urlParams.get("language") || urlParams.get("lang") || urlParams.get("ln") || speechLang;
		if (speechLang.split("-")[0].toLowerCase() == "en"){
			English = true;
		} else {
			English = false;
		}
	}

	var pitch = 1;
	if (urlParams.has("pitch")){
		pitch = urlParams.get("pitch") || 1;
	}

	var rate = 1;
	if (urlParams.has("rate")){
		rate = urlParams.get("rate") || 1;
	}

	var volume = 1;
	if (urlParams.has("volume")){
		volume = urlParams.get("volume") || 1;
	}

	var voiceName = false;
	if (urlParams.has("voice")){
		voiceName = urlParams.get("voice") || "google";
	}

	function speak(text, allow=false){
		console.log(text);
		if (!speech && !allow){return;}
		if (!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 == speechLang)){
						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 == speechLang)){
					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);
	}

	if (urlParams.has("chroma")){
		var chroma = urlParams.get("chroma") || "0F0";
		document.body.style.backgroundColor = "#"+chroma;
	}

	if (urlParams.has("compact") || urlParams.has("overlaymode")){
		compactmode = true;
		document.getElementById("output").classList.remove("notcompactmode");
		//document.getElementById("menu").style.display = "none";
	}

	if (urlParams.has("hidemenu") || urlParams.has("nomenu")){
		document.getElementById("menu").style.display = "none";
	}

	if (urlParams.has("save")){
		encode = TextEncoder.prototype.encode.bind(new TextEncoder);
		setupSaveToDisk();
	}

	if (urlParams.has("savesingle")){
		singlewriter = true;
		document.getElementById("select_save_file").classList.remove('hidden');
		//overwriteFile(); // setup , but this needs a gesture, so bleh
	}

	var random = false;
	if (urlParams.has("random")){
		random = true;
		// enable compact mode also
		compactmode = true;
		document.getElementById("output").classList.remove("notcompactmode");
		document.getElementById("menu").style.display = "none";
		// hide shadows
		<!-- position: absolute; -->
		<!-- left: 400px; -->
		<!-- top: 0px; -->
		<!-- max-width: 300px; -->
	}

	var postServer = "http://127.0.0.1";
	var thirdPartyAPI = false;
	if (urlParams.has("singular")){
		thirdPartyAPI = function (data){
			var API = "https://app.singular.live/apiv1/datanodes/"+urlParams.get("singular")+"/data";

			data.chatimg = upscaleImages(data);

			var message = {"payload": data};
			ajax(message, API, "PUT");
		};
	} else if (urlParams.has("postserver")){
		postServer = urlParams.get("postserver") || postServer;
		thirdPartyAPI = function (data){

			data.chatimg = upscaleImages(data);

			ajax(data, postServer, "POST");
		};
	} else if (urlParams.has("putserver")){
		postServer = urlParams.get("putserver") || postServer;
		thirdPartyAPI = function (data){

			data.chatimg = upscaleImages(data);

			ajax(data, postServer, "PUT");
		};
	} else if (urlParams.has("spxserver") && urlParams.has("spxfunction") && urlParams.has("spxlayer")) {
		let spxserver = urlParams.get("spxserver") || postServer;
		let spxfunction = urlParams.get("spxfunction") || "";
		let spxlayer = urlParams.get("spxlayer") || "";

		thirdPartyAPI = function (data){
			var msg = {};
			if ("id" in data){
				msg.id = data.id;
			}

			if (data.timestamp){
				msg.timestamp = data.timestamp;
			} else {
				msg.timestamp = Date.now();
			}


			msg.message = data.chatmessage || "";
			msg.displayName = data.chatname || "";
			msg.profileImageUrl = upscaleImages(data);

			if (data.type){
				msg.platform = {};
				msg.platform.name = data.type;
				msg.platform.logoUrl = "https://socialstream.ninja/"+data.type+".png";
			}

			params = encodeURIComponent(JSON.stringify(msg));

			if (params.length > 3000) {
				console.log("dropping message due to request length");
				return; // HTTP request too long due to twitch emoji spam, skipping this message.
			}
			postServer = spxserver + "/api/v1/invokeTemplateFunction?webplayout=" + spxlayer + "&function=" + spxfunction + "&params=" + params;

			const spxRequest = new XMLHttpRequest();
			spxRequest.onreadystatechange = function() {
				console.log(spxRequest.responseText);
			  if (spxRequest.readyState === 4 && spxRequest.status === 200) {
			  }
			}
			spxRequest.open('GET', postServer);
			spxRequest.send();
		};
	} else if (urlParams.has("h2r") || urlParams.has("h2rurl")){

		postServer = "http://127.0.0.1:4001/data/";

		if (urlParams.has("h2rurl")){
			postServer = urlParams.get("h2rurl") || postServer;
		}
		if (urlParams.has("h2r")){
			postServer = postServer + urlParams.get("h2r");
		}
		thirdPartyAPI = function (data){

			var msg = {};

			if ("id" in data){
				msg.id = data.id;
			}

			if (data.timestamp){
				msg.timestamp = data.timestamp;
			} else {
				msg.timestamp = Date.now();
			}

			msg.snippet = {};
			msg.snippet.displayMessage = data.chatmessage || "";

			msg.authorDetails = {};
			msg.authorDetails.displayName = data.chatname || "";
			msg.authorDetails.profileImageUrl = upscaleImages(data);

			if (data.type){
				msg.platform = {};
				msg.platform.name = data.type;
				msg.platform.logoUrl = "https://socialstream.ninja/"+data.type+".png";
			}

			var h2r = {};
			h2r.messages = [];
			h2r.messages.push(msg);
			ajax(h2r, postServer, "POST");
		};
	}

	function upscaleImages(data){ // for third party APIs
		let chatimg = "";
		if (data.type && (data.type == "twitch") && data.chatname){
			chatimg = "https://api.socialstream.ninja/twitch/large?username="+encodeURIComponent(data.chatname); // 150x150
		} else if (data.type && (data.type == "youtube") && data.chatimg){
			chatimg = data.chatimg.replace("=s32-", "=s256-");
			chatimg = chatimg.replace("=s64-", "=s256-");
		} else {
			chatimg = data.chatimg || "https://socialstream.ninja/unknown.png";
		}
		return chatimg;
	}

	function ajax(object2send, url, ajaxType="PUT"){
		  var xhttp = new XMLHttpRequest();
		  xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				// success
			} else {
				console.error("there was an error sending to the API");
			}
		  };
		  xhttp.open(ajaxType, url, true); // async = true
		  xhttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
		  xhttp.send(JSON.stringify(object2send));
	}

	if (urlParams.has("showmenu")){
		document.getElementById("menu").style.display = "block";
	} else {
		try {
			if (window.obsstudio){
				window.obsstudio.getStatus(function(obsStatus){
					document.getElementById("menu").style.display = "none";
					document.body.style.overflow = "hidden";
					mainOutputWindow.style.overflow = "hidden";
					triggerState=false;
					forceAutoscroll=true;
					//compactmode=true;
					//mainOutputWindow.classList.remove("notcompactmode");
					scale = scale*2.0
					document.documentElement.style.setProperty("--scale-output", scale);
					document.documentElement.style.setProperty("--scale-output-moz", "scale("+scale+")");
					isOBSBrowserSource = true;
				});
			}
		} catch(e){}
	}

	if (urlParams.has("darkmode")){
		darkmode=true;
	} else if (urlParams.has("lightmode")){
		darkmode=false;
	}

	var syncDocks = false;
	if (urlParams.has("sync")){
		syncDocks = true;
	}

	if (darkmode){
		document.getElementById("menu").classList.add("darkmode");
		document.documentElement.style.setProperty("--background-color", "#000");
	} else if (darkmode === null){ // defaultmode
		document.getElementById("menu").classList.add("darkmode");
		darkmode = true;
	} else {
		document.body.classList.add("lightmode");
		document.documentElement.style.setProperty("--input-color", "#FFF");
		document.documentElement.style.setProperty("--link-color", "#06F");
		document.documentElement.style.setProperty("--font-color-name", "#000");
		document.documentElement.style.setProperty("--background-color", "#FFF0");
		document.documentElement.style.setProperty("--font-color", "#000");
		document.documentElement.style.setProperty("--highlight-base2", "#EEE4", "important");
	}

	if (urlParams.has("hideshadow")){ // alternating
		document.documentElement.style.setProperty("--highlight-base", "#0000", "important");
		document.documentElement.style.setProperty("--highlight-base2", "#0000", "important");
		document.documentElement.style.setProperty("--highlight-compact", "#0000", "important");
		document.documentElement.style.setProperty("--highlight-compact2", "#0000", "important");
	}

	if (urlParams.has("nooutline")){
		document.body.style.textShadow = "0 0 black";
	}

	if (urlParams.has("transparent")){
		document.documentElement.style.setProperty("--background-color", "#0000", "important");
	}


	var firstNamesOnly = false
	if (urlParams.has("firstnamesonly") || urlParams.has("firstname") || urlParams.has("firstnames")){
		firstNamesOnly = true;
	}

	var hideNotDonos = false;
	var hideTextOnly = false;
	var hideNotQueued = false;

	if (urlParams.has("queueonly")){
		hideNotQueued = true;
		document.getElementById("show_only_queue").dataset.state = "1";
		document.getElementById("show_only_queue").classList.add("pressed");
	}

	function emoji(ele){
		if (ele.dataset.state=="0"){
			ele.dataset.state = "1";
			hideTextOnly = true;
			//document.documentElement.style.setProperty("--show-emoji-only", "none");
			//document.documentElement.style.setProperty("--show-images", "none");
			ele.classList.add("pressed");
		} else {
			hideTextOnly = false;
			ele.dataset.state = "0";
			//document.documentElement.style.setProperty("--show-emoji-only", "flex");
			//document.documentElement.style.setProperty("--show-images", "inline-block");
			ele.classList.remove("pressed");
		}
		redoOdd();
	}

	var lastPushed = Date.now();
	var checkTimeout = null;
	function checkAutoShow(){
		clearTimeout(checkTimeout);
		if (lastPushed + 1500 < Date.now()){
			if (autoShowQueue.length){
				var post = autoShowQueue.shift();
				if (post.classList.contains("pressed")){
					if (autoShowQueue.length){
						checkAutoShow();
					}
					return;
				} else {
					selectedMessage(false, post);
				}
			}
		}
		if (autoShowQueue.length>10){
			autoShowQueue.shift(); // skip oldest, since too many are queued up
			checkTimeout = setTimeout(function(){checkAutoShow()},1600);
		} else if (autoShowQueue.length>3){
			checkTimeout = setTimeout(function(){checkAutoShow()},1600);
		} else if (autoShowQueue.length){
			checkTimeout = setTimeout(function(){checkAutoShow()},2500);
		}
	}

	function donos(ele){
		if (ele.dataset.state=="0"){
			ele.dataset.state = "1";
			//document.documentElement.style.setProperty("--show-donos-only", "none");
			hideNotDonos = true;
			ele.classList.add("pressed");
		} else {
			ele.dataset.state = "0";
			//document.documentElement.style.setProperty("--show-donos-only", flexOrNotToFlex);
			hideNotDonos = false;
			ele.classList.remove("pressed");
		}
		redoOdd();
	}

	function applyHiddenState(node){
		if (hideNotDonos && node.classList.contains("noDono")){
			node.classList.add("hidden");

		} else if (hideNotQueued && !node.classList.contains("queued") && !node.classList.contains("pinned")){
			node.classList.add("hidden");

		} else if (hideTextOnly && node.classList.contains("noText")){
			node.classList.add("hidden");

		} else {
			node.classList.remove("hidden");
		}
	}

	function redoOdd(){
		odd = false;
		var nodes = mainOutputWindow.childNodes;
		for (var i = 0;i<nodes.length;i++){
			applyHiddenState(nodes[i]);
			var style = window.getComputedStyle(nodes[i]);
			if ((style.visibility !== "hidden") && (style.display !== "none")){
				if (odd){
					nodes[i].classList.add("odd");
				} else {
					nodes[i].classList.remove("odd");
				}
				odd = !odd;
			}
		}
	}

	function toggleTriggers(ele){
		triggerState = !triggerState;
		if (triggerState){
			ele.classList.add("pressed");
		} else {
			ele.classList.remove("pressed");
		}
	}

	function autoShow(ele){
		autoshow = !autoshow;
		if (autoshow){
			ele.classList.add("pressed");
		} else {
			ele.classList.remove("pressed");
		}
	}
	function pause(ele){
		pauseState = !pauseState;

		ele.innerHTML = "⏯︎";

		if (pauseState){
			ele.classList.add("pressed");
		} else {
			ele.classList.remove("pressed");
			var queueR = queue.reverse();
			queue = [];
			if (!pauseState){
				for (var i = 0 ; i<queueR.length; i++){
					processData( queueR[i] );
				}
			}
		}
	}

	try {
		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 processInput(data){
		if ("mid" in data){
			if (data.mid && syncDocks){

				if (autoTimeoutEnabled){
					lastPushed = Date.now();
				}

				try {
					document.querySelector("[data-mid='"+data.mid+"']").classList.add("pressed");
				} catch(e){
					setTimeout(function(mid){
						try{
							document.querySelector("[data-mid='"+mid+"']").classList.add("pressed");
						} catch(e){}
					},500, data.mid); // if delayed, we will try again.
				}
				return true
			}
			return;
		} else if ("pin" in data){
			if (data.pin && syncDocks){
				if (typeof data.pin == "object"){
					data.pin.forEach(mid=>{
						try {
							pinIt(document.querySelector("[data-mid='"+mid+"']"));
							applyHiddenState(document.querySelector("[data-mid='"+mid+"']"));
						} catch(e){

						}
					});
					return true
				}
			}
			return;
		} else if ("unpin" in data){
			if (data.unpin && syncDocks){
				if (typeof data.unpin == "object"){
					data.unpin.forEach(mid=>{
						try {
							unpinIt(document.querySelector("[data-mid='"+mid+"']"));
							applyHiddenState(document.querySelector("[data-mid='"+mid+"']"));
						} catch(e){

						}
					});
					return true
				}
			}
			return;
		} else if ("queueInit" in data){
			if (data.queueInit && syncDocks && !selectedQueue.length){
				if (typeof data.queueInit == "object"){
					var sq = [];
					data.queueInit.forEach(dd=>{
						try{
							if (dd && dd.id){
								var ele = document.querySelector("[data-mid='"+dd.id+"']");
								if (!ele){
									ele = processInput(dd);
								}
								if (ele){
									sq.push(ele);
									ele.children[0].dataset.qid = sq.length;
									ele.classList.add("queued");
									applyHiddenState(ele);
								}
							}
						}catch(e){}
					});
					selectedQueue = sq;
					updateQueueButton();
					return true
				}
			}
			return;
		} else if ("queue" in data){
			if (data.queue && syncDocks){
				if (typeof data.queue == "object"){
					selectedQueue.forEach(xx=>{
						if (xx.dataset.mid && !data.queue.includes(parseInt(xx.dataset.mid))){
							removeQueue(xx);
						}
					});
					var sq = [];
					data.queue.forEach(mid=>{
						try{
							if (mid){
								var ele = document.querySelector("[data-mid='"+mid+"']");
								if (ele){
									sq.push(ele);
									ele.children[0].dataset.qid = sq.length;
									ele.classList.add("queued");
									applyHiddenState(ele);
								}
							}
						}catch(e){}
					});
					selectedQueue = sq;
					updateQueueButton();
					return true
				}
			}
			return;
		} else if ("deleteMessage" in data){
			//if (syncDocks){
				try{
					var ele = document.querySelector("[data-mid='"+data.deleteMessage+"']");
					if (ele){
						ele.remove();
					}
					return true
				} catch(e){}
			//}
			return;
		}



		if (data.action){
			if (data.action == "nextInQueue"){
				nextInQueue();
				return true
			} else if (data.action == "clearOverlay"){ // or just send data=false
				sendDataP2P(false);
				return true
			} else if (data.action == "getQueueSize"){ // or just send data=false
				updateQueueButton();
				return true
			} else if (data.action == "autoShow"){ // or just send data=false
				if (data.value=="toggle"){
					autoshow = !autoshow;
				} else if (data.value){
					autoshow = true;
				} else {
					autoshow = false;
				}
				if (autoshow){
					document.getElementById("autoshow").classList.add("pressed");
				} else {
					document.getElementById("autoshow").classList.remove("pressed");
				}
				return true
			} else if (data.action == "content"){ // or just send data=false
				if (data.value){
					console.log(data.value);
					//let content = decodeURI(data.value);
					let content = JSON.parse(data.value);
					if (!pauseState ){
						processData( {contents : content} );
					} else {
						queue.push({contents : content});
						if (queue.length>100){ // keep the queue from exploding in size
							queue.shift();
						}
					}
					return true
				}
				return false;
			}
		} else if ("forward" in data){
			sendDataP2P(data.forward);
			return true
		} else if ("html" in data){
			processHTML(data);
			return true
		} else if (data.content){
			if (!pauseState ){
				processData( {contents : data.content} );
			} else {
				queue.push({contents : data.content});
				if (queue.length>100){ // keep the queue from exploding in size
					queue.shift();
				}
			}
			return true
		} else if (!pauseState ){
			return processData( {contents : data} );
		} else {
			queue.push({contents : data});
			if (queue.length>100){ // keep the queue from exploding in size
				queue.shift();
			}
			return true
		}
		return false;
	}

	var connectedPeers = {};
	function RecvDataWindow(){
		iframe = document.createElement("iframe");

		//if (syncDocks){
		iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password="+password+"&push&label=dock&vd=0&ad=0&novideo&noaudio&autostart&cleanoutput&room="+roomID;
		//} else {
		//iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&password="+password+"&view="+roomID+"&push&vd=0&ad=0&autostart&cleanoutput&room="+roomID;
		//}
		iframe.style.width = "0px";
		iframe.style.height = "0px";
		iframe.style.position = "fixed";
		iframe.style.left = "-100px";
		iframe.style.top = "-100px";
		iframe.id = "frame1"
		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 (("action" in e.data) && e.data.UUID && e.data.value && (e.data.action == "push-connection-info")){ // flip this
		    if ("label" in e.data.value){
				connectedPeers[e.data.UUID] = e.data.value.label;
				if (connectedPeers[e.data.UUID] === "dock"){ // this is a dock that wants to be synced with
					syncDockAll(e.data.UUID);
				}
				//console.log(connectedPeers);
			}
		  }
		  if (("action" in e.data) && e.data.UUID && ("value" in e.data) && !e.data.value && (e.data.action == "push-connection")){ // flip this
			  if (e.data.UUID in connectedPeers){
				  delete connectedPeers[e.data.UUID];
			  }
			  //console.log(connectedPeers);
		  }


		  if ("dataReceived" in e.data){ // raw data
			if ("overlayNinja" in e.data.dataReceived){
				processInput(e.data.dataReceived.overlayNinja);
			}
		  }
		});
	}

	RecvDataWindow();

	function createElementFromHTML(htmlString) {
	  var div = document.createElement('div');
	  div.innerHTML = htmlString.trim();
	  return div.firstChild;
	}


	if (forceAutoscroll){
		document.getElementById("jumpto").classList.add("pressed");
	}

	function jumptoBottom(ele){
		forceAutoscroll = !forceAutoscroll;
		if (forceAutoscroll){
			ele.classList.add("pressed");
		} else {
			ele.classList.remove("pressed");
		}
		window.scrollTo({
		  top: document.body.scrollHeight,
		  left: 0,
		  behavior: 'smooth'
		});
		window.scrollBy({
		  top: 100,
		  left: 0,
		  behavior: 'smooth'
		});
	}


	document.getElementById("filter_messages").addEventListener('keyup', function(e) {
		if (e.key == "Escape") {
			document.getElementById("filter_messages").value = "";
		}
		filterMessages(document.getElementById("filter_messages").value);
	});

	document.getElementById("filter_messages").addEventListener('keydown', function(e) {
		if (e.key == "Escape") {
			document.getElementById("filter_messages").value = "";
		}
		filterMessages(document.getElementById("filter_messages").value);
	});

	function filterMessages(keyword=""){
		keyword = keyword.trim().toLowerCase();
		filtering = keyword;
		var eles = document.querySelectorAll("#output > div");
		for (var i=0;i<eles.length;i++){
			if (!keyword){
				eles[i].classList.remove("hide");
			} else if (eles[i].textContent.toLowerCase().includes(keyword)){
				eles[i].classList.remove("hide");
			} else {
				eles[i].classList.add("hide");
			}
		}
	}

	function toDataURL(url, callback) {
	  var xhr = new XMLHttpRequest();
	  xhr.onload = function() {
		var reader = new FileReader();
		reader.onloadend = function() {
		  callback(reader.result);
		}
		reader.readAsDataURL(xhr.response);
	  };
	  xhr.open('GET', url);
	  xhr.responseType = 'blob';
	  xhr.send();
	}

	var fallbackImage = new Image();
	fallbackImage.src = "unknown.png";
	fallbackImage.onerror = function(){
		fallbackImage=false;
	}

	function errorImage(ele){
		if (fallbackImage){
			ele.src = "unknown.png";
			if (darkmode){
				ele.classList.add("invert");
			}
		} else {
			ele.style.display = "none";
		}
	}

	function processHTML(data){
		//var node = createElementFromHTML('<div id="msg_'+data.id+'" class="highlight-chat">'+ data.html+'</div>')
		//mainOutputWindow.appendChild(node);
	}

	function nextInQueue(){

		if (!selectedQueue.length){
			sendDataP2P(false);
			updateQueueButton();
			return;
		}
		element = selectedQueue.shift();
		selectedMessage(false, element);
		element.classList.remove("queued");
		delete element.children[0].dataset.qid;
		updateQueueButton(true);
		syncQueueP2P();
	}

	async function fetchWithTimeout(resource, options = {}) { // https://dmitripavlutin.com/timeout-fetch-request/
	  const { timeout = 8000 } = options;

	  const controller = new AbortController();
	  const id = setTimeout(() => controller.abort(), timeout);
	  const response = await fetch(resource, {
		...options,
		signal: controller.signal
	  });
	  clearTimeout(id);
	  return response;
	}

	function unpinIt(element){
		element.classList.remove("pinned");
		document.getElementById("output").prepend(element);
		element.title = "Alt + Click to pin message";
		applyHiddenState(element);
	}

	function pinIt(element){
		element.classList.add("pinned");
		element.title = "Alt + Click to remove pinned message";
		document.getElementById("pinned").appendChild(element);
		applyHiddenState(element);
	}

	function deleteMessage(element){
		syncDataP2P({deleteMessage: element.dataset.mid}, false, true);
		element.remove();
	}

	function filterQueued(ele){ // #show_only_queue
		if (ele.dataset.state=="0"){
			ele.dataset.state = "1";
			//document.documentElement.style.setProperty("--show-queue-only", "none");
			hideNotQueued = true;
			ele.classList.add("pressed");
		} else {
			ele.dataset.state = "0";
			//document.documentElement.style.setProperty("--show-queue-only", flexOrNotToFlex);
			hideNotQueued = false;
			ele.classList.remove("pressed");
		}
		redoOdd();
	}

	function updateQueueButton(relabel=false){
		if (!selectedQueue.length){
			document.getElementById("next_in_queue").innerText = "Queue Empty";
			document.getElementById("next_in_queue").title = "Clicking will clear the active overlay, since no next-message left in queue";
		} else {
			document.getElementById("next_in_queue").classList.remove("hidden");
			document.getElementById("show_only_queue").classList.remove("hidden");
			document.getElementById("next_in_queue").innerText = "Next in Queue ("+selectedQueue.length+")";
			document.getElementById("next_in_queue").title = "Hold CTRL when selecting messages to add them to the queue instead";
		}
		if (relabel){
			for (var i=0;i<selectedQueue.length;i++){
				try {
					selectedQueue[i].children[0].dataset.qid = i+1;
				} catch(e){console.error(e);}
			}
		}
		if (socketserver){
			socketserver.send(JSON.stringify({"queueLength":selectedQueue.length}));
		}
	}

	function removeQueue(element){
		element.classList.remove("queued");
		delete element.children[0].dataset.qid;
		var index = selectedQueue.indexOf(element);
		if (index > -1) { // only splice array when item is found
		   selectedQueue.splice(index, 1); // 2nd parameter means remove one item only
		}
		updateQueueButton(true);
	}

	function selectedMessage(event=false, element=false){
		if (!element){
			element = this;
		}

		e = event || window.event;
		if (event && (e.which !== 1)){
			return;
		}

		if (event && (event.ctrlKey || event.metaKey)) {
			if (element.classList.contains("queued")){
				removeQueue(element);
				syncQueueP2P();
				return;
			}
			selectedQueue.push(element);
			element.children[0].dataset.qid = selectedQueue.length;
			element.classList.add("queued");
			updateQueueButton();
			syncQueueP2P();
			return;
		} else if (event && (event.altKey)) {
			if (element.classList.contains("pinned")){
				unpinIt(element);
				if (element.dataset.mid){
					syncDataP2P({unpin:[element.dataset.mid]});
				}
			} else {
				pinIt(element);
				if (element.dataset.mid){
					syncDataP2P({pin:[element.dataset.mid]});
				}
			}
			return;
		}

		if (event && element.classList.contains("last-message")) { // Message is already featured!
			element.classList.remove("last-message"); // remove classes
			sendDataP2P(false);	// clear message
			return;
		}


		if (autoTimeoutEnabled){
			lastPushed = Date.now();
			if (event && autoShowQueue.length){ // user selected and an auto queue
				var index = autoShowQueue.indexOf(element); // item exists in the queue; so lets remove it from it
				if (index > -1) { // remove if
				   autoShowQueue.splice(index, 1); // 2nd parameter means remove one item only
				}
			}
		}

		document.querySelectorAll(".last-message").forEach(ele=>{ // last message sent was to clear the overlay
			ele.classList.remove("last-message"); // no overlay is now active.
		});
		element.classList.add("pressed", "last-message"); // add last-message class


		var data = element.rawContents;

		if (thirdPartyAPI){ // we upscale using a generic upsizing function for third parties.
			thirdPartyAPI(data); // not going to send base64 to the third party API, since that would kill my server, but third parties won't expect a blob.
		} else if (data.type && (data.type == "youtube") && data.chatimg){ // youtube's images are a bit tricky; larger images don't always exist.
			try {
				toDataURL(data.chatimg, function(base64Image){ // we upscale
					data.chatimg = data.chatimg.replace("=s32-", "=s256-");  // Increases the resolution of the image
					data.chatimg = data.chatimg.replace("=s64-", "=s256-");
					if (base64Image){
						data.backupChatimg = base64Image; // there's code in the index page to fallback if the larger image doens't exist
					}
					sendDataP2P(data);
				});
			} catch(e){
				data.chatimg = data.chatimg.replace("=s32-", "=s256-");  // Increases the resolution of the image
				data.chatimg = data.chatimg.replace("=s64-", "=s256-");
				sendDataP2P(data);
			}
		} else {
			sendDataP2P(data); // we handle twitch upsizing in the index.html instead.
		}
	};

	function fadeOutNode(node){
		if (horizontal){
			node.remove();
		} else {
			node.style.transition =  "all linear 0.5s";
			node.style.height =  "0";
			setTimeout(function(node){
				node.remove();
			},500,node);
		}
	}

	function slideIn(node){
		if (horizontal){
			node.remove();
		} else {
			node.style.transition =  "all linear 0.5s";
			node.style.height =  "0";
			setTimeout(function(node){
				node.remove();
			},500,node);
		}
	}

	function removeNode(){
		var nodes = document.querySelectorAll("#output>div:not(.queued)");
		var total2Remove = 0;
		if (isOBSBrowserSource){ // This is an OBS browser source, so lets go light on it.
			if (customNodeLimit){
				total2Remove =  nodes.length - customNodeLimit;
			} else if (window.innerHeight>1600){
				total2Remove =  nodes.length - 39;
			} else if (window.innerHeight>1200){
				total2Remove =  nodes.length - 30;
			} else if (window.innerHeight>800){
				total2Remove =  nodes.length - 22;
			} else if (window.innerHeight>400){
				total2Remove =  nodes.length - 14;
			} else {
				total2Remove =  nodes.length - 10;
			}
		} else if (customNodeLimit){
			total2Remove =  nodes.length - customNodeLimit;
		} else if (window.innerHeight>900){
			total2Remove =  nodes.length - 80;
		} else if (window.innerHeight>600){
			total2Remove =  nodes.length - 70;
		} else {
			total2Remove =  nodes.length - 60;
		}
		if (total2Remove>0){
			for (var i = total2Remove-1;i>=0;i--){
				fadeOutNode(nodes[i]);
			}
		}
	}

	function stripHtmlFunction(html){
	   let tmp = document.createElement("DIV");
	   tmp.innerHTML = html;
	   return tmp.textContent || tmp.innerText || "";
	}


	function processData(data){
		//console.log(data);
		if (data.contents){
			data = data.contents;

			var invisible = false;


			if (!("id" in data)){
				data.id = parseInt(Math.random*100000000);
			}

			var showType = "";
			if (!data.type){
				data.type= "none";
			} else {
				data.type = data.type.toString();
				showType = data.type;
			}

			if (data.hasDonation){
				if (stripHTML){
					data.hasDonation = stripHtmlFunction(data.hasDonation);
				}
				data.hasDonation = data.hasDonation.trim();
			} else {
				data.hasDonation = "";
			}

			if (data.chatname){
				if (stripHTML){
					data.chatname = stripHtmlFunction(data.chatname);
				}
				data.chatname = data.chatname.trim();
			} else {
				data.chatname = "";
			}

			if (data.chatmessage){
				if (stripHTML){
					data.chatmessage = stripHtmlFunction(data.chatmessage);
				}
				data.chatmessage = data.chatmessage.trim();
			} else {
				data.chatmessage = "";
			}

			if (writer){
				var date = new Date();
				let text;
				var date = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
				if ("sentiment" in data){
					text = encode((data.chatname || "") + "\t" + (data.chatmessage || "") + "\t" + (showType || "") + "\t" + (date || "")  + "\t" + (data.sentiment || "") + "\n");
				} else {
					text = encode((data.chatname || "") + "\t" + (data.chatmessage || "") + "\t" + (showType || "") + "\t" + (date || "") + "\n");
				}
				if (writer){
					writer.write(text);
				}
			}

			if (singlewriter){
				data.timestamp = new Date().getTime();
				overwriteFile(JSON.stringify(data));
			}


			if ("sentiment" in data){
				if (data.sentiment<.10){ // 1.0 is good; 0.0 is bad, so 0.1 is likely bad.
					return;
				}
			}

			if (!data.chatmessage && !data.hasDonation && !data.contentimg){
				return;
			}

			var addImage = "";
			if (data.contentimg){
				addImage = '<div class="hl-imgContent"><img src="' + data.contentimg + '" class="hl-img-content" onerror="this.parent.style.display=\'none\'" /></div>';
			} else if (attachmentsonly){
				data.chatmessage = "";
				data.hasDonation = "";
				return;
			} else {
				data.contentimg = "";
			}

			var donationHTML = "";
			if (data.hasDonation){
				donationHTML = "<span class='donationAmount hl-donation'>"+data.hasDonation+"</span>";
			} else {
				data.hasDonation = "";
			}

			var chatmessage = "";
			if (data.chatmessage){
				if (stylizeEmoji){
					chatmessage = data.chatmessage.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/ig, "<span class='emoji'>$1</span>");
				} else {
					chatmessage = data.chatmessage;
				}
				if (!stripHTML){ // we want to reuse this, but only if HTML is allowed
					data.chatmessage = chatmessage;
				}
			} else {
				data.chatmessage = "";
			}

			if (data.type && (data.type == "twitch") && avatars && !data.chatimg && data.chatname){ // this is a temp fix until everyone updates.
				data.chatimg = "https://api.socialstream.ninja/twitch/?username="+encodeURIComponent(data.chatname); // this is CORS restricted to socialstream, but this is to ensure reliability for all
			}

			var chatImg = data.chatimg;

			if (!chatImg && avatars){
				if (fallbackImage){
					chatImg = "unknown.png";
					if (darkmode){
						chatImg = '<img id="img_'+data.id+'" src="' + chatImg + '" class="icon invert hl-profile-pic" onerror="errorImage(this);" />'
					} else {
						chatImg = '<img id="img_'+data.id+'" src="' + chatImg + '" class="icon hl-profile-pic" onerror="errorImage(this);" />'
					}
				} else {
					chatImg = "";
				}
			} else if (avatars){

				if (data.type && (data.type == "twitch") && avatars){

					chatImg = "unknown.png";
					if (darkmode){
						chatImg = '<img id="img_'+data.id+'" src="' + chatImg + '" class="fade-in-image invert icon hl-profile-pic" onerror="errorImage(this);" />'
					} else {
						chatImg = '<img id="img_'+data.id+'" src="' + chatImg + '" class="fade-in-image icon hl-profile-pic" onerror="errorImage(this);" />'
					}
				} else {
					chatImg = '<img id="img_'+data.id+'" src="' + chatImg + '" class="icon hl-profile-pic" onerror="errorImage(this);" />'
				}

			} else {
				chatImg = "";
			}


			if (showType && showsource){
				showType = '<img src="' + showType + '.png" class="icon hl-source-type" data-icon-name="'+showType+'" onerror="this.style.display=\'none\'" />';
			} else {
				showType = "";
			}

			if (data.sourceImg && customSource){
				showType += '<img src="' + data.sourceImg + '" class="icon hl-source-type" onerror="this.style.display=\'none\'" />';
			}

			var timeArrived = "";
			if (datestamp){
				var date = new Date();
				timeArrived = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
				if (compactmode){
					timeArrived = timeArrived.split(" ")[0];
				}
				timeArrived = "<div class='time-arrived'>"+timeArrived+"</div>";
			}


			var bot = false;


			var nameColor = "";
			if (data.nameColor && colorized){
				nameColor = "style='color:"+data.nameColor+";'";
			}

			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 svg'>"+badge.html+"</span>";
						}
					} else {
						chatbadges += "<img class='hl-badge' src='"+badge+"' />";
					}
				});
			}

			var chatname = "";

			if (data.chatname){

				if (data.chatname.toLowerCase() == "streamelements"){
					bot = true;
					//chatname = "";
				} else if (data.chatname.toLowerCase() == "nightbot"){
					bot = true;
					//chatname = "";
				} else if (data.chatname.toLowerCase() == "vdoninja"){ // because why not. :)
					data.chatname = "VDO.Ninja";
					bot = true;
				} else if (custombot && custombot.includes(data.chatname.toLowerCase().replace(/[^a-z0-9_]+/gi, ""))){ // because why not. :)
					bot = true;
				}

				if (bot && doNotShowBot){
					return;
				}

				if (firstNamesOnly){
					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];
						}
					}
				}

				if (compactmode){
					if (bot){
						chatname = '<div class="hl-name'+splitMode+'"></div>';
					} else if (chatbadges){
						chatname = '<div '+nameColor+' class="hl-name'+splitMode+'">' +chatbadges+ data.chatname+":</div>";
					} else {
						chatname = '<div '+nameColor+' class="hl-name'+splitMode+'">' + data.chatname+":</div>";
					}
				} else {
					chatname = '<div '+nameColor+' class="hl-name'+splitMode+'">' +chatbadges+ data.chatname+"</div>";
				}
			} else {
				chatname = '<div class="hl-name'+splitMode+'">'+chatbadges+'</div>';
			}

			var larger = "";
			if (stylizeEmoji){
				larger = " larger-emojis";
			}

			var expand = "";

			if (horizontal){
				expand = " expand"
			}

			var mid = "";
			if (data.id){
				mid = "data-mid='"+data.id+"'";
			}

			if (splitMode){
				var node = createElementFromHTML('<div id="msg_'+data.id+'" '+mid+' data-menu="context-menu" class="highlight-chat'+larger+expand+'" data-source-type="'+data.type+'">'
					 + "<div class='queueid' title='Order in Queue, with 1 being next up.'></div>"
					 + "<div class='leftside "+larger+"'>"
					 + chatname
					 + showType
					 + chatImg
					 + "</div>"
					 + '<div class="hl-message" id="content_'+data.id+'">' + chatmessage + '</div>'
					 + addImage
					 + donationHTML + '</div>');
			} else if (compactmode){
				var node = createElementFromHTML('<div id="msg_'+data.id+'" '+mid+' data-menu="context-menu" class="highlight-chat'+larger+expand+'" data-source-type="'+data.type+'">'
					 + "<div class='queueid'></div>"
					 + '<div class="hl-message">'
						+ showType
						+ chatImg
						+ timeArrived
						+ chatname
						+ '<span id="content_'+data.id+'">' + chatmessage + '</span>'
					 + '</div>'
					 + addImage
					 + donationHTML + '</div>');
			} else {
				var node = createElementFromHTML('<div id="msg_'+data.id+'" '+mid+' data-menu="context-menu" class="highlight-chat'+larger+expand+'" data-source-type="'+data.type+'">'
					 + "<div class='queueid'></div>"
					 + showType
					 + chatImg
					 + timeArrived
					 + chatname
					 + '<div class="hl-message" id="content_'+data.id+'">' + chatmessage + '</div>'
					 + addImage
					 + donationHTML + '</div>');
			}

			if (filtering && !node.textContent.toLowerCase().includes(filtering)){
				node.classList.add("hide");
			}

			if (bot && !horizontal){
				node.classList.add("bot");
			}

			if (data.hasDonation){
				node.classList.add("donation");
			} else {
				node.classList.add("noDono");
			}

			if (data.hasMembership){
				node.classList.add("member");
			}

			if (compactmode && darkmode){
				node.classList.add("compactmode");
			} else if (!compactmode){
				node.classList.add("notcompactmode");
			}

			if (random){
				node.classList.add("randommode");
				node.style.top = Math.random()*document.body.clientHeight*0.95;
				node.style.left = Math.random()*document.body.clientWidth*0.8;
				if (!customNodeLimit){
					customNodeLimit = 20;
				}
			}

			if (!node.querySelector("#content_"+data.id).innerText.trim().length){
				node.classList.add("noText");
			}

			if (hideNotDonos && node.classList.contains("noDono")){
				node.classList.add("hidden");
			} else if (hideNotQueued && !node.classList.contains("queued")){
				node.classList.add("hidden");
			} else if (hideTextOnly && node.classList.contains("noText")){
				node.classList.add("hidden");
			} else {
				var style = window.getComputedStyle(node);
				if ((style.visibility !== "hidden") && (style.display !== "none")){
					if (odd){
						node.classList.add("odd");
					}
					odd = !odd;
				}
			}

			transitionType.forEach(classtype=>{
				node.classList.add(classtype);
			});

			mainOutputWindow.appendChild(node);


			if (data.type && (data.type == "twitch") && avatars && data.chatimg){
				var twitchImage = new Image();
				twitchImage.onload = function (){
					try {
						document.getElementById('img_'+data.id).src = data.chatimg;
						document.getElementById('img_'+data.id).classList.remove("invert");
						document.getElementById('img_'+data.id).classList.remove("fade-in-image");
						node.querySelector('#img_'+data.id).src = data.chatimg;
						node.querySelector('#img_'+data.id).classList.remove("invert");
						node.querySelector('#img_'+data.id).classList.remove("fade-in-image");
					} catch(e){}
				}.bind(data, node);
				twitchImage.src = data.chatimg;
			}

			if (beep){
				playtone();
			}

			if (timeoutDelay){
				setTimeout(function(node){ node.remove();},timeoutDelay, node);
			}

			if (horizontal){
				// do not shrink the names to fit
			} else if (compactmode){
				var nameEle = node.querySelector(".hl-name"); // we're going to resize long names to be smaller if they are longer than the message's height
				if (nameEle){
					var msgNode = node.querySelector(".hl-message");
					if (msgNode && msgNode.innerText){
						var ccc =0;
						while (msgNode.clientHeight < nameEle.clientHeight || nameEle.clientHeight < nameEle.scrollHeight || nameEle.clientWidth < nameEle.scrollWidth){
							var fontsize = parseInt(window.getComputedStyle(nameEle).fontSize);
							nameEle.style.fontSize = (fontsize-1)+"px";
							ccc+=1;
							if (ccc>8){break;}
						}
					} else {
						var ccc =0;
						while (msgNode.clientHeight < nameEle.clientHeight || nameEle.clientWidth < nameEle.scrollWidth || nameEle.clientHeight < nameEle.scrollHeight){
							var fontsize = parseInt(window.getComputedStyle(nameEle).fontSize);
							nameEle.style.fontSize = (fontsize-1)+"px";
							ccc+=1;
							if (ccc>8){break;}
						}
					}
				}
			} else {
				var nameEle = node.querySelector(".hl-name"); // we're going to resize long un-breaking names to be smaller if they don't fit
				if (nameEle){
					var ccc =0;
					while (nameEle.clientWidth < nameEle.scrollWidth || nameEle.clientHeight < nameEle.scrollHeight){
						var fontsize = parseInt(window.getComputedStyle(nameEle).fontSize);
						nameEle.style.fontSize = (fontsize-1)+"px";
						ccc+=1;
						if (ccc>8){break;}
					}
				}
			}

			node.rawContents = data;

			if (autoshow && !bot){
				if (!autoshowdonos || (autoshowdonos && data.hasDonation)){ // dono or not to dono.
					if (autoTimeoutEnabled){
						autoShowQueue.push(node);
						checkAutoShow();
					} else {
						selectedMessage(false, node);
					}
				}
			}

			node.onmousedown = selectedMessage;
			node.title = "Click to feature message instantly. CTRL + Click to add to the queue. Alt + Click to Pin.";

			var imageElements = node.getElementsByTagName("img");
			for (i = 0; i < imageElements.length; i++) {
				imageElements[i].onload = function(){
					if (reversed && !forceAutoscroll){
						//
					} else {
						var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
						if ((document.body.scrollHeight<(document.body.scrollTop + document.body.clientHeight+150)) || forceAutoscroll){
							window.scrollTo({
							  top: height,
							  left: 0,
							  behavior: 'smooth'
							});
						}
					}
				}
				if (imageElements[i].onerror){continue;}
				if (!imageElements[i].title && imageElements[i].alt){
					imageElements[i].title = imageElements[i].alt;
				}
				if (darkmode && (node.rawContents.type == "twitch") && imageElements[i].src.includes("/light/")){
					imageElements[i].srcBackup = imageElements[i].src;
					imageElements[i].src = imageElements[i].src.replaceAll("/light/","/dark/");
				}
				imageElements[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;
					}
				}
			}

			removeNode();

			if (reversed && !forceAutoscroll){
				//
			} else {
				var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
				if ((document.body.scrollHeight<(document.body.scrollTop + document.body.clientHeight+150)) || forceAutoscroll){
					window.scrollTo({
					  top: height,
					  left: 0,
					  behavior: 'smooth'
					});
				}
			}

			applyBotActions(data); // Official actions

			if (triggerState){
				try {
					if (applyCustomActions){
						applyCustomActions(data); // Any custom actions (not synced with github)
					}
				} catch(e){
					console.error(e);
				}
			}

			if (speech && !bot){
				speechMeta(data);
			}
			return node;
		}
		return false;
	}
	
	function speechMeta(data, allow=false){
		var msgPlain = document.getElementById('content_'+data.id); // text only
		if (msgPlain){
			msgPlain = msgPlain.textContent || msgPlain.innerText || "";
			msgPlain = msgPlain.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, '');
			msgPlain = msgPlain.replaceAll('_', ' ');
			msgPlain = msgPlain.replaceAll('@', ' ');
			msgPlain = msgPlain.replaceAll('!', ' ');
			msgPlain = msgPlain.replace(/catJAM/ig,"");
		}

		var chatname = "";
		if (data.chatname){
			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){

			var donoText = document.createElement("div");
			donoText.innerHTML = data.hasDonation;
			donoText = donoText.textContent || donoText.innerText || "";
			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, allow);
					} else {
						speak(chatname + " has donated " + donoText, allow);
					}
				} else if (msgPlain){
					speak(chatname + "! ! .. " + donoText + "! ! .. "+ msgPlain, allow);
				} else {
					speak(chatname + "! ! .. " + donoText, allow);
				}
			} else if (English){ // no name but english
					if (msgPlain){
						speak("Someone has donated " + donoText + " and says "+ msgPlain, allow);
					} else {
						speak("Someone has donated " + donoText, allow);
					}
			} else if (msgPlain){ // no name; not english
					speak(donoText + "! ! .. "+ msgPlain , allow);
			} else {
				speak(donoText, allow);
			}
		} else if (msgPlain){ // NO DONATION
			if (chatname){ // NAME
				if (English){
					speak(chatname + " says! " +msgPlain, allow);
				} else {
					speak(chatname + "! ! .. " +msgPlain, allow);
				}
			} else if (English){ // NO NAME
				speak("Someone says! " +msgPlain, allow);
			} else {
				speak(msgPlain, allow);
			}
		}
	}

	function applyBotActions(data){ // this can be customized to create bot-like auto-responses/actions.
		if (triggerState && data.chatmessage.includes("!highlight")){
			document.getElementById("msg_"+data.id).classList.add("highlight"); // sample method of highlighting
		}
	}

	function syncDockAll(UUID){
		var pins = [];
		document.querySelectorAll(".pinned[data-mid]").forEach(ele=>{
			pins.push(ele.dataset.mid);
		});
		syncDataP2P({pin:pins}, UUID);
		syncQueueP2P(UUID);
	}

	function syncQueueP2P(UUID=false){
		var data = [];
		if (UUID){
			if (selectedQueue.length){
				selectedQueue.forEach(ele=>{
					data.push(ele.rawContents);
				});
				syncDataP2P({queueInit:data}, UUID);
			}
		} else {
			selectedQueue.forEach(ele=>{
				data.push(ele.rawContents.id);
			});
			syncDataP2P({queue:data});
		}
	}

	function syncDataP2P(data, UUID=false, force=false){
		if (iframe && (syncDocks||force)){
			if (UUID){
				iframe.contentWindow.postMessage({"sendData":{overlayNinja:data}, "type":"pcs", "UUID":UUID}, '*');
			} else {
				var keys = Object.keys(connectedPeers);
				for (var i = 0; i<keys.length;i++){
					var UUID = keys[i];
					var label = connectedPeers[keys[i]];
					if (label === "dock"){
						iframe.contentWindow.postMessage({"sendData":{overlayNinja:data}, "type":"pcs", "UUID":UUID}, '*');
					}
				}
			}
		}
	}

	function sendDataP2P(data){

		if (!data){
			document.querySelectorAll(".last-message").forEach(ele=>{ // last message sent was to clear the overlay
				ele.classList.remove("last-message"); // no overlay is now active.
			});
		}
		try {
			if (socketserver){
				socketserver.send(JSON.stringify(data));
			}
			if (iframe){
				var msg = {};
				msg.overlayNinja = {};
				msg.overlayNinja = data;
				if (syncDocks){
					var keys = Object.keys(connectedPeers);
					for (var i = 0; i<keys.length;i++){
						var UUID = keys[i];
						var label = connectedPeers[keys[i]];
						if (label === "dock"){
							if (data && data.id){
								iframe.contentWindow.postMessage({"sendData":{overlayNinja:{mid:data.id}}, "type":"pcs", "UUID":UUID}, '*');
							} else {
								iframe.contentWindow.postMessage({"sendData":{overlayNinja:{mid:false}}, "type":"pcs", "UUID":UUID}, '*');
							}
						} else if (label === "overlay"){
							iframe.contentWindow.postMessage({"sendData":msg, "type":"pcs", "UUID":UUID}, '*'); // send only to viewers of this stream; not back to the chrome extension..
						} else if (label === false){
							iframe.contentWindow.postMessage({"sendData":msg, "type":"pcs", "UUID":UUID}, '*'); // send only to viewers of this stream; not back to the chrome extension..
						}
					}
				} else {
					var keys = Object.keys(connectedPeers);
					for (var i = 0; i<keys.length;i++){
						var UUID = keys[i];
						var label = connectedPeers[keys[i]];
						if (label !== "dock"){
							iframe.contentWindow.postMessage({"sendData":msg, "type":"pcs", "UUID":UUID}, '*'); // send only to viewers of this stream; not back to the chrome extension.. legacy?
						}
					}
				}
			}
		} catch(e){
			console.error(e);
		}
	}

	document.getElementById("chatInput").addEventListener("keyup", function(event) {
		if (event.keyCode === 13) {
			event.preventDefault();
			respondP2P(document.getElementById("chatInput").value);
			document.getElementById("chatInput").value = "";
		}
	})

	function toggleChat(){
		document.getElementById("chatInput").style.display = "inline-block";
		document.getElementById("say_hello").style.display = "none";
		document.getElementById("chatInput").focus();
	}

	function respondP2P(data=null, tid=false){
		if (data===null){
			data = prompt("Enter something to say to all of chat");
		}
		if (!data){return;}
		data = data.trim();
		if (!data){return;}
		var msg = {};
		msg.overlayNinja = {};
		msg.overlayNinja.tid = tid;
		msg.overlayNinja.response = data;
		iframe.contentWindow.postMessage({"sendData":msg, "type": "rpcs"}, '*'); // send only to 'viewers' of this stream
	}

	function setupSaveToDisk(){
		var script = document.createElement('script');
		script.onload = function() {

			if (!fileStream) {
				fileStream = streamSaver.createWriteStream("chat_"+Date.now()+'.tsv' || 'sample.txt');
				writer = fileStream.getWriter();
			}

			window.isSecureContext && window.addEventListener('beforeunload', evt => {
				writer.close();
			})
		}
		script.src = "./thirdparty/StreamSaver.js";
		document.head.appendChild(script);
	}


	async function overwriteFile(data=false) {
	  if (data=="setup"){
		  newFileHandle = await window.showSaveFilePicker();
		  document.getElementById("select_save_file").classList.remove("green");
		  document.getElementById("select_save_file").innerText = "💾";
      } else if (newFileHandle && data){
		  const writableStream = await newFileHandle.createWritable();

		  try {
			if (typeof data == "object"){
				data.chatimg = upscaleImages(data);
				overwriteFile(JSON.stringify(data));
			}
		  } catch(e){}

		  await writableStream.write(data);
		  await writableStream.close();
	  }
	}


	(function rightclickmenuthing() { // right click menu
		"use strict";

		function clickInsideElement(e, value="menu") {
			var el = e.srcElement || e.target;
			if (el.dataset && (value in el.dataset)) {
				return el;
			} else {
				while (el = el.parentNode) {
					if (el.dataset && (value in el.dataset)) {
						return el;
					}
				}
			}
			return false;
		}

		function getPosition(event2) {
			var posx = 0;
			var posy = 0;

			if (!event2){var event = window.event;}

			if (event2.pageX || event2.pageY){
				posx = event2.pageX;
				posy = event2.pageY;
			} else if (event2.clientX || event2.clientY) {
				posx = event2.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
				posy = event2.clientY + document.body.scrollTop + document.documentElement.scrollTop;
			}

			return {x: posx, y: posy};
		}

		var taskItemInContext;
		var clickCoordsX;
		var clickCoordsY;
		var menu = getById("context-menu");
		var menuState = 0;
		var lastMenu= false;
		var menuWidth;
		var menuHeight;
		var windowWidth;
		var windowHeight;

		function contextListener() {
			document.addEventListener("contextmenu", function(e) {

				if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1){
					return;
				} else if (e && (e.ctrlKey || e.metaKey)){return;} // allow for development ease

				taskItemInContext = clickInsideElement(e, "menu");

				if (taskItemInContext) {
					e.preventDefault();
					e.stopPropagation();
					toggleMenuOn();
					positionMenu(e);
					return false;
				} else {
					taskItemInContext = null;
					toggleMenuOff();
				}
			});
		}

		function menuClickListener(e) {
			var clickeElIsLink = clickInsideElement(e, "action");
			if (clickeElIsLink) {
				e.preventDefault();
				e.stopPropagation();
				menuItemListener(clickeElIsLink);
				return false;
			} else {
				var button = e.which || e.button;
				if (button === 1) {
					toggleMenuOff();
				}
			}
		}

		function toggleMenuOn() {

			if (menuState !== 1) {
				menuState = 1;
				menu.classList.add("context-menu--active");
				document.addEventListener("click", menuClickListener);
			}

		}

		function toggleMenuOff() {
			if (menuState !== 0) {
				menuState = 0;
				menu.classList.remove("context-menu--active");
				document.removeEventListener("click", menuClickListener);
			}
			lastMenu = false;
		}

		function positionMenu(e) {
			var clickCoords = getPosition(e);
			clickCoordsX = clickCoords.x;
			clickCoordsY = clickCoords.y;

			menuWidth = menu.offsetWidth + 4;
			menuHeight = menu.offsetHeight + 4;

			windowWidth = window.innerWidth;
			windowHeight = window.innerHeight;

			if ((windowWidth - clickCoordsX) < menuWidth) {
				menu.style.left = windowWidth - menuWidth + "px";
			} else {
				menu.style.left = clickCoordsX + "px";
			}
			menu.style.top = "unset";
			var offset = ((document.body.scrollHeight-clickCoordsY)-menuHeight);
			if (offset<-10){
				offset = -10;
			}
			menu.style.bottom =offset + "px";

		}

		async function menuItemListener(link) {
			if (link.getAttribute("data-action") === "Delete") {
				deleteMessage(taskItemInContext);
			} else if (link.getAttribute("data-action") === "Pin") {
				if (taskItemInContext.classList.contains("pinned")){
					unpinIt(taskItemInContext);
				} else {
					pinIt(taskItemInContext);
				}
			} else if (link.getAttribute("data-action") === "TTS") {
				speechMeta(taskItemInContext.rawContents, true);
			} else if (link.getAttribute("data-action") === "Queue") {
				if (taskItemInContext.classList.contains("queued")){
					removeQueue(taskItemInContext); 
				} else {
				
					if (taskItemInContext.classList.contains("queued")){
						removeQueue(taskItemInContext);
						syncQueueP2P();
						return;
					}
					selectedQueue.push(taskItemInContext);
					taskItemInContext.children[0].dataset.qid = selectedQueue.length;
					taskItemInContext.classList.add("queued");
					updateQueueButton();
					syncQueueP2P();
				}
			}
			toggleMenuOff();
		}

		contextListener();

	})();


	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>