Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added more settings + cleaned up animations

Browse Source
This commit is contained in:
nuttylmao
2025-05-04 21:32:40 +10:00
parent ffe5d6b494
commit 6edee0ad2d
5 changed files with 153 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
multistream-alerts/index.html
+21 -14
View File
@@ -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="contents">
<span id="username">hotarubi_TA</span>
<br>
<span id="description">gifted a Tier 3 sub</span>
<br>
<span id="attribute">to nutty</span>
<div id="theContentThatShowsFirstInsteadOfSecondContent" class="contents">
<img id="avatar"
src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png"
class="square">
<div style="flex-grow: 1;">
<span id="username">hotarubi_TA</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;">
<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 class="contents">
<div style="display: inline-flex; align-items: center; gap: 0.75em;">
<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 -35
View File
@@ -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) {
multistream-alerts/settings/settings.json
+80 -12
View File
@@ -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"
}
]
}
multistream-alerts/sfx/notification.mp3
BIN
View File
Binary file not shown.
multistream-alerts/style.css
+20 -41
View File
@@ -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 {