311 lines
9.7 KiB
JavaScript
311 lines
9.7 KiB
JavaScript
|
let totalMessages = 0, messagesLimit = 0, channelName, provider, addition, removeSelector;
|
||
|
|
let hideCommands = "true";
|
||
|
|
let messageSize = 24;
|
||
|
|
let hideAfter = 60;
|
||
|
|
let ignoredUsers = [];
|
||
|
|
let animationIn = 'bounceIn';
|
||
|
|
let animationOut = 'bounceOut';
|
||
|
|
let borderMessage = '#000000';
|
||
|
|
let carimboHora = "nao";
|
||
|
|
|
||
|
|
window.addEventListener("onEventReceived", function (obj) {
|
||
|
|
// Deletar mensagens
|
||
|
|
if (obj.detail.listener === "delete-message") {
|
||
|
|
const msgId = obj.detail.event.msgId;
|
||
|
|
$(`.message-row[data-id=${msgId}]`).remove();
|
||
|
|
return;
|
||
|
|
} else if (obj.detail.listener === "delete-messages") {
|
||
|
|
const userId = obj.detail.event.userId;
|
||
|
|
$(`.message-row[data-from=${userId}]`).remove();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Testar chat
|
||
|
|
if (obj.detail.event.listener === "widget-button") {
|
||
|
|
if (obj.detail.event.field === "testMessage") {
|
||
|
|
let emulated = new CustomEvent("onEventReceived", {
|
||
|
|
detail: {
|
||
|
|
listener: "message",
|
||
|
|
event: {
|
||
|
|
service: "twitch",
|
||
|
|
data: {
|
||
|
|
time: Date.now(),
|
||
|
|
tags: {
|
||
|
|
"badge-info": "",
|
||
|
|
badges: "moderator/1,partner/1",
|
||
|
|
color: "#5B99FF",
|
||
|
|
"display-name": "StreamElements",
|
||
|
|
emotes: "25:46-50",
|
||
|
|
flags: "",
|
||
|
|
id: "43285909-412c-4eee-b80d-89f72ba53142",
|
||
|
|
mod: "1",
|
||
|
|
"room-id": "85827806",
|
||
|
|
subscriber: "0",
|
||
|
|
"tmi-sent-ts": "1579444549265",
|
||
|
|
turbo: "0",
|
||
|
|
"user-id": "100135110",
|
||
|
|
"user-type": "mod",
|
||
|
|
},
|
||
|
|
nick: channelName,
|
||
|
|
userId: "100135110",
|
||
|
|
displayName: channelName,
|
||
|
|
displayColor: "#5B99FF",
|
||
|
|
badges: [
|
||
|
|
{
|
||
|
|
type: "moderator",
|
||
|
|
version: "1",
|
||
|
|
url:
|
||
|
|
"https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3",
|
||
|
|
description: "Moderator",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "partner",
|
||
|
|
version: "1",
|
||
|
|
url:
|
||
|
|
"https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3",
|
||
|
|
description: "Verified",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
channel: channelName,
|
||
|
|
text: "Boo! This is a test message. The bloody chat widget is working.",
|
||
|
|
isAction: !1,
|
||
|
|
emotes: [
|
||
|
|
{
|
||
|
|
type: "twitch",
|
||
|
|
name: "Kappa",
|
||
|
|
id: "25",
|
||
|
|
gif: !1,
|
||
|
|
urls: {
|
||
|
|
1: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0",
|
||
|
|
2: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0",
|
||
|
|
4: "https://static-cdn.jtvnw.net/emoticons/v1/25/3.0",
|
||
|
|
},
|
||
|
|
start: 46,
|
||
|
|
end: 50,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
msgId: "43285909-412c-4eee-b80d-89f72ba53142",
|
||
|
|
},
|
||
|
|
renderedText:
|
||
|
|
'Boo! This is a test message. The bloody chat widget is working <img src="https://static-cdn.jtvnw.net/emoticons/v1/25/1.0" srcset="https://static-cdn.jtvnw.net/emoticons/v1/25/1.0 1x, https://static-cdn.jtvnw.net/emoticons/v1/25/1.0 2x, https://static-cdn.jtvnw.net/emoticons/v1/25/3.0 4x" title="Kappa" class="emote">',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
window.dispatchEvent(emulated);
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tratar mensagem
|
||
|
|
if (obj.detail.listener !== "message") return;
|
||
|
|
let data = obj.detail.event.data;
|
||
|
|
|
||
|
|
if (data.text.startsWith("!") && hideCommands === "true") return;
|
||
|
|
|
||
|
|
if (ignoredUsers.indexOf(data.nick) !== -1) return;
|
||
|
|
|
||
|
|
let message = attachEmotes(data);
|
||
|
|
let badges = "",
|
||
|
|
badge;
|
||
|
|
for (let i = 0; i < data.badges.length; i++) {
|
||
|
|
badge = data.badges[i];
|
||
|
|
badges += `<img alt="" src="${badge.url}" class="badge"> `;
|
||
|
|
}
|
||
|
|
|
||
|
|
let color = data.tags.color;
|
||
|
|
if (color === "") {
|
||
|
|
const username = data.displayName;
|
||
|
|
color = data.displayColor !== "" ? data.displayColor : "#" + (md5(username).substr(26));
|
||
|
|
}
|
||
|
|
|
||
|
|
addMessage(obj.detail.event.data.displayName,
|
||
|
|
message,
|
||
|
|
badges,
|
||
|
|
data.userId,
|
||
|
|
data.msgId,
|
||
|
|
color,
|
||
|
|
data.isAction);
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("onWidgetLoad", function (obj) {
|
||
|
|
const fieldData = obj.detail.fieldData;
|
||
|
|
messagesLimit = fieldData.messagesLimit;
|
||
|
|
topDegrade = fieldData.topDegrade;
|
||
|
|
hideCommands = fieldData.hideCommands;
|
||
|
|
hideAfter = fieldData.hideAfter;
|
||
|
|
animationIn = fieldData.animationIn;
|
||
|
|
animationOut = fieldData.animationOut;
|
||
|
|
borderMessage = fieldData.msgBorderColor;
|
||
|
|
carimboHora = fieldData.carimboHora;
|
||
|
|
channelName = obj.detail.channel.username;
|
||
|
|
messageSize = fieldData.messageSize;
|
||
|
|
borderColorUser = fieldData.msgBorderColorUser;
|
||
|
|
ignoredUsers = fieldData.ignoredUsers
|
||
|
|
.toLowerCase()
|
||
|
|
.replace(" ", "")
|
||
|
|
.split(",");
|
||
|
|
fetch('https://api.streamelements.com/kappa/v2/channels/' + obj.detail.channel.id + '/').then(response => response.json()).then((profile) => {
|
||
|
|
provider = profile.provider;
|
||
|
|
});
|
||
|
|
|
||
|
|
if (fieldData.alignMessages === "display: block") {
|
||
|
|
addition = "prepend";
|
||
|
|
removeSelector = ".message-row:nth-child(n+" + (messagesLimit + 1) + ")"
|
||
|
|
} else {
|
||
|
|
addition = "append";
|
||
|
|
removeSelector = ".message-row:nth-last-child(n+" + (messagesLimit + 1) + ")"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function addMessage(username, message, badges, userId, msgId, color, isAction) {
|
||
|
|
totalMessages += 1;
|
||
|
|
let actionClass = "";
|
||
|
|
if (isAction) {
|
||
|
|
actionClass = "action";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (borderColorUser === "sim") {
|
||
|
|
borderMessage = color;
|
||
|
|
}
|
||
|
|
|
||
|
|
let hora = "";
|
||
|
|
if (carimboHora === "sim") {
|
||
|
|
let d = new Date();
|
||
|
|
let messageSizeTime = messageSize-(messageSize/4);
|
||
|
|
hora = `
|
||
|
|
<br>
|
||
|
|
<div class="time" style="font-size: ${messageSizeTime}px;">
|
||
|
|
${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(-2)}
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
const element = $.parseHTML(`
|
||
|
|
<div data-from="${userId}" data-id="${msgId}" class="message-row {animationIn} animated" id="msg-${totalMessages}">
|
||
|
|
<div class="meta" style="background-color: ${color};">
|
||
|
|
<div class="name">${username}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="meta1">
|
||
|
|
<div class="badges">${badges}</div>
|
||
|
|
<div class="name">${username}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="message">
|
||
|
|
<div class="container-message ${actionClass}" style="border: 2px solid ${borderMessage};">
|
||
|
|
${message}
|
||
|
|
${hora}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`);
|
||
|
|
|
||
|
|
if (addition === "append") {
|
||
|
|
if (hideAfter !== 0) {
|
||
|
|
$(element)
|
||
|
|
.appendTo('#log')
|
||
|
|
.delay(hideAfter * 1000)
|
||
|
|
.queue(function () {
|
||
|
|
$(this).removeClass(animationIn).addClass(animationOut).delay(1000).queue(function () {
|
||
|
|
$(this).remove()
|
||
|
|
}).dequeue();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$(element)
|
||
|
|
.appendTo('#log');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (hideAfter !== 0) {
|
||
|
|
$(element)
|
||
|
|
.prependTo('#log')
|
||
|
|
.delay(hideAfter * 1000)
|
||
|
|
.queue(function () {
|
||
|
|
$(this).removeClass(animationIn).addClass(animationOut).delay(1000).queue(function () {
|
||
|
|
$(this).remove()
|
||
|
|
}).dequeue();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$(element)
|
||
|
|
.prependTo('#log');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (messagesLimit > 0 && totalMessages > messagesLimit) {
|
||
|
|
removeRow();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function attachEmotes(message) {
|
||
|
|
let text = html_encode(message.text);
|
||
|
|
let data = message.emotes;
|
||
|
|
if (typeof message.attachment !== "undefined") {
|
||
|
|
if (typeof message.attachment.media !== "undefined") {
|
||
|
|
if (typeof message.attachment.media.image !== "undefined") {
|
||
|
|
text = `${message.text}<img src="${message.attachment.media.image.src}">`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return text.replace(/([^\s]*)/gi, function (m, key) {
|
||
|
|
let result = data.filter((emote) => {
|
||
|
|
return emote.name === key;
|
||
|
|
});
|
||
|
|
if (typeof result[0] !== "undefined") {
|
||
|
|
let msgSize = messageSize + 5;
|
||
|
|
let url = result[0]["urls"][4];
|
||
|
|
if (provider === "twitch") {
|
||
|
|
return `<img width="${msgSize}" class="emote" src="${url}"/>`;
|
||
|
|
} else {
|
||
|
|
if (typeof result[0].coords === "undefined") {
|
||
|
|
result[0].coords = { x: 0, y: 0 };
|
||
|
|
}
|
||
|
|
let x = parseInt(result[0].coords.x);
|
||
|
|
let y = parseInt(result[0].coords.y);
|
||
|
|
|
||
|
|
let width = "auto";
|
||
|
|
let height = "auto";
|
||
|
|
|
||
|
|
if (provider === "mixer") {
|
||
|
|
console.log(result[0]);
|
||
|
|
if (result[0].coords.width) {
|
||
|
|
width = `${result[0].coords.width}px`;
|
||
|
|
}
|
||
|
|
if (result[0].coords.height) {
|
||
|
|
height = `${result[0].coords.height}px`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return `<div class="emote" style="width: ${width}; height:${height}; display: inline-block; background-image: url(${url}); background-position: -${x}px -${y}px;"></div>`;
|
||
|
|
}
|
||
|
|
} else return key;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function html_encode(e) {
|
||
|
|
return e.replace(/[<>"^]/g, function (e) {
|
||
|
|
return "&#" + e.charCodeAt(0) + ";";
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeRow() {
|
||
|
|
if (!$(removeSelector).length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (animationOut !== "none" || !$(removeSelector).hasClass(animationOut)) {
|
||
|
|
if (hideAfter !== 0) {
|
||
|
|
$(removeSelector).dequeue();
|
||
|
|
} else {
|
||
|
|
$(removeSelector).addClass(animationOut).delay(1000).queue(function () {
|
||
|
|
$(this).remove().dequeue()
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$(removeSelector).animate({
|
||
|
|
height: 0,
|
||
|
|
opacity: 0
|
||
|
|
}, 'slow', function () {
|
||
|
|
$(removeSelector).remove();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|