dock.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: #36393F;
			--link-color: #5AF;
			--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;
			--time-arrived-padding: 1px;
		}
		.closeBtn {
			position: absolute;
			right: -15px;
			width: 20px;
			background-color: #bababa;
			padding: 3px;
			border-radius: 50%;
			height: 19px;
			top: -20px;
			text-align: center;
			border: 2px solid black;
			cursor: pointer;
		}

		.closeBtn:hover {
			background-color: #9a9a9a;
		}

		.closeBtn:active {
			background-color: #7a7a7a;
		}

		#output {
			zoom: var(--scale-output);
			-moz-transform: var(--scale-output-moz);
			-moz-transform-origin: 0 0;
			width:100%;
			margin-bottom: 46px; /* Same as menu height + menu padding-top + menu padding-bottom */
		}
		.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;
		}

		.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-firstline {
			display:block;
			line-height: 100%;
			padding-bottom: 3px;
		}

		.hl-firstline .hl-name {
			line-height: 100%;
			font-size: 130%;
			vertical-align: bottom;
			bottom:1px;
		}

		.hl-firstline .hl-name .hl-badge {
			vertical-align: inherit;
			margin: 1px 0px;
		}

		.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;
		}

		.hl-message svg {
			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: visible;
			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;
		}
		
	@keyframes ani {
		 0% {
			transform: rotate(0deg);
			  -webkit-transform: rotate(0deg);
			   -moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				 -o-transform: rotate(0deg);
					transform: rotate(0deg);
		  }
		  50% {
		   transform: rotate(45deg);
			  -webkit-transform: rotate(45deg);
			   -moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				 -o-transform: rotate(45deg);
					transform: rotate(45deg);
		  }
		  100% {
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			   -moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				 -o-transform: rotate(0deg);
					transform: rotate(0deg);
		  }
		}
		
		.brush{
			animation: ani 400ms alternate 1;
		}

		.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 {
			box-shadow: inset 7px 7px 20px #08080444,inset -7px -7px 20px #FcFcFc22, inset 1px 1px 2px #080804AA,inset -1px -1px 3px #FcFcFc77;
		}

		.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: var(--time-arrived-padding);
			left: 2px;
			position: relative;
			white-space: nowrap;
		}

		#menu {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 42px;
			padding-top: 4px;
			padding-bottom: 0px;
			display: flex;
			justify-content: center;
			background-color: #2F3136;
			box-shadow: 0 0 5px #000;
			z-index: 2;
		}
		body.lightmode #menu{
			background-color: #f5f5f5;
		}

		.imgButton {
			position: relative;
			display: block;
			background-repeat: no-repeat;
			background-color: transparent; /* alpha */
			-webkit-app-region: no-drag;
			border: none;
			border-radius: 10px;

			width: 32px;
			height: 32px;
			background-size: 32px;
			margin-top: 3px;
			margin-left: 2px;
			margin-right: 2px;

			-webkit-app-region: no-drag;
		}
		.imgButton:hover {
			cursor: pointer;
			box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.05); /* Light the button */
		}

		.imgSmallButton { /* Used with imgButton class */
			width: 20px;
			height: 20px;
			background-size: 20px;
			margin-top: 9px;
		}

		.horizontalSeparator {
			background-image: url(./icons/horizontal_separator.png);
			background-repeat: no-repeat;
			width: 1px;
			height: 32px;
			background-size: 1px 32px;
			margin-top: 6px;
			margin-left: 4px;
			margin-right: 4px;
		}

		.buttonBadge {
			position: absolute;
			display: flex;
			justify-content: center;
			background: #604080;
			color: white;
			border-radius: 50%;

			top: -7px;
			left: 11px;
			width: 10px;
			height: 10px;
			font-size: 10px;
		}
		.smallButtonBadge { /* Used with buttonBadge class */
			top: -8px;
			left: 5px;
			width: 10px;
			height: 10px;
			font-size: 10px;
		}

		#queueSection{
			display:flex;
		}

		#next_in_queue,#show_only_queue{
			display:inline-block;
		}

		.popInModal {
			position: fixed!important;
			padding: 4px 14px 4px;
			background-color: #2F3136dd;
			border-width: 2px;
			border-style: solid;
			border-color: #00000080;
			border-radius: 20px;
			position: absolute;
			margin: 0;
			display: flex;
			justify-content: center;
			-webkit-app-region: no-drag;
			z-index: 10;
		}
		.popInModal > .imgButton {
			margin-top: 2px;
		}

		.modalTextInput {
			height: 20px;
			font-size: 18px;
			background-color: transparent;
			flex: 1;
			border: 0;
			outline: none;

			color: #f5f5f5;
			opacity: 1; /* Firefox */
		}

		input[type="text"] {
			width: 110px;
		}
		input[type="text"]:focus {
			width: 170px;
		}

		input[type="text"] {
			-webkit-transition: all 0.3s ease 0s;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s;
		}

		#chatInput{
			width: 0;
			top: 2px;
			position: relative;
		}
		#chatInput_parent:empty{
			width: 0;
		}
		#chatInput:focus {
			width: 250px;
		}

		#filter_messages{
			width: 0;
			top: 2px;
			position: relative;
		}
		#filter_messages_parent:empty{
			width: 0;
		}
		#filter_messages:focus {
			width: 144px;
		}

		body.lightmode .popInModal {
			background-color: #f5f5f5dd;
			border-color: #00000080;
			color: black;
		}
		body.lightmode .modalTextInput {
			color: #0a0a0a;
			opacity: 1; /* Firefox */
		}
		#menu.lightmode .imgButton:hover {
			cursor: pointer;
			box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); /* Light the button */
		}


		@media only screen and (max-width: 720px) {
			#menu {
				height: 38px;
				padding-top: 3px;
				padding-bottom: 0px;
			}
			#menu .horizontalSeparator {
				width: 1px;
				height: 28px;
				background-size: 1px 28px;
				margin-top: 4px;
				margin-left: 3px;
				margin-right: 3px;
			}
			.imgButton {
				width: 28px;
				height: 28px;
				background-size: 28px;
				margin-top: 4px;
				margin-left: 1px;
				margin-right: 1px;
			}
			.imgSmallButton { /* Used with imgButton class */
				width: 18px;
				height: 18px;
				background-size: 18px;
				margin-top: 8px;
			}
			.buttonBadge {
				top: -7px;
				left: 9px;
				width: 9px;
				height: 9px;
				font-size: 9px;
			}
			.smallButtonBadge { /* Used with buttonBadge class */
				top: -7px;
				left: 4px;
				width: 9px;
				height: 9px;
				font-size: 9px;
			}
			.popInModal {
				padding: 3px 10px 3px;
			}
			.modalTextInput {
				height: 18px;
				font-size: 16px;
			}
			#chatInput:focus {
				width: 216px;
			}
			#filter_messages:focus {
				width: 120px;
			}
			#output {
				margin-bottom: 41px; /* Same as menu height + menu padding-top + menu padding-bottom */
			}
		}
		@media only screen and (max-width: 576px) {
			#menu {
				height: 34px;
				padding-top: 2px;
				padding-bottom: 0px;
			}
			#menu .horizontalSeparator {
				width: 1px;
				height: 24px;
				background-size: 1px 24px;
				margin-top: 4px;
				margin-left: 2px;
				margin-right: 2px;
			}
			.imgButton {
				width: 24px;
				height: 24px;
				background-size: 24px;
				margin-top: 4px;
				margin-left: 0px;
				margin-right: 0px;
			}
			.imgSmallButton { /* Used with imgButton class */
				width: 16px;
				height: 16px;
				background-size: 16px;
				margin-top: 8px;
			}
			.buttonBadge {
				top: -6px;
				left: 8px;
				width: 8px;
				height: 8px;
				font-size: 8px;
			}
			.smallButtonBadge { /* Used with buttonBadge class */
				top: -6px;
				left: 4px;
				width: 8px;
				height: 8px;
				font-size: 8px;
			}
			.popInModal {
				padding: 2px 6px 2px;
			}
			.modalTextInput {
				height: 16px;
				font-size: 14px;
			}
			#chatInput:focus {
				width: 144px;
			}
			#filter_messages:focus {
				width: 96px;
			}
			#output {
				margin-bottom: 36px; /* Same as menu height + menu padding-top + menu padding-bottom */
			}
		}
		@media only screen and (max-width: 432px) {
			#menu {
				height: 30px;
				padding-top: 1px;
				padding-bottom: 0px;
			}
			#menu .horizontalSeparator {
				width: 1px;
				height: 20px;
				background-size: 1px 20px;
				margin-top: 4px;
				margin-left: 1px;
				margin-right: 1px;
			}
			.imgButton {
				width: 20px;
				height: 20px;
				background-size: 20px;
				margin-top: 4px;
				margin-left: 0px;
				margin-right: 0px;
			}
			.imgSmallButton { /* Used with imgButton class */
				width: 14px;
				height: 14px;
				background-size: 14px;
				margin-top: 7px;
			}
			.buttonBadge {
				top: -6px;
				left: 6px;
				width: 7px;
				height: 7px;
				font-size: 7px;
			}
			.smallButtonBadge { /* Used with buttonBadge class */
				top: -6px;
				left: 3px;
				width: 7px;
				height: 7px;
				font-size: 7px;
			}
			.popInModal {
				padding: 1px 2px 1px;
			}
			.modalTextInput {
				height: 14px;
				font-size: 12px;
			}
			#chatInput:focus {
				width: 108px;
			}
			#filter_messages:focus {
				width: 72px;
			}
			#output {
				margin-bottom: 31px; /* Same as menu height + menu padding-top + menu padding-bottom */
			}
		}
		@media only screen and (max-width: 288px) {
			#menu {
				height: 26px;
				padding-top: 0px;
				padding-bottom: 0px;
			}
			#menu .horizontalSeparator {
				width: 0px;
				height: 16px;
				background-size: 0px 16px;
				margin-top: 5px;
				margin-left: 0px;
				margin-right: 0px;
				display: none !important;
			}
			.imgButton {
				width: 16px;
				height: 16px;
				background-size: 16px;
				margin-top: 5px;
				margin-left: 0px;
				margin-right: 0px;
			}
			.imgSmallButton { /* Used with imgButton class */
				width: 12px;
				height: 12px;
				background-size: 12px;
				margin-top: 7px;
			}
			.buttonBadge {
				top: -5px;
				left: 4px;
				width: 7px;
				height: 7px;
				font-size: 7px;
			}
			.smallButtonBadge { /* Used with buttonBadge class */
				top: -6px;
				left: 2px;
				width: 7px;
				height: 7px;
				font-size: 7px;
			}
			.popInModal {
				padding: 0px 0px 0px;
			}
			.modalTextInput {
				height: 12px;
				font-size: 10px;
			}
			#chatInput:focus {
				width: 72px;
			}
			#filter_messages:focus {
				width: 48px;
			}
			#output {
				margin-bottom: 26px; /* Same as menu height + menu padding-top + menu padding-bottom */
			}
		}


		.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;
			bottom: min(14px, 3%);
			right: min(14px, 3%);
			margin-top: 0;
			margin-right: 0;
		}

		.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;
		}
		.hideMenuKeepScrollLock {
			height: 0!important;
			border: 0!important;
			box-shadow: unset!important;
			padding: 0!important;
			margin: 0!important;
		}
		.hideMenuKeepScrollLock > *{
			display:none!important;
		}
		.hideMenuKeepScrollLock > #jumpto{
			display:block!important;
		}

	</style>
