Added more settings + cleaned up animations

multistream-alerts/index.html

@@ -12,24 +12,31 @@
 	<div id="mainContainer" class="slide-fade">
 		<div id="alertBox" class="highlightMessage">
 			<div id="theContentThatShowsFirstInsteadOfSecond">
-				<img id="avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png" class="square">
+				<div id="theContentThatShowsFirstInsteadOfSecondContent" class="contents">
-				<div id="contents">
+					<img id="avatar"
-					<span id="username">hotarubi_TA</span>
+						src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png"
-					<br>
+						class="square">
-					<span id="description">gifted a Tier 3 sub</span>
+					<div style="flex-grow: 1;">
-					<br>
+						<span id="username">hotarubi_TA</span>
-					<span id="attribute">to nutty</span>
+						<br>
+						<span id="description">gifted a Tier 3 sub</span>
+						<br>
+						<span id="attribute">to nutty</span>
+					</div>
 				</div>
 			</div>
 			<div id="theContentThatShowsLastInsteadOfFirst">
-				<div style="display: inline-flex; align-items: center;">
+				<div class="contents">
-					<img id="avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes" src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png" class="square">
+					<div style="display: inline-flex; align-items: center; gap: 0.75em;">
-					<span id="usernameTheSecond">nutty</span>
+						<img id="avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes"
+							src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png"
+							class="square">
+						<span id="usernameTheSecond">nutty</span>
+					</div>
+					<br>
+					<span id="message">
+					</span>
 				</div>
-				<br>
-				<span id="message">
-					I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum 
-				</span>
 			</div>
 		</div>
 	</div>

multistream-alerts/script.js

@@ -32,15 +32,18 @@ let alertQueue = [];
 const showAvatar = GetBooleanParam("showAvatar", true);
 const font = urlParams.get("font") || "";
 const fontSize = GetIntParam("fontSize", 30);
+const fontColor = urlParams.get("fontColor") || "#FFFFFF";
 const useCustomBackground = GetBooleanParam("useCustomBackground", true);
 const background = urlParams.get("background") || "#000000";
 const opacity = urlParams.get("opacity") || "0.85";
+const textAlignment = urlParams.get("textAlignment") || "right";
+const alignment = urlParams.get("alignment") || "";
 
 // General
 const hideAfter = GetIntParam("hideAfter", 8);
 const showAnimation = urlParams.get("showAnimation") || "";
 const hideAnimation = urlParams.get("hideAnimation") || "";
-const alignment = urlParams.get("alignment") || "";
+const playSounds = GetBooleanParam("playSounds", true);
 const showMesesages = GetBooleanParam("showMesesages", true);
 
 // Which Twitch alerts do you want to see?
