Layout updates

multichat-overlay/index.html

@@ -21,7 +21,9 @@
 
 	<template id="messageTemplate">
 		<div id="messageContainer">
-			<label>
+			<div class="message-contents">
+				<div id="avatar"></div>
+				<div>
 					<div id="firstMessage">
 						<span>✨ First Time Chat</span>
 						<span> from viewer</span>
@@ -30,7 +32,6 @@
 						<span id="sharedChatChannel"></span>
 					</div>
 					<label id="userInfo">
-					<span id="avatar"></span>
 						<span id="timestamp"></span>
 						<span id="platform"></span>
 						<span id="badgeList"></span>
@@ -43,7 +44,8 @@
 						<span>➥ Replying to <span id="replyUser"></span>: <span id="replyMsg"></span></span>
 					</div>
 					<span id="message"></span>
-			</label>
+				</div>
+			</div>
 		</div>
 	</template>
 
@@ -72,16 +74,18 @@
 
 	<template id="tiktok-gift-template">
 		<div class="tiktok-gift">
-			<img class="tiktok-gift-avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/f632e0c6-38e2-4065-a29e-6ba9b3e8cacf-profile_image-300x300.png"/>
+			<img class="tiktok-gift-avatar"
+				src="https://static-cdn.jtvnw.net/jtv_user_pictures/f632e0c6-38e2-4065-a29e-6ba9b3e8cacf-profile_image-300x300.png" />
 			<div class="tiktok-gift-message">
-				<span id="tiktok-gift-username" style="font-size: 0.9em;">
+				<span id="tiktok-gift-username" style="font-size: 0.9em; font-weight: 700;">
 				</span>
 				<br />
 				<span style="font-size: 0.7em;">
 					sent <span id="tiktok-gift-name"></span>
 				</span>
 			</div>
-			<img class="tiktok-gift-sticker" src="https://p19-webcast.tiktokcdn.com/img/maliva/webcast-va/3851a489dea62b3a9fe99f61de5470ae~tplv-obj.png"/>
+			<img class="tiktok-gift-sticker"
+				src="https://p19-webcast.tiktokcdn.com/img/maliva/webcast-va/3851a489dea62b3a9fe99f61de5470ae~tplv-obj.png" />
 			<div id="tiktok-gift-repeat-count">
 				x13
 			</div>

multichat-overlay/script.js