</head>
<body class='electronDraggable'>
	<div id="pinned" class="output notcompactmode"></div>
	<div id="output" class="output notcompactmode"></div>
	<div id="menu" class="electronDraggable">
		<!-- Main buttons -->

		<button class="imgButton" id="pause" data-state="0" onclick="pause(this);" style="background-image: url(./icons/main_msg_pause.png);" title="Main — ⏸ Pause incoming chat messages"></button>
		<button class="imgButton" id="say_hello" data-state="0" onclick="" style="background-image: url(./icons/main_msg_send.png);" title="Main — 💬 Send a text message to all social endpoints"></button>
		<button class="imgButton imgSmallButton" id="notify" data-state="0" onclick="notify(this);" style="background-image: url(./icons/main_msg_notify_off.png);" title="Main — 🔔 Start beeping when there is a new message"></button>
		<button class="imgButton imgSmallButton hidden" id="select_save_file" data-state="0" onclick="overwriteFile('setup');" style="background-image: url(./icons/main_msg_save.png);" title="Main — 💾 Select the file you want to save the most recent message to"></button>

		<div class="horizontalSeparator"></div>

		<!-- Filter buttons -->

		<button class="imgButton" id="filter" data-state="0" style="background-image: url(./icons/filter_msg.png);" title="Filter — 🔽 Filter messages based on what you have entered"></button>
		<button class="imgButton imgSmallButton" id="hide_emoji" data-state="0" onclick="emoji(this);" style="background-image: url(./icons/filter_hideemojionly_on.png);" title="Filter — 😀🚫 Hide messages that contains emojis only"></button>
		<button class="imgButton imgSmallButton" id="only_donos" data-state="0" onclick="donos(this);" style="background-image: url(./icons/filter_showpaidonly_off.png);" title="Filter — 💲 Show only messages that have donations/cheer"></button>

		<div class="horizontalSeparator"></div>

		<!-- Queue buttons -->
		<div id="queueSection" class="hidden">
			<button class="imgButton" id="next_in_queue" data-state="0" onclick="nextInQueue();" style="background-image: url(./icons/queue_show_next.png);" title="Queue — ⏭ Feature next message in queue (select messages holding CTRL for add them to the queue)"><span id="next_in_queue_badge" class="buttonBadge">0</span></button>
			<button class="imgButton imgSmallButton" id="show_only_queue" data-state="0" onclick="filterQueued(this);" style="background-image: url(./icons/queue_show_listonly_off.png);" title="Queue — 📑 Show only the messages in queue"></button>
			<div class="horizontalSeparator"></div>
		</div>

		<!-- Featured message buttons -->

		<button class="imgButton" id="clear_overlay" data-state="0" onclick="this.classList.remove('brush');setTimeout(function(ele){ele.classList.add('brush');},0,this);sendDataP2P(false);" style="background-image: url(./icons/featured_clear.png);" title="Featured — 🧹🌟 Clear the featured message (not this chat)"></button>
		<button class="imgButton" id="autoshow" data-state="0" onclick="autoShow(this);" style="background-image: url(./icons/featured_auto_stop.png);" title="Featured — 🌟 Auto-feature messages as they come in"></button>

		<div class="horizontalSeparator"></div>

		<!-- Text-to-speech buttons -->

		<button class="imgButton imgSmallButton" id="tts" data-state="0" onclick="tts(this);" style="background-image: url(./icons/tts_incoming_messages_off.png);" title="Text-to-speech — 🔊 Start reading incoming messages out-loud with text-to-speech"></button>

		<!-- Scroll button -->
		<button class="imgButton imgSmallButton" id="jumpto" data-state="0" onclick="jumptoBottom(this);" style="background-image: url(./icons/scroll_to_bottom_off.png);" title="Scroll to bottom"></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">
		<div class='closeBtn'>X</div>
		<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>

	<div id="chatInput_parent" class="popInModal hidden">
		<input id="chatInput" class="modalTextInput" type="text" placeholder="Type..." />
		<button id="chatInputButton" class="imgButton imgSmallButton" style="background-image: url(./icons/send_confirm.png);" title="💬 Send this message"></button>
		<button id="chatClearButton" class="imgButton imgSmallButton" style="background-image: url(./icons/clear.png);" title="🧹 Clear this message"></button>
		<button id="chatInputCloseButton" class="imgButton imgSmallButton" style="background-image: url(./icons/close.png);" title="❌ Close this dialog"></button>
	</div>

	<div id="filter_messages_parent" class="popInModal hidden">
		<input id="filter_messages" class="modalTextInput" type="text" placeholder="Type..." onchange="filterMessages(this.value);" />
		<button id="filterAddNameAndTimeButton" class="imgButton imgSmallButton" data-state="0" onclick="onClickFilterAddNameAndTimeButton(this);" style="background-image: url(./icons/filter_addnametime_off.png);" title="🆔 Add name and time on filter"></button>
		<button id="filterClearButton" class="imgButton imgSmallButton" style="background-image: url(./icons/clear.png);" title="🧹 Clear this filter"></button>
		<button id="filterCloseButton" class="imgButton imgSmallButton" style="background-image: url(./icons/close.png);" title="❌ Close this dialog"></button>
	</div>

	<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 = "";
	var filterAddNameAndTime = 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";
	}

	var twoLines = false;
	if (urlParams.has("twolines")){
		twoLines = true;
		document.documentElement.style.setProperty("--list-or-horizontal", "block");
		document.documentElement.style.setProperty("--time-arrived-padding", "8px");
	}

	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;

	async function playtone(tonename="testtone") {
		if (timeoutTone){return;}

		setTimeout(function(){
			timeoutTone = false;
		},500);

		if (audioContext.state == "suspended"){
			await audioContext.resume();
		}
		if (audioContext.state == "suspended"){
			return
		}
		var toneEle = document.getElementById(tonename);
		if (toneEle){
			toneEle.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").dataset.state = beep*1;
		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 (twoLines){
			document.getElementById("output").style.maxHeight = "70px";
			document.getElementById("menu").style.top = "72px";
			document.getElementById("output").style.overflow = "visible";
		} else if (stylizeEmoji){
			document.getElementById("output").style.maxHeight = "40px";
			document.getElementById("menu").style.top = "42px";
			document.getElementById("output").style.overflow = "hidden";
		} else {
			document.getElementById("output").style.maxHeight = "30px";
			document.getElementById("menu").style.top = "42px";
			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");
		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 doNotShowBotNames = false;
	if (urlParams.has("hidebotnames")){
		doNotShowBotNames = 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;


		getById("tts").style['background-image']='url(./icons/tts_stop.png)';
		getById("tts").title = 'Text-to-speech — ⏹🔊 Stop reading out-loud with text-to-speech';

		window.speechSynthesis.speak(speechInput);

		try{
			speechInput.addEventListener('end',function(e){
				if (window.speechSynthesis.pending || window.speechSynthesis.speaking){
					getById("tts").style['background-image']='url(./icons/tts_stop.png)';
					getById("tts").title = 'Text-to-speech — ⏹🔊 Stop reading out-loud with text-to-speech';
				} else if (!speech){
					getById("tts").style['background-image']='url(./icons/tts_incoming_messages_off.png)';
					getById("tts").title = 'Text-to-speech — 🔊 Start reading incoming messages out-loud with text-to-speech';
				} else {
					getById("tts").style['background-image']='url(./icons/tts_incoming_messages_on.png)';
					getById("tts").title = 'Text-to-speech — 🔊⏹ Stop reading incoming messages out-loud with text-to-speech';
				}
			});
		} catch(e){
			console.error(e);
		}
	}

	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")){
		if ((urlParams.get("hidemenu")=="2") || (urlParams.get("nomenu")=="2")){
			document.getElementById("menu").classList.add("hideMenuKeepScrollLock");
			document.getElementById("output").style.marginBottom = "0";
		} else{
			document.getElementById("menu").style.display = "none";
			document.getElementById("output").style.marginBottom = "0";
		}
	}

	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.getElementById("menu").classList.add("lightmode");
		document.getElementById("chatInput_parent").classList.add("lightmode");
		document.getElementById("filter_messages_parent").classList.add("lightmode");
		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 hideNames = false
	if (urlParams.has("hidenames")){
		hideNames = 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.style['background-image']='url(./icons/filter_hideemojionly_off.png)';
			ele.title = 'Filter — 📄 Show all messages, including with emojis only';
		} else {
			hideTextOnly = false;
			ele.dataset.state = "0";
			//document.documentElement.style.setProperty("--show-emoji-only", "flex");
			//document.documentElement.style.setProperty("--show-images", "inline-block");
			ele.style['background-image']='url(./icons/filter_hideemojionly_on.png)';
			ele.title = 'Filter — 😀🚫 Hide messages that contains emojis only';
		}
		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.style['background-image']='url(./icons/filter_showpaidonly_on.png)';
			ele.title = 'Filter — 📄 Show all messages, including the ones that have donations/cheer';
		} else {
			ele.dataset.state = "0";
			//document.documentElement.style.setProperty("--show-donos-only", flexOrNotToFlex);
			hideNotDonos = false;
			ele.style['background-image']='url(./icons/filter_showpaidonly_off.png)';
			ele.title = 'Filter — 💲 Show only messages that have donations/cheer';
		}
		redoOdd();
	}

	function onClickFilterAddNameAndTimeButton(ele) {
		filterAddNameAndTime = !filterAddNameAndTime;
		if (ele.dataset.state == "0") {
			ele.dataset.state = "1";
			filterAddNameAndTime = true;
			ele.style['background-image']='url(./icons/filter_addnametime_on.png)';
			ele.title = '🆔 Remove name and time on filter';
		} else {
			ele.dataset.state = "0";
			filterAddNameAndTime = false;
			ele.style['background-image']='url(./icons/filter_addnametime_off.png)';
			ele.title = '🆔 Add name and time on filter';
		}

		// Update search after add/remove name and time
		filterMessages(document.getElementById("filter_messages").value);
	}

	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.style['background-image']='url(./icons/featured_auto_play.png)';
			ele.title = 'Featured — ⏹🌟 Stop auto-featuring messages';
		} else {
			ele.style['background-image']='url(./icons/featured_auto_stop.png)';
			ele.title = 'Featured — 🌟 Auto-feature messages as they come in';
		}
	}
	function pause(ele){
		pauseState = !pauseState;

		if (pauseState){
			ele.style['background-image']='url(./icons/main_msg_play.png)';
			ele.title = 'Main — ▶️ Play incoming chat messages';
		} else {
			ele.style['background-image']='url(./icons/main_msg_pause.png)';
			ele.title = 'Main — ⏸ Pause incoming chat messages';
			//var queueR = queue.reverse();
			if (!pauseState){
				for (var i = 0 ; i<queue.length; i++){
					processData( queue[i] );
				}
			}
			queue= [];
		}
	}

	function notify(ele) {
		beep = !beep;
		if (beep) {
			ele.dataset.state = beep*1;
			ele.style['background-image']='url(./icons/main_msg_notify_on.png)';
			ele.title = 'Main — 🔕 Stop beeping when there is a new message';
			playtone();
		} else {
			ele.dataset.state = beep*1;
			ele.style['background-image']='url(./icons/main_msg_notify_off.png)';
			ele.title = 'Main — 🔔 Start beeping when there is a new message';
		}
	}

	function tts(ele) {
		if (window.speechSynthesis.pending || window.speechSynthesis.speaking){
			speech = false;
			window.speechSynthesis.cancel();
		} else {
			speech = !speech;
		}

		if (speech) {
			ele.style['background-image']='url(./icons/tts_incoming_messages_on.png)';
			ele.title = 'Text-to-speech — 🔊⏹ Stop reading incoming messages out-loud with text-to-speech';
		} else {
			ele.style['background-image']='url(./icons/tts_incoming_messages_off.png)';
			ele.title = 'Text-to-speech — 🔊 Start reading incoming messages out-loud with text-to-speech';
		}
	}

	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.style['background-image']='url(./icons/scroll_to_bottom_on.png)';
			ele.title = 'Force scroll to bottom';
		} else {
			ele.style['background-image']='url(./icons/scroll_to_bottom_off.png)';
			ele.title = 'Scroll to bottom';
		}
		window.scrollTo({
			top: document.body.scrollHeight,
			left: 0,
			behavior: 'smooth'
		});
		window.scrollBy({
			top: 100,
			left: 0,
			behavior: 'smooth'
		});
	}

	function filterMessages(keyword="") {
		var eles = document.querySelectorAll("#output > div");
		var elesValue = document.querySelectorAll("#output .hl-message");
		if (eles.length !== elesValue.length)
			return;

		keyword = keyword.trim().toLowerCase();
		filtering = keyword;

		// With user name and message time
		if (filterAddNameAndTime) {
			for (var i = 0; i < eles.length; i++) {
				// No filter is typed; then show all
				if (!keyword) {
					eles[i].classList.remove("hide");

				// Filter is typed - Found; then show them
				} else if (eles[i].textContent.toLowerCase().includes(keyword)) {
					eles[i].classList.remove("hide");

				// Filter is typed - Not found; them hide them
				} else {
					eles[i].classList.add("hide");
				}
			}

		// Message only
		} else {
			for (var i = 0; i < eles.length; i++) {
				// No filter is typed; then show all
				if (!keyword) {
					eles[i].classList.remove("hide");

				// Filter is typed - Found; then show them
				} else if (elesValue[i].innerText.toLowerCase().includes(keyword)) {
					eles[i].classList.remove("hide");

				// Filter is typed - Not found; them hide them
				} 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.style['background-image']='url(./icons/queue_show_listonly_on.png)';
			ele.title = 'Queue — 📄 Show all messages, including the ones in queue';
		} else {
			ele.dataset.state = "0";
			//document.documentElement.style.setProperty("--show-queue-only", flexOrNotToFlex);
			hideNotQueued = false;
			ele.style['background-image']='url(./icons/queue_show_listonly_off.png)';
			ele.title = 'Queue — 📑 Show only the messages in queue';
		}
		redoOdd();
	}

	function updateQueueButton(relabel=false){
		if (!selectedQueue.length){
			document.getElementById("next_in_queue_badge").innerText = "0";
			document.getElementById("next_in_queue").title = "Queue — ⏭ Feature next message in queue (since queue is empty, it will clear the active overlay)";
		} else {
			document.getElementById("queueSection").classList.remove("hidden");
			document.getElementById("next_in_queue_badge").innerText = selectedQueue.length;
			document.getElementById("next_in_queue").title = "Queue — ⏭ Feature next message in queue (select messages holding CTRL for add them to the queue)";
		}
		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 = '<img id="img_' + data.id + '" src="unknown.png" class="icon ' + (darkmode ? 'invert' : '') + ' hl-profile-pic" onerror="errorImage(this);" />'
				} else {
					chatImg = "";
				}
			} else if (avatars){
				if (data.type && (data.type == "twitch") && avatars){
					chatImg = '<img id="img_' + data.id + '" src="unknown.png" class="fade-in-image ' + (darkmode ? 'invert' : '') + ' 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 specialMessage = false;

			if (data.chatname){

				//if (data.chatname.toLowerCase() == "streamelements"){
				//	bot = true;
					//specialMessage = true;
				//} else if (data.chatname.toLowerCase() == "nightbot"){
				//	bot = true;
					//specialMessage = true;
				if (data.chatname.toLowerCase() == "vdoninja"){ // because why not. :)
					data.chatname = "VDO.Ninja";
				} else if (custombot && custombot.includes(data.chatname.toLowerCase().replace(/[^a-z0-9_]+/gi, ""))){ // because why not. :)
					bot = true;
				}

				if (bot && doNotShowBot){
					return;
				}

				if (bot && doNotShowBotNames){
					specialMessage = true;
					data.chatname = "";
				}


				if (hideNames){
					data.chatname = "";
				} else 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];
						}
					}
				}
			}

			var chatname = "";

			if (data.chatname){
				if (compactmode){
					if (specialMessage){
						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 if (specialMessage && compactmode){
				chatname = '<div class="hl-name'+splitMode+'"></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 (twoLines){
				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="hl-firstline">'
						+ "<div class='queueid'></div>"
						+ showType
						+ chatImg
						+ chatname
					+ '</div><div class="hl-message">'
						+ timeArrived
						+ '<span id="content_'+data.id+'">' + chatmessage + '</span>'
						+ '</div>'
					+ addImage
					+ donationHTML + '</div>');
			} else 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 || twoLines){
				// 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);
		}
	}





	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();
		} 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 getPosition(event) {
		var posx = 0;
		var posy = 0;

		if (event.pageX || event.pageY){
			posx = event.pageX;
			posy = event.pageY;
		} else if (event.clientX || event.clientY) {
			posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}

		return {x: posx, y: posy};
	}

	(function rightclickmenuthing() { // right click menu
		"use strict";

		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 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 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();
	})();


	function isEscape(evt) {
		_evt = evt || window.event;
		return "key" in _evt ? (_evt.key === "Escape" || _evt.key === "Esc") : _evt.keyCode === 27;
	}

	document.onkeydown = function(evt) {
		if (isEscape(evt)) {
			getById("chatInput_parent").classList.add("hidden");
			getById("filter_messages_parent").classList.add("hidden");
		}
	};

	document.getElementById("filter_messages").addEventListener('keyup', function(e) {
		filterMessages(document.getElementById("filter_messages").value);
	});

	(function userFilterInputModalBox() { // filter
		var menu = getById("filter_messages_parent");
		var input = getById("filter_messages");
		var filterClearButton = getById("filterClearButton");
		var filterCloseButton = getById("filterCloseButton");
		menu.style.top = "unset";
		menu.style.bottom = "5px";

		function positionMenu(e) {
			var rect = getById("filter").getBoundingClientRect();
			menu.style.left = rect.right + "px";
			menu.style.top = "unset";
			menu.style.bottom = "5px";
		}

		var lastWidth =  window.innerWidth;
		window.addEventListener("resize",function(event){
			var rect = getById("filter").getBoundingClientRect();
			menu.style.left = rect.right + "px";
		});

		function toggleInput(event){
			event.preventDefault();
			event.stopPropagation();
			positionMenu(event);
			menu.classList.toggle("hidden");
			input.focus();
			return false;
		}

		input.addEventListener("blur", function(event){
			if (menu.matches(':focus-within:not(:focus)') || menu.matches(':focus-within')){ // if a sibling has focus, don't close and retake focus
				input.focus(); // re-refocus text input.
				return;
			}
			event.preventDefault();
			event.stopPropagation();
			getById("filter").removeEventListener("click", toggleInput);
			menu.classList.add("hidden");
			setTimeout(function(){ // click vs hold
				getById("filter").addEventListener("click", toggleInput);
			},300)
			return false;
		});

		filterClearButton.addEventListener("click", function(event) {
			input.value = "";
			filterMessages(input.value);
		})

		filterCloseButton.addEventListener("click", function(event){
			event.preventDefault();
			event.stopPropagation();
			menu.classList.add("hidden");
			return false;
		});

		getById("filter").addEventListener("click", toggleInput);

	})();




	(function userChatInputModalBox() { // chat input
		var menu = getById("chatInput_parent");
		var input = getById("chatInput");
		var chatInputButton = getById("chatInputButton");
		var chatClearButton = getById("chatClearButton")
		var chatInputCloseButton = getById("chatInputCloseButton");

		menu.style.top = "unset";
		menu.style.bottom = "5px";

		function positionMenu(e) {
			var rect = getById("say_hello").getBoundingClientRect();
			menu.style.left = rect.right + "px";
			menu.style.top = "unset";
			menu.style.bottom = "5px";
		}

		var lastWidth =  window.innerWidth;
		window.addEventListener("resize",function(event){
			var rect = getById("say_hello").getBoundingClientRect();
			menu.style.left = rect.right + "px";
		});

		function toggleInput(event){
			event.preventDefault();
			event.stopPropagation();
			positionMenu(event);
			menu.classList.toggle("hidden");
			input.focus();
			return false;
		}

		function sendMessage(event) {
			event.preventDefault();
			if (input.value){
				respondP2P(input.value);
			}
			input.value = "";
		}

		input.addEventListener("keyup", function(event) {
			if (event.keyCode === 13) { // Enter
				sendMessage(event);
			}
		})

		input.addEventListener("blur", function(event){
			if (menu.matches(':focus-within:not(:focus)') || menu.matches(':focus-within')){ // if a sibling has focus, don't close and retake focus
				input.focus(); // re-refocus text input.
				return;
			}

			event.preventDefault();
			event.stopPropagation();

			getById("say_hello").removeEventListener("click", toggleInput);
			menu.classList.add("hidden");
			setTimeout(function(){ // click vs hold
				getById("say_hello").addEventListener("click", toggleInput);
			},300)
			return false;
		});

		chatInputButton.addEventListener("click", function(event) {
			sendMessage(event);
		})

		chatClearButton.addEventListener("click", function(event) {
			input.value = "";
		})

		chatInputCloseButton.addEventListener("click", function(event){
			event.preventDefault();
			event.stopPropagation();
			menu.classList.add("hidden");
			return false;
		});

		getById("say_hello").addEventListener("click", toggleInput);

	})();


	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>