@@ -86,6 +89,7 @@ if (!showAvatar) {
 // Set fonts for the widget
 document.body.style.fontFamily = font;
 document.body.style.fontSize = `${fontSize}px`;
+document.body.style.color = fontColor;
 
 // Set custom background
 if (useCustomBackground) {
@@ -99,34 +103,22 @@ if (useCustomBackground) {
 	document.documentElement.style.setProperty('--custom-background', `${background}${hexOpacity}`);
 }
 
-// // Set line spacing
+// Set text alignment
-// document.documentElement.style.setProperty('--line-spacing', `${lineSpacing}em`);
+document.documentElement.style.setProperty('--text-align', textAlignment);
-
-// // Set the background color
-// const opacity255 = Math.round(parseFloat(opacity) * 255);
-// let hexOpacity = opacity255.toString(16);
-// if (hexOpacity.length < 2) {
-// 	hexOpacity = "0" + hexOpacity;
-// }
-// document.body.style.background = `${background}${hexOpacity}`;
-
-// // Get a list of chatters to ignore
-// const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || [];
-
-// // Set the scroll direction
-// switch (scrollDirection) {
-// 	case 1:
-// 		document.getElementById('messageList').classList.add('normalScrollDirection');
-// 		break;
-// 	case 2:
-// 		document.getElementById('messageList').classList.add('reverseScrollDirection');
-// 		break;
-// }
 
 // Set the alignment of the alert box
-if (alignment == "align-to-bottom")
+switch (alignment)
-	mainContainer.style.justifyContent = 'flex-end';
+{
-
+	case "align-to-top":
+		mainContainer.style.justifyContent = 'flex-start';
+		break;
+	case "align-to-center":
+		mainContainer.style.justifyContent = 'center';
+		break;
+	case "align-to-bottom":
+		mainContainer.style.justifyContent = 'flex-end';
+		break;
+}
 
 
 
@@ -1229,9 +1221,10 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
 	messageLabel.innerHTML = message != null ? `${message}` : '';
 	theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
 
+	// Start animation
 	theContentThatShowsFirstInsteadOfSecond.style.display = 'flex';
-	alertBox.style.maxHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
+	alertBox.style.transition = 'all 0s ease-in-out';
-	alertBox.style.minHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
+	alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
 	alertBox.style.animation = `${showAnimation} 0.5s ease-out forwards`;
 
 	// Run the Streamer.bot action if there is one
@@ -1240,7 +1233,13 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
 		await client.doAction({name: sbAction}, sbData);
 	}
 
-	// (1) Set timeout (5 seconds)
+	// Play sound effect
+	if (playSounds) {
+		const audio = new Audio('sfx/notification.mp3');
+		audio.play();
+	}
+
+	// (1) Set timeout (8 seconds by default)
 	// (2) Set the message label
 	// (3) Calculate the height of message label
 	// (4) Set the height of alertBox
@@ -1249,20 +1248,18 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
 		alertBox.style.transition = 'all 0.5s ease-in-out';
 		theContentThatShowsFirstInsteadOfSecond.style.opacity = 0;
 		
-		theContentThatShowsFirstInsteadOfSecond.style.position = 'absolute';
 		theContentThatShowsLastInsteadOfFirst.style.display = 'inline-block';
-		alertBox.style.maxHeight = theContentThatShowsLastInsteadOfFirst.offsetHeight + "px";
+		alertBox.style.height = theContentThatShowsLastInsteadOfFirst.offsetHeight + "px";
-		alertBox.style.minHeight = 'none';
 		theContentThatShowsLastInsteadOfFirst.style.opacity = 1;
 			
 		setTimeout(() => {
 			alertBox.style.animation = `${hideAnimation} 0.5s ease-out forwards`;
 
 			setTimeout(() => {
-				alertBox.style.maxHeight = '0px';
+				//alertBox.style.maxHeight = '0px';
+				alertBox.style.height = '0px';
 				theContentThatShowsFirstInsteadOfSecond.style.opacity = 1;
 				theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
-				theContentThatShowsFirstInsteadOfSecond.style.position = 'relative';
 				theContentThatShowsLastInsteadOfFirst.style.display = 'none';
 				widgetLocked = false;
 				if (alertQueue.length > 0) {

multistream-alerts/settings/settings.json

@@ -34,6 +34,14 @@
 			"defaultValue": 30,
 			"group": "Appearance"
 		},
+		{
+			"id": "fontColor",
+			"label": "Font Color",
+			"description": "",
+			"type": "color",
+			"defaultValue": "#FFFFFF",
+			"group": "Appearance"
+		},
 		{
 			"id": "useCustomBackground",
 			"label": "Use Custom Background Color",
@@ -63,6 +71,50 @@
 			"showIf": "useCustomBackground",
 			"group": "Appearance"
 		},
+		{
+			"id": "textAlignment",
+			"label": "Text Alignment",
+			"description": "",
+			"type": "select",
+			"options": [
+				{
+					"value": "left",
+					"label": "Left"
+				},
+				{
+					"value": "center",
+					"label": "Center"
+				},
+				{
+					"value": "right",
+					"label": "Right"
+				}
+			],
+			"defaultValue": "left",
+			"group": "Appearance"
+		},
+		{
+			"id": "alignment",
+			"label": "Alert Alignment",
+			"description": "",
+			"type": "select",
+			"options": [
+				{
+					"value": "align-to-top",
+					"label": "Align To Top"
+				},
+				{
+					"value": "align-to-center",
+					"label": "Align To Center"
+				},
+				{
+					"value": "align-to-bottom",
+					"label": "Align To Bottom"
+				}
+			],
+			"defaultValue": "align-to-bottom",
+			"group": "Appearance"
+		},
 		{
 			"id": "hideAfter",
 			"label": "Hide After",
@@ -85,11 +137,11 @@
 				},
 				{
 					"value": "slide-in-from-top",
-					"label": "Slide Down From Top"
+					"label": "Slide In From Top"
 				},
 				{
 					"value": "slide-in-from-bottom",
-					"label": "Slide Up From Bottom"
+					"label": "Slide In From Bottom"
 				},
 				{
 					"value": "slide-in-from-left",
@@ -115,11 +167,11 @@
 				},
 				{
 					"value": "slide-out-top",
-					"label": "Slide Up And Out"
+					"label": "Slide Out Top"
 				},
 				{
 					"value": "slide-out-bottom",
-					"label": "Slide Down And Out"
+					"label": "Slide Out Down"
 				},
 				{
 					"value": "slide-out-left",
@@ -134,21 +186,21 @@
 			"group": "General"
 		},
 		{
-			"id": "alignment",
+			"id": "playSounds",
-			"label": "Alignment",
+			"label": "Sound Effect",
-			"description": "",
+			"description": "Play notification sound on alert",
 			"type": "select",
 			"options": [
 				{
-					"value": "align-to-top",
+					"value": true,
-					"label": "Align To Top"
+					"label": "Yes"
 				},
 				{
-					"value": "align-to-bottom",
+					"value": false,
-					"label": "Align To Bottom"
+					"label": "No"
 				}
 			],
-			"defaultValue": "align-to-bottom",
+			"defaultValue": true,
 			"group": "General"
 		},
 		{
@@ -396,6 +448,22 @@
 			"defaultValue": "",
 			"showIf": "showFourthwallAlerts",
 			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "address",
+			"label": "IP Address",
+			"description": "",
+			"type": "text",
+			"defaultValue": "127.0.0.1",
+			"group": "Streamer.bot Websocket Server Settings"
+		},
+		{
+			"id": "port",
+			"label": "Port",
+			"description": "",
+			"type": "text",
+			"defaultValue": "8080",
+			"group": "Streamer.bot Websocket Server Settings"
 		}
 	]
 }

multistream-alerts/style.css

@@ -48,67 +48,36 @@ html {
 }
 
 #alertBox {
-	/* padding: 0.5em; */
+	padding: 0.5em;
 	border-radius: 0.75em;
 	filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1));
 	position: relative;
 	overflow: hidden;
-	box-sizing: border-box;
+	opacity: 0;
-	/* text-align: center; */
-	/* position: relative; */
-	/* transition: all 1s ease-in-out; */
-	/* min-height: 0px;
-	max-height: 0px; */
 }
 
