diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index b73567c..b1c6c31 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -68,6 +68,8 @@ const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", tru 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); @@ -433,6 +435,15 @@ function TikfinityConnect() { case 'chat': TikTokChat(data); break; + + case 'like': + TikTokLikes(data); + break; + + case 'follow': + TikTokFollow(data); + break; + case 'gift': TikTokGift(data); break; @@ -2632,6 +2643,90 @@ 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`; + + 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; @@ -2664,9 +2759,11 @@ 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); + AddMessageItem(instance, data.msgId, 'tiktok', data.userId); } + + function TikTokSubscribe(data) { if (!showTikTokSubs) return; @@ -2691,9 +2788,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 8389a86..d1383cc 100644 --- a/multichat-overlay/settings/settings.json +++ b/multichat-overlay/settings/settings.json @@ -393,6 +393,24 @@ "showIf": "enableTikTokSupport", "group": "Which TikTok messages do you want to see?" }, + { + "id": "showTikTokFollows", + "label": "New Followers", + "description": "", + "type": "checkbox", + "defaultValue": true, + "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",