@@ -348,13 +348,13 @@ function tikfinityConnect() {
 	tikfinityWebsocket.onclose = function () {
 		console.error(`TikFinity disconnected...`)
 		tikfinityWebsocket = null;
-		setTimeout(connect, 1000); // Schedule a reconnect attempt
+		setTimeout(tikfinityConnect, 1000); // Schedule a reconnect attempt
 	}
 
 	tikfinityWebsocket.onerror = function () {
 		console.error(`TikFinity failed for some reason...`)
 		tikfinityWebsocket = null;
-		setTimeout(connect, 1000); // Schedule a reconnect attempt
+		setTimeout(tikfinityConnect, 1000); // Schedule a reconnect attempt
 	}
 
 	tikfinityWebsocket.onmessage = function (response) {
@@ -431,7 +431,6 @@ async function TwitchChatMessage(data) {
 	}
 
 	// Set Shared Chat
-	console.log(showTwitchSharedChat);
 	const isSharedChat = data.isSharedChat;
 	if (isSharedChat) {
 		if (showTwitchSharedChat > 1) {
@@ -501,6 +500,7 @@ async function TwitchChatMessage(data) {
 	if (inlineChat) {
 		instance.querySelector("#colon-separator").style.display = `inline`;
 		instance.querySelector("#line-space").style.display = `none`;
+		instance.querySelector(".message-contents").style.alignItems = 'center';
 	}
 
 	// Render platform
@@ -559,6 +559,10 @@ async function TwitchChatMessage(data) {
 		avatar.classList.add("avatar");
 		avatarDiv.appendChild(avatar);
 	}
+	else
+	{
+		avatarDiv.style.display = 'none';
+	}
 
 	// Hide the header if the same username sends a message twice in a row
 	// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)
@@ -566,8 +570,10 @@ async function TwitchChatMessage(data) {
 	if (groupConsecutiveMessages && messageList.children.length > 0 && scrollDirection != 2) {
 		const lastPlatform = messageList.lastChild.dataset.platform;
 		const lastUserId = messageList.lastChild.dataset.userId;
-		if (lastPlatform == "twitch" && lastUserId == data.user.id)
+		if (lastPlatform == "twitch" && lastUserId == data.user.id){
 			userInfoDiv.style.display = "none";
+			avatarDiv.innerHTML = '';
+		}
 	}
 
 	// Embed image
@@ -624,8 +630,8 @@ async function TwitchAutomaticRewardRedemption(data) {
 	const gigaEmote = data.gigantified_emote.imageUrl;
 	const image = new Image();
 	image.src = gigaEmote;
-	image.style.padding = "20px 0px";
+	image.style.padding = "0px 0px";
-	image.style.width = "50%";
+	image.style.width = "10em";
 
 	image.onload = function () {
 		messageDiv.innerHTML = '';
@@ -696,6 +702,9 @@ async function TwitchAnnouncement(data) {
 	content.querySelector("#colon-separator").style.display = `inline`;
 	content.querySelector("#line-space").style.display = `none`;
 
+	// Remove the avatar
+	content.querySelector("#avatar").style.display = `none`;
+
 	// Render platform
 	content.querySelector("#platform").style.display = `none`;
 
@@ -1112,6 +1121,7 @@ function YouTubeMessage(data) {
 	if (inlineChat) {
 		instance.querySelector("#colon-separator").style.display = `inline`;
 		instance.querySelector("#line-space").style.display = `none`;
+		instance.querySelector(".message-contents").style.alignItems = 'center';
 	}
 
 	// Render platform
@@ -2007,6 +2017,7 @@ async function KickChatMessage(data) {
 	if (inlineChat) {
 		instance.querySelector("#colon-separator").style.display = `inline`;
 		instance.querySelector("#line-space").style.display = `none`;
+		instance.querySelector(".message-contents").style.alignItems = 'center';
 	}
 
 	// Render platform
@@ -2451,6 +2462,7 @@ function TikTokChat(data) {
 	if (inlineChat) {
 		instance.querySelector("#colon-separator").style.display = `inline`;
 		instance.querySelector("#line-space").style.display = `none`;
+		instance.querySelector(".message-contents").style.alignItems = 'center';
 	}
 
 	// Render platform

multichat-overlay/settings/settings.json

@@ -5,7 +5,7 @@
 			"label": "Show Platform",
 			"description": "",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
 			"group": "Appearance"
 		},
 		{
@@ -71,7 +71,7 @@
 			"type": "number",
 			"min": 1,
 			"max": 120,
-			"defaultValue": 30,
+			"defaultValue": 20,
 			"group": "Appearance"
 		},
 		{
@@ -97,7 +97,7 @@
 			"label": "Background Opacity",
 			"description": "",
 			"type": "number",
-			"defaultValue": "0.85",
+			"defaultValue": "0.90",
 			"min": 0,
 			"max": 1,
 			"step": ".01",

multichat-overlay/style.css

@@ -1,8 +1,8 @@
 * {
 	margin: 0;
 	padding: 0;
-	--margin: 40px;
+	--margin: 20px;
-	--border-radius: 20px;
+	--border-radius: 0.5em;
 	/* --line-spacing: 1.7em; */
 }
 
@@ -95,15 +95,25 @@ li {
 
 .highlightMessage {
 	background: #adadad46;
-	padding: 20px 40px;
+	padding: 0.5em 1em;
 	border-radius: var(--border-radius);
 }
 
+.message-contents {
+	display: flex;
+	flex-direction: row;
+	gap: 1em;
+}
+
+#avatar {
+	width: 2em;
+}
+
 .avatar {
 	height: 2em;
 	margin: 1px;
 	transform: translate(0px, 0.25em);
-	border-radius: 50%
+	border-radius: 50%;
 }
 
 .timestamp,
@@ -177,7 +187,7 @@ li {
 
 #card {
 	background: #adadad46;
-	padding: 20px 40px;
+	padding: 0.5em 1em;
 	border-radius: var(--border-radius);
 }
 
@@ -198,8 +208,8 @@ li {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: 20px;
+	gap: 1em;
-	padding: 20px 40px;
+	padding: 0.5em 1em;
 	border-radius: var(--border-radius);
 	max-width: 100%;
 	background: linear-gradient(#262626BF, #000000BF) !important;