-/* #alertBox::before {
-	content: "";
-	position: absolute;
-	top: -50px;
-	right: -50px;
-	bottom: -50px;
-	left: -50px;
-	background-image: url('https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png');
-	background-color: rgba(0, 0, 0, 0.6);
-	background-size: cover;
-	background-position: center;
-	background-blend-mode: multiply;	
-	filter: blur(25px);
-	z-index: -1;
-} */
-
 #theContentThatShowsFirstInsteadOfSecond {
-	display: flex;
-	align-items: center;
 	z-index: 1;
-	/* position: absolute; */
-	/* left: var(--margin);
-	top: var(--margin); */
 	transition: inherit;
-	padding: var(--margin) calc( 1.5 * var(--margin));
 	display: none;
+	position: absolute;
+	width: calc(100% - 1em);
+	box-sizing: border-box;
 }
 
 #theContentThatShowsLastInsteadOfFirst {
-	/* position: absolute; */
 	display: inline-block;
 	align-items: center;
 	z-index: 0;
-	/* position: absolute; */
-	/* left: var(--margin);
-	top: var(--margin); */
-	padding: var(--margin) calc( 1.5 * var(--margin));
 	transition: inherit;
 	display: none;
+	width: 100%;
 }
 
 #avatar {
-	display: inline;
+	display: block;
-	max-width: 100%;
 	height: 4em;
 	filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
-	object-fit: cover;
-	margin-right: 0.75em;
 }
 
 #avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes {
@@ -117,11 +86,21 @@ html {
 	height: 2em;
 	filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5));
 	object-fit: cover;
-	margin-right: 0.75em;
 }
 
-#contents {
+#theContentThatShowsFirstInsteadOfSecondContent {
-	flex-grow: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75em;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.contents {
+	/* background: red; */
+	text-align: var(--text-align);
 }
 
 #username {