diff --git a/multistream-alerts/index.html b/multistream-alerts/index.html index 8609f93..c5a1c67 100644 --- a/multistream-alerts/index.html +++ b/multistream-alerts/index.html @@ -12,24 +12,31 @@
- -
- hotarubi_TA -
- gifted a Tier 3 sub -
- to nutty +
+ +
+ hotarubi_TA +
+ gifted a Tier 3 sub +
+ to nutty +
-
- - nutty +
+
+ + nutty +
+
+ +
-
- - 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 -
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js index aac477e..5b512b3 100644 --- a/multistream-alerts/script.js +++ b/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 -// document.documentElement.style.setProperty('--line-spacing', `${lineSpacing}em`); - -// // 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 text alignment +document.documentElement.style.setProperty('--text-align', textAlignment); // Set the alignment of the alert box -if (alignment == "align-to-bottom") - mainContainer.style.justifyContent = 'flex-end'; - +switch (alignment) +{ + 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.minHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px"; + alertBox.style.transition = 'all 0s ease-in-out'; + 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.minHeight = 'none'; + alertBox.style.height = theContentThatShowsLastInsteadOfFirst.offsetHeight + "px"; 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) { diff --git a/multistream-alerts/settings/settings.json b/multistream-alerts/settings/settings.json index 25c98a9..8de4d69 100644 --- a/multistream-alerts/settings/settings.json +++ b/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", - "label": "Alignment", - "description": "", + "id": "playSounds", + "label": "Sound Effect", + "description": "Play notification sound on alert", "type": "select", "options": [ { - "value": "align-to-top", - "label": "Align To Top" + "value": true, + "label": "Yes" }, { - "value": "align-to-bottom", - "label": "Align To Bottom" + "value": false, + "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" } ] } \ No newline at end of file diff --git a/multistream-alerts/sfx/notification.mp3 b/multistream-alerts/sfx/notification.mp3 new file mode 100644 index 0000000..067fcaa Binary files /dev/null and b/multistream-alerts/sfx/notification.mp3 differ diff --git a/multistream-alerts/style.css b/multistream-alerts/style.css index e4761cf..26c6327 100644 --- a/multistream-alerts/style.css +++ b/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; - /* text-align: center; */ - /* position: relative; */ - /* transition: all 1s ease-in-out; */ - /* min-height: 0px; - max-height: 0px; */ + opacity: 0; } -/* #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; - max-width: 100%; + display: block; 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 { - flex-grow: 1; +#theContentThatShowsFirstInsteadOfSecondContent { + 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 {