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

Changed YouTube sticker format + various small fixes

Browse Source
This commit is contained in:
nuttylmao
2025-07-21 11:34:46 +10:00
parent d3abd7a133
commit 9326a1802d
3 changed files with 28 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
multichat-overlay/index.html
+3 -14
View File
@@ -40,9 +40,9 @@
<span id="colon-separator" style="display: none;">: </span> <span id="colon-separator" style="display: none;">: </span>
<br id="line-space"> <br id="line-space">
</label> </label>
<div id="reply"> <label id="reply">
<span>➥ Replying to <span id="replyUser"></span>: <span id="replyMsg"></span></span> <div>➥ Replying to <span id="replyUser"></span>: <span id="replyMsg"></span></div>
</div> </label>
<span id="message"></span> <span id="message"></span>
</div> </div>
</div> </div>
@@ -65,17 +65,6 @@
</div> </div>
</template> </template>
<template id="stickerTemplate">
<div id="sticker">
<div id="youtubeSuperSticker">
<div style="width: 100%; text-align: center;">
<img id="stickerImg">
</div>
<div id="stickerLabel"></div>
</div>
</div>
</template>
<template id="tiktok-gift-template"> <template id="tiktok-gift-template">
<div class="tiktok-gift"> <div class="tiktok-gift">
<img class="tiktok-gift-avatar" <img class="tiktok-gift-avatar"
multichat-overlay/script.js
+11 -11
View File
@@ -535,7 +535,7 @@ async function TwitchChatMessage(data) {
const replyUser = data.message.reply.userName; const replyUser = data.message.reply.userName;
const replyMsg = data.message.reply.msgBody; const replyMsg = data.message.reply.msgBody;
replyDiv.style.display = 'block'; replyDiv.style.display = 'inline-block';
replyUserDiv.innerText = replyUser; replyUserDiv.innerText = replyUser;
replyMsgDiv.innerText = replyMsg; replyMsgDiv.innerText = replyMsg;
} }
@@ -1376,18 +1376,18 @@ function YouTubeSuperSticker(data) {
// Set the card background colors // Set the card background colors
cardDiv.classList.add('youtube'); cardDiv.classList.add('youtube');
const stickerTemplate = document.getElementById('stickerTemplate'); avatarDiv.style.width = 'auto';
// Create a new instance of the template // Set the text
const stickerInstance = stickerTemplate.content.cloneNode(true); const user = data.user.name;
const amount = data.amount;
const stickerURL = FindFirstImageUrl(data);
const stickerImage = `<img src="${stickerURL}" class="youtube-super-sticker"/>`;
// Render sticker avatarDiv.innerHTML = stickerImage;
stickerInstance.querySelector("#stickerImg").src = FindFirstImageUrl(data); titleDiv.innerHTML = `${user} sent a Super Sticker (${amount})`;
stickerInstance.querySelector("#stickerLabel").innerText = `${data.user.name} sent a Super Sticker (${data.amount})`;
contentDiv.appendChild(stickerInstance); AddMessageItem(instance);
AddMessageItem(instance, data.eventId);
} }
function YouTubeNewSponsor(data) { function YouTubeNewSponsor(data) {
@@ -2104,7 +2104,7 @@ async function KickChatMessage(data) {
const replyUser = data.metadata.original_sender.username; const replyUser = data.metadata.original_sender.username;
const replyMsg = data.metadata.original_message.content; const replyMsg = data.metadata.original_message.content;
replyDiv.style.display = 'block'; replyDiv.style.display = 'inline-block';
replyUserDiv.innerText = replyUser; replyUserDiv.innerText = replyUser;
replyMsgDiv.innerHTML = replaceEmotes(replyMsg);; replyMsgDiv.innerHTML = replaceEmotes(replyMsg);;
} }
multichat-overlay/style.css
+10 -12
View File
@@ -126,10 +126,14 @@ li {
} }
.avatar { .avatar {
width: 2em; /* Set width equal to height */
height: 2em; height: 2em;
margin: 1px; margin: 1px;
transform: translate(0px, 0.25em); transform: translate(0px, 0.25em);
border-radius: 50%; border-radius: 50%;
object-fit: cover; /* Crop to fill the circle */
overflow: hidden; /* Ensure no overflow outside the circle */
display: inline-block; /* Just in case */
} }
.timestamp, .timestamp,
@@ -196,8 +200,9 @@ li {
#reply { #reply {
display: none; display: none;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: normal; /* Allow line wrapping */
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-word; /* Break long words if necessary */
font-size: 0.7em; font-size: 0.7em;
opacity: 0.5; opacity: 0.5;
} }
@@ -213,17 +218,10 @@ li {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
#youtubeSuperSticker { .youtube-super-sticker {
display: block; height: 2em;
} margin: 1px;
transform: translate(0px, 0.25em);
#sticker-img {
height: 5em;
}
#stickerLabel {
text-align: center;
font-weight: 700;
} }
.tiktok-gift { .tiktok-gift {