diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index 1b2d7a0..a709c34 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -69,6 +69,7 @@ const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true); const enableTikTokSupport = GetBooleanParam("enableTikTokSupport", false); const showTikTokFollows = GetBooleanParam("showTikTokFollows", false); +const showTikTokLikes = GetBooleanParam("showTikTokLikes", false); const showTikTokMessages = GetBooleanParam("showTikTokMessages", false); const showTikTokGifts = GetBooleanParam("showTikTokGifts", false); const showTikTokSubs = GetBooleanParam("showTikTokSubs", false); @@ -434,9 +435,15 @@ function TikfinityConnect() { case 'chat': TikTokChat(data); break; + + case 'like': + TikTokLikes(data); + break; + case 'follow': TikTokFollow(data); break; + case 'gift': TikTokGift(data); break; @@ -2636,6 +2643,91 @@ async function TikTokChat(data) { } } + +function TikTokFollow(data) { + if (!showTikTokFollows) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('tiktok'); + + const user = data.nickname; + const tiktokIcon = ``; + + //titleDiv.innerHTML = `${tiktokIcon} ${user} followed`; + titleDiv.innerHTML = `${user} followed`; + + AddMessageItem(instance, data.msgId, 'tiktok', data.userId); +} + + +/* +* +* Note to Nutty: +* TikFinity only exposes the Like Count in batches of 15 at a time. >:( +* So basically this code will get the latest element and adds the like count to it +* and re-render them, preventing the "flood" it would otherwise cause. +* +*/ + +function TikTokLikes(data) { + if (!showTikTokLikes) + return; + + + // Get the total number of likes + var likeCountTotal = parseInt(data.likeCount); + + // Search for Previous Likes from the Same User + const previousLikeContainer = document.querySelector(`li[data-user-id="${data.userId}"]`); + + // If found, fetches the previous likes, deletes the element + // and then creates a new count with a sum of the like count + if (previousLikeContainer) { + const likeCountElem = previousLikeContainer.querySelector('#tiktok-gift-repeat-count'); + if (likeCountElem) { + var likeCountPrev = parseInt(likeCountElem.textContent.replace('x', '')); + likeCountTotal = Math.floor(likeCountPrev + likeCountTotal); + previousLikeContainer.remove(); + } + } + + // Get a reference to the template + const template = document.getElementById('tiktok-gift-template'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const avatarImg = instance.querySelector('.tiktok-gift-avatar'); + const usernameSpan = instance.querySelector('#tiktok-gift-username'); + const giftNameSpan = instance.querySelector('#tiktok-gift-name'); + const stickerImg = instance.querySelector('.tiktok-gift-sticker'); + const repeatCountDiv = instance.querySelector('#tiktok-gift-repeat-count'); + + avatarImg.src = data.profilePictureUrl; + usernameSpan.innerText = data.nickname; + giftNameSpan.innerText = 'Likes'; + stickerImg.src = ''; + repeatCountDiv.innerText = `x${likeCountTotal}`; + + AddMessageItem(instance, data.msgId, 'tiktok', data.userId); +} + function TikTokGift(data) { if (!showTikTokGifts) return; @@ -2668,37 +2760,7 @@ function TikTokGift(data) { stickerImg.src = data.giftPictureUrl; // Set the sticker image URL repeatCountDiv.innerText = `x${data.repeatCount}`; // Set the number of gifts sent - AddMessageItem(instance, data.messageId); -} - - -function TikTokFollow(data) { - if (!showTikTokFollows) - return; - - // Get a reference to the template - const template = document.getElementById('cardTemplate'); - - // Create a new instance of the template - const instance = template.content.cloneNode(true); - - // Get divs - const cardDiv = instance.querySelector("#card"); - const headerDiv = instance.querySelector("#header"); - const avatarDiv = instance.querySelector("#avatar"); - const iconDiv = instance.querySelector("#icon"); - const titleDiv = instance.querySelector("#title"); - const contentDiv = instance.querySelector("#content"); - - // Set the card background colors - cardDiv.classList.add('tiktok'); - - const user = data.nickname; - const tiktokIcon = ``; - - titleDiv.innerHTML = `${user} followed`; - - AddMessageItem(instance, data.msgId); + AddMessageItem(instance, data.msgId, 'tiktok', data.userId); } @@ -2727,9 +2789,10 @@ function TikTokSubscribe(data) { const user = data.nickname; const tiktokIcon = ``; - titleDiv.innerHTML = `${tiktokIcon} ${user} subscribed on TikTok`; + //titleDiv.innerHTML = `${tiktokIcon} ${user} subscribed on TikTok`; + titleDiv.innerHTML = `${tiktokIcon} ${user} subscribed for ${data.subMonth} months`; - AddMessageItem(instance, data.msgId); + AddMessageItem(instance, data.msgId, 'tiktok', data.userId); } function YouTubeThumbnailPreview(data) { diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json index 3103e6b..d1383cc 100644 --- a/multichat-overlay/settings/settings.json +++ b/multichat-overlay/settings/settings.json @@ -402,6 +402,15 @@ "showIf": "enableTikTokSupport", "group": "Which TikTok messages do you want to see?" }, + { + "id": "showTikTokLikes", + "label": "Likes", + "description": "Self-updating Likes", + "type": "checkbox", + "defaultValue": true, + "showIf": "enableTikTokSupport", + "group": "Which TikTok messages do you want to see?" + }, { "id": "showTikTokGifts", "label": "Gifts",