diff --git a/.utilities/settings-page-builder/script.js b/.utilities/settings-page-builder/script.js index 3984ea4..3fea5af 100644 --- a/.utilities/settings-page-builder/script.js +++ b/.utilities/settings-page-builder/script.js @@ -129,9 +129,9 @@ document.addEventListener('DOMContentLoaded', () => { if (option === setting.defaultValue) { optionElement.selected = true; } - inputElement.value = setting.defaultValue; inputElement.appendChild(optionElement); }); + inputElement.value = setting.defaultValue; break; case 'color': inputElement = document.createElement('input'); diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js index ff3fb7a..0eb6006 100644 --- a/multistream-alerts/script.js +++ b/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); } diff --git a/multistream-alerts/settings/settings.json b/multistream-alerts/settings/settings.json index 030dd8e..a9d985a 100644 --- a/multistream-alerts/settings/settings.json +++ b/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", diff --git a/multistream-alerts/style.css b/multistream-alerts/style.css index 59bc810..64deb61 100644 --- a/multistream-alerts/style.css +++ b/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;