Implemented more settings

multistream-alerts/script.js

@@ -9,6 +9,7 @@ const sbServerAddress = urlParams.get("address") || "127.0.0.1";
 const sbServerPort = urlParams.get("port") || "8080";
 const avatarMap = new Map();
 
+const mainContainer = document.getElementById('mainContainer');
 const alertBox = document.getElementById('alertBox');
 const avatarElement = document.getElementById('avatar');
 const avatarSmallElement = document.getElementById('avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes');
@@ -123,8 +124,10 @@ const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", false);
 const fourthwallAlertAction = urlParams.get("fourthwallAlertAction") || "";
 
 // Set avatar visibility
-if (!showAvatar)
+if (!showAvatar) {
 	avatarElement.style.display = 'none';
+	avatarSmallElement.style.display = 'none';
+}
 
 // Set fonts for the widget
 document.body.style.fontFamily = font;
@@ -154,6 +157,10 @@ document.body.style.fontSize = `${fontSize}px`;
 // 		break;
 // }
 
+// Set the alignment of the alert box
+if (alignment == "align-to-bottom")
+	mainContainer.style.justifyContent = 'flex-end';
+
 
 
 
@@ -304,7 +311,7 @@ client.on('Fourthwall.GiftDrawEnded', (response) => {
 ///////////////////////
 
 async function TwitchCheer(data) {
-	if (!showTwitchSubs)
+	if (!showTwitchCheers)
 		return;
 
 	// Set the text
@@ -352,7 +359,9 @@ async function TwitchCheer(data) {
 		`cheered ${bits} bits`,
 		'',
 		username,
-		message
+		message,
+		twitchCheerAction,
+		data
 	);
 }
 
@@ -497,7 +506,7 @@ async function TwitchRaid(data) {
 		'',
 		username,
 		'',
-		twitchFollowAction,
+		twitchRaidAction,
 		data
 	);
 }
@@ -1286,9 +1295,9 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
 	theContentThatShowsFirstInsteadOfSecond.style.display = 'flex';
 	alertBox.style.maxHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
 	alertBox.style.minHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
-	alertBox.style.animation = 'slideInFromRight 0.5s ease-out forwards';
+	alertBox.style.animation = `${showAnimation} 0.5s ease-out forwards`;
 
-	// Run the Streamer.bot action if there is one	
+	// Run the Streamer.bot action if there is one
 	if (sbAction) {
 		console.debug('Running Streamer.bot action: ' + sbAction);
 		await client.doAction({name: sbAction}, sbData);
@@ -1310,7 +1319,7 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
 		theContentThatShowsLastInsteadOfFirst.style.opacity = 1;
 			
 		setTimeout(() => {
-			alertBox.style.animation = 'slideOffRight 0.5s ease-out forwards';
+			alertBox.style.animation = `${hideAnimation} 0.5s ease-out forwards`;
 
 			setTimeout(() => {
 				alertBox.style.maxHeight = '0px';
@@ -1325,7 +1334,7 @@ async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText,
 					UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.username, data.message, data.sbAction, data.sbData);
 				}
 			}, 1000);
-		}, message ? hideAfter * 1000 : 0);		
+		}, (message && showMesesages) ? hideAfter * 1000 : 0);		
 	}, hideAfter * 1000);
 
 }

multistream-alerts/settings/settings.json

@@ -82,23 +82,23 @@
 					"label": "Fade In"
 				},
 				{
-					"value": "slide-from-top",
-					"label": "Slide From Top"
+					"value": "slide-in-from-top",
+					"label": "Slide Down From Top"
 				},
 				{
-					"value": "slide-from-bottom",
-					"label": "Slide From Bottom"
+					"value": "slide-in-from-bottom",
+					"label": "Slide Up From Bottom"
 				},
 				{
-					"value": "slide-from-left",
-					"label": "Slide From Left"
+					"value": "slide-in-from-left",
+					"label": "Slide In From Left"
 				},
 				{
-					"value": "slide-from-right",
-					"label": "Slide From Right"
+					"value": "slide-in-from-right",
+					"label": "Slide In From Right"
 				}
 			],
-			"defaultValue": "fade-in",
+			"defaultValue": "slide-in-from-bottom",
 			"group": "General"
 		},
 		{
@@ -112,23 +112,23 @@
 					"label": "Fade Out"
 				},
 				{
-					"value": "slide-top",
-					"label": "Slide Top"
+					"value": "slide-out-top",
+					"label": "Slide Up And Out"
 				},
 				{
-					"value": "slide-bottom",
-					"label": "Slide Bottom"
+					"value": "slide-out-bottom",
+					"label": "Slide Down And Out"
 				},
 				{
-					"value": "slide-left",
-					"label": "Slide Left"
+					"value": "slide-out-left",
+					"label": "Slide Out Left"
 				},
 				{
-					"value": "slide-right",
-					"label": "Slide Right"
+					"value": "slide-out-right",
+					"label": "Slide Out Right"
 				}
 			],
-			"defaultValue": "fade-in",
+			"defaultValue": "slide-out-bottom",
 			"group": "General"
 		},
 		{
@@ -137,13 +137,13 @@
 			"description": "",
 			"type": "select",
 			"options": [
-				{
-					"value": "align-to-bottom",
-					"label": "Align To Bottom"
-				},
 				{
 					"value": "align-to-top",
 					"label": "Align To Top"
+				},
+				{
+					"value": "align-to-bottom",
+					"label": "Align To Bottom"
 				}
 			],
 			"defaultValue": "align-to-bottom",

multistream-alerts/style.css

@@ -1,7 +1,7 @@
 * {
 	margin: 0;
 	padding: 0;
-	--margin: 0.5em;
+	--margin: 1em;
 	--border-radius: 1em;
 	/* font-size: 30px; */
 	/* --line-spacing: 1.7em; */
@@ -44,7 +44,7 @@ html {
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
-	justify-content: flex-end;
+	/* justify-content: flex-end; */
 }
 
 #alertBox {
@@ -174,7 +174,25 @@ html {
 	font-style: italic;
 }
 
-@keyframes slideInFromTop {
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}@keyframes slide-in-from-top {
 	0% {
 		transform: translateY(-100%);
 		opacity: 0;
@@ -186,7 +204,19 @@ html {
 	}
 }
 
-@keyframes slideOffUp {
+@keyframes slide-in-from-top {
+	0% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slide-out-top {
 	0% {
 		transform: translateY(0);
 		opacity: 1;
@@ -198,7 +228,7 @@ html {
 	}
 }
 
-@keyframes slideInFromBottom {
+@keyframes slide-in-from-bottom {
 	0% {
 		transform: translateY(100%);
 		opacity: 0;
@@ -210,7 +240,7 @@ html {
 	}
 }
 
-@keyframes slideOffDown {
+@keyframes slide-out-bottom {
 	0% {
 		transform: translateY(0);
 		opacity: 1;
@@ -222,7 +252,7 @@ html {
 	}
 }
 
-@keyframes slideInFromLeft {
+@keyframes slide-in-from-left {
 	0% {
 		transform: translateX(-100%);
 		opacity: 0;
@@ -234,7 +264,7 @@ html {
 	}
 }
 
-@keyframes slideOffLeft {
+@keyframes slide-out-left {
 	0% {
 		transform: translateX(0);
 		opacity: 1;
@@ -246,7 +276,7 @@ html {
 	}
 }
 
-@keyframes slideInFromRight {
+@keyframes slide-in-from-right {
 	0% {
 		transform: translateX(100%);
 		opacity: 0;
@@ -258,7 +288,7 @@ html {
 	}
 }
 
-@keyframes slideOffRight {
+@keyframes slide-out-right {
 	0% {
 		transform: translateX(0);
 		opacity: